JSFiddle - React, Tailwind, and code Playground

by dota2pro

HTML

<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/tabulator-tables@4.2.4/dist/css/tabulator.min.css">
<script src="https://unpkg.com/tabulator-tables@4.2.4/dist/js/tabulator.min.js"></script>
<!DOCTYPE html>
<html lang="en">

  <body>
    <div id="example-table"></div>
  </body>

</html>

JavaScript

const tableDataNested = [{
    name: "Oli Bob",
    location: "United Kingdom",
    gender: "male",
    col: "red",
    dob: "14/04/1984",
    _children: [{
        name: "Mary May",
        location: "Germany",
        gender: "female",
        col: "blue",
        dob: "14/05/1982"
      },
      {
        name: "Christine Lobowski",
        location: "France",
        gender: "male",
        col: "green",
        dob: "22/05/1982"
      },
      {
        name: "Brendon Philips",
        location: "USA",
        gender: "male",
        col: "orange",
        dob: "01/08/1980",
        _children: [{
            name: "Margret Marmajuke",
            location: "Canada",
            gender: "female",
            col: "yellow",
            dob: "31/01/1999"
          },
          {
            name: "Frank Harbours",
            location: "Russia",
            gender: "male",
            col: "red",
            dob: "12/05/1966"
          },
        ]
      },
    ]
  },
  {
    name: "Jamie Newhart",
    location: "India",
    gender: "male",
    col: "green",
    dob: "14/05/1985"
  },
  {
    name: "Gemma Jane",
    location: "China",
    gender: "female",
    col: "red",
    dob: "22/05/1982",
    _children: [{
      name: "Emily Sykes",
      location: "South Korea",
      gender: "female",
      col: "maroon",
      dob: "11/11/1970"
    }, ]
  },
  {
    name: "James Newman",
    location: "Japan",
    gender: "male",
    col: "red",
    dob: "22/03/1998"
  },
];



const table = new Tabulator("#example-table", {
  height: "311px",
  data: tableDataNested,
  dataTree: true,
  dataTreeStartExpanded: true,
  columns: [{
      title: "Name",
      field: "name",
      width: 200,
      responsive: 0
    }, //never hide this column
    {
      title: "Location",
      field: "location",
      width: 150
    },
    {
      title: "Gender",
      field: "gender",
      width: 150,
      responsive: 2
    }, //hide this column first
    {
      title: "Favourite...