@ackplus/react-tanstack-data-table 1.0.19-beta-0.7 → 1.0.19-beta-0.8

package/src/lib/types/table.types.d.ts

@@ -0,0 +1,63 @@
+import { SortingState } from '@tanstack/react-table';
+import { ColumnFilterRule, SelectionState } from '../features';
+export type TableSize = 'small' | 'medium';
+export interface TableState {
+    customColumnsFilter: CustomColumnFilterState;
+    selectionState?: SelectionState;
+    globalFilter?: string;
+    sorting?: SortingState;
+    pagination?: {
+        pageIndex: number;
+        pageSize: number;
+    };
+    columnOrder?: string[];
+    columnPinning?: {
+        left?: string[];
+        right?: string[];
+    };
+    columnVisibility?: Record<string, boolean>;
+    columnSizing?: Record<string, number>;
+}
+export interface TableFilters {
+    globalFilter: string;
+    customColumnsFilter: CustomColumnFilterState;
+    sorting: SortingState;
+    pagination: {
+        pageIndex: number;
+        pageSize: number;
+    };
+    columnOrder: string[];
+    columnPinning: {
+        left?: string[];
+        right?: string[];
+    };
+}
+export interface TableFiltersForFetch {
+    search?: string;
+    page?: number;
+    pageSize?: number;
+    sorting?: SortingState;
+    customColumnsFilter?: CustomColumnFilterState;
+}
+export interface CustomColumnFilterState {
+    filters: ColumnFilterRule[];
+    logic: 'AND' | 'OR';
+    pendingFilters: ColumnFilterRule[];
+    pendingLogic: 'AND' | 'OR';
+}
+export interface TablePerformanceMetrics {
+    renderTime: number;
+    dataProcessingTime: number;
+    totalRows: number;
+    visibleRows: number;
+    memoryUsage?: number;
+}
+export interface TableMetrics {
+    totalRows: number;
+    visibleRows: number;
+    totalColumns?: number;
+    visibleColumns?: number;
+    pinnedColumns?: number;
+    renderTime: number;
+    lastUpdated?: Date;
+}

package/src/lib/types/table.types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/src/lib/utils/column-helpers.d.ts

@@ -0,0 +1,7 @@
+import { DataTableColumn } from '../types';
+import { Column } from "@tanstack/react-table";
+export type ColumnType = 'text' | 'number' | 'date' | 'boolean' | 'select' | 'actions';
+export declare function getColumnType(column: Column<any, unknown>): ColumnType;
+export declare function getCustomFilterComponent(column: Column<any, unknown>): any;
+export declare function getColumnOptions(column: Column<any, unknown>): any[];
+export declare function isColumnFilterable(column: DataTableColumn<any, unknown>): boolean;

package/src/lib/utils/column-helpers.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getColumnType = getColumnType;
+exports.getCustomFilterComponent = getCustomFilterComponent;
+exports.getColumnOptions = getColumnOptions;
+exports.isColumnFilterable = isColumnFilterable;
+function getColumnType(column) {
+    var _a;
+    if ((_a = column === null || column === void 0 ? void 0 : column.columnDef) === null || _a === void 0 ? void 0 : _a.type) {
+        return column.columnDef.type;
+    }
+    return 'text';
+}
+function getCustomFilterComponent(column) {
+    var _a, _b;
+    return ((_a = column === null || column === void 0 ? void 0 : column.columnDef) === null || _a === void 0 ? void 0 : _a.filterComponent) || ((_b = column === null || column === void 0 ? void 0 : column.columnDef) === null || _b === void 0 ? void 0 : _b.editComponent);
+}
+function getColumnOptions(column) {
+    var _a;
+    if ((_a = column === null || column === void 0 ? void 0 : column.columnDef) === null || _a === void 0 ? void 0 : _a.options) {
+        return (column === null || column === void 0 ? void 0 : column.columnDef.options) || [];
+    }
+    const columnType = getColumnType(column);
+    if (columnType === 'boolean') {
+        return [
+            {
+                value: true,
+                label: 'Yes',
+            },
+            {
+                value: false,
+                label: 'No',
+            },
+        ];
+    }
+    return [];
+}
+function isColumnFilterable(column) {
+    if ((column === null || column === void 0 ? void 0 : column.filterable) !== undefined) {
+        return column === null || column === void 0 ? void 0 : column.filterable;
+    }
+    return true;
+}

package/src/lib/utils/debounced-fetch.utils.d.ts

@@ -0,0 +1,11 @@
+import { TableFiltersForFetch } from '../types';
+export declare function useDebouncedFetch<T extends Record<string, any>>(onFetchData: ((filters: TableFiltersForFetch) => Promise<{
+    data: T[];
+    total: number;
+}>) | undefined, delay?: number): {
+    debouncedFetch: (filters: TableFiltersForFetch) => Promise<{
+        data: T[];
+        total: number;
+    }>;
+    isLoading: boolean;
+};

package/src/lib/utils/debounced-fetch.utils.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDebouncedFetch = useDebouncedFetch;
+const tslib_1 = require("tslib");
+const react_1 = require("react");
+function useDebouncedFetch(onFetchData, delay = 300) {
+    const [isLoading, setIsLoading] = (0, react_1.useState)(false);
+    const debounceTimer = (0, react_1.useRef)(null);
+    const lastFetchParams = (0, react_1.useRef)('');
+    const debouncedFetch = (0, react_1.useCallback)((filters) => tslib_1.__awaiter(this, void 0, void 0, function* () {
+        if (!onFetchData)
+            return null;
+        const currentParams = JSON.stringify(filters);
+        if (debounceTimer.current) {
+            clearTimeout(debounceTimer.current);
+        }
+        return new Promise((resolve) => {
+            debounceTimer.current = setTimeout(() => tslib_1.__awaiter(this, void 0, void 0, function* () {
+                if (lastFetchParams.current === currentParams) {
+                    resolve(null);
+                    return;
+                }
+                lastFetchParams.current = currentParams;
+                setIsLoading(true);
+                try {
+                    const result = yield onFetchData(filters);
+                    resolve(result);
+                }
+                catch (error) {
+                    resolve(null);
+                }
+                finally {
+                    setIsLoading(false);
+                }
+            }), delay);
+        });
+    }), [onFetchData, delay]);
+    (0, react_1.useEffect)(() => {
+        return () => {
+            if (debounceTimer.current) {
+                clearTimeout(debounceTimer.current);
+            }
+        };
+    }, []);
+    return {
+        debouncedFetch,
+        isLoading,
+    };
+}

package/src/lib/utils/export-utils.d.ts

@@ -0,0 +1,30 @@
+import { Table } from '@tanstack/react-table';
+import { SelectionState } from '../features/custom-selection.feature';
+export interface ExportOptions {
+    format: 'csv' | 'excel';
+    filename: string;
+    onProgress?: (progress: {
+        processedRows: number;
+        totalRows: number;
+        percentage: number;
+    }) => void;
+    onComplete?: (result: {
+        success: boolean;
+        filename: string;
+        totalRows: number;
+    }) => void;
+    onError?: (error: {
+        message: string;
+        code: string;
+    }) => void;
+}
+export interface ServerExportOptions extends ExportOptions {
+    fetchData: (filters?: any, selection?: SelectionState) => Promise<{
+        data: any[];
+        total: number;
+    }>;
+    currentFilters?: any;
+    selection?: SelectionState;
+}
+export declare function exportClientData<TData>(table: Table<TData>, options: ExportOptions): Promise<void>;
+export declare function exportServerData<TData>(table: Table<TData>, options: ServerExportOptions): Promise<void>;

package/src/lib/utils/export-utils.js

@@ -0,0 +1,152 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.exportClientData = exportClientData;
+exports.exportServerData = exportServerData;
+const tslib_1 = require("tslib");
+const XLSX = tslib_1.__importStar(require("xlsx"));
+function exportClientData(table, options) {
+    return tslib_1.__awaiter(this, void 0, void 0, function* () {
+        const { format, filename, onProgress, onComplete, onError } = options;
+        try {
+            const selectedRows = table.getSelectedRows ? table.getSelectedRows() : [];
+            const hasSelectedRows = selectedRows.length > 0;
+            const rowsToExport = hasSelectedRows ? selectedRows : table.getFilteredRowModel().rows;
+            const exportData = rowsToExport.map((row, index) => {
+                onProgress === null || onProgress === void 0 ? void 0 : onProgress({
+                    processedRows: index + 1,
+                    totalRows: rowsToExport.length,
+                    percentage: Math.round(((index + 1) / rowsToExport.length) * 100),
+                });
+                const rowData = {};
+                row.getVisibleCells().forEach(cell => {
+                    const header = typeof cell.column.columnDef.header === 'string'
+                        ? cell.column.columnDef.header
+                        : cell.column.id;
+                    rowData[header] = cell.getValue() || '';
+                });
+                return rowData;
+            });
+            yield exportToFile(exportData, format, filename);
+            onComplete === null || onComplete === void 0 ? void 0 : onComplete({
+                success: true,
+                filename: `${filename}.${format === 'excel' ? 'xlsx' : 'csv'}`,
+                totalRows: exportData.length,
+            });
+        }
+        catch (error) {
+            console.error('Client export failed:', error);
+            onError === null || onError === void 0 ? void 0 : onError({
+                message: error instanceof Error ? error.message : 'Export failed',
+                code: 'CLIENT_EXPORT_ERROR',
+            });
+        }
+    });
+}
+function exportServerData(table, options) {
+    return tslib_1.__awaiter(this, void 0, void 0, function* () {
+        const { format, filename, fetchData, currentFilters, selection, onProgress, onComplete, onError } = options;
+        try {
+            onProgress === null || onProgress === void 0 ? void 0 : onProgress({
+                processedRows: 0,
+                totalRows: 0,
+                percentage: 0,
+            });
+            const { data } = yield fetchData(currentFilters, selection);
+            if (!data || !Array.isArray(data)) {
+                throw new Error('Invalid data received from server');
+            }
+            const visibleColumns = table.getVisibleLeafColumns().filter(col => col.getIsVisible());
+            const exportData = data.map((rowData, index) => {
+                onProgress === null || onProgress === void 0 ? void 0 : onProgress({
+                    processedRows: index + 1,
+                    totalRows: data.length,
+                    percentage: Math.round(((index + 1) / data.length) * 100),
+                });
+                const exportRow = {};
+                visibleColumns.forEach(column => {
+                    const columnId = column.id;
+                    const header = typeof column.columnDef.header === 'string'
+                        ? column.columnDef.header
+                        : columnId;
+                    let value = rowData[columnId];
+                    const columnDef = column.columnDef;
+                    if (columnDef.accessorFn && typeof columnDef.accessorFn === 'function') {
+                        value = columnDef.accessorFn(rowData);
+                    }
+                    if (value === null || value === undefined) {
+                        value = '';
+                    }
+                    else if (typeof value === 'object') {
+                        value = JSON.stringify(value);
+                    }
+                    else {
+                        value = String(value);
+                    }
+                    exportRow[header] = value;
+                });
+                return exportRow;
+            });
+            yield exportToFile(exportData, format, filename);
+            onComplete === null || onComplete === void 0 ? void 0 : onComplete({
+                success: true,
+                filename: `${filename}.${format === 'excel' ? 'xlsx' : 'csv'}`,
+                totalRows: exportData.length,
+            });
+        }
+        catch (error) {
+            console.error('Server export failed:', error);
+            onError === null || onError === void 0 ? void 0 : onError({
+                message: error instanceof Error ? error.message : 'Export failed',
+                code: 'SERVER_EXPORT_ERROR',
+            });
+        }
+    });
+}
+function exportToFile(data, format, filename) {
+    return tslib_1.__awaiter(this, void 0, void 0, function* () {
+        if (data.length === 0) {
+            throw new Error('No data to export');
+        }
+        if (format === 'csv') {
+            const csv = convertToCSV(data);
+            downloadFile(csv, `${filename}.csv`, 'text/csv');
+        }
+        else {
+            const workbook = XLSX.utils.book_new();
+            const worksheet = XLSX.utils.json_to_sheet(data);
+            XLSX.utils.book_append_sheet(workbook, worksheet, 'Data');
+            const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
+            const blob = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
+            downloadFile(blob, `${filename}.xlsx`, 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
+        }
+    });
+}
+function convertToCSV(data) {
+    if (data.length === 0)
+        return '';
+    const headers = Object.keys(data[0]);
+    const csvRows = [headers.join(',')];
+    for (const row of data) {
+        const values = headers.map(header => {
+            const value = row[header] || '';
+            if (typeof value === 'string' && (value.includes(',') || value.includes('"') || value.includes('\n'))) {
+                return `"${value.replace(/"/g, '""')}"`;
+            }
+            return value;
+        });
+        csvRows.push(values.join(','));
+    }
+    return csvRows.join('\n');
+}
+function downloadFile(content, filename, mimeType) {
+    const blob = content instanceof Blob ? content : new Blob([content], { type: mimeType });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = filename;
+    link.style.display = 'none';
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+}

package/src/lib/utils/index.d.ts

@@ -0,0 +1,7 @@
+export * from './styling-helpers';
+export * from './table-helpers';
+export * from './column-helpers';
+export * from './export-utils';
+export * from './special-columns.utils';
+export * from './debounced-fetch.utils';
+export * from './slot-helpers';

package/src/lib/utils/index.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./styling-helpers"), exports);
+tslib_1.__exportStar(require("./table-helpers"), exports);
+tslib_1.__exportStar(require("./column-helpers"), exports);
+tslib_1.__exportStar(require("./export-utils"), exports);
+tslib_1.__exportStar(require("./special-columns.utils"), exports);
+tslib_1.__exportStar(require("./debounced-fetch.utils"), exports);
+tslib_1.__exportStar(require("./slot-helpers"), exports);

package/src/lib/utils/slot-helpers.d.ts

@@ -0,0 +1,9 @@
+import { ComponentType } from 'react';
+import { DataTableSlots } from '../types/slots.types';
+export declare function getSlotComponent<T, K extends keyof DataTableSlots<T>>(slots: Partial<DataTableSlots<T>> | undefined, slotName: K, fallback: ComponentType<any>): ComponentType<any>;
+export declare function renderSlot(slotComponent: ComponentType<any>, defaultProps: any, slotProps?: any): import("react/jsx-runtime").JSX.Element;
+export declare function createSlottableComponent<T, K extends keyof DataTableSlots<T>>(slotName: K, defaultComponent: ComponentType<any>): (props: {
+    slots?: Partial<DataTableSlots<T>>;
+    slotProps?: any;
+    componentProps: any;
+}) => import("react/jsx-runtime").JSX.Element;

package/src/lib/utils/slot-helpers.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSlotComponent = getSlotComponent;
+exports.renderSlot = renderSlot;
+exports.createSlottableComponent = createSlottableComponent;
+const jsx_runtime_1 = require("react/jsx-runtime");
+function getSlotComponent(slots, slotName, fallback) {
+    return (slots === null || slots === void 0 ? void 0 : slots[slotName]) || fallback;
+}
+function renderSlot(slotComponent, defaultProps, slotProps) {
+    const mergedProps = Object.assign(Object.assign({}, defaultProps), slotProps);
+    const Component = slotComponent;
+    return (0, jsx_runtime_1.jsx)(Component, Object.assign({}, mergedProps));
+}
+function createSlottableComponent(slotName, defaultComponent) {
+    return function SlottableComponent(props) {
+        var _a;
+        const SlotComponent = getSlotComponent(props.slots, slotName, defaultComponent);
+        return renderSlot(SlotComponent, props.componentProps, (_a = props.slotProps) === null || _a === void 0 ? void 0 : _a[slotName]);
+    };
+}

package/src/lib/utils/special-columns.utils.d.ts

@@ -0,0 +1,6 @@
+import { DataTableColumn } from '../types';
+export interface SelectionColumnConfig<T> {
+    multiSelect?: boolean;
+}
+export declare const createSelectionColumn: <T>(config: Partial<DataTableColumn<T>> & SelectionColumnConfig<T>) => DataTableColumn<T>;
+export declare const createExpandingColumn: <T>(config: Partial<DataTableColumn<T>>) => DataTableColumn<T>;

package/src/lib/utils/special-columns.utils.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createExpandingColumn = exports.createSelectionColumn = void 0;
+const icons_material_1 = require("@mui/icons-material");
+const material_1 = require("@mui/material");
+const react_1 = require("react");
+const types_1 = require("../types");
+const createSelectionColumn = (config) => (Object.assign({ id: types_1.DEFAULT_SELECTION_COLUMN_NAME, size: 60, align: 'center', filterable: false, enableResizing: false, enableSorting: false, enableHiding: false, enablePinning: false, hideInExport: true, header: ({ table }) => {
+        var _a, _b;
+        if (!config.multiSelect)
+            return null;
+        const allSelected = ((_a = table.getIsAllRowsSelected) === null || _a === void 0 ? void 0 : _a.call(table)) || false;
+        const someSelected = ((_b = table.getIsSomeRowsSelected) === null || _b === void 0 ? void 0 : _b.call(table)) || false;
+        return (0, react_1.createElement)(material_1.Checkbox, {
+            checked: allSelected,
+            indeterminate: someSelected && !allSelected,
+            disabled: false,
+            onChange: () => {
+                var _a;
+                (_a = table.toggleAllRowsSelected) === null || _a === void 0 ? void 0 : _a.call(table);
+            },
+            size: 'small',
+            sx: { p: 0 },
+        });
+    }, cell: ({ row, table }) => {
+        var _a, _b, _c;
+        const rowId = row.id;
+        const checked = ((_a = table.getIsRowSelected) === null || _a === void 0 ? void 0 : _a.call(table, rowId)) || false;
+        const canSelect = (_c = (_b = table.canSelectRow) === null || _b === void 0 ? void 0 : _b.call(table, rowId)) !== null && _c !== void 0 ? _c : true;
+        return (0, react_1.createElement)(material_1.Checkbox, {
+            checked,
+            disabled: !canSelect,
+            onChange: () => {
+                var _a;
+                if (canSelect) {
+                    (_a = table.toggleRowSelected) === null || _a === void 0 ? void 0 : _a.call(table, rowId);
+                }
+            },
+            size: 'small',
+            sx: {
+                p: 0,
+                opacity: canSelect ? 1 : 0.5
+            },
+        });
+    } }, config));
+exports.createSelectionColumn = createSelectionColumn;
+const createExpandingColumn = (config) => (Object.assign({ id: types_1.DEFAULT_EXPANDING_COLUMN_NAME, size: 60, align: 'center', filterable: false, enableResizing: false, enableSorting: false, enableHiding: false, enablePinning: false, hideInExport: true, header: '', cell: ({ row }) => (0, react_1.createElement)(material_1.IconButton, {
+        onClick: row.getToggleExpandedHandler(),
+        size: 'small',
+        sx: { p: 0 },
+    }, row.getIsExpanded() ? (0, react_1.createElement)(icons_material_1.KeyboardArrowUpOutlined) : (0, react_1.createElement)(icons_material_1.KeyboardArrowDownOutlined)) }, config));
+exports.createExpandingColumn = createExpandingColumn;

package/src/lib/utils/styling-helpers.d.ts

@@ -0,0 +1,36 @@
+import type { DataTableColumn, PinnedColumnStyleOptions } from '../types';
+export declare function getPinnedColumnStyle(options: PinnedColumnStyleOptions): {
+    boxShadow: string;
+    backgroundColor: string;
+    left?: number;
+    right?: number;
+    zIndex?: number;
+    width: string | number;
+    maxWidth: string | number;
+    overflow: string;
+    whiteSpace: string;
+};
+export declare const tableCellStyles: {
+    readonly sticky: {
+        readonly position: "sticky";
+        readonly zIndex: 10;
+        readonly backgroundColor: "background.paper";
+    };
+    readonly pinned: {
+        readonly borderRight: "1px solid";
+        readonly borderColor: "divider";
+    };
+};
+export declare const tableRowStyles: {
+    readonly hover: {
+        readonly '&:hover': {
+            readonly backgroundColor: "action.hover";
+        };
+    };
+    readonly striped: {
+        readonly '&:nth-of-type(odd)': {
+            readonly backgroundColor: "action.selected";
+        };
+    };
+};
+export declare function getColumnAlignment(column?: DataTableColumn<any>): 'left' | 'center' | 'right';

package/src/lib/utils/styling-helpers.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.tableRowStyles = exports.tableCellStyles = void 0;
+exports.getPinnedColumnStyle = getPinnedColumnStyle;
+exports.getColumnAlignment = getColumnAlignment;
+const getBoxShadow = (isPinned, isLastLeftPinnedColumn, isFirstRightPinnedColumn) => {
+    if (isPinned === 'left' && isLastLeftPinnedColumn) {
+        return '1px 0 3px rgba(0, 0, 0, 0.12)';
+    }
+    if (isPinned === 'right' && isFirstRightPinnedColumn) {
+        return '-1px 0 3px rgba(0, 0, 0, 0.12)';
+    }
+    return 'none';
+};
+function getPinnedColumnStyle(options) {
+    const { width = 'auto', isPinned, pinnedPosition, pinnedRightPosition, isLastLeftPinnedColumn, isFirstRightPinnedColumn, zIndex = 1, disableStickyHeader = false, } = options;
+    const needsPinnedPositioning = isPinned;
+    const shouldBeSticky = isPinned;
+    let positionStyle = {};
+    if (shouldBeSticky) {
+        positionStyle = { position: 'sticky' };
+    }
+    else if (!disableStickyHeader) {
+        positionStyle = { position: 'relative' };
+    }
+    return Object.assign(Object.assign(Object.assign(Object.assign({ width, maxWidth: width, overflow: 'hidden', whiteSpace: 'nowrap' }, positionStyle), (needsPinnedPositioning ? {
+        left: isPinned === 'left' ? pinnedPosition : undefined,
+        right: isPinned === 'right' ? pinnedRightPosition : undefined,
+        zIndex,
+    } : {})), (isPinned && {
+        backgroundColor: 'background.paper',
+    })), { boxShadow: getBoxShadow(isPinned, !!isLastLeftPinnedColumn, !!isFirstRightPinnedColumn) });
+}
+exports.tableCellStyles = {
+    sticky: {
+        position: 'sticky',
+        zIndex: 10,
+        backgroundColor: 'background.paper',
+    },
+    pinned: {
+        borderRight: '1px solid',
+        borderColor: 'divider',
+    },
+};
+exports.tableRowStyles = {
+    hover: {
+        '&:hover': {
+            backgroundColor: 'action.hover',
+        },
+    },
+    striped: {
+        '&:nth-of-type(odd)': {
+            backgroundColor: 'action.selected',
+        },
+    },
+};
+function getColumnAlignment(column) {
+    if (!column)
+        return 'left';
+    return column.align || 'left';
+}

package/src/lib/utils/table-helpers.d.ts

@@ -0,0 +1,9 @@
+import type { TableMetrics } from '../types';
+export type DataTableSize = 'small' | 'medium';
+export declare function calculateSkeletonRows(containerHeight: number, rowHeight: number, maxRows?: number): number;
+export declare function generateRowId<T>(row: T, index: number, idKey?: keyof T): string;
+export declare function calculatePinnedColumnsWidth(columns: any[], side: 'left' | 'right'): number;
+export declare function shouldUseFixedLayout(fitToScreen: boolean, enableColumnResizing: boolean, totalColumns: number): boolean;
+export declare function formatCellValue(value: any, type: string): string;
+export declare function debounce<T extends (...args: any[]) => any>(func: T, wait: number): (...args: Parameters<T>) => void;
+export declare function calculateTableMetrics(totalRows: number, visibleRows: number, columns: any[], renderStartTime: number): TableMetrics;

package/src/lib/utils/table-helpers.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.calculateSkeletonRows = calculateSkeletonRows;
+exports.generateRowId = generateRowId;
+exports.calculatePinnedColumnsWidth = calculatePinnedColumnsWidth;
+exports.shouldUseFixedLayout = shouldUseFixedLayout;
+exports.formatCellValue = formatCellValue;
+exports.debounce = debounce;
+exports.calculateTableMetrics = calculateTableMetrics;
+function calculateSkeletonRows(containerHeight, rowHeight, maxRows = 10) {
+    const estimatedRows = Math.ceil(containerHeight / rowHeight);
+    return Math.min(estimatedRows, maxRows);
+}
+function generateRowId(row, index, idKey) {
+    if (idKey && row[idKey]) {
+        return String(row[idKey]);
+    }
+    return `row-${index}`;
+}
+function calculatePinnedColumnsWidth(columns, side) {
+    return columns
+        .filter(col => col.getIsPinned() === side)
+        .reduce((total, col) => total + (col.getSize() || 0), 0);
+}
+function shouldUseFixedLayout(fitToScreen, enableColumnResizing, totalColumns) {
+    return fitToScreen || (enableColumnResizing && totalColumns > 5);
+}
+function formatCellValue(value, type) {
+    if (value === null || value === undefined) {
+        return '-';
+    }
+    switch (type) {
+        case 'date':
+            return value instanceof Date ? value.toLocaleDateString() : String(value);
+        case 'number':
+            return typeof value === 'number' ? value.toLocaleString() : String(value);
+        case 'boolean':
+            return value ? 'Yes' : 'No';
+        default:
+            return String(value);
+    }
+}
+function debounce(func, wait) {
+    let timeout;
+    return (...args) => {
+        clearTimeout(timeout);
+        timeout = setTimeout(() => func(...args), wait);
+    };
+}
+function calculateTableMetrics(totalRows, visibleRows, columns, renderStartTime) {
+    return {
+        totalRows,
+        visibleRows,
+        pinnedColumns: columns.filter(col => col.getIsPinned()).length,
+        renderTime: performance.now() - renderStartTime,
+    };
+}

package/tsconfig.tsbuildinfo

@@ -0,0 +1 @@
+{"version":"5.8.3"}