Setting maximum table height with Tabulator

Question

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 data set; and a vertical scrollbar if their are too many rows), or an automatic mode (the height is adjusted to fit the actual data, no scrollbar is created).

It is possible to use a maximum height, so that a vertical scrollbar appears if needed, but otherwise the height is adjusted to the content?

Answer 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.

Answer 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