JSFiddle - React, Tailwind, and code Playground

by baumrock

HTML

<link rel="stylesheet" href="https://unpkg.com/tabulator-tables@4.9.3/dist/css/tabulator.min.css">
<script src="https://unpkg.com/tabulator-tables@4.9.3/dist/js/tabulator.min.js"></script>
<div id="example-table"></div>

JavaScript

//define some sample data
var tabledata = [
 	{desc:'foo item', net:100, vat:20, gross:120, amount:2},
 	{desc:'bar item', net:100, vat:20, gross:120, amount:1},
];

var table = new Tabulator("#example-table", {
 	data:tabledata, //assign data to table
 	layout:"fitColumns", //fit columns to width of table (optional)
 	autoColumns:true,
  movableRows:true,
  autoColumnsDefinitions:function(definitions){
    //definitions - array of column definition objects

    definitions.forEach((col) => {
      col.headerFilter = true;
      if(col.field != 'desc') col.width = 100;
    });

    return definitions;
  },
});