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?

Zambrano

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.

Dennett

Thanks! It works, but not specifying an explicit height seems to disable the vdom (and specifying the height disable the max-height). – Zambrano

That sets maximum height but doesn't give scrollbar with many more rows below. – Leoraleos

Using this approach, If we have 500 rows then overflowing rows will be hidden. And don't try to set overflow: scroll because you'll lose virtualDOM advantage & everything will be rendered at once which will make the browser very slow. This question remains unanswered. – Leoraleos

Scrolling works out of the box, see jsfiddle.net/a3vk0u6h . If it doesnt work for you, it's due to some custom CSS of yours. And yes, this approach disables the virtualDOM. I've added a note about this to my answer. Using dynamic table height plus virtualDOM isn't possible at this point in time. But if you have a good use case you might want to head over to Tabulator's Github and request it as a feature. – Dennett

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

Incommensurable

Thanks, this works nicely! The documentation suggests that setting the CSS property should have the same effect (also enabling the virtual DOM?). Perhaps worth clarifying the doc (if there is a difference between the explicit setting and the CSS property) or your answer above ("Doing it this way"). Also in the doc, it's not 100% clear that the "Slow rendering" disclaimer doesn't apply when maxHeight is specified. – Zambrano

By setting only the max height, it renders in classic mode until it reaches the max height and then engages the vDOM when the height is exceeded – Incommensurable