diff --git a/src/js/core/rendering/renderers/BasicVertical.js b/src/js/core/rendering/renderers/BasicVertical.js index 8af834d28..c195f9533 100644 --- a/src/js/core/rendering/renderers/BasicVertical.js +++ b/src/js/core/rendering/renderers/BasicVertical.js @@ -16,10 +16,10 @@ export default class BasicVertical extends Renderer{ clearRows(){ var element = this.tableElement; - - // element.children.detach(); - while(element.firstChild) element.removeChild(element.firstChild); - + + //single native clear instead of N removeChild calls + element.replaceChildren(); + element.scrollTop = 0; element.scrollLeft = 0; diff --git a/src/js/core/rendering/renderers/VirtualDomVertical.js b/src/js/core/rendering/renderers/VirtualDomVertical.js index 361044c1d..d4ec04360 100644 --- a/src/js/core/rendering/renderers/VirtualDomVertical.js +++ b/src/js/core/rendering/renderers/VirtualDomVertical.js @@ -39,8 +39,8 @@ export default class VirtualDomVertical extends Renderer{ clearRows(){ var element = this.tableElement; - // element.children.detach(); - while(element.firstChild) element.removeChild(element.firstChild); + //single native clear instead of N removeChild calls + element.replaceChildren(); element.style.paddingTop = ""; element.style.paddingBottom = ""; @@ -251,7 +251,7 @@ export default class VirtualDomVertical extends Renderer{ if(!position){ this.clear(); }else { - while(element.firstChild) element.removeChild(element.firstChild); + element.replaceChildren(); //check if position is too close to bottom of table heightOccupied = (rowsCount - position + 1) * this.vDomRowHeight; diff --git a/test/unit/core/VirtualDomVertical.clearRows.spec.js b/test/unit/core/VirtualDomVertical.clearRows.spec.js new file mode 100644 index 000000000..0d6049a69 --- /dev/null +++ b/test/unit/core/VirtualDomVertical.clearRows.spec.js @@ -0,0 +1,38 @@ +import TabulatorFull from "../../../src/js/core/TabulatorFull"; + +// Guards that the replaceChildren() clear (replacing the removeChild loop) still +// empties the render area. +describe("VirtualDomVertical clearRows", () => { + let el; + + beforeEach(() => { + el = document.createElement("div"); + document.body.appendChild(el); + }); + + afterEach(() => { + el.remove(); + }); + + test("clearRows removes all rendered row elements", async () => { + const table = await new Promise((resolve) => { + const t = new TabulatorFull(el, { + height: "200px", + data: Array.from({ length: 50 }, (_, i) => ({ id: i, a: "row " + i })), + columns: [{ title: "A", field: "a" }], + }); + t.on("tableBuilt", () => resolve(t)); + }); + + // jsdom does not lay out the virtual renderer, so seed the render area + // directly to prove clearRows empties it. + const tableElement = table.rowManager.tableElement; + tableElement.appendChild(document.createElement("div")); + tableElement.appendChild(document.createElement("div")); + expect(tableElement.children.length).toBe(2); + + table.rowManager.renderer.clearRows(); + + expect(tableElement.children.length).toBe(0); + }); +});