I have created a table with Tabulator that has several hundreds of rows grouped by a certain column.
I changed the height property from 100% to pixels to enable virtual DOM that affected the performance by making the grid very responsive.
The thing is that when I add a row to a group, the contents scroll uncontrollably.
the only solution that I came up with that somehow “works” is this that just brings the newly added row to the center of the table.
Tabulator version 6.3.0 on the latest Chrome
Any ideas?
{
// Calculate and set precise scroll position
const tableHolder = table.element.querySelector(“.tabulator-tableholder”); // Get the scroll container
const addedRowElement = addedRow.getElement(); // Get the DOM element of the added row
if (tableHolder && addedRowElement) {
const rowPosition = addedRowElement.offsetTop; // Distance of the row from the top of the table
const holderHeight = tableHolder.offsetHeight; // Visible height of the table holder
// Center the row in the viewport
tableHolder.scrollTop = rowPosition - holderHeight / 2 + addedRowElement.offsetHeight / 2;
console.log("Scroll position adjusted for new row:", tableHolder.scrollTop);
} else {
console.error("Failed to adjust scroll position. Table holder or row element not found.");
}
}