@itrocks/table 0.0.11 → 0.0.13

package/column-reorder.d.ts

@@ -1,7 +1,7 @@
-import Plugin from '../node_modules/@itrocks/plugin/plugin.js';
+import { Plugin } from '../node_modules/@itrocks/plugin/plugin.js';
 import { HTMLTableFreezeElement } from './freeze.js';
-import Table from './table.js';
-export default class TableColumnReorder extends Plugin<Table> {
+import { Table } from './table.js';
+export declare class TableColumnReorder extends Plugin<Table> {
     reorderCells: NodeListOf<HTMLTableFreezeElement>;
     constructor(table: Table);
     protected getReorderCells(): NodeListOf<HTMLTableFreezeElement>;

package/column-reorder.js

@@ -1,5 +1,5 @@
-import Plugin from '../plugin/plugin.js';
-export default class TableColumnReorder extends Plugin {
+import { Plugin } from '../plugin/plugin.js';
+export class TableColumnReorder extends Plugin {
     reorderCells;
     constructor(table) {
         super(table);

package/edit/lock.d.ts

@@ -1,11 +1,11 @@
-import Plugin from '../../node_modules/@itrocks/plugin/plugin.js';
-import Table from '../table.js';
+import { Plugin } from '../../node_modules/@itrocks/plugin/plugin.js';
+import { Table } from '../table.js';
 declare class Options {
     nonEditableConditions: {
         [index: string]: string;
     };
 }
-export default class TableEditLock extends Plugin<Table> {
+export declare class TableEditLock extends Plugin<Table> {
     options: Options;
     constructor(table: Table, options?: Partial<Options>);
     colCell(cell: HTMLTableCellElement): HTMLTableCellElement | HTMLTableColElement;

package/edit/lock.js

@@ -1,11 +1,11 @@
-import Plugin from '../../plugin/plugin.js';
+import { Plugin } from '../../plugin/plugin.js';
 class Options {
     nonEditableConditions = {
         'closest': 'tfoot, thead, [data-lock]',
         'col': '[data-lock]'
     };
 }
-export default class TableEditLock extends Plugin {
+export class TableEditLock extends Plugin {
     options = new Options;
     constructor(table, options = {}) {
         super(table);

package/edit/move.d.ts

@@ -1,8 +1,8 @@
 import { HTMLEditableElement } from '../../node_modules/@itrocks/contenteditable/contenteditable.js';
-import Plugin from '../../node_modules/@itrocks/plugin/plugin.js';
-import TableEdit from '../edit.js';
-import Table from '../table.js';
-export default class TableEditMove extends Plugin<Table> {
+import { Plugin } from '../../node_modules/@itrocks/plugin/plugin.js';
+import { TableEdit } from '../edit.js';
+import { Table } from '../table.js';
+export declare class TableEditMove extends Plugin<Table> {
     tableEdit: TableEdit;
     constructor(table: Table);
     selectNextColumn(): void;

package/edit/move.js

@@ -1,5 +1,5 @@
-import Plugin from '../../plugin/plugin.js';
-export default class TableEditMove extends Plugin {
+import { Plugin } from '../../plugin/plugin.js';
+export class TableEditMove extends Plugin {
     tableEdit;
     constructor(table) {
         super(table);

package/edit-freeze/hide.d.ts

@@ -1,9 +1,9 @@
 import { HTMLEditableElement } from '../../node_modules/@itrocks/contenteditable/contenteditable.js';
-import Plugin from '../../node_modules/@itrocks/plugin/plugin.js';
-import TableEdit from '../edit.js';
-import TableFreeze from '../freeze.js';
-import Table from '../table.js';
-export default class TableEditFreezeHide extends Plugin<Table> {
+import { Plugin } from '../../node_modules/@itrocks/plugin/plugin.js';
+import { TableEdit } from '../edit.js';
+import { TableFreeze } from '../freeze.js';
+import { Table } from '../table.js';
+export declare class TableEditFreezeHide extends Plugin<Table> {
     readonly tableFreeze: TableFreeze;
     readonly tableEdit: TableEdit;
     constructor(table: Table);

package/edit-freeze/hide.js

@@ -1,10 +1,10 @@
-import Plugin from '../../plugin/plugin.js';
+import { Plugin } from '../../plugin/plugin.js';
 const zIndex = {
     back: false,
     editable: '',
     selected: ''
 };
-export default class TableEditFreezeHide extends Plugin {
+export class TableEditFreezeHide extends Plugin {
     tableFreeze;
     tableEdit;
     constructor(table) {

package/edit-freeze/scroll.d.ts

@@ -1,7 +1,7 @@
-import Plugin from '../../node_modules/@itrocks/plugin/plugin.js';
-import TableFreeze from '../freeze.js';
-import Table from '../table.js';
-export default class TableEditFreezeScroll extends Plugin<Table> {
+import { Plugin } from '../../node_modules/@itrocks/plugin/plugin.js';
+import { TableFreeze } from '../freeze.js';
+import { Table } from '../table.js';
+export declare class TableEditFreezeScroll extends Plugin<Table> {
     tableFreeze: TableFreeze;
     constructor(table: Table);
     scrollToCell(cell: HTMLTableCellElement): HTMLTableCellElement;

package/edit-freeze/scroll.js

@@ -1,5 +1,5 @@
-import Plugin from '../../plugin/plugin.js';
-export default class TableEditFreezeScroll extends Plugin {
+import { Plugin } from '../../plugin/plugin.js';
+export class TableEditFreezeScroll extends Plugin {
     tableFreeze;
     constructor(table) {
         super(table);

package/edit.d.ts

@@ -1,6 +1,6 @@
 import { HTMLEditableElement } from '../node_modules/@itrocks/contenteditable/contenteditable.js';
-import Plugin from '../node_modules/@itrocks/plugin/plugin.js';
-import Table from './table.js';
+import { Plugin } from '../node_modules/@itrocks/plugin/plugin.js';
+import { Table } from './table.js';
 export declare class RangeCopy {
     commonAncestorContainer: Node;
     endContainer: Node;
@@ -10,7 +10,7 @@ export declare class RangeCopy {
     constructor(range: Range);
     toRange(): Range;
 }
-export default class TableEdit extends Plugin<Table> {
+export declare class TableEdit extends Plugin<Table> {
     zIndex: string;
     init(): void;
     closestEditable(node: Node | Range | RangeCopy): HTMLDivElement;

package/edit.js

@@ -1,5 +1,5 @@
-import ContentEditable from '../contenteditable/contenteditable.js';
-import Plugin from '../plugin/plugin.js';
+import { ContentEditable } from '../contenteditable/contenteditable.js';
+import { Plugin } from '../plugin/plugin.js';
 let editable;
 let selected;
 let selectedStyle;
@@ -24,7 +24,7 @@ export class RangeCopy {
         return range;
     }
 }
-export default class TableEdit extends Plugin {
+export class TableEdit extends Plugin {
     zIndex = '2';
     init() {
         const table = this.of;

package/fix.d.ts

@@ -0,0 +1,27 @@
+import Plugin from '../node_modules/@itrocks/plugin/plugin.js';
+import { HTMLTableFixElement, Table } from './table.js';
+interface FullIndex {
+    column: string;
+    corner: string;
+    row: string;
+}
+export declare class FixTable extends Plugin<Table> {
+    columns: NodeListOf<HTMLTableFixElement>;
+    full?: FullIndex;
+    leftColumnCount: number;
+    rightColumnCount: number;
+    zIndex: string;
+    constructor(table: Table);
+    init(): void;
+    closestScrollable(element: Element): HTMLElement | (Window & typeof globalThis) | undefined;
+    protected countLeftColumns(): number;
+    protected countRightColumns(): number;
+    protected fixFootRows(): void;
+    protected fixHeadRows(): void;
+    protected fixLeftColumns(): void;
+    protected fixRightColumns(): void;
+    protected getColumns(): NodeListOf<HTMLTableFixElement>;
+    position(position: number, _counter: number, _colCell: HTMLTableFixElement, _side: 'bottom' | 'left' | 'right' | 'top'): string;
+    visibleInnerRect(): DOMRect;
+}
+export default FixTable;

package/fix.js

@@ -0,0 +1,191 @@
+import Plugin from '../plugin/plugin.js';
+export class FixTable 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.fixFootRows();
+        this.fixHeadRows();
+        this.fixLeftColumns();
+        this.fixRightColumns();
+    }
+    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.fix !== undefined)) {
+            count++;
+        }
+        return count;
+    }
+    countRightColumns() {
+        let count = this.columns.length - 1;
+        while ((count > 0) && (this.columns[count].dataset.fix !== undefined)) {
+            count--;
+        }
+        return this.columns.length - 1 - count;
+    }
+    fixFootRows() {
+        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}
+			}		
+		`);
+    }
+    fixHeadRows() {
+        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}
+			}		
+		`);
+    }
+    fixLeftColumns() {
+        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};
+			}
+		`);
+    }
+    fixRightColumns() {
+        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;
+    }
+}
+export default FixTable;

package/freeze/inherit-background.d.ts

@@ -1,9 +1,9 @@
-import TableFreeze from '../freeze.js';
-import Table from '../table';
+import { TableFreeze } from '../freeze.js';
+import { Table } from '../table';
 /**
  * This plugin has no use and no effect if your table has border-collapse: collapse
  */
-export default class TableFreezeInheritBackground extends TableFreeze {
+export declare class TableFreezeInheritBackground extends TableFreeze {
     tableStyle: CSSStyleDeclaration;
     constructor(table: Table);
     init(): void;

package/freeze/inherit-background.js

@@ -1,8 +1,8 @@
-import TableFreeze from '../freeze.js';
+import { TableFreeze } from '../freeze.js';
 /**
  * This plugin has no use and no effect if your table has border-collapse: collapse
  */
-export default class TableFreezeInheritBackground extends TableFreeze {
+export class TableFreezeInheritBackground extends TableFreeze {
     tableStyle;
     constructor(table) {
         super(table);

package/freeze/inherit-border.d.ts

@@ -1,11 +1,11 @@
-import Plugin from '../../node_modules/@itrocks/plugin/plugin.js';
-import TableFreeze from '../freeze.js';
+import { Plugin } from '../../node_modules/@itrocks/plugin/plugin.js';
+import { TableFreeze } from '../freeze.js';
 import { HTMLTableFreezeElement } from '../freeze.js';
-import Table from '../table.js';
+import { Table } from '../table.js';
 /**
  * This plugin has no use and no effect if your table has border-collapse: separate (default)
  */
-export default class TableFreezeInheritBorder extends Plugin<Table> {
+export declare class TableFreezeInheritBorder extends Plugin<Table> {
     tableStyle: CSSStyleDeclaration;
     tableFreeze: TableFreeze;
     constructor(table: Table);

package/freeze/inherit-border.js

@@ -1,8 +1,8 @@
-import Plugin from '../../plugin/plugin.js';
+import { Plugin } from '../../plugin/plugin.js';
 /**
  * This plugin has no use and no effect if your table has border-collapse: separate (default)
  */
-export default class TableFreezeInheritBorder extends Plugin {
+export class TableFreezeInheritBorder extends Plugin {
     tableStyle;
     tableFreeze;
     constructor(table) {

package/freeze.d.ts

@@ -1,12 +1,12 @@
-import Plugin from '../node_modules/@itrocks/plugin/plugin.js';
-import Table from './table.js';
+import { Plugin } from '../node_modules/@itrocks/plugin/plugin.js';
+import { Table } from './table.js';
 export type HTMLTableFreezeElement = HTMLTableCellElement | HTMLTableColElement;
 interface FullIndex {
     column: string;
     corner: string;
     row: string;
 }
-export default class TableFreeze extends Plugin<Table> {
+export declare class TableFreeze extends Plugin<Table> {
     columns: NodeListOf<HTMLTableFreezeElement>;
     full?: FullIndex;
     leftColumnCount: number;

package/freeze.js

@@ -1,5 +1,5 @@
-import Plugin from '../plugin/plugin.js';
-export default class TableFreeze extends Plugin {
+import { Plugin } from '../plugin/plugin.js';
+export class TableFreeze extends Plugin {
     columns;
     full;
     leftColumnCount;

package/package.json

@@ -11,7 +11,7 @@
 	"devDependencies": {
 		"@itrocks/prepare-module": "latest",
 		"@types/node": "^22.9",
-		"sass": "^1.81",
+		"sass": "^1.83",
 		"typescript": "5.6"
 	},
 	"files": [
@@ -19,9 +19,8 @@
 		"README.md",
 		"**/*.d.ts",
 		"**/*.js",
-		"!demo/**",
-		"!node_modules/**",
-		"!src/**"
+		"!/demo",
+		"!/src"
 	],
 	"homepage": "https://it.rocks",
 	"keywords": [
@@ -46,10 +45,10 @@
 		"url": "git+https://github.com/itrocks-ts/table.git"
 	},
 	"scripts": {
-		"build": "tsc && sass demo:demo",
+		"build": "tsc && sass --no-source-map demo:demo",
 		"prepare": "prepare-module"
 	},
 	"type": "module",
 	"types": "./table.d.ts",
-	"version": "0.0.11"
+	"version": "0.0.13"
 }

package/table.d.ts

@@ -3,7 +3,7 @@ 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> {
+export declare class Table extends HasPlugins<Table> {
     readonly element: HTMLTableElement;
     readonly id: number;
     readonly selector: string;

package/table.js

@@ -24,7 +24,7 @@ function nextTableId(table) {
     }
     return tableCounter;
 }
-export default class Table extends HasPlugins {
+export class Table extends HasPlugins {
     element;
     id;
     selector;