@danielgindi/dgtable.js 2.0.6 → 2.0.8

package/src/row_collection.ts

@@ -0,0 +1,197 @@
+import type { RowData, ComparatorFunction, OnComparatorRequired, CustomSortingProvider } from './types';
+
+// Private types
+import {
+    OriginalRowIndex,
+    SortColumn,
+} from './private_types';
+
+/**
+ * Options for RowCollection initialization
+ */
+interface RowCollectionOptions {
+    sortColumn?: SortColumn[];
+    onComparatorRequired?: OnComparatorRequired | null;
+    customSortingProvider?: CustomSortingProvider | null;
+}
+
+/**
+ * A collection of rows that extends Array functionality with sorting and filtering
+ */
+class RowCollection extends Array<RowData> {
+    sortColumn: SortColumn[];
+    onComparatorRequired: OnComparatorRequired | null = null;
+    customSortingProvider: CustomSortingProvider | null = null;
+
+    constructor(options?: RowCollectionOptions) {
+        super();
+        options = options || {};
+        this.sortColumn = options.sortColumn ?? [];
+        this.onComparatorRequired = options.onComparatorRequired ?? null;
+        this.customSortingProvider = options.customSortingProvider ?? null;
+    }
+
+    /**
+     * Add a row or array of rows to this collection
+     */
+    add(rows: RowData | RowData[], at?: number): void {
+        const isArray = Array.isArray(rows);
+        if (isArray) {
+            const rowArray = rows as RowData[];
+            if (typeof at === 'number') {
+                for (let i = 0, len = rowArray.length; i < len; i++) {
+                    this.splice(at++, 0, rowArray[i]);
+                }
+            } else {
+                for (let i = 0, len = rowArray.length; i < len; i++) {
+                    this.push(rowArray[i]);
+                }
+            }
+        } else {
+            const row = rows as RowData;
+            if (typeof at === 'number') {
+                this.splice(at, 0, row);
+            } else {
+                this.push(row);
+            }
+        }
+    }
+
+    /**
+     * Reset the collection with optional new rows
+     */
+    reset(rows?: RowData | RowData[]): void {
+        this.length = 0;
+        if (rows) {
+            this.add(rows);
+        }
+    }
+
+    /**
+     * Create a filtered collection based on a filter function
+     */
+    filteredCollection(
+        filterFunc: (row: RowData, args: unknown) => boolean,
+        args: unknown
+    ): RowCollection | null {
+        if (filterFunc && args) {
+            const rows = new RowCollection({
+                sortColumn: this.sortColumn,
+                onComparatorRequired: this.onComparatorRequired,
+                customSortingProvider: this.customSortingProvider,
+            });
+
+            for (let i = 0, len = this.length; i < len; i++) {
+                const row = this[i];
+                if (filterFunc(row, args)) {
+                    (row as any)[OriginalRowIndex] = i;
+                    rows.push(row);
+                }
+            }
+            return rows;
+        } else {
+            return null;
+        }
+    }
+
+    /**
+     * Sort the collection based on the current sort columns
+     * @returns the comparator function used, if any
+     */
+    sort(compareFn?: (a: RowData, b: RowData) => number): this {
+        let comparator: ComparatorFunction | undefined;
+
+        // If a compare function is passed directly (from Array.sort), use native
+        if (typeof compareFn === 'function') {
+            return super.sort(compareFn);
+        }
+
+        if (this.sortColumn.length) {
+            const comparators: ComparatorFunction[] = [];
+
+            for (let i = 0; i < this.sortColumn.length; i++) {
+                const defaultComparator = getDefaultComparator(this.sortColumn[i], this.sortColumn[i].descending);
+                let comp: ComparatorFunction | null = null;
+                if (this.onComparatorRequired) {
+                    comp = this.onComparatorRequired(
+                        this.sortColumn[i].column,
+                        this.sortColumn[i].descending,
+                        defaultComparator
+                    );
+                }
+                if (!comp) {
+                    comp = defaultComparator;
+                }
+                comparators.push(comp.bind(this));
+            }
+
+            if (comparators.length === 1) {
+                comparator = comparators[0];
+            } else {
+                const len = comparators.length;
+                comparator = (leftRow: RowData, rightRow: RowData): number => {
+                    let value = 0;
+                    for (let i = 0; i < len; i++) {
+                        value = comparators[i](leftRow, rightRow);
+                        if (value !== 0) {
+                            return value;
+                        }
+                    }
+                    return value;
+                };
+            }
+
+            const sorter = (data: RowData[]): RowData[] => {
+                data.sort(comparator);
+                return data;
+            };
+
+            if (this.customSortingProvider) {
+                const results = this.customSortingProvider(this as unknown as RowData[], sorter);
+                if (results !== (this as unknown as RowData[])) {
+                    this.splice(0, this.length, ...results);
+                }
+            } else {
+                sorter(this as unknown as RowData[]);
+            }
+        }
+
+        return this;
+    }
+}
+
+/**
+ * Get a default comparator for a sort column
+ */
+function getDefaultComparator(column: SortColumn, descending: boolean): ComparatorFunction {
+    let comparePath = column.comparePath;
+    if (typeof comparePath === 'string') {
+        comparePath = (comparePath as unknown as string).split('.');
+    }
+    const pathLength = comparePath.length;
+    const hasPath = pathLength > 1;
+
+    const lessVal = descending ? 1 : -1;
+    const moreVal = descending ? -1 : 1;
+
+    return function (leftRow: RowData, rightRow: RowData): number {
+        let leftVal: unknown = leftRow[comparePath[0]];
+        let rightVal: unknown = rightRow[comparePath[0]];
+
+        if (hasPath) {
+            for (let i = 1; i < pathLength; i++) {
+                leftVal = leftVal && (leftVal as Record<string, unknown>)[comparePath[i]];
+                rightVal = rightVal && (rightVal as Record<string, unknown>)[comparePath[i]];
+            }
+        }
+
+        if (leftVal === rightVal) return 0;
+        if (leftVal == null) return lessVal;
+        if (rightVal == null) return moreVal;
+        if (leftVal < rightVal) return lessVal;
+        return moreVal;
+    };
+}
+
+export default RowCollection;
+

package/src/types.ts

@@ -0,0 +1,265 @@
+import type { WidthType } from './constants';
+
+/**
+ * Column sort specification
+ */
+export interface ColumnSortOptions {
+    column: string;
+    descending?: boolean;
+}
+
+/**
+ * Serialized column sort for external use
+ */
+export interface SerializedColumnSort {
+    column: string;
+    descending: boolean;
+}
+
+/**
+ * Serialized column configuration
+ */
+export interface SerializedColumn {
+    order?: number | null;
+    width?: string | number | null;
+    visible?: boolean | null;
+    label?: string;
+}
+
+/**
+ * Column definition options
+ */
+export interface ColumnOptions {
+    name: string;
+    label?: string | null;
+    width?: number | string | null;
+    dataPath?: string | string[] | null;
+    comparePath?: string | string[] | null;
+    resizable?: boolean | null;
+    movable?: boolean | null;
+    sortable?: boolean | null;
+    visible?: boolean | null;
+    cellClasses?: string | null;
+    ignoreMin?: boolean | null;
+    sticky?: 'start' | 'end' | false | null;
+    order?: number;
+}
+
+/**
+ * Row data type - can be any object with string keys
+ */
+export type RowData = Record<string, unknown>
+
+/**
+ * Cell formatter function
+ */
+export type CellFormatter = ((value: unknown, columnName: string, rowData: RowData) => string) & {
+    [key: symbol]: boolean;
+};
+
+/**
+ * Header cell formatter function
+ */
+export type HeaderCellFormatter = (label: string, columnName: string) => string;
+
+/**
+ * Filter function
+ */
+export type FilterFunction = (row: RowData, args: unknown) => boolean;
+
+/**
+ * Comparator function
+ */
+export type ComparatorFunction = (a: RowData, b: RowData) => number;
+
+/**
+ * Comparator callback
+ */
+export type OnComparatorRequired = (
+    columnName: string,
+    descending: boolean,
+    defaultComparator: ComparatorFunction
+) => ComparatorFunction;
+
+/**
+ * Custom sorting provider
+ */
+export type CustomSortingProvider = (
+    data: RowData[],
+    sort: (data: RowData[]) => RowData[]
+) => RowData[];
+
+/**
+ * DGTable initialization options
+ */
+export interface DGTableOptions {
+    el?: Element | null;
+    className?: string | null;
+    columns?: ColumnOptions[];
+    height?: number;
+    width?: WidthType;
+    virtualTable?: boolean | null;
+    estimatedRowHeight?: number | null;
+    resizableColumns?: boolean | null;
+    movableColumns?: boolean | null;
+    sortableColumns?: number | null;
+    adjustColumnWidthForSortArrow?: boolean | null;
+    relativeWidthGrowsToFillWidth?: boolean | null;
+    relativeWidthShrinksToFillWidth?: boolean | null;
+    convertColumnWidthsToRelative?: boolean | null;
+    autoFillTableWidth?: boolean | null;
+    allowCancelSort?: boolean | null;
+    cellClasses?: string | null;
+    sortColumn?: string | string[] | ColumnSortOptions | ColumnSortOptions[];
+    cellFormatter?: CellFormatter | null;
+    headerCellFormatter?: HeaderCellFormatter | null;
+    rowsBufferSize?: number | null;
+    minColumnWidth?: number | null;
+    resizeAreaWidth?: number | null;
+    onComparatorRequired?: OnComparatorRequired | null;
+    comparatorCallback?: OnComparatorRequired | null; // deprecated
+    customSortingProvider?: CustomSortingProvider | null;
+    resizerClassName?: string | null;
+    tableClassName?: string | null;
+    allowCellPreview?: boolean | null;
+    allowHeaderCellPreview?: boolean | null;
+    cellPreviewClassName?: string | null;
+    cellPreviewAutoBackground?: boolean | null;
+    filter?: FilterFunction | null;
+}
+
+// ============================================================================
+// Event Types
+// ============================================================================
+
+/**
+ * Event data for 'rowcreate' event
+ */
+export interface RowCreateEvent {
+    filteredRowIndex: number;
+    rowIndex: number;
+    rowEl: HTMLElement;
+    rowData: RowData;
+}
+
+/**
+ * Event data for 'rowclick' event
+ */
+export interface RowClickEvent {
+    event: MouseEvent;
+    filteredRowIndex: number;
+    rowIndex: number;
+    rowEl: HTMLElement;
+    rowData: RowData;
+}
+
+/**
+ * Event data for 'cellpreview' event
+ */
+export interface CellPreviewEvent {
+    el: Element | null;
+    name: string;
+    rowIndex: number | null;
+    rowData: RowData | null;
+    cell: HTMLElement;
+    cellEl: HTMLElement;
+}
+
+/**
+ * Event data for 'cellpreviewdestroy' event
+ */
+export interface CellPreviewDestroyEvent {
+    el: ChildNode | null;
+    name: string;
+    rowIndex: number | null;
+    rowData: RowData | null;
+    cell: HTMLElement | null;
+    cellEl: ChildNode | null;
+}
+
+/**
+ * Event data for 'headercontextmenu' event
+ */
+export interface HeaderContextMenuEvent {
+    columnName: string;
+    pageX: number;
+    pageY: number;
+    bounds: {
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+    };
+}
+
+/**
+ * Event data for 'movecolumn' event
+ */
+export interface MoveColumnEvent {
+    name: string;
+    src: number;
+    dest: number;
+}
+
+/**
+ * Event data for 'columnwidth' event
+ */
+export interface ColumnWidthEvent {
+    name: string;
+    width: number;
+    oldWidth: number;
+}
+
+/**
+ * Event data for 'addrows' event
+ */
+export interface AddRowsEvent {
+    count: number;
+    clear: boolean;
+}
+
+/**
+ * Event data for 'sort' event
+ */
+export interface SortEvent {
+    sorts: SerializedColumnSort[];
+    resort?: boolean;
+}
+
+/**
+ * Map of all DGTable events to their data types.
+ * Used for type-safe event handlers with autocompletion.
+ */
+export interface DGTableEventMap {
+    // Rendering events
+    'render': undefined;
+    'renderskeleton': undefined;
+
+    // Row events
+    'rowcreate': RowCreateEvent;
+    'rowclick': RowClickEvent;
+    'rowdestroy': HTMLElement;
+
+    // Cell preview events
+    'cellpreview': CellPreviewEvent;
+    'cellpreviewdestroy': CellPreviewDestroyEvent;
+
+    // Header events
+    'headerrowcreate': HTMLElement;
+    'headercontextmenu': HeaderContextMenuEvent;
+
+    // Column events
+    'addcolumn': string;
+    'removecolumn': string;
+    'movecolumn': MoveColumnEvent;
+    'showcolumn': string;
+    'hidecolumn': string;
+    'columnwidth': ColumnWidthEvent;
+
+    // Data events
+    'addrows': AddRowsEvent;
+    'sort': SortEvent;
+    'filter': unknown;
+    'filterclear': Record<string, never>;
+}
+

package/src/util.ts

@@ -0,0 +1,27 @@
+/**
+ * Find an element in an array using a predicate function
+ */
+export function find<T>(
+    array: T[],
+    predicate: (item: T, index: number, array: T[]) => boolean
+): T | undefined {
+    for (let i = 0, len = array.length; i >= 0 && i < len; i += 1) {
+        if (predicate(array[i], i, array))
+            return array[i];
+    }
+    return undefined;
+}
+
+/**
+ * Encode text for safe HTML display
+ */
+export function htmlEncode(text: string): string {
+    return text
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/'/g, '&#39;')
+        .replace(/"/g, '&quot;')
+        .replace(/\n/g, '<br />');
+}
+

package/tsconfig.json

@@ -0,0 +1,38 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "strict": true,
+    "noImplicitAny": true,
+    "strictNullChecks": false,
+    "strictFunctionTypes": true,
+    "strictBindCallApply": true,
+    "strictPropertyInitialization": false,
+    "noImplicitThis": true,
+    "useUnknownInCatchVariables": false,
+    "alwaysStrict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noImplicitReturns": false,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedIndexedAccess": false,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "skipLibCheck": true,
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}
+

package/src/SelectionHelper.js

@@ -1,65 +0,0 @@
-/* eslint-env browser */
-
-'use strict';
-
-// saveSelection/restoreSelection courtesy of Tim Down, with my improvements
-// https://stackoverflow.com/questions/13949059/persisting-the-changes-of-range-objects-after-selection-in-html/13950376#13950376
-
-function isChildOf(child, parent) {
-  while ((child = child.parentNode) && child !== parent);
-  return !!child;
-}
-
-class SelectionHelper {
-
-    static saveSelection(el) {
-        let range = window.getSelection().getRangeAt(0);
-
-        if (el !== range.commonAncestorContainer && !isChildOf(range.commonAncestorContainer, el))
-            return null;
-
-        let preSelectionRange = range.cloneRange();
-        preSelectionRange.selectNodeContents(el);
-        preSelectionRange.setEnd(range.startContainer, range.startOffset);
-        let start = preSelectionRange.toString().length;
-
-        return {
-            start: start,
-            end: start + range.toString().length,
-        };
-    }
-
-    static restoreSelection(el, savedSel) {
-        let charIndex = 0;
-        let nodeStack = [el], node, foundStart = false, stop = false;
-        let range = document.createRange();
-        range.setStart(el, 0);
-        range.collapse(true);
-
-        while (!stop && (node = nodeStack.pop())) {
-            if (node.nodeType === 3) {
-                let nextCharIndex = charIndex + node.length;
-                if (!foundStart && savedSel.start >= charIndex && savedSel.start <= nextCharIndex) {
-                    range.setStart(node, savedSel.start - charIndex);
-                    foundStart = true;
-                }
-                if (foundStart && savedSel.end >= charIndex && savedSel.end <= nextCharIndex) {
-                    range.setEnd(node, savedSel.end - charIndex);
-                    stop = true;
-                }
-                charIndex = nextCharIndex;
-            } else {
-                let i = node.childNodes.length;
-                while (i--) {
-                    nodeStack.push(node.childNodes[i]);
-                }
-            }
-        }
-
-        let sel = window.getSelection();
-        sel.removeAllRanges();
-        sel.addRange(range);
-    }
-}
-
-export default SelectionHelper;

package/src/by_column_filter.js

@@ -1,25 +0,0 @@
-'use strict';
-
-function ByColumnFilter (row, args) {
-    
-    let column = args.column;
-    let keyword = args.keyword == null ? '' : args.keyword.toString();
-    
-    if (!keyword || !column) return true;
-
-    let actualVal = row[column];
-    if (actualVal == null) {
-        return false;
-    }
-    
-    actualVal = actualVal.toString();
-    
-    if (!args.caseSensitive) {
-        actualVal = actualVal.toLowerCase();
-        keyword = keyword.toLowerCase();
-    }
-    
-    return actualVal.indexOf(keyword) !== -1;
-}
-
-export default ByColumnFilter;