javascripttabulatorobservablehq

How to use Tabulator JavaScript library in observablehg?

I would like to use the Tabulator JavaScript library as part of an observablehq notebook, but for some reason I can't make it work. Below is an example. Works fine in browser, but I could not make it work in observablehq. Here is my naive attempt at observablehq. I also tried to load the css and JavaScript urls using require, but to no avail.

enter image description here

<html>
<script src="https://unpkg.com/tabulator-tables@5.3.0/dist/js/tabulator.min.js"></script>
<link href="https://unpkg.com/tabulator-tables@5.3.0/dist/css/tabulator.min.css" rel="stylesheet" />
<div id="table"></div>`
<script>
var tableData = [
    {name:"Bob"},
    {name:"Steve"},
    {name:"Jim"},
]
//Example Table
var table = new Tabulator("#table", {
    data:tableData, //load data into table
    height:200, //enable the virtual DOM
    columns:[
        {title:"Name", field:"name", width:200, editor:"input"},
    ]
});
</script>
</html>
Solution

  • Here's an example https://observablehq.com/@fil/hello-tabulator

    you can use, in different cells:

    Tabulator = require("tabulator-tables@5")

    to load the library

    @import url("https://unpkg.com/tabulator-tables@5/dist/css/tabulator.min.css")

    to load the css

    And, finally:

    viewof t = {
  const data = penguins;
  const table = new Tabulator(document.createElement("DIV"), {
    data,
    height: 400,
    layout: "fitColumns",
    autoColumns: true,
    autoColumnsDefinitions: (columns) =>
      columns.map((d) => ({ ...d, editor: true })),
    editor: true,
    pagination: "local"
  });

  table.element.value = data;

  table.on("dataChanged", (data) => {
    table.element.value = data;
    table.element.dispatchEvent(new CustomEvent("input"));
  });

  return table.element;
}