Tabulator

by KarmaProd

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/3.5.3/js/tabulator.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/3.5.3/css/tabulator.min.css">
<div id="example-table"></div>

JavaScript

$("#example-table").tabulator({
  layout: "fitDataFill",
  height: "311px",
  columns: [{
      title: "Name",
      field: "name"
    },
    {
      title: "Age",
      field: "age"
    },
    {
      title: "Gender",
      field: "gender"
    },
    {
      title: "Height",
      field: "height",
      align: "center"
    },
    {
      title: "Favourite Color",
      field: "col"
    },
    {
      title: "Testing Column",
      field: "test",
      formatter: "html"
    },
  ],
});

var tableData = [{
    id: 1,
    name: "Billy Bob",
    age: "12",
    gender: "male",
    height: 1,
    col: "red",
    test: "Text</br>here</br>Multi-line"
  },
  {
    id: 2,
    name: "Mary May",
    age: "1",
    gender: "female",
    height: 2,
    col: "blue"
  },
  {
    id: 1,
    name: "Billy Bob",
    age: "12",
    gender: "male",
    height: 1,
    col: "red"
  },
  {
    id: 2,
    name: "Mary May",
    age: "1",
    gender: "female",
    height: 2,
    col: "blue"
  },
  {
    id: 1,
    name: "Billy Bob",
    age: "12",
    gender: "male",
    height: 1,
    col: "red",
    test: "Text</br>here</br>Multi-line"
  },
  {
    id: 2,
    name: "Mary May",
    age: "1",
    gender: "female",
    height: 2,
    col: "blue"
  },
]

$("#example-table").tabulator("setData", tableData);

//Show column normalize height and redraw
$("#showColumn").on("click", function(evt) {
  $("#table").tabulator("showColumn", "test");
  var rows = $("#table").tabulator("getRows");
  for (var row in rows) {

    rows[row].normalizeHeight();
  }
  $("#table").tabulator("redraw");
});

//hide column normalize height and redraw
$("#hideColumn").on("click", function(evt) {
  $("#example-table").tabulator("hideColumn", "test");
  var rows = $("#table").tabulator("getRows");
  for (var row in rows) {
    rows[row].normalizeHeight();
  }
  $("#example-table").tabulator("redraw", true);
});

//Once clicked the calcheight function will have changed and the other two buttons will work as...