JSFiddle - React, Tailwind, and code Playground

by dylanjnz

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.3.0/js/tabulator.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/tabulator-tables@4.3.0/dist/css/tabulator.min.css">
<div id="mytable"></div>

JavaScript

var tableData = [
	{"col1": "a", "_children": [
  	{"col1": "1"},
    {"col1": "2"},
    {"col1": "3"}]},
   {"col1": "b", "_children": [
  	{"col1": "1"},
    {"col1": "2"},
    {"col1": "3"}]
   },
   {"col1": "c", "_children": [
  	{"col1": "1"},
    {"col1": "2"},
    {"col1": "3"}]
   },
   {"col1": "d", "_children": [
  	{"col1": "1"},
    {"col1": "2"},
    {"col1": "3"}]
   }
];

var table = new Tabulator("#mytable", { 
	data: tableData,
  dataTree:true,
  columns: [
  	{ title: "Col 1", field: "col1", headerFilter:true}
  ]
  })