-
Notifications
You must be signed in to change notification settings - Fork 873
Description
Is your feature request related to a problem? Please describe.
When using tables with a fixed height, the last visible row often gets cut off partially at the bottom. This happens because the table height doesn't align perfectly with the row height, resulting in incomplete rows being displayed. This creates visual inconsistency, especially in dashboards, embedded contexts, or when displaying multiple tables side-by-side.
Describe the solution you'd like
A scrollSnap configuration option that ensures only complete rows are visible. When enabled, the table would automatically adjust its internal viewport to hide any partial rows that don't fit completely within the set height, and snap scrolling to row boundaries. Something like:
var table = new Tabulator("#example-table", {
height: "400px", // My desired table height
scrollSnap: true, // Automatically hide partial rows and snap scroll
data: tabledata,
columns: [...]
});The table would calculate how many complete rows fit in the given height and adjust accordingly. When scrolling, rows should instantly pop in/out without smooth scroll animations - the scroll should jump directly from one row boundary to the next.
Describe alternatives you've considered
Currently the approach is manually calculating height = headerHeight + (rowHeight × visibleRows) but this requires knowing exact pixel values, breaks with different themes or custom styling, and doesn't handle dynamic row heights well. It's a rough idea that doesn't cover all use cases and I couldn't really get it to work 100%.
Additional context
SAP UI5's table component has this behavior where only complete rows are shown. You can see the SAP UI5 Basic Data Table demo here: https://sapui5.hana.ondemand.com/#/entity/sap.ui.table.Table/sample/sap.ui.table.sample.Basic
This would be useful for dashboards, data comparison views, or embedded tables where consistent layout is important.