@itrocks/table 0.0.1

package/freeze.js

@@ -0,0 +1,190 @@
+import Plugin from '../plugin/plugin.js';
+export default class TableFreeze extends Plugin {
+    columns;
+    full;
+    leftColumnCount;
+    rightColumnCount;
+    zIndex = '1';
+    constructor(table) {
+        super(table);
+        this.columns = this.getColumns();
+        this.leftColumnCount = this.countLeftColumns();
+        this.rightColumnCount = this.countRightColumns();
+    }
+    init() {
+        this.freezeFootRows();
+        this.freezeHeadRows();
+        this.freezeLeftColumns();
+        this.freezeRightColumns();
+    }
+    closestScrollable(element) {
+        let parent = element.closest('table')?.parentElement;
+        while (parent && (parent.scrollHeight <= parent.clientHeight)) {
+            parent = parent.parentElement;
+        }
+        return parent ? ((parent instanceof HTMLHtmlElement) ? window : parent) : undefined;
+    }
+    countLeftColumns() {
+        let count = 0;
+        while ((count < this.columns.length - 1) && (this.columns[count].dataset.freeze !== undefined)) {
+            count++;
+        }
+        return count;
+    }
+    countRightColumns() {
+        let count = this.columns.length - 1;
+        while ((count > 0) && (this.columns[count].dataset.freeze !== undefined)) {
+            count--;
+        }
+        return this.columns.length - 1 - count;
+    }
+    freezeFootRows() {
+        const table = this.of;
+        if (!table.element.tFoot?.rows.length)
+            return;
+        let counter = 1, bottom = .0, previousBottom = table.element.getBoundingClientRect().bottom;
+        for (const row of Array.from(table.element.tFoot.querySelectorAll(':scope > tr')).reverse()) {
+            const actualBottom = row.getBoundingClientRect().bottom;
+            bottom += previousBottom - actualBottom;
+            previousBottom = actualBottom;
+            table.styleSheet.push(`
+				${table.selector} > tfoot > tr:nth-last-child(${counter}) > * {
+					bottom: ${this.position(bottom, counter, row.firstElementChild, 'bottom')};
+				}
+			`);
+            counter++;
+        }
+        const zIndex = this.full ? `z-index: ${this.full.row};` : '';
+        table.styleSheet.push(`
+			${table.selector} > tfoot > tr > * {
+				position: sticky;
+				${zIndex}
+			}		
+		`);
+    }
+    freezeHeadRows() {
+        const table = this.of;
+        if (!table.element.tHead?.rows.length)
+            return;
+        let counter = 1, top = .0, previousTop = table.element.getBoundingClientRect().top;
+        table.element.tHead.querySelectorAll(':scope > tr').forEach(row => {
+            const actualTop = row.getBoundingClientRect().top;
+            top += actualTop - previousTop;
+            previousTop = actualTop;
+            table.styleSheet.push(`
+				${table.selector} > thead > tr:nth-child(${counter}) > * {
+					top: ${this.position(top, counter, row.firstElementChild, 'top')};
+				}
+			`);
+            counter++;
+        });
+        const zIndex = this.full ? `z-index: ${this.full.row};` : '';
+        table.styleSheet.push(`
+			${table.selector} > thead > tr > * {
+				position: sticky;
+				${zIndex}
+			}		
+		`);
+    }
+    freezeLeftColumns() {
+        if (!this.leftColumnCount)
+            return;
+        const table = this.of;
+        const bodySel = [];
+        const cornerSel = [];
+        let counter = 1, left = .0, previousLeft = table.element.getBoundingClientRect().left;
+        for (const colCell of Array.from(this.columns).toSpliced(this.leftColumnCount)) {
+            const actualLeft = colCell.getBoundingClientRect().left;
+            left += actualLeft - previousLeft;
+            previousLeft = actualLeft;
+            table.styleSheet.push(`
+				${table.selector} > * > tr > :nth-child(${counter}) {
+					left: ${this.position(left, counter, colCell, 'left')};
+				}
+			`);
+            bodySel.push(`${table.selector} > tbody > tr > :nth-child(${counter})`);
+            cornerSel.push(`${table.selector} > tfoot > tr > :nth-child(${counter})`);
+            cornerSel.push(`${table.selector} > thead > tr > :nth-child(${counter})`);
+            counter++;
+        }
+        const zIndex = this.full ? `z-index: ${this.full.column};` : '';
+        const zIndexValue = this.full ? this.full.corner : this.zIndex;
+        table.styleSheet.push(`
+			${bodySel.join(', ')} {
+				position: sticky;
+				${zIndex}
+			}
+			${cornerSel.join(', ')} {
+				z-index: ${zIndexValue};
+			}
+		`);
+    }
+    freezeRightColumns() {
+        if (!this.rightColumnCount)
+            return;
+        const table = this.of;
+        const bodySel = [];
+        const cornerSel = [];
+        let counter = 1, right = .0, previousRight = table.element.getBoundingClientRect().right;
+        for (const colCell of Array.from(this.columns).reverse().toSpliced(this.rightColumnCount)) {
+            const actualRight = colCell.getBoundingClientRect().right;
+            right += previousRight - actualRight;
+            previousRight = actualRight;
+            table.styleSheet.push(`
+				${table.selector} > * > tr > :nth-last-child(${counter}) {
+					right: ${this.position(right, counter, colCell, 'right')};
+				}
+			`);
+            bodySel.push(`${table.selector} > tbody > tr > :nth-last-child(${counter})`);
+            if (this.full) {
+                cornerSel.push(`${table.selector} > tfoot > tr > :nth-last-child(${counter})`);
+            }
+            cornerSel.push(`${table.selector} > thead > tr > :nth-last-child(${counter})`);
+            counter++;
+        }
+        const zIndex = this.full ? `z-index: ${this.full.column};` : '';
+        const zIndexValue = this.full ? this.full.corner : this.zIndex;
+        table.styleSheet.push(`
+			${bodySel.join(', ')} {
+				position: sticky;
+				${zIndex}
+			}
+			${cornerSel.join(', ')} {
+				z-index: ${zIndexValue};
+			}
+		`);
+    }
+    getColumns() {
+        if (this.columns)
+            return this.columns;
+        const table = this.of;
+        let columns = table.element.querySelectorAll(':scope > colgroup > col');
+        if (!columns.length) {
+            columns = table.element.querySelectorAll(':scope > thead > tr:first-child > *');
+            if (!columns.length) {
+                columns = table.element.querySelectorAll(':scope > tbody > tr:first-child > *');
+            }
+        }
+        return columns;
+    }
+    position(position, _counter, _colCell, _side) {
+        return `${position}px`;
+    }
+    visibleInnerRect() {
+        const tableElement = this.of.element;
+        const rect = tableElement.getBoundingClientRect();
+        if (this.leftColumnCount) {
+            rect.x = this.columns[this.leftColumnCount - 1].getBoundingClientRect().right;
+        }
+        if (tableElement.tHead?.lastElementChild?.firstElementChild) {
+            rect.y = tableElement.tHead.lastElementChild.firstElementChild.getBoundingClientRect().bottom;
+        }
+        if (this.rightColumnCount) {
+            rect.width = this.columns[this.columns.length - this.rightColumnCount].getBoundingClientRect().left - rect.x + 1;
+        }
+        if (tableElement.tFoot?.firstElementChild?.firstElementChild) {
+            rect.height = tableElement.tFoot.firstElementChild.firstElementChild.getBoundingClientRect().top - rect.y + 1;
+        }
+        return rect;
+    }
+}

package/package.json

@@ -0,0 +1,48 @@
+{
+	"author": {
+		"name": "Baptiste Pillot",
+		"email": "baptiste@pillot.fr"
+	},
+	"dependencies": {
+		"@itrocks/contenteditable": "latest",
+		"@itrocks/plugin": "latest"
+	},
+	"description": "A lightweight, modular HTML table offering near-spreadsheet features such as edit, freeze, lock, scroll, and more",
+	"devDependencies": {
+		"@itrocks/prepare-module": "latest",
+		"@types/node": "^22.9",
+		"typescript": "5.6"
+	},
+	"files": [
+		"LICENSE",
+		"README.md",
+		"**/*.d.ts",
+		"**/*.js",
+		"!demo/**",
+		"!node_modules/**",
+		"!src/**"
+	],
+	"keywords": [
+		"drag",
+		"drop",
+		"edit",
+		"editable",
+		"table",
+		"fix",
+		"fixed",
+		"lock",
+		"reorder",
+		"scroll"
+	],
+	"license": "LGPL-3.0-or-later",
+	"module": "./table.js",
+	"name": "@itrocks/table",
+	"repository": "https://github.com/itrocks-ts/table",
+	"scripts": {
+		"build": "tsc",
+		"prepare": "prepare-module"
+	},
+	"type": "module",
+	"types": "./table.d.ts",
+	"version": "0.0.1"
+}

package/table.d.ts

@@ -0,0 +1,19 @@
+import { HasPlugins, Options as PluginOptions } from '../node_modules/@itrocks/plugin/plugin.js';
+export declare function applyStyleSheets(): void;
+export declare function garbageCollector(): void;
+export declare function getTables(): Table[];
+export type Options = PluginOptions<Table>;
+export default class Table extends HasPlugins<Table> {
+    readonly element: HTMLTableElement;
+    readonly id: number;
+    readonly selector: string;
+    readonly onReset: (() => void)[];
+    readonly styleSheet: string[];
+    constructor(element: HTMLTableElement, options?: Partial<Options>);
+    addEventListener<T extends keyof GlobalEventHandlersEventMap>(element: Document | Element | Window, type: T, listener: (this: Element, ev: GlobalEventHandlersEventMap[T]) => any, options?: AddEventListenerOptions | boolean): void;
+    cellColumnNumber(cell: HTMLTableCellElement): number;
+    reset(): Table;
+}
+export declare function tableByElement(element: HTMLTableElement, options?: Partial<Options>): Table;
+export declare function tableByElements(elements: Array<HTMLTableElement> | NodeListOf<HTMLTableElement>, options?: Partial<Options>): Table[];
+export declare function tableBySelector(selector: string, options?: Partial<Options>): Table[];

package/table.js

@@ -0,0 +1,74 @@
+import { HasPlugins } from '../plugin/plugin.js';
+const styleSheets = new CSSStyleSheet;
+document.adoptedStyleSheets.push(styleSheets);
+let tableCounter = 0;
+let tables = [];
+export function applyStyleSheets() {
+    styleSheets.replaceSync(tables.map(table => table.styleSheet.join(`\n`)).join(`\n`));
+}
+export function garbageCollector() {
+    const length = tables.length;
+    tables = tables.filter(table => document.body.querySelectorAll(table.selector).length);
+    if (tables.length < length) {
+        applyStyleSheets();
+    }
+}
+export function getTables() {
+    return tables;
+}
+function nextTableId(table) {
+    tables.push(table);
+    tableCounter++;
+    if (tableCounter > 999999999) {
+        tableCounter = 1;
+    }
+    return tableCounter;
+}
+export default class Table extends HasPlugins {
+    element;
+    id;
+    selector;
+    onReset = [];
+    styleSheet = [];
+    constructor(element, options = {}) {
+        super(options);
+        this.element = element;
+        this.id = nextTableId(this);
+        this.selector = `table.itrocks[data-table-id="${this.id}"]`;
+        this.element.classList.add('itrocks');
+        this.element.setAttribute('data-table-id', this.id.toString());
+        garbageCollector();
+        this.constructPlugins();
+        this.initPlugins();
+        applyStyleSheets();
+    }
+    addEventListener(element, type, listener, options) {
+        element.addEventListener(type, listener, options);
+        this.onReset.push(() => element.removeEventListener(type, listener, options));
+    }
+    cellColumnNumber(cell) {
+        let count = 0;
+        let previous = cell.previousElementSibling;
+        while (previous) {
+            if ((previous.tagName === 'TD') || (previous.tagName === 'TH')) {
+                count++;
+            }
+            previous = previous.previousElementSibling;
+        }
+        return count;
+    }
+    reset() {
+        for (const onReset of this.onReset)
+            onReset.call(this);
+        return tableByElement(this.element, this.options);
+    }
+}
+export function tableByElement(element, options = {}) {
+    return new Table(element, options);
+}
+export function tableByElements(elements, options = {}) {
+    return Array.from(elements).map(element => tableByElement(element, options));
+}
+export function tableBySelector(selector, options = {}) {
+    return tableByElements(document.body.querySelectorAll(selector), options);
+}