Tabulator selectable

by doublehrajput

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/5.1.2/css/tabulator.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/5.1.2/js/tabulator.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/5.1.2/css/tabulator_materialize.min.css" />

<style>
  .tabulator {
  	font-size: 28px;
  }

</style>

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

JavaScript

// @ts-nocheck

const initialData = [
  {
    Switch: "Switch_1",
    Node: "Node_1",
    Total: "Total_1",
    ABCD_A1_T: "ABCD_A1_T_1",
    ABCD_A1: "ABCD_A1_1",
    ABCD_A2_T: "ABCD_A2_T_1",
    ABCD_A2: "ABCD_A2_1",
  },
  {
    Switch: 2,
    Node: 2,
    Total: 2,
    ABCD_A1_T: 2,
    ABCD_A1: 2,
    ABCD_A2_T: 2,
    ABCD_A2: 2,
  },
  {
    Switch: 3,
    Node: 3,
    Total: 3,
    ABCD_A1_T: 3,
    ABCD_A1: 3,
    ABCD_A2_T: 3,
    ABCD_A2: 3,
  },
  {
    Switch: 4,
    Node: 4,
    Total: 4,
    ABCD_A1_T: 4,
    ABCD_A1: 4,
    ABCD_A2_T: 4,
    ABCD_A2: 4,
  },
];

const myFormatter = (cell) => {
  let Switch = cell.getData().Switch;

  if (table.getSelectedRows().includes(cell.getRow())) {
    // Provide Switch Condition Here
    if (cell.getField().substr(-2) === "_T") {
      return "";
    }
  }

  return cell.getValue();
};

var table = new Tabulator("#example-table", {
  data: initialData,
  autoColumns: true,
  selectable: true, //make rows selectable
  columnDefaults: {
    formatter: myFormatter,
  },
});

table.on("rowSelectionChanged", (values, rows) => {
  table.getRows().forEach((row) => {
    row.reformat();
  });
});