Create and configure two data tables

by fxi

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>
<div id='table2'>
</div>

JavaScript

//define data array
  var tabledata = [
    {
      id: 1,
      name: "Oli Bob",
      progress: 12,
      gender: "male",
      rating: 1,
      col: "red",
      dob: "19/02/1984",
      car: 1,
    },
    {
      id: 2,
      name: "Mary May",
      progress: 1,
      gender: "female",
      rating: 2,
      col: "blue",
      dob: "14/05/1982",
      car: true,
    },
    {
      id: 3,
      name: "Christine Lobowski",
      progress: 42,
      gender: "female",
      rating: 0,
      col: "green",
      dob: "22/05/1982",
      car: "true",
    },
    {
      id: 4,
      name: "Brendon Philips",
      progress: 100,
      gender: "male",
      rating: 1,
      col: "orange",
      dob: "01/08/1980",
    },
    {
      id: 5,
      name: "Margret Marmajuke",
      progress: 16,
      gender: "female",
      rating: 5,
      col: "yellow",
      dob: "31/01/1999",
    },
    {
      id: 6,
      name: "Frank Harbours",
      progress: 38,
      gender: "male",
      rating: 4,
      col: "red",
      dob: "12/05/1966",
      car: 1,
    },
  ];

  //initialize table
  var table = new Tabulator('#table', {
    data: tabledata, //assign data to table
    autoColumns: true, //create columns from data field names
    selectableRows: true,
    selectableRowsRangeMode: "click",
    rowHeader: {
      headerSort: false,
      resizable: false,
      frozen: true,
      headerHozAlign: "center",
      hozAlign: "center",
      formatter: "rowSelection",
      titleFormatter: "rowSelection",
    },
  });
    var table2 = new Tabulator('#table2', {
    data: tabledata, //assign data to table
    autoColumns: true, //create columns from data field names
    rowHeader: {
      headerSort: false,
      resizable: false,
      frozen: true,
      headerHozAlign: "center",
      hozAlign: "center",
      formatter: "rowSelection",
      titleFormatter: "rowSelection",
    },
  });