javascript - TAbulator addRow() causes uncontrolled scrolling with grouped rows - Stack Overflow

admin管理员组

文章数量:1134247

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.");
                }

}

本文标签： javascriptTAbulator addRow() causes uncontrolled scrolling with grouped rowsStack Overflow