@oscarpalmer/tabela 0.3.0 → 0.4.0

package/dist/components/body.component.cjs

@@ -18,18 +18,21 @@ function createFaker() {
 }
 class BodyComponent {
   constructor(tabela) {
-    __publicField(this, "faker", createFaker());
-    __publicField(this, "group");
+    __publicField(this, "elements", {
+      faker: createFaker(),
+      group: void 0
+    });
     __publicField(this, "rows", []);
     __publicField(this, "virtualization");
     this.tabela = tabela;
-    this.group = helpers_dom_helpers.createRowGroup(false);
+    const group = helpers_dom_helpers.createRowGroup(false);
+    this.elements.group = group;
     this.virtualization = new managers_virtualization_manager.VirtualizationManager(this);
-    this.group.className += " tabela__rowgroup-body";
-    this.group.style.height = "100%";
-    this.group.style.overflow = "auto";
-    this.group.style.position = "relative";
-    this.group.append(this.faker);
+    group.className += " tabela__rowgroup-body";
+    group.style.height = "100%";
+    group.style.overflow = "auto";
+    group.style.position = "relative";
+    group.append(this.elements.faker);
     void this.addData(tabela.options.data).then(() => {
       this.virtualization.update(true);
     });
@@ -41,8 +44,14 @@ class BodyComponent {
     }
     this.updateVirtualization();
   }
+  destroy() {
+    this.virtualization.destroy();
+    this.elements.faker = void 0;
+    this.elements.group = void 0;
+    this.rows.length = 0;
+  }
   updateVirtualization() {
-    this.faker.style.height = `${this.rows.length * 32}px`;
+    this.elements.faker.style.height = `${this.rows.length * 32}px`;
     this.virtualization.update(true);
   }
 }

package/dist/components/body.component.js

@@ -16,18 +16,21 @@ function createFaker() {
 }
 class BodyComponent {
   constructor(tabela) {
-    __publicField(this, "faker", createFaker());
-    __publicField(this, "group");
+    __publicField(this, "elements", {
+      faker: createFaker(),
+      group: void 0
+    });
     __publicField(this, "rows", []);
     __publicField(this, "virtualization");
     this.tabela = tabela;
-    this.group = createRowGroup(false);
+    const group = createRowGroup(false);
+    this.elements.group = group;
     this.virtualization = new VirtualizationManager(this);
-    this.group.className += " tabela__rowgroup-body";
-    this.group.style.height = "100%";
-    this.group.style.overflow = "auto";
-    this.group.style.position = "relative";
-    this.group.append(this.faker);
+    group.className += " tabela__rowgroup-body";
+    group.style.height = "100%";
+    group.style.overflow = "auto";
+    group.style.position = "relative";
+    group.append(this.elements.faker);
     void this.addData(tabela.options.data).then(() => {
       this.virtualization.update(true);
     });
@@ -39,8 +42,14 @@ class BodyComponent {
     }
     this.updateVirtualization();
   }
+  destroy() {
+    this.virtualization.destroy();
+    this.elements.faker = void 0;
+    this.elements.group = void 0;
+    this.rows.length = 0;
+  }
   updateVirtualization() {
-    this.faker.style.height = `${this.rows.length * 32}px`;
+    this.elements.faker.style.height = `${this.rows.length * 32}px`;
     this.virtualization.update(true);
   }
 }

package/dist/components/footer.component.cjs

@@ -6,24 +6,30 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const helpers_dom_helpers = require("../helpers/dom.helpers.cjs");
 class FooterComponent {
   constructor(tabela) {
-    __publicField(this, "cells", []);
-    __publicField(this, "group");
-    __publicField(this, "row");
+    __publicField(this, "elements");
     this.tabela = tabela;
     const { group, row } = helpers_dom_helpers.createRowGroup();
-    this.group = group;
-    this.row = row;
-    this.group.className += " tabela__rowgroup-footer";
-    this.row.className += " tabela__row-footer";
+    this.elements = {
+      group,
+      row,
+      cells: []
+    };
+    group.className += " tabela__rowgroup-footer";
+    row.className += " tabela__row-footer";
     const { columns } = tabela.header;
     const { length } = columns;
     for (let index = 0; index < length; index += 1) {
-      const cell = helpers_dom_helpers.createCell(columns[index].options.width ?? 4);
+      const cell = helpers_dom_helpers.createCell(columns[index].options.width ?? 4, false);
       cell.className += " tabela__cell-footer";
       cell.innerHTML = "&nbsp;";
-      this.cells.push(cell);
+      this.elements.cells.push(cell);
       row.append(cell);
     }
   }
+  destroy() {
+    this.elements.cells = [];
+    this.elements.group = void 0;
+    this.elements.row = void 0;
+  }
 }
 exports.FooterComponent = FooterComponent;

package/dist/components/footer.component.js

@@ -4,25 +4,31 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
 import { createRowGroup, createCell } from "../helpers/dom.helpers.js";
 class FooterComponent {
   constructor(tabela) {
-    __publicField(this, "cells", []);
-    __publicField(this, "group");
-    __publicField(this, "row");
+    __publicField(this, "elements");
     this.tabela = tabela;
     const { group, row } = createRowGroup();
-    this.group = group;
-    this.row = row;
-    this.group.className += " tabela__rowgroup-footer";
-    this.row.className += " tabela__row-footer";
+    this.elements = {
+      group,
+      row,
+      cells: []
+    };
+    group.className += " tabela__rowgroup-footer";
+    row.className += " tabela__row-footer";
     const { columns } = tabela.header;
     const { length } = columns;
     for (let index = 0; index < length; index += 1) {
-      const cell = createCell(columns[index].options.width ?? 4);
+      const cell = createCell(columns[index].options.width ?? 4, false);
       cell.className += " tabela__cell-footer";
       cell.innerHTML = "&nbsp;";
-      this.cells.push(cell);
+      this.elements.cells.push(cell);
       row.append(cell);
     }
   }
+  destroy() {
+    this.elements.cells = [];
+    this.elements.group = void 0;
+    this.elements.row = void 0;
+  }
 }
 export {
   FooterComponent

package/dist/components/header.component.cjs

@@ -8,18 +8,21 @@ const components_column_component = require("./column.component.cjs");
 class HeaderComponent {
   constructor(tabela) {
     __publicField(this, "columns");
-    __publicField(this, "group");
-    __publicField(this, "row");
+    __publicField(this, "elements");
     this.tabela = tabela;
     this.columns = tabela.options.columns.map(
       (column) => new components_column_component.ColumnComponent(tabela, column)
     );
     const { group, row } = helpers_dom_helpers.createRowGroup();
-    this.group = group;
-    this.row = row;
-    this.group.className += " tabela__rowgroup-header";
-    this.row.className += " tabela__row-header";
+    this.elements = { group, row };
+    group.className += " tabela__rowgroup-header";
+    row.className += " tabela__row-header";
     row.append(...this.columns.map((column) => column.element));
   }
+  destroy() {
+    this.columns.length = 0;
+    this.elements.group = void 0;
+    this.elements.row = void 0;
+  }
 }
 exports.HeaderComponent = HeaderComponent;

package/dist/components/header.component.js

@@ -6,19 +6,22 @@ import { ColumnComponent } from "./column.component.js";
 class HeaderComponent {
   constructor(tabela) {
     __publicField(this, "columns");
-    __publicField(this, "group");
-    __publicField(this, "row");
+    __publicField(this, "elements");
     this.tabela = tabela;
     this.columns = tabela.options.columns.map(
       (column) => new ColumnComponent(tabela, column)
     );
     const { group, row } = createRowGroup();
-    this.group = group;
-    this.row = row;
-    this.group.className += " tabela__rowgroup-header";
-    this.row.className += " tabela__row-header";
+    this.elements = { group, row };
+    group.className += " tabela__rowgroup-header";
+    row.className += " tabela__row-header";
     row.append(...this.columns.map((column) => column.element));
   }
+  destroy() {
+    this.columns.length = 0;
+    this.elements.group = void 0;
+    this.elements.row = void 0;
+  }
 }
 export {
   HeaderComponent

package/dist/components/row.component.cjs

@@ -4,28 +4,34 @@ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { en
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const helpers_dom_helpers = require("../helpers/dom.helpers.cjs");
-const components_cell_component = require("./cell.component.cjs");
 class RowComponent {
   constructor(tabela, data) {
-    __publicField(this, "cells", []);
     __publicField(this, "element");
     this.tabela = tabela;
     this.data = data;
-    this.element = helpers_dom_helpers.createRow();
-    this.element.className += " tabela__row-body";
   }
-  render() {
-    if (this.element.innerHTML !== "") {
-      return;
+  remove(pool) {
+    if (this.element != null) {
+      this.element.innerHTML = "";
+      pool.rows.push(this.element);
+      this.element.remove();
+      this.element = void 0;
     }
+  }
+  render(pool) {
+    var _a, _b;
+    const element = this.element ?? pool.rows.shift() ?? helpers_dom_helpers.createRow();
+    this.element = element;
+    element.innerHTML = "";
     const { tabela } = this;
     const { columns } = tabela.header;
     const { length } = columns;
     for (let index = 0; index < length; index += 1) {
-      const cell = new components_cell_component.CellComponent(tabela, columns[index], this);
-      cell.element.className += " tabela__cell-body";
-      this.cells.push(cell);
-      this.element.append(cell.element);
+      const { options } = columns[index];
+      (_a = pool.cells)[_b = options.field] ?? (_a[_b] = []);
+      const cell = pool.cells[columns[index].options.field].shift() ?? helpers_dom_helpers.createCell(options.width);
+      cell.textContent = String(this.data[options.field]);
+      element.append(cell);
     }
   }
 }

package/dist/components/row.component.js

@@ -1,29 +1,35 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import { createRow } from "../helpers/dom.helpers.js";
-import { CellComponent } from "./cell.component.js";
+import { createRow, createCell } from "../helpers/dom.helpers.js";
 class RowComponent {
   constructor(tabela, data) {
-    __publicField(this, "cells", []);
     __publicField(this, "element");
     this.tabela = tabela;
     this.data = data;
-    this.element = createRow();
-    this.element.className += " tabela__row-body";
   }
-  render() {
-    if (this.element.innerHTML !== "") {
-      return;
+  remove(pool) {
+    if (this.element != null) {
+      this.element.innerHTML = "";
+      pool.rows.push(this.element);
+      this.element.remove();
+      this.element = void 0;
     }
+  }
+  render(pool) {
+    var _a, _b;
+    const element = this.element ?? pool.rows.shift() ?? createRow();
+    this.element = element;
+    element.innerHTML = "";
     const { tabela } = this;
     const { columns } = tabela.header;
     const { length } = columns;
     for (let index = 0; index < length; index += 1) {
-      const cell = new CellComponent(tabela, columns[index], this);
-      cell.element.className += " tabela__cell-body";
-      this.cells.push(cell);
-      this.element.append(cell.element);
+      const { options } = columns[index];
+      (_a = pool.cells)[_b = options.field] ?? (_a[_b] = []);
+      const cell = pool.cells[columns[index].options.field].shift() ?? createCell(options.width);
+      cell.textContent = String(this.data[options.field]);
+      element.append(cell);
     }
   }
 }

package/dist/helpers/dom.helpers.cjs

@@ -1,10 +1,13 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-function createCell(width) {
+function createCell(width, body) {
   const cell = document.createElement("div");
   cell.className = "tabela__cell";
   cell.role = "cell";
   cell.style.width = `${width}px`;
+  if (body ?? true) {
+    cell.classList.add("tabela__cell-body");
+  }
   return cell;
 }
 function createRowGroup(withRow) {
@@ -14,14 +17,18 @@ function createRowGroup(withRow) {
   if (!(withRow ?? true)) {
     return group;
   }
-  const row = createRow();
+  const row = createRow(false);
   group.append(row);
   return { group, row };
 }
-function createRow() {
+function createRow(withStyle) {
   const row = document.createElement("div");
   row.className = "tabela__row";
   row.role = "row";
+  if (withStyle ?? true) {
+    row.style.inset = "0 auto auto 0";
+    row.style.position = "absolute";
+  }
   return row;
 }
 exports.createCell = createCell;

package/dist/helpers/dom.helpers.js

@@ -1,8 +1,11 @@
-function createCell(width) {
+function createCell(width, body) {
   const cell = document.createElement("div");
   cell.className = "tabela__cell";
   cell.role = "cell";
   cell.style.width = `${width}px`;
+  if (body ?? true) {
+    cell.classList.add("tabela__cell-body");
+  }
   return cell;
 }
 function createRowGroup(withRow) {
@@ -12,14 +15,18 @@ function createRowGroup(withRow) {
   if (!(withRow ?? true)) {
     return group;
   }
-  const row = createRow();
+  const row = createRow(false);
   group.append(row);
   return { group, row };
 }
-function createRow() {
+function createRow(withStyle) {
   const row = document.createElement("div");
   row.className = "tabela__row";
   row.role = "row";
+  if (withStyle ?? true) {
+    row.style.inset = "0 auto auto 0";
+    row.style.position = "absolute";
+  }
   return row;
 }
 export {

package/dist/managers/virtualization.manager.cjs

@@ -4,8 +4,8 @@ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { en
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 function getRange(body, down) {
-  const { group, rows } = body;
-  const { clientHeight, scrollTop } = group;
+  const { elements, rows } = body;
+  const { clientHeight, scrollTop } = elements.group;
   const first = Math.floor(scrollTop / 32);
   const last = Math.min(
     rows.length - 1,
@@ -20,10 +20,14 @@ function getRange(body, down) {
 class VirtualizationManager {
   constructor(body) {
     __publicField(this, "active", false);
+    __publicField(this, "pool", {
+      cells: {},
+      rows: []
+    });
     __publicField(this, "top", 0);
     __publicField(this, "visible", /* @__PURE__ */ new Map());
     this.body = body;
-    this.body.group.addEventListener(
+    this.body.elements.group.addEventListener(
       "scroll",
       () => {
         this.onScroll();
@@ -33,8 +37,17 @@ class VirtualizationManager {
       }
     );
   }
+  destroy() {
+    const { visible, pool } = this;
+    for (const [index, row] of visible) {
+      row.remove(pool);
+      visible.delete(index);
+    }
+    pool.cells = {};
+    pool.rows = [];
+  }
   update(down) {
-    const { body, visible } = this;
+    const { body, pool, visible } = this;
     const indices = /* @__PURE__ */ new Set();
     const range = getRange(body, down);
     for (let index = range.start; index <= range.end; index += 1) {
@@ -43,27 +56,27 @@ class VirtualizationManager {
     for (const [index, row] of visible) {
       if (!indices.has(index)) {
         visible.delete(index);
-        row.element.remove();
+        row.remove(pool);
       }
     }
     const fragment = document.createDocumentFragment();
     for (let index = range.start; index <= range.end; index += 1) {
       if (!visible.has(index)) {
         const row = body.rows[index];
-        row.element.style.inset = "0 auto auto 0";
-        row.element.style.position = "absolute";
-        row.element.style.transform = `translateY(${index * 32}px)`;
-        row.render();
+        row.render(pool);
         visible.set(index, row);
-        fragment.append(row.element);
+        if (row.element != null) {
+          row.element.style.transform = `translateY(${index * 32}px)`;
+          fragment.append(row.element);
+        }
       }
-      body.group.append(fragment);
+      body.elements.group.append(fragment);
     }
   }
   onScroll() {
     if (!this.active) {
       requestAnimationFrame(() => {
-        const top = this.body.group.scrollTop;
+        const top = this.body.elements.group.scrollTop;
         this.update(top > this.top);
         this.active = false;
         this.top = top;

package/dist/managers/virtualization.manager.js

@@ -2,8 +2,8 @@ var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 function getRange(body, down) {
-  const { group, rows } = body;
-  const { clientHeight, scrollTop } = group;
+  const { elements, rows } = body;
+  const { clientHeight, scrollTop } = elements.group;
   const first = Math.floor(scrollTop / 32);
   const last = Math.min(
     rows.length - 1,
@@ -18,10 +18,14 @@ function getRange(body, down) {
 class VirtualizationManager {
   constructor(body) {
     __publicField(this, "active", false);
+    __publicField(this, "pool", {
+      cells: {},
+      rows: []
+    });
     __publicField(this, "top", 0);
     __publicField(this, "visible", /* @__PURE__ */ new Map());
     this.body = body;
-    this.body.group.addEventListener(
+    this.body.elements.group.addEventListener(
       "scroll",
       () => {
         this.onScroll();
@@ -31,8 +35,17 @@ class VirtualizationManager {
       }
     );
   }
+  destroy() {
+    const { visible, pool } = this;
+    for (const [index, row] of visible) {
+      row.remove(pool);
+      visible.delete(index);
+    }
+    pool.cells = {};
+    pool.rows = [];
+  }
   update(down) {
-    const { body, visible } = this;
+    const { body, pool, visible } = this;
     const indices = /* @__PURE__ */ new Set();
     const range = getRange(body, down);
     for (let index = range.start; index <= range.end; index += 1) {
@@ -41,27 +54,27 @@ class VirtualizationManager {
     for (const [index, row] of visible) {
       if (!indices.has(index)) {
         visible.delete(index);
-        row.element.remove();
+        row.remove(pool);
       }
     }
     const fragment = document.createDocumentFragment();
     for (let index = range.start; index <= range.end; index += 1) {
       if (!visible.has(index)) {
         const row = body.rows[index];
-        row.element.style.inset = "0 auto auto 0";
-        row.element.style.position = "absolute";
-        row.element.style.transform = `translateY(${index * 32}px)`;
-        row.render();
+        row.render(pool);
         visible.set(index, row);
-        fragment.append(row.element);
+        if (row.element != null) {
+          row.element.style.transform = `translateY(${index * 32}px)`;
+          fragment.append(row.element);
+        }
       }
-      body.group.append(fragment);
+      body.elements.group.append(fragment);
     }
   }
   onScroll() {
     if (!this.active) {
       requestAnimationFrame(() => {
-        const top = this.body.group.scrollTop;
+        const top = this.body.elements.group.scrollTop;
         this.update(top > this.top);
         this.active = false;
         this.top = top;

package/dist/tabela.cjs

@@ -13,13 +13,31 @@ class Tabela {
     __publicField(this, "header");
     this.element = element;
     this.options = options;
+    element.innerHTML = "";
     element.role = "table";
     element.classList.add("tabela");
     element.setAttribute("aria-label", options.label);
     this.header = new components_header_component.HeaderComponent(this);
     this.body = new components_body_component.BodyComponent(this);
     this.footer = new components_footer_component.FooterComponent(this);
-    element.append(this.header.group, this.body.group, this.footer.group);
+    element.append(
+      this.header.elements.group,
+      this.body.elements.group,
+      this.footer.elements.group
+    );
+  }
+  destroy() {
+    this.body.destroy();
+    this.footer.destroy();
+    this.header.destroy();
+    this.options.columns = [];
+    this.options.data = [];
+    this.element.innerHTML = "";
+    this.element.role = "";
+    this.element.classList.remove("tabela");
+    this.element.removeAttribute("aria-label");
+    this.element.removeAttribute("role");
+    this.element = void 0;
   }
 }
 function tabela(element, options) {

package/dist/tabela.js

@@ -11,13 +11,31 @@ class Tabela {
     __publicField(this, "header");
     this.element = element;
     this.options = options;
+    element.innerHTML = "";
     element.role = "table";
     element.classList.add("tabela");
     element.setAttribute("aria-label", options.label);
     this.header = new HeaderComponent(this);
     this.body = new BodyComponent(this);
     this.footer = new FooterComponent(this);
-    element.append(this.header.group, this.body.group, this.footer.group);
+    element.append(
+      this.header.elements.group,
+      this.body.elements.group,
+      this.footer.elements.group
+    );
+  }
+  destroy() {
+    this.body.destroy();
+    this.footer.destroy();
+    this.header.destroy();
+    this.options.columns = [];
+    this.options.data = [];
+    this.element.innerHTML = "";
+    this.element.role = "";
+    this.element.classList.remove("tabela");
+    this.element.removeAttribute("aria-label");
+    this.element.removeAttribute("role");
+    this.element = void 0;
   }
 }
 function tabela(element, options) {

package/package.json

@@ -6,16 +6,16 @@
 	"description": "A modern table.",
 	"devDependencies": {
 		"@biomejs/biome": "^1.9",
-		"@oscarpalmer/atoms": "^0.89",
-		"@oscarpalmer/oui": "^0.8",
-		"@types/node": "^22.13",
-		"@vitest/coverage-istanbul": "^3",
+		"@oscarpalmer/atoms": "^0.95",
+		"@oscarpalmer/oui": "^0.9",
+		"@types/node": "^22.14",
+		"@vitest/coverage-istanbul": "^3.1",
 		"dts-bundle-generator": "^9.5",
 		"glob": "^11",
 		"happy-dom": "^17.4",
 		"typescript": "^5.8",
-		"vite": "^6.2",
-		"vitest": "^3"
+		"vite": "^6.3",
+		"vitest": "^3.1"
 	},
 	"exports": {
 		".": {
@@ -48,5 +48,5 @@
 	},
 	"type": "module",
 	"types": "./types/index.d.cts",
-	"version": "0.3.0"
+	"version": "0.4.0"
 }