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?
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?
Share Improve this question edited Sep 5, 2020 at 16:55 Oli Folkerd 8,3981 gold badge26 silver badges58 bronze badges asked Jan 14, 2019 at 9:17 Alain FrischAlain Frisch 2494 silver badges7 bronze badges2 Answers
Reset to default 5There 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.
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