Setting Maximum Table Height With Tabulator

The Tabulator library seems to support two modes for setting the table's height: an explicit value (which forces a 'gray' area at the bottom if there are not enough rows in the dat

Solution 1:

There is nothing really documented about this. However I found that assigning a max-height to the .tabulator-tableHolder class gets the job done.

.tabulator-tableHolder {
  max-height: 100px !important;
}

Please note that this disables the virtual DOM, which will be a performance hit if you have many rows.

Solution 2:

As of version 4.6 you can now set a maximum height on the table using the maxHeight property in the table constructor object:

var table = new Tabulator("#example-table", {
    maxHeight:"100%", //do not let table get bigger than the height of its parent element
});

Doing it this way will also improve render efficiency as the table will engage the virtual DOM when it exceeds the height of its parent element, reducing the loading time of the page

Full details can be found in the Variable Height Tables Documentation