perf(render): clear the render area with replaceChildren()

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;
 

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;

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);
+	});
+});