Getting Tabulator to work in Framework

New To Observable
1

I’m trying to use Tabulator with Framework, but can’t get it working properly. I’ve looked at this example in Observable and this quickstart guide on the Tabulator website.

Based on the quickstart guide I tried the following code (shown at the bottom) but the table doesn’t appear as it should:

image
image386×645 12 KB

Any advice to fix this would be appreciated!

import { Tabulator } from "npm:tabulator-tables";

<div id="example-table"></div>

 var tabledata = [
 	{id:1, name:"Oli Bob", age:"12", col:"red", dob:""},
 	{id:2, name:"Mary May", age:"1", col:"blue", dob:"14/05/1982"},
 	{id:3, name:"Christine Lobowski", age:"42", col:"green", dob:"22/05/1982"},
 	{id:4, name:"Brendon Philips", age:"125", col:"orange", dob:"01/08/1980"},
 	{id:5, name:"Margret Marmajuke", age:"16", col:"yellow", dob:"31/01/1999"},
 ];

 //create Tabulator on DOM element with id "example-table"
var table = new Tabulator("#example-table", {
 	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"},
 	],
});

//trigger an alert message when the row is clicked
table.on("rowClick", function(e, row){ 
	alert("Row " + row.getData().id + " Clicked!!!!");
});
2

Looks like you are missing the stylesheet. Described on the Tabulator site you referenced…
You could add it in your own stylesheet (see documentation) or load it dynamically in your markdown file with
<link href="https://unpkg.com/tabulator-tables/dist/css/tabulator.min.css" rel="stylesheet">

I didn’t try it myself, but let us know if that works. If you have further questions, please open a discussion on GitHub — we’re trying to centralize the support there to create a more effective knowledge base for Framework questions.

3

That worked, thank you so much! If I have any more questions I’ll post them on Github :slight_smile:

1 Like
4

I’d recommend self-hosting the CSS like so:

<link rel="stylesheet" href="npm:tabulator-tables/dist/css/tabulator.min.css">

Full example:
https://observablehq.observablehq.cloud/pangea/party/tabulator

1 Like