Tabulator

by nethzor

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>
  <p>
    Click Buttons in order :)
    After the Hide/ShowColumnFix button is pressed the other 2 buttons will work as well
  </p>
</div>
<button id="hideColumn">
Hide Column
</button>
<button id="showColumn">
Show Column
</button>

<button id="hideColumnFix">
Hide ColumnFix
</button>

<button id="showColumnFix">
Show ColumnFix
</button>

<div id="table">



</div>

JavaScript

$("#table").tabulator({
	autoResize:false,
  layout: "fitDataFill",
  height: "311px",
  columns: [{
      title: "Name",
      field: "name",
      resizable: false
    },
    {
      title: "Age",
      field: "age",
      resizable: false
    },
    {
      title: "Gender",
      field: "gender",
      resizable: false
    },
    {
      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"
  },
]

$("#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) {
  $("#table").tabulator("hideColumn", "test");
  var rows = $("#table").tabulator("getRows");
  for (var row in rows) {
    rows[row].normalizeHeight();
  }
  $("#table").tabulator("redraw", true);
});

//Once clicked the calcheight function will have...