@oscarpalmer/tabela 0.2.0 → 0.3.0

package/dist/components/body.component.cjs

@@ -4,23 +4,46 @@ 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, "faker", createFaker());
     __publicField(this, "group");
     __publicField(this, "rows", []);
+    __publicField(this, "virtualization");
     this.tabela = tabela;
     this.group = helpers_dom_helpers.createRowGroup(false);
+    this.virtualization = new managers_virtualization_manager.VirtualizationManager(this);
     this.group.className += " tabela__rowgroup-body";
-    this.addData(tabela.options.data);
+    this.group.style.height = "100%";
+    this.group.style.overflow = "auto";
+    this.group.style.position = "relative";
+    this.group.append(this.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();
+  }
+  updateVirtualization() {
+    this.faker.style.height = `${this.rows.length * 32}px`;
+    this.virtualization.update(true);
   }
 }
 exports.BodyComponent = BodyComponent;

package/dist/components/body.component.js

@@ -2,23 +2,46 @@ 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, "faker", createFaker());
     __publicField(this, "group");
     __publicField(this, "rows", []);
+    __publicField(this, "virtualization");
     this.tabela = tabela;
     this.group = createRowGroup(false);
+    this.virtualization = new VirtualizationManager(this);
     this.group.className += " tabela__rowgroup-body";
-    this.addData(tabela.options.data);
+    this.group.style.height = "100%";
+    this.group.style.overflow = "auto";
+    this.group.style.position = "relative";
+    this.group.append(this.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();
+  }
+  updateVirtualization() {
+    this.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/row.component.cjs

@@ -13,6 +13,12 @@ class RowComponent {
     this.data = data;
     this.element = helpers_dom_helpers.createRow();
     this.element.className += " tabela__row-body";
+  }
+  render() {
+    if (this.element.innerHTML !== "") {
+      return;
+    }
+    const { tabela } = this;
     const { columns } = tabela.header;
     const { length } = columns;
     for (let index = 0; index < length; index += 1) {

package/dist/components/row.component.js

@@ -11,6 +11,12 @@ class RowComponent {
     this.data = data;
     this.element = createRow();
     this.element.className += " tabela__row-body";
+  }
+  render() {
+    if (this.element.innerHTML !== "") {
+      return;
+    }
+    const { tabela } = this;
     const { columns } = tabela.header;
     const { length } = columns;
     for (let index = 0; index < length; index += 1) {

package/dist/managers/virtualization.manager.cjs

@@ -0,0 +1,75 @@
+"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 { group, rows } = body;
+  const { clientHeight, scrollTop } = 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, "top", 0);
+    __publicField(this, "visible", /* @__PURE__ */ new Map());
+    this.body = body;
+    this.body.group.addEventListener(
+      "scroll",
+      () => {
+        this.onScroll();
+      },
+      {
+        passive: true
+      }
+    );
+  }
+  update(down) {
+    const { body, 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.element.remove();
+      }
+    }
+    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();
+        visible.set(index, row);
+        fragment.append(row.element);
+      }
+      body.group.append(fragment);
+    }
+  }
+  onScroll() {
+    if (!this.active) {
+      requestAnimationFrame(() => {
+        const top = this.body.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,75 @@
+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 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, "top", 0);
+    __publicField(this, "visible", /* @__PURE__ */ new Map());
+    this.body = body;
+    this.body.group.addEventListener(
+      "scroll",
+      () => {
+        this.onScroll();
+      },
+      {
+        passive: true
+      }
+    );
+  }
+  update(down) {
+    const { body, 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.element.remove();
+      }
+    }
+    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();
+        visible.set(index, row);
+        fragment.append(row.element);
+      }
+      body.group.append(fragment);
+    }
+  }
+  onScroll() {
+    if (!this.active) {
+      requestAnimationFrame(() => {
+        const top = this.body.group.scrollTop;
+        this.update(top > this.top);
+        this.active = false;
+        this.top = top;
+      });
+      this.active = true;
+    }
+  }
+}
+export {
+  VirtualizationManager
+};

package/package.json

@@ -48,5 +48,5 @@
 	},
 	"type": "module",
 	"types": "./types/index.d.cts",
-	"version": "0.2.0"
+	"version": "0.3.0"
 }

package/src/components/body.component.ts

@@ -1,28 +1,60 @@
 import type {PlainObject} from '@oscarpalmer/atoms/models';
 import {createRowGroup} from '../helpers/dom.helpers';
+import {VirtualizationManager} from '../managers/virtualization.manager';
 import type {Tabela} from '../tabela';
 import {RowComponent} from './row.component';
 
+function createFaker(): HTMLDivElement {
+	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;
+}
+
 export class BodyComponent {
+	readonly faker = createFaker();
 	readonly group: HTMLDivElement;
 	readonly rows: RowComponent[] = [];
+	readonly virtualization: VirtualizationManager;
 
 	constructor(readonly tabela: Tabela) {
 		this.group = createRowGroup(false);
+		this.virtualization = new VirtualizationManager(this);
 
 		this.group.className += ' tabela__rowgroup-body';
 
-		this.addData(tabela.options.data);
+		this.group.style.height = '100%';
+		this.group.style.overflow = 'auto';
+		this.group.style.position = 'relative';
+
+		this.group.append(this.faker);
+
+		void this.addData(tabela.options.data).then(() => {
+			this.virtualization.update(true);
+		});
 	}
 
-	addData(data: PlainObject[]): void {
+	async addData(data: PlainObject[]): Promise<void> {
 		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();
+	}
+
+	private updateVirtualization(): void {
+		this.faker.style.height = `${this.rows.length * 32}px`;
+
+		this.virtualization.update(true);
 	}
 }
+
+

package/src/components/column.component.ts

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

package/src/components/row.component.ts

@@ -4,27 +4,34 @@ import type {Tabela} from '../tabela';
 import {CellComponent} from './cell.component';
 
 export class RowComponent {
-	readonly cells: CellComponent[] = [];
-	readonly element: HTMLDivElement;
+		readonly cells: CellComponent[] = [];
+		readonly element: HTMLDivElement;
 
-	constructor(
-		readonly tabela: Tabela,
-		readonly data: PlainObject,
-	) {
-		this.element = createRow();
+		constructor(
+			readonly tabela: Tabela,
+			readonly data: PlainObject,
+		) {
+			this.element = createRow();
 
-		this.element.className += ' tabela__row-body';
+			this.element.className += ' tabela__row-body';
+		}
+
+		render(): void {
+			if (this.element.innerHTML !== '') {
+				return;
+			}
 
-		const {columns} = tabela.header;
-		const {length} = columns;
+			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);
+			for (let index = 0; index < length; index += 1) {
+				const cell = new CellComponent(tabela, columns[index], this);
 
-			cell.element.className += ' tabela__cell-body';
+				cell.element.className += ' tabela__cell-body';
 
-			this.cells.push(cell);
-			this.element.append(cell.element);
+				this.cells.push(cell);
+				this.element.append(cell.element);
+			}
 		}
 	}
-}

package/src/managers/virtualization.manager.ts

@@ -0,0 +1,98 @@
+import type {BodyComponent} from '../components/body.component';
+import type {RowComponent} from '../components/row.component';
+
+type Range = {
+	end: number;
+	start: number;
+};
+
+function getRange(body: BodyComponent, down: boolean): Range {
+	const {group, rows} = body;
+	const {clientHeight, scrollTop} = 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};
+}
+
+export class VirtualizationManager {
+	private active = false;
+	private top = 0;
+	private readonly visible = new Map<number, RowComponent>();
+
+	constructor(private readonly body: BodyComponent) {
+		this.body.group.addEventListener(
+			'scroll',
+			() => {
+				this.onScroll();
+			},
+			{
+				passive: true,
+			},
+		);
+	}
+
+	update(down: boolean): void {
+		const {body, visible} = this;
+
+		const indices = new Set<number>();
+		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.element.remove();
+			}
+		}
+
+		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();
+
+				visible.set(index, row);
+
+				fragment.append(row.element);
+			}
+
+			body.group.append(fragment);
+		}
+	}
+
+	private onScroll(): void {
+		if (!this.active) {
+			requestAnimationFrame(() => {
+				const top = this.body.group.scrollTop;
+
+				this.update(top > this.top);
+
+				this.active = false;
+				this.top = top;
+			});
+
+			this.active = true;
+		}
+	}
+}

package/types/components/body.component.d.cts

@@ -2,6 +2,15 @@
 
 import { PlainObject } from '@oscarpalmer/atoms/models';
 
+declare class VirtualizationManager {
+	private readonly body;
+	private active;
+	private top;
+	private readonly visible;
+	constructor(body: BodyComponent);
+	update(down: boolean): void;
+	private onScroll;
+}
 export type TabelaColumn = {
 	field: string;
 	title: string;
@@ -34,13 +43,17 @@ declare class RowComponent {
 	readonly cells: CellComponent[];
 	readonly element: HTMLDivElement;
 	constructor(tabela: Tabela, data: PlainObject);
+	render(): void;
 }
 export declare class BodyComponent {
 	readonly tabela: Tabela;
+	readonly faker: HTMLDivElement;
 	readonly group: HTMLDivElement;
 	readonly rows: RowComponent[];
+	readonly virtualization: VirtualizationManager;
 	constructor(tabela: Tabela);
-	addData(data: PlainObject[]): void;
+	addData(data: PlainObject[]): Promise<void>;
+	private updateVirtualization;
 }
 declare class FooterComponent {
 	readonly tabela: Tabela;

package/types/components/body.component.d.ts

@@ -1,10 +1,14 @@
 import type { PlainObject } from '@oscarpalmer/atoms/models';
+import { VirtualizationManager } from '../managers/virtualization.manager';
 import type { Tabela } from '../tabela';
 import { RowComponent } from './row.component';
 export declare class BodyComponent {
     readonly tabela: Tabela;
+    readonly faker: HTMLDivElement;
     readonly group: HTMLDivElement;
     readonly rows: RowComponent[];
+    readonly virtualization: VirtualizationManager;
     constructor(tabela: Tabela);
-    addData(data: PlainObject[]): void;
+    addData(data: PlainObject[]): Promise<void>;
+    private updateVirtualization;
 }

package/types/components/cell.component.d.cts

@@ -2,6 +2,15 @@
 
 import { PlainObject } from '@oscarpalmer/atoms/models';
 
+declare class VirtualizationManager {
+	private readonly body;
+	private active;
+	private top;
+	private readonly visible;
+	constructor(body: BodyComponent);
+	update(down: boolean): void;
+	private onScroll;
+}
 export type TabelaColumn = {
 	field: string;
 	title: string;
@@ -34,13 +43,17 @@ declare class RowComponent {
 	readonly cells: CellComponent[];
 	readonly element: HTMLDivElement;
 	constructor(tabela: Tabela, data: PlainObject);
+	render(): void;
 }
 declare class BodyComponent {
 	readonly tabela: Tabela;
+	readonly faker: HTMLDivElement;
 	readonly group: HTMLDivElement;
 	readonly rows: RowComponent[];
+	readonly virtualization: VirtualizationManager;
 	constructor(tabela: Tabela);
-	addData(data: PlainObject[]): void;
+	addData(data: PlainObject[]): Promise<void>;
+	private updateVirtualization;
 }
 declare class FooterComponent {
 	readonly tabela: Tabela;

package/types/components/column.component.d.cts

@@ -2,6 +2,15 @@
 
 import { PlainObject } from '@oscarpalmer/atoms/models';
 
+declare class VirtualizationManager {
+	private readonly body;
+	private active;
+	private top;
+	private readonly visible;
+	constructor(body: BodyComponent);
+	update(down: boolean): void;
+	private onScroll;
+}
 export type TabelaColumn = {
 	field: string;
 	title: string;
@@ -34,13 +43,17 @@ declare class RowComponent {
 	readonly cells: CellComponent[];
 	readonly element: HTMLDivElement;
 	constructor(tabela: Tabela, data: PlainObject);
+	render(): void;
 }
 declare class BodyComponent {
 	readonly tabela: Tabela;
+	readonly faker: HTMLDivElement;
 	readonly group: HTMLDivElement;
 	readonly rows: RowComponent[];
+	readonly virtualization: VirtualizationManager;
 	constructor(tabela: Tabela);
-	addData(data: PlainObject[]): void;
+	addData(data: PlainObject[]): Promise<void>;
+	private updateVirtualization;
 }
 declare class FooterComponent {
 	readonly tabela: Tabela;

package/types/components/footer.component.d.cts

@@ -2,6 +2,15 @@
 
 import { PlainObject } from '@oscarpalmer/atoms/models';
 
+declare class VirtualizationManager {
+	private readonly body;
+	private active;
+	private top;
+	private readonly visible;
+	constructor(body: BodyComponent);
+	update(down: boolean): void;
+	private onScroll;
+}
 export type TabelaColumn = {
 	field: string;
 	title: string;
@@ -34,13 +43,17 @@ declare class RowComponent {
 	readonly cells: CellComponent[];
 	readonly element: HTMLDivElement;
 	constructor(tabela: Tabela, data: PlainObject);
+	render(): void;
 }
 declare class BodyComponent {
 	readonly tabela: Tabela;
+	readonly faker: HTMLDivElement;
 	readonly group: HTMLDivElement;
 	readonly rows: RowComponent[];
+	readonly virtualization: VirtualizationManager;
 	constructor(tabela: Tabela);
-	addData(data: PlainObject[]): void;
+	addData(data: PlainObject[]): Promise<void>;
+	private updateVirtualization;
 }
 export declare class FooterComponent {
 	readonly tabela: Tabela;

package/types/components/header.component.d.cts

@@ -2,6 +2,15 @@
 
 import { PlainObject } from '@oscarpalmer/atoms/models';
 
+declare class VirtualizationManager {
+	private readonly body;
+	private active;
+	private top;
+	private readonly visible;
+	constructor(body: BodyComponent);
+	update(down: boolean): void;
+	private onScroll;
+}
 export type TabelaColumn = {
 	field: string;
 	title: string;
@@ -34,13 +43,17 @@ declare class RowComponent {
 	readonly cells: CellComponent[];
 	readonly element: HTMLDivElement;
 	constructor(tabela: Tabela, data: PlainObject);
+	render(): void;
 }
 declare class BodyComponent {
 	readonly tabela: Tabela;
+	readonly faker: HTMLDivElement;
 	readonly group: HTMLDivElement;
 	readonly rows: RowComponent[];
+	readonly virtualization: VirtualizationManager;
 	constructor(tabela: Tabela);
-	addData(data: PlainObject[]): void;
+	addData(data: PlainObject[]): Promise<void>;
+	private updateVirtualization;
 }
 declare class FooterComponent {
 	readonly tabela: Tabela;

package/types/components/row.component.d.cts

@@ -2,6 +2,15 @@
 
 import { PlainObject } from '@oscarpalmer/atoms/models';
 
+declare class VirtualizationManager {
+	private readonly body;
+	private active;
+	private top;
+	private readonly visible;
+	constructor(body: BodyComponent);
+	update(down: boolean): void;
+	private onScroll;
+}
 export type TabelaColumn = {
 	field: string;
 	title: string;
@@ -34,13 +43,17 @@ export declare class RowComponent {
 	readonly cells: CellComponent[];
 	readonly element: HTMLDivElement;
 	constructor(tabela: Tabela, data: PlainObject);
+	render(): void;
 }
 declare class BodyComponent {
 	readonly tabela: Tabela;
+	readonly faker: HTMLDivElement;
 	readonly group: HTMLDivElement;
 	readonly rows: RowComponent[];
+	readonly virtualization: VirtualizationManager;
 	constructor(tabela: Tabela);
-	addData(data: PlainObject[]): void;
+	addData(data: PlainObject[]): Promise<void>;
+	private updateVirtualization;
 }
 declare class FooterComponent {
 	readonly tabela: Tabela;

package/types/components/row.component.d.ts

@@ -7,4 +7,5 @@ export declare class RowComponent {
     readonly cells: CellComponent[];
     readonly element: HTMLDivElement;
     constructor(tabela: Tabela, data: PlainObject);
+    render(): void;
 }

package/types/index.d.cts

@@ -2,6 +2,15 @@
 
 import { PlainObject } from '@oscarpalmer/atoms/models';
 
+declare class VirtualizationManager {
+	private readonly body;
+	private active;
+	private top;
+	private readonly visible;
+	constructor(body: BodyComponent);
+	update(down: boolean): void;
+	private onScroll;
+}
 export type TabelaColumn = {
 	field: string;
 	title: string;
@@ -34,13 +43,17 @@ declare class RowComponent {
 	readonly cells: CellComponent[];
 	readonly element: HTMLDivElement;
 	constructor(tabela: Tabela, data: PlainObject);
+	render(): void;
 }
 declare class BodyComponent {
 	readonly tabela: Tabela;
+	readonly faker: HTMLDivElement;
 	readonly group: HTMLDivElement;
 	readonly rows: RowComponent[];
+	readonly virtualization: VirtualizationManager;
 	constructor(tabela: Tabela);
-	addData(data: PlainObject[]): void;
+	addData(data: PlainObject[]): Promise<void>;
+	private updateVirtualization;
 }
 declare class FooterComponent {
 	readonly tabela: Tabela;

package/types/managers/virtualization.manager.d.cts

@@ -0,0 +1,86 @@
+// Generated by dts-bundle-generator v9.5.1
+
+import { PlainObject } from '@oscarpalmer/atoms/models';
+
+export declare class VirtualizationManager {
+	private readonly body;
+	private active;
+	private top;
+	private readonly visible;
+	constructor(body: BodyComponent);
+	update(down: boolean): void;
+	private onScroll;
+}
+export type TabelaColumn = {
+	field: string;
+	title: string;
+	type: TabelaColumnType;
+	width: number;
+};
+export type TabelaColumnOptions = {
+	field: string;
+	title: string;
+	type: TabelaColumnType;
+	width?: number;
+};
+export type TabelaColumnType = "boolean" | "date" | "date-time" | "number" | "string" | "time";
+declare class ColumnComponent {
+	readonly tabela: Tabela;
+	readonly element: HTMLDivElement;
+	readonly options: TabelaColumn;
+	constructor(tabela: Tabela, options: TabelaColumnOptions);
+}
+declare class CellComponent {
+	readonly tabela: Tabela;
+	readonly column: ColumnComponent;
+	readonly row: RowComponent;
+	readonly element: HTMLDivElement;
+	constructor(tabela: Tabela, column: ColumnComponent, row: RowComponent);
+}
+declare class RowComponent {
+	readonly tabela: Tabela;
+	readonly data: PlainObject;
+	readonly cells: CellComponent[];
+	readonly element: HTMLDivElement;
+	constructor(tabela: Tabela, data: PlainObject);
+	render(): void;
+}
+declare class BodyComponent {
+	readonly tabela: Tabela;
+	readonly faker: HTMLDivElement;
+	readonly group: HTMLDivElement;
+	readonly rows: RowComponent[];
+	readonly virtualization: VirtualizationManager;
+	constructor(tabela: Tabela);
+	addData(data: PlainObject[]): Promise<void>;
+	private updateVirtualization;
+}
+declare class FooterComponent {
+	readonly tabela: Tabela;
+	readonly cells: HTMLDivElement[];
+	readonly group: HTMLDivElement;
+	readonly row: HTMLDivElement;
+	constructor(tabela: Tabela);
+}
+declare class HeaderComponent {
+	readonly tabela: Tabela;
+	readonly columns: ColumnComponent[];
+	readonly group: HTMLDivElement;
+	readonly row: HTMLDivElement;
+	constructor(tabela: Tabela);
+}
+export type TabelaOptions = {
+	columns: TabelaColumnOptions[];
+	data: PlainObject[];
+	label: string;
+};
+declare class Tabela {
+	readonly element: HTMLElement;
+	readonly options: TabelaOptions;
+	readonly body: BodyComponent;
+	readonly footer: FooterComponent;
+	readonly header: HeaderComponent;
+	constructor(element: HTMLElement, options: TabelaOptions);
+}
+
+export {};

package/types/managers/virtualization.manager.d.ts

@@ -0,0 +1,10 @@
+import type { BodyComponent } from '../components/body.component';
+export declare class VirtualizationManager {
+    private readonly body;
+    private active;
+    private top;
+    private readonly visible;
+    constructor(body: BodyComponent);
+    update(down: boolean): void;
+    private onScroll;
+}

package/types/tabela.d.cts

@@ -2,6 +2,15 @@
 
 import { PlainObject } from '@oscarpalmer/atoms/models';
 
+declare class VirtualizationManager {
+	private readonly body;
+	private active;
+	private top;
+	private readonly visible;
+	constructor(body: BodyComponent);
+	update(down: boolean): void;
+	private onScroll;
+}
 export type TabelaColumn = {
 	field: string;
 	title: string;
@@ -34,13 +43,17 @@ declare class RowComponent {
 	readonly cells: CellComponent[];
 	readonly element: HTMLDivElement;
 	constructor(tabela: Tabela, data: PlainObject);
+	render(): void;
 }
 declare class BodyComponent {
 	readonly tabela: Tabela;
+	readonly faker: HTMLDivElement;
 	readonly group: HTMLDivElement;
 	readonly rows: RowComponent[];
+	readonly virtualization: VirtualizationManager;
 	constructor(tabela: Tabela);
-	addData(data: PlainObject[]): void;
+	addData(data: PlainObject[]): Promise<void>;
+	private updateVirtualization;
 }
 declare class FooterComponent {
 	readonly tabela: Tabela;