JSFiddle - React, Tailwind, and code Playground

by Shaun Hurley

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css">
<script src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script>
<div id="table"></div>

CSS

.tabulator{
    background-color:#f3f3ff;
}

JavaScript

//Sample Data
var tableData = [
    {name:"Bob"},
    {name:"Steve"},
    {name:"Jim"},
]

var list_values = {
	"Bob": "Bob",
	"Steve": "Steve",
	"Jim": "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:"list",
        editorParams: {
        values: list_values
        }
      }
    ]
});