Describe the bug
When using nested tables, scrolling can become erratic.
Nested tables is described here in the Tabulator examples: https://www.tabulator.info/examples/6.x/#nested-tables
It involves writing code that adds a whole additional tabulator table within the row of the main table.
This works well as a feature, and is extremely useful, but when the nested tables get large (more than a few rows), scrolling becomes extremely erratic. With a small number of rows everything is fine, but add a few more and the scrolling can jump unexpectedly. And if the nested table is long enough, it can block scrolling entirely.
To demonstrate, I have copied the example from the Tabulator examples page directly into JSFiddle, but then added a bunch of extra data to one of the nested tables. I also set the table height. You will see that it becomes impossible to scroll the table past the nested data.
This has been an issue since at least Tabulator 6.3, and continues to be a problem in 6.5.2.
The issue occurs in both Chrome and Firefox, although in Firefox I was eventually able to scroll past the problematic nested table with some effort, while in Chrome I could not.
Tabulator Info
Version 6.5.2.
Working Example
JSFiddle: https://jsfiddle.net/4kn107h9/
To Reproduce
- Use the technique described in the Tabulator Nested Tables example to create a table with nested tables.
- Set the main table's height or minHeight attribute to restrict the table height.
- Add enough data into the nested tables that they would fill up most or all of the visible table height.
- Attempt to scroll the table using either mouse or keyboard.
Expected behavior
I would expect the scrolling to be smooth, as per normal.
Desktop (please complete the following information):
- OS: Windows 11.
- Browser: Tested in both Chrome (v149) and Firefox (v150)
Additional context
It's fairly clear that the problem stems from Tabulator's scrolling behaviour being unaware of the height of the rows being modified by the nested tables. I guess this would also occur with other content nested in the same way.
This makes sense, since the nested tables are separate objects and not managed by the parent Tabulator instance, which also probably makes the bug tricky to fix automatically. One would need to have a mechanism to tell the parent row that it's height is being modified. And if the nested table can have rows added or removed dynamically, then that notification would need to be passed back up to the parent row again each time the height changes.
Describe the bug
When using nested tables, scrolling can become erratic.
Nested tables is described here in the Tabulator examples: https://www.tabulator.info/examples/6.x/#nested-tables
It involves writing code that adds a whole additional tabulator table within the row of the main table.
This works well as a feature, and is extremely useful, but when the nested tables get large (more than a few rows), scrolling becomes extremely erratic. With a small number of rows everything is fine, but add a few more and the scrolling can jump unexpectedly. And if the nested table is long enough, it can block scrolling entirely.
To demonstrate, I have copied the example from the Tabulator examples page directly into JSFiddle, but then added a bunch of extra data to one of the nested tables. I also set the table height. You will see that it becomes impossible to scroll the table past the nested data.
This has been an issue since at least Tabulator 6.3, and continues to be a problem in 6.5.2.
The issue occurs in both Chrome and Firefox, although in Firefox I was eventually able to scroll past the problematic nested table with some effort, while in Chrome I could not.
Tabulator Info
Version 6.5.2.
Working Example
JSFiddle: https://jsfiddle.net/4kn107h9/
To Reproduce
Expected behavior
I would expect the scrolling to be smooth, as per normal.
Desktop (please complete the following information):
Additional context
It's fairly clear that the problem stems from Tabulator's scrolling behaviour being unaware of the height of the rows being modified by the nested tables. I guess this would also occur with other content nested in the same way.
This makes sense, since the nested tables are separate objects and not managed by the parent Tabulator instance, which also probably makes the bug tricky to fix automatically. One would need to have a mechanism to tell the parent row that it's height is being modified. And if the nested table can have rows added or removed dynamically, then that notification would need to be passed back up to the parent row again each time the height changes.