JSFiddle - React, Tailwind, and code Playground

by Sree K

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>

JavaScript

function gendata( rowcount ) {
	var data = [];
  // make some random data
	for( var i = 0; i < rowcount; i++ ) {
  	data.push( {one: Math.random(), two:Math.random()} );
  }
  // add tree row to bottom
  var child = {one: Math.random(), two:Math.random()};
  data.push(
  	{one:'tree', two:'tree', _children:[child, child]}
  );
  return data;
}

new Tabulator( "#table", {
	dataTree: true,
  columns: [
  	{field:'one'},
    {field:'two'},
  ],
  data: gendata(50),
  dataTreeCollapseElement:"<span class='smerp__expand-btn tabulator-data-tree-branch'>-</span>",
				dataTreeExpandElement:"<span class='smerp__expand-btn tabulator-data-tree-branch'>+</span>",
});