Menu
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?
208
To set the row height to a specific measurement, click a cell in the row that you want to resize. On the Layout tab, in the Cell Size group, click in the Table Row Height box, and then specify the height you want. To use the ruler, select a cell in the table, and then drag the markers on the ruler.
In order to do this you need to ensure the table has a height set, either on the CSS for the containing element, or on the height option in the table constructor. If you do not set a height, the virtual DOM will be disabled and Tabulator will attempt to render all of the rows onto the table at once.
You can add a row to the table using the addRow function. The first argument should be a row data object. If you do not pass data for a column, it will be left empty. To create a blank row (ie for a user to fill in), pass an empty object to the function.
The value should be set to a number greater than 0, by default columns with a width set have a widthShrink value of 0, meaning they will not be shrunk if the table gets too narrow, and may cause the horizontal scrollbar to appear.
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.
191
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
39
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
