JSFiddle - React, Tailwind, and code Playground

by ivos

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.9.3/css/tabulator.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.9.3/js/tabulator.min.js"></script>
<div id="tbl1">

</div>

<div><h1><hr/></h1></div>

<div id="tbl2">

</div>

JavaScript

const data = [
    {id:1, "istest": false},
    {id:2,"istest": false},
    {
        "istest": true
    },
];

const set1 = {
        layout: "fitColumns",
        data: data,
        placeholder: "Waiting for data",
        addRowPos: "bottom",
        pagination: "local",
        paginationSize: 10,
        paginationSizeSelector: true,
        tooltipsHeader: false,
        tooltipGenerationMode: "hover",
        tooltips: true,
        selectable:true,
				columns: [
            { title: "id", field: "id", },
            { title: "Is Test", field: "istest", hozAlign:"center", width:80, formatter:"tickCross", formatterParam:{crossElement:false,} },
        ],
};
const set2 = {
        layout: "fitColumns",
        data: data,
        placeholder: "Waiting for data",
        addRowPos: "bottom",
        pagination: "local",
        paginationSize: 10,
        paginationSizeSelector: true,
        tooltipsHeader: false,
        tooltipGenerationMode: "hover",
        tooltips: true,
        selectable:true,
				columns: [
            { title: "id", field: "id", },
            { title: "Is Test", field: "istest", hozAlign:"center", width:80, formatter:"tick",},
        ],
}

var t1 = new Tabulator('#tbl1', set1);
var t2 = new Tabulator('#tbl2', set2);