You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
141 lines
3.4 KiB
141 lines
3.4 KiB
package outwatchapp.components
|
|
|
|
import scala.annotation.unused
|
|
import scala.scalajs.js.annotation.JSExportAll
|
|
import scala.scalajs.js.annotation.JSImport
|
|
|
|
import colibri.ext.monix._
|
|
import monix.bio.Task
|
|
import monix.eval.Coeval
|
|
import monix.execution.Cancelable
|
|
import org.scalajs.dom.raw.HTMLElement
|
|
import outwatch.ManagedSubscriptions.managedElement
|
|
import typings.datatablesNet.DataTables.ColumnSettings
|
|
import typings.datatablesNet.DataTables.FunctionColumnRender
|
|
import typings.datatablesNet.DataTables.Settings
|
|
import typings.datatablesNet.datatablesNetRequire
|
|
import typings.jquery.JQuery_
|
|
import typings.jquery.{mod => $}
|
|
|
|
import scalajs.js
|
|
|
|
@js.native
|
|
@JSImport(
|
|
"datatables.net-bs4/css/dataTables.bootstrap4.min.css",
|
|
JSImport.Namespace
|
|
)
|
|
object DataTablesBs4Css extends js.Object
|
|
@js.native
|
|
@JSImport(
|
|
"datatables.net-bs4/js/dataTables.bootstrap4.min.js",
|
|
JSImport.Namespace
|
|
)
|
|
object DataTablesBs4Js extends js.Object
|
|
|
|
object DatatablesDemo {
|
|
implicit def isJQueryDT[T](x: JQuery_[T]): typings.datatablesNet.JQuery =
|
|
x.asInstanceOf[typings.datatablesNet.JQuery]
|
|
|
|
datatablesNetRequire
|
|
DataTablesBs4Css
|
|
DataTablesBs4Js
|
|
|
|
@unused
|
|
private def _test(tableElement: HTMLElement) = $(tableElement)
|
|
.DataTable(
|
|
Settings().setColumnsVarargs(
|
|
ColumnSettings().setData("name").setRender(nameRenderFn)
|
|
)
|
|
)
|
|
.destroy()
|
|
|
|
val nameRenderFn: FunctionColumnRender = (_data, tpe, row, d) => {
|
|
if (tpe.toString == "display") println("Matched")
|
|
else println("Did not match")
|
|
// this can be done with scalatags instead
|
|
s"""
|
|
<div>${_data.toString.toUpperCase}</div>
|
|
"""
|
|
// with scalatags
|
|
// import scalatags.Text.all._
|
|
// div(_data.toString.toUpperCase).render
|
|
}
|
|
|
|
@JSExportAll
|
|
case class TestData(
|
|
name: String,
|
|
position: String,
|
|
location: String,
|
|
id: String,
|
|
date: String,
|
|
salary: String
|
|
)
|
|
|
|
val dataset = js
|
|
.Array(
|
|
TestData(
|
|
"Tiger Nixon",
|
|
"System Architect",
|
|
"Edinburgh",
|
|
"5421",
|
|
"2011/04/25",
|
|
"$320,800"
|
|
),
|
|
TestData(
|
|
"Garrett Winters",
|
|
"Accountant",
|
|
"Tokyo",
|
|
"8422",
|
|
"2011/07/25",
|
|
"$170,750"
|
|
),
|
|
TestData(
|
|
"Ashton Cox",
|
|
"Junior Technical Author",
|
|
"San Francisco",
|
|
"1562",
|
|
"2009/01/12",
|
|
"$86,000"
|
|
),
|
|
TestData(
|
|
"Cedric Kelly",
|
|
"Senior Javascript Developer",
|
|
"Edinburgh",
|
|
"6224",
|
|
"2012/03/29",
|
|
"$433,060"
|
|
)
|
|
)
|
|
|
|
// $(document).ready(_ => $(tableElement).DataTable())
|
|
|
|
def apply() = {
|
|
import outwatch.dsl._
|
|
Coeval(
|
|
div(
|
|
table(idAttr := "myTable")(managedElement { el =>
|
|
val dt = $(el).DataTable(
|
|
Settings()
|
|
.setColumnsVarargs(
|
|
ColumnSettings()
|
|
.setTitle("Name")
|
|
.setData("name")
|
|
.setRender(nameRenderFn),
|
|
ColumnSettings().setData("position"),
|
|
ColumnSettings().setData("location"),
|
|
ColumnSettings().setData("id"),
|
|
ColumnSettings().setData("date"),
|
|
ColumnSettings().setData("salary")
|
|
)
|
|
.setDom("Blfrtip")
|
|
.setData(dataset)
|
|
)
|
|
Cancelable { () =>
|
|
println("Destroying")
|
|
dt.destroy()
|
|
}
|
|
})
|
|
)
|
|
).to[Task]
|
|
}
|
|
}
|