Again, to get me started with another library:
[Tabulator](http://tabulator.info/), I am trying:
* `tabulator.nim`:
import jsffi
when not defined(js):
{.error: "This module only works on the JavaScript platform".}
type
Tabulator* = ref object
proc tabulator*(element:string, options:JsObject): Tabulator {. importcpp:
"new Tabulator(@)" .}
proc setData*(this:Tabulator, a:openArray[JsObject]):JsObject
{.importcpp:"#.setData(@)", discardable.}
Run
* `table.nim`: (karax app)
include karax / prelude, tables, jsffi, json, tabulator
var tabledata = @[
js{ id:1, name:"Oli Bob", age:"12", col:"red", dob:"" },
js{ id:2, name:"Mary May", age:"1", col:"blue", dob:"14/05/1982" },
js{ id:3, name:"Christine Lobowski", age:"42", col:"green",
dob:"22/05/1982" },
js{ id:4, name:"Brendon Philips", age:"125", col:"orange",
dob:"01/08/1980" },
js{ id:5, name:"Margret Marmajuke", age:"16", col:"yellow",
dob:"31/01/1999" },
]
var tmp = parseJson(
"""
{
height:205, // set height of table (in CSS or here), this enables the
Virtual DOM and improves render speed dramatically (can be any valid css height
value)
data:tabledata, //assign data to table
layout:"fitColumns", //fit columns to width of table (optional)
columns:[ //Define Table Columns
{title:"Name", field:"name", width:150},
{title:"Age", field:"age", hozAlign:"left", formatter:"progress"},
{title:"Favourite Color", field:"col"},
{title:"Date Of Birth", field:"dob", sorter:"date", hozAlign:"center"},
],
rowClick:function(e, row){ //trigger an alert message when the row is
clicked
alert("Row " + row.getData().id + " Clicked!!!!");
},
}
"""
)
proc createDom(): VNode =
result = buildHtml(tdiv):
h1(text "Hello Karax", class="title")
var table = tabulator("#example-table", tmp.toJs)
table.setData(tabledata)
setRenderer createDom
Run
I am not sure anout how should I wrap `setData`. In principle, it should be
easy, but I get the error:
Error: type mismatch: got <VNode, JsObject>
but expected one of:
proc add(parent, kid: VNode)
first type mismatch at position: 2
required type for kid: VNode
but expression 'setData(table, tabledata)' is of type: JsObject
19 other mismatching symbols have been suppressed; compile with
--showAllMismatches:on to see them
expression: add(tmp_369114261, setData(table, tabledata))
Run
That `VNode` seems related with Karax.
