@oscarpalmer/tabela 0.3.0 → 0.4.0

package/src/components/body.component.ts

@@ -4,6 +4,11 @@ import {VirtualizationManager} from '../managers/virtualization.manager';
 import type {Tabela} from '../tabela';
 import {RowComponent} from './row.component';
 
+type Elements = {
+	faker: HTMLDivElement;
+	group: HTMLDivElement;
+};
+
 function createFaker(): HTMLDivElement {
 	const element = document.createElement('div');
 
@@ -18,22 +23,27 @@ function createFaker(): HTMLDivElement {
 }
 
 export class BodyComponent {
-	readonly faker = createFaker();
-	readonly group: HTMLDivElement;
+	readonly elements: Elements = {
+		faker: createFaker(),
+		group: undefined as never,
+	};
+
 	readonly rows: RowComponent[] = [];
 	readonly virtualization: VirtualizationManager;
 
 	constructor(readonly 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';
+		group.className += ' tabela__rowgroup-body';
 
-		this.group.style.height = '100%';
-		this.group.style.overflow = 'auto';
-		this.group.style.position = 'relative';
+		group.style.height = '100%';
+		group.style.overflow = 'auto';
+		group.style.position = 'relative';
 
-		this.group.append(this.faker);
+		group.append(this.elements.faker);
 
 		void this.addData(tabela.options.data).then(() => {
 			this.virtualization.update(true);
@@ -50,8 +60,16 @@ export class BodyComponent {
 		this.updateVirtualization();
 	}
 
+	destroy(): void {
+		this.virtualization.destroy();
+
+		this.elements.faker = undefined as never;
+		this.elements.group = undefined as never;
+		this.rows.length = 0;
+	}
+
 	private updateVirtualization(): void {
-		this.faker.style.height = `${this.rows.length * 32}px`;
+		this.elements.faker.style.height = `${this.rows.length * 32}px`;
 
 		this.virtualization.update(true);
 	}

package/src/components/footer.component.ts

@@ -1,31 +1,44 @@
 import {createCell, createRowGroup} from '../helpers/dom.helpers';
 import type {Tabela} from '../tabela';
 
+type Elements = {
+	cells: HTMLDivElement[];
+	group: HTMLDivElement;
+	row: HTMLDivElement;
+};
+
 export class FooterComponent {
-	readonly cells: HTMLDivElement[] = [];
-	readonly group: HTMLDivElement;
-	readonly row: HTMLDivElement;
+	readonly elements: Elements;
 
 	constructor(readonly tabela: Tabela) {
 		const {group, row} = createRowGroup();
 
-		this.group = group;
-		this.row = row;
+		this.elements = {
+			group,
+			row,
+			cells: [],
+		};
 
-		this.group.className += ' tabela__rowgroup-footer';
-		this.row.className += ' tabela__row-footer';
+		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(): void {
+		this.elements.cells = [];
+		this.elements.group = undefined as never;
+		this.elements.row = undefined as never;
+	}
 }

package/src/components/header.component.ts

@@ -2,10 +2,14 @@ import {createRowGroup} from '../helpers/dom.helpers';
 import type {Tabela} from '../tabela';
 import {ColumnComponent} from './column.component';
 
+type Elements = {
+	group: HTMLDivElement;
+	row: HTMLDivElement;
+};
+
 export class HeaderComponent {
 	readonly columns: ColumnComponent[];
-	readonly group: HTMLDivElement;
-	readonly row: HTMLDivElement;
+	readonly elements: Elements;
 
 	constructor(readonly tabela: Tabela) {
 		this.columns = tabela.options.columns.map(
@@ -14,12 +18,17 @@ export class HeaderComponent {
 
 		const {group, row} = createRowGroup();
 
-		this.group = group;
-		this.row = row;
+		this.elements = {group, row};
 
-		this.group.className += ' tabela__rowgroup-header';
-		this.row.className += ' tabela__row-header';
+		group.className += ' tabela__rowgroup-header';
+		row.className += ' tabela__row-header';
 
 		row.append(...this.columns.map(column => column.element));
 	}
+
+	destroy(): void {
+		this.columns.length = 0;
+		this.elements.group = undefined as never;
+		this.elements.row = undefined as never;
+	}
 }

package/src/components/row.component.ts

@@ -1,37 +1,50 @@
 import type {PlainObject} from '@oscarpalmer/atoms/models';
-import {createRow} from '../helpers/dom.helpers';
+import {createCell, createRow} from '../helpers/dom.helpers';
+import type {ElementPool} from '../managers/virtualization.manager';
 import type {Tabela} from '../tabela';
-import {CellComponent} from './cell.component';
 
 export class RowComponent {
-		readonly cells: CellComponent[] = [];
-		readonly element: HTMLDivElement;
+	element: HTMLDivElement | undefined;
 
-		constructor(
-			readonly tabela: Tabela,
-			readonly data: PlainObject,
-		) {
-			this.element = createRow();
+	constructor(
+		readonly tabela: Tabela,
+		readonly data: PlainObject,
+	) {}
 
-			this.element.className += ' tabela__row-body';
+	remove(pool: ElementPool): void {
+		if (this.element != null) {
+			this.element.innerHTML = '';
+
+			pool.rows.push(this.element);
+			this.element.remove();
+
+			this.element = undefined;
 		}
+	}
+
+	render(pool: ElementPool): void {
+		const element = this.element ?? pool.rows.shift() ?? createRow();
+
+		this.element = element;
+
+		element.innerHTML = '';
+
+		const {tabela} = this;
+		const {columns} = tabela.header;
+		const {length} = columns;
 
-		render(): void {
-			if (this.element.innerHTML !== '') {
-				return;
-			}
+		for (let index = 0; index < length; index += 1) {
+			const {options} = columns[index];
 
-			const {tabela} = this;
-			const {columns} = tabela.header;
-			const {length} = columns;
+			pool.cells[options.field] ??= [];
 
-			for (let index = 0; index < length; index += 1) {
-				const cell = new CellComponent(tabela, columns[index], this);
+			const cell =
+				pool.cells[columns[index].options.field].shift() ??
+				createCell(options.width);
 
-				cell.element.className += ' tabela__cell-body';
+			cell.textContent = String(this.data[options.field]);
 
-				this.cells.push(cell);
-				this.element.append(cell.element);
-			}
+			element.append(cell);
 		}
 	}
+}

package/src/helpers/dom.helpers.ts

@@ -3,13 +3,17 @@ type RowGroupWithRow = {
 	row: HTMLDivElement;
 };
 
-export function createCell(width: number): HTMLDivElement {
+export function createCell(width: number, body?: boolean): HTMLDivElement {
 	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;
 }
 
@@ -27,18 +31,23 @@ export function createRowGroup(withRow?: boolean) {
 		return group;
 	}
 
-	const row = createRow();
+	const row = createRow(false);
 
 	group.append(row);
 
 	return {group, row};
 }
 
-export function createRow() {
+export function createRow(withStyle?: boolean): HTMLDivElement {
 	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;
 }

package/src/managers/virtualization.manager.ts

@@ -1,14 +1,19 @@
 import type {BodyComponent} from '../components/body.component';
 import type {RowComponent} from '../components/row.component';
 
+export type ElementPool = {
+	cells: Record<string, HTMLDivElement[]>;
+	rows: HTMLDivElement[];
+};
+
 type Range = {
 	end: number;
 	start: number;
 };
 
 function getRange(body: BodyComponent, down: boolean): Range {
-	const {group, rows} = body;
-	const {clientHeight, scrollTop} = group;
+	const {elements, rows} = body;
+	const {clientHeight, scrollTop} = elements.group;
 
 	const first = Math.floor(scrollTop / 32);
 
@@ -28,11 +33,18 @@ function getRange(body: BodyComponent, down: boolean): Range {
 
 export class VirtualizationManager {
 	private active = false;
+
+	private readonly pool: ElementPool = {
+		cells: {},
+		rows: [],
+	};
+
 	private top = 0;
+
 	private readonly visible = new Map<number, RowComponent>();
 
 	constructor(private readonly body: BodyComponent) {
-		this.body.group.addEventListener(
+		this.body.elements.group.addEventListener(
 			'scroll',
 			() => {
 				this.onScroll();
@@ -43,8 +55,20 @@ export class VirtualizationManager {
 		);
 	}
 
+	destroy(): void {
+		const {visible, pool} = this;
+
+		for (const [index, row] of visible) {
+			row.remove(pool);
+			visible.delete(index);
+		}
+
+		pool.cells = {};
+		pool.rows = [];
+	}
+
 	update(down: boolean): void {
-		const {body, visible} = this;
+		const {body, pool, visible} = this;
 
 		const indices = new Set<number>();
 		const range = getRange(body, down);
@@ -56,7 +80,8 @@ export class VirtualizationManager {
 		for (const [index, row] of visible) {
 			if (!indices.has(index)) {
 				visible.delete(index);
-				row.element.remove();
+
+				row.remove(pool);
 			}
 		}
 
@@ -66,25 +91,25 @@ export class VirtualizationManager {
 			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);
 		}
 	}
 
 	private onScroll(): void {
 		if (!this.active) {
 			requestAnimationFrame(() => {
-				const top = this.body.group.scrollTop;
+				const top = this.body.elements.group.scrollTop;
 
 				this.update(top > this.top);
 

package/src/tabela.ts

@@ -4,26 +4,50 @@ import {HeaderComponent} from './components/header.component';
 import type {TabelaOptions} from './models/tabela.options';
 
 export class Tabela {
-	readonly body: BodyComponent;
-	readonly footer: FooterComponent;
-	readonly header: HeaderComponent;
+		readonly body: BodyComponent;
+		readonly footer: FooterComponent;
+		readonly header: HeaderComponent;
 
-	constructor(
-		readonly element: HTMLElement,
-		readonly options: TabelaOptions,
-	) {
-		element.role = 'table';
+		constructor(
+			public element: HTMLElement,
+			readonly options: TabelaOptions,
+		) {
+			element.innerHTML = '';
+			element.role = 'table';
 
-		element.classList.add('tabela');
-		element.setAttribute('aria-label', options.label);
+			element.classList.add('tabela');
 
-		this.header = new HeaderComponent(this);
-		this.body = new BodyComponent(this);
-		this.footer = new FooterComponent(this);
+			element.setAttribute('aria-label', options.label);
 
-		element.append(this.header.group, this.body.group, this.footer.group);
+			this.header = new HeaderComponent(this);
+			this.body = new BodyComponent(this);
+			this.footer = new FooterComponent(this);
+
+			element.append(
+				this.header.elements.group,
+				this.body.elements.group,
+				this.footer.elements.group,
+			);
+		}
+
+		destroy(): void {
+			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 = undefined as never;
+		}
 	}
-}
 
 export function tabela(element: HTMLElement, options: TabelaOptions): Tabela {
 	return new Tabela(element, options);

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

@@ -2,15 +2,54 @@
 
 import { PlainObject } from '@oscarpalmer/atoms/models';
 
+export type ElementPool = {
+	cells: Record<string, HTMLDivElement[]>;
+	rows: HTMLDivElement[];
+};
 declare class VirtualizationManager {
 	private readonly body;
 	private active;
+	private readonly pool;
 	private top;
 	private readonly visible;
 	constructor(body: BodyComponent);
+	destroy(): void;
 	update(down: boolean): void;
 	private onScroll;
 }
+declare class RowComponent {
+	readonly tabela: Tabela;
+	readonly data: PlainObject;
+	element: HTMLDivElement | undefined;
+	constructor(tabela: Tabela, data: PlainObject);
+	remove(pool: ElementPool): void;
+	render(pool: ElementPool): void;
+}
+export type Elements = {
+	faker: HTMLDivElement;
+	group: HTMLDivElement;
+};
+export declare class BodyComponent {
+	readonly tabela: Tabela;
+	readonly elements: Elements;
+	readonly rows: RowComponent[];
+	readonly virtualization: VirtualizationManager;
+	constructor(tabela: Tabela);
+	addData(data: PlainObject[]): Promise<void>;
+	destroy(): void;
+	private updateVirtualization;
+}
+type Elements$1 = {
+	cells: HTMLDivElement[];
+	group: HTMLDivElement;
+	row: HTMLDivElement;
+};
+declare class FooterComponent {
+	readonly tabela: Tabela;
+	readonly elements: Elements$1;
+	constructor(tabela: Tabela);
+	destroy(): void;
+}
 export type TabelaColumn = {
 	field: string;
 	title: string;
@@ -30,44 +69,16 @@ declare class ColumnComponent {
 	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;
-}
-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[]): Promise<void>;
-	private updateVirtualization;
-}
-declare class FooterComponent {
-	readonly tabela: Tabela;
-	readonly cells: HTMLDivElement[];
-	readonly group: HTMLDivElement;
-	readonly row: HTMLDivElement;
-	constructor(tabela: Tabela);
-}
+type Elements$2 = {
+	group: HTMLDivElement;
+	row: HTMLDivElement;
+};
 declare class HeaderComponent {
 	readonly tabela: Tabela;
 	readonly columns: ColumnComponent[];
-	readonly group: HTMLDivElement;
-	readonly row: HTMLDivElement;
+	readonly elements: Elements$2;
 	constructor(tabela: Tabela);
+	destroy(): void;
 }
 export type TabelaOptions = {
 	columns: TabelaColumnOptions[];
@@ -75,12 +86,13 @@ export type TabelaOptions = {
 	label: string;
 };
 declare class Tabela {
-	readonly element: HTMLElement;
+	element: HTMLElement;
 	readonly options: TabelaOptions;
 	readonly body: BodyComponent;
 	readonly footer: FooterComponent;
 	readonly header: HeaderComponent;
 	constructor(element: HTMLElement, options: TabelaOptions);
+	destroy(): void;
 }
 
 export {};

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

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