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({
	groupBy:"gender",
  layout: "fitDataFill",
  height: "311px",
  columns: [{
      title: "Gender",
      field: "gender"
    },
  		{
      title: "Name",
      field: "name",
      columns: [{
      	title: "Name1",
        field: "test_name1"
      },
      {
      	title: "Name2",
        field: "test_name2"
      }]
    },
    {
      title: "Age",
      field: "age"
    },
    
    {
      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",
    test_name1: "Billy",
    test_name2: "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) {
   ...