@oscarpalmer/tabela 0.2.0 → 0.4.0

package/dist/components/body.component.cjs

@@ -4,23 +4,55 @@ 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 managers_virtualization_manager = require("../managers/virtualization.manager.cjs");
 const components_row_component = require("./row.component.cjs");
+function createFaker() {
+  const element = document.createElement("div");
+  element.style.height = "0";
+  element.style.inset = "0 auto auto 0";
+  element.style.opacity = "0";
+  element.style.pointerEvents = "none";
+  element.style.position = "absolute";
+  element.style.width = "1px";
+  return element;
+}
 class BodyComponent {
   constructor(tabela) {
-    __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);
-    this.group.className += " tabela__rowgroup-body";
-    this.addData(tabela.options.data);
+    const group = helpers_dom_helpers.createRowGroup(false);
+    this.elements.group = group;
+    this.virtualization = new managers_virtualization_manager.VirtualizationManager(this);
+    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);
+    });
   }
-  addData(data) {
+  async addData(data) {
     const { length } = data;
     for (let index = 0; index < length; index += 1) {
-      const row = new components_row_component.RowComponent(this.tabela, data[index]);
-      this.rows.push(row);
-      this.group.append(row.element);
+      this.rows.push(new components_row_component.RowComponent(this.tabela, data[index]));
     }
+    this.updateVirtualization();
+  }
+  destroy() {
+    this.virtualization.destroy();
+    this.elements.faker = void 0;
+    this.elements.group = void 0;
+    this.rows.length = 0;
+  }
+  updateVirtualization() {
+    this.elements.faker.style.height = `${this.rows.length * 32}px`;
+    this.virtualization.update(true);
   }
 }
 exports.BodyComponent = BodyComponent;

package/dist/components/body.component.js

@@ -2,23 +2,55 @@ 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 { createRowGroup } from "../helpers/dom.helpers.js";
+import { VirtualizationManager } from "../managers/virtualization.manager.js";
 import { RowComponent } from "./row.component.js";
+function createFaker() {
+  const element = document.createElement("div");
+  element.style.height = "0";
+  element.style.inset = "0 auto auto 0";
+  element.style.opacity = "0";
+  element.style.pointerEvents = "none";
+  element.style.position = "absolute";
+  element.style.width = "1px";
+  return element;
+}
 class BodyComponent {
   constructor(tabela) {
-    __publicField(this, "group");
+    __publicField(this, "elements", {
+      faker: createFaker(),
+      group: void 0
+    });
     __publicField(this, "rows", []);
+    __publicField(this, "virtualization");
     this.tabela = tabela;
-    this.group = createRowGroup(false);
-    this.group.className += " tabela__rowgroup-body";
-    this.addData(tabela.options.data);
+    const group = createRowGroup(false);
+    this.elements.group = group;
+    this.virtualization = new VirtualizationManager(this);
+    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);
+    });
   }
-  addData(data) {
+  async addData(data) {
     const { length } = data;
     for (let index = 0; index < length; index += 1) {
-      const row = new RowComponent(this.tabela, data[index]);
-      this.rows.push(row);
-      this.group.append(row.element);
+      this.rows.push(new RowComponent(this.tabela, data[index]));
     }
+    this.updateVirtualization();
+  }
+  destroy() {
+    this.virtualization.destroy();
+    this.elements.faker = void 0;
+    this.elements.group = void 0;
+    this.rows.length = 0;
+  }
+  updateVirtualization() {
+    this.elements.faker.style.height = `${this.rows.length * 32}px`;
+    this.virtualization.update(true);
   }
 }
 export {

package/dist/components/column.component.cjs

@@ -16,7 +16,7 @@ class ColumnComponent {
     __publicField(this, "element");
     __publicField(this, "options");
     this.tabela = tabela;
-    const width = Number.parseInt(getComputedStyle(tabela.element).fontSize, 10) * (options.width ?? 4);
+    const width = Number.parseInt(getComputedStyle(tabela.element).fontSize, 10) * (options.width ?? options.title.length * 1.5);
     this.options = {
       ...options,
       width

package/dist/components/column.component.js

@@ -14,7 +14,7 @@ class ColumnComponent {
     __publicField(this, "element");
     __publicField(this, "options");
     this.tabela = tabela;
-    const width = Number.parseInt(getComputedStyle(tabela.element).fontSize, 10) * (options.width ?? 4);
+    const width = Number.parseInt(getComputedStyle(tabela.element).fontSize, 10) * (options.width ?? options.title.length * 1.5);
     this.options = {
       ...options,
       width

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,22 +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";
+  }
+  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,23 +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";
+  }
+  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

@@ -0,0 +1,88 @@
+"use strict";
+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);
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+function getRange(body, down) {
+  const { elements, rows } = body;
+  const { clientHeight, scrollTop } = elements.group;
+  const first = Math.floor(scrollTop / 32);
+  const last = Math.min(
+    rows.length - 1,
+    Math.ceil((scrollTop + clientHeight) / 32) - 1
+  );
+  const before = Math.ceil(clientHeight / 32) * (down ? 1 : 2);
+  const after = Math.ceil(clientHeight / 32) * (down ? 2 : 1);
+  const start = Math.max(0, first - before);
+  const end = Math.min(rows.length - 1, last + after);
+  return { end, start };
+}
+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.elements.group.addEventListener(
+      "scroll",
+      () => {
+        this.onScroll();
+      },
+      {
+        passive: true
+      }
+    );
+  }
+  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, pool, visible } = this;
+    const indices = /* @__PURE__ */ new Set();
+    const range = getRange(body, down);
+    for (let index = range.start; index <= range.end; index += 1) {
+      indices.add(index);
+    }
+    for (const [index, row] of visible) {
+      if (!indices.has(index)) {
+        visible.delete(index);
+        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.render(pool);
+        visible.set(index, row);
+        if (row.element != null) {
+          row.element.style.transform = `translateY(${index * 32}px)`;
+          fragment.append(row.element);
+        }
+      }
+      body.elements.group.append(fragment);
+    }
+  }
+  onScroll() {
+    if (!this.active) {
+      requestAnimationFrame(() => {
+        const top = this.body.elements.group.scrollTop;
+        this.update(top > this.top);
+        this.active = false;
+        this.top = top;
+      });
+      this.active = true;
+    }
+  }
+}
+exports.VirtualizationManager = VirtualizationManager;

package/dist/managers/virtualization.manager.js

@@ -0,0 +1,88 @@
+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 { elements, rows } = body;
+  const { clientHeight, scrollTop } = elements.group;
+  const first = Math.floor(scrollTop / 32);
+  const last = Math.min(
+    rows.length - 1,
+    Math.ceil((scrollTop + clientHeight) / 32) - 1
+  );
+  const before = Math.ceil(clientHeight / 32) * (down ? 1 : 2);
+  const after = Math.ceil(clientHeight / 32) * (down ? 2 : 1);
+  const start = Math.max(0, first - before);
+  const end = Math.min(rows.length - 1, last + after);
+  return { end, start };
+}
+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.elements.group.addEventListener(
+      "scroll",
+      () => {
+        this.onScroll();
+      },
+      {
+        passive: true
+      }
+    );
+  }
+  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, pool, visible } = this;
+    const indices = /* @__PURE__ */ new Set();
+    const range = getRange(body, down);
+    for (let index = range.start; index <= range.end; index += 1) {
+      indices.add(index);
+    }
+    for (const [index, row] of visible) {
+      if (!indices.has(index)) {
+        visible.delete(index);
+        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.render(pool);
+        visible.set(index, row);
+        if (row.element != null) {
+          row.element.style.transform = `translateY(${index * 32}px)`;
+          fragment.append(row.element);
+        }
+      }
+      body.elements.group.append(fragment);
+    }
+  }
+  onScroll() {
+    if (!this.active) {
+      requestAnimationFrame(() => {
+        const top = this.body.elements.group.scrollTop;
+        this.update(top > this.top);
+        this.active = false;
+        this.top = top;
+      });
+      this.active = true;
+    }
+  }
+}
+export {
+  VirtualizationManager
+};

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) {