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

package/src/lib/components/table/data-table.js

@@ -0,0 +1,492 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataTable = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const react_table_1 = require("@tanstack/react-table");
+const custom_column_filter_feature_1 = require("../../features/custom-column-filter.feature");
+const features_1 = require("../../features");
+const react_virtual_1 = require("@tanstack/react-virtual");
+const react_1 = require("react");
+const data_table_context_1 = require("../../contexts/data-table-context");
+const use_data_table_api_1 = require("../../hooks/use-data-table-api");
+const utils_1 = require("../../utils");
+const debounced_fetch_utils_1 = require("../../utils/debounced-fetch.utils");
+const slot_helpers_1 = require("../../utils/slot-helpers");
+const headers_1 = require("../headers");
+const pagination_1 = require("../pagination");
+const rows_1 = require("../rows");
+const toolbar_1 = require("../toolbar");
+const special_columns_utils_1 = require("../../utils/special-columns.utils");
+const DEFAULT_INITIAL_STATE = {
+    sorting: [],
+    pagination: {
+        pageIndex: 0,
+        pageSize: 10,
+    },
+    rowSelection: {},
+    globalFilter: '',
+    expanded: {},
+    columnOrder: [],
+    columnPinning: {
+        left: [],
+        right: [],
+    },
+    customColumnFilter: {
+        filters: [],
+        logic: 'AND',
+        pendingFilters: [],
+        pendingLogic: 'AND',
+    },
+};
+exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, columns, data = [], totalRow = 0, idKey = 'id', extraFilter = null, footerFilter = null, dataMode = 'client', initialLoadData = true, onFetchData, onDataStateChange, enableRowSelection = false, enableMultiRowSelection = true, selectMode = 'page', isRowSelectable, onSelectionChange, enableBulkActions = false, bulkActions = null, enableColumnResizing = false, columnResizeMode = 'onChange', enableColumnDragging = false, onColumnDragEnd, enableColumnPinning = false, onColumnPinningChange, enableExpanding = false, getRowCanExpand, renderSubComponent, enablePagination = true, paginationMode = 'client', enableGlobalFilter = true, enableColumnFilter = false, filterMode = 'client', enableSorting = true, sortingMode = 'client', onSortingChange, exportFilename = 'export', onExportProgress, onExportComplete, onExportError, onServerExport, onExportCancel, enableHover = true, enableStripes = false, tableContainerProps = {}, tableProps = {}, fitToScreen = true, tableSize: initialTableSize = 'medium', enableStickyHeaderOrFooter = false, maxHeight = '400px', enableVirtualization = false, estimateRowHeight = 52, enableColumnVisibility = true, enableTableSizeControl = true, enableExport = true, enableReset = true, loading = false, emptyMessage = 'No data available', skeletonRows = 5, onColumnFiltersChange, onDataChange, slots = {}, slotProps = {}, }, ref) {
+    var _a;
+    const isServerMode = dataMode === 'server';
+    const isServerPagination = paginationMode === 'server' || isServerMode;
+    const isServerFiltering = filterMode === 'server' || isServerMode;
+    const isServerSorting = sortingMode === 'server' || isServerMode;
+    const tableContainerRef = (0, react_1.useRef)(null);
+    const initialStateConfig = (0, react_1.useMemo)(() => {
+        return Object.assign(Object.assign({}, DEFAULT_INITIAL_STATE), initialState);
+    }, [initialState]);
+    const [sorting, setSorting] = (0, react_1.useState)(initialStateConfig.sorting);
+    const [pagination, setPagination] = (0, react_1.useState)(initialStateConfig.pagination);
+    const [globalFilter, setGlobalFilter] = (0, react_1.useState)(initialStateConfig.globalFilter);
+    const [selectionState, setSelectionState] = (0, react_1.useState)((initialState === null || initialState === void 0 ? void 0 : initialState.selectionState) || { ids: [], type: 'include' });
+    const [customColumnsFilter, setCustomColumnsFilter] = (0, react_1.useState)({
+        filters: [],
+        logic: 'AND',
+        pendingFilters: [],
+        pendingLogic: 'AND'
+    });
+    const [expanded, setExpanded] = (0, react_1.useState)(initialStateConfig.expanded);
+    const [tableSize, setTableSize] = (0, react_1.useState)(initialTableSize);
+    const [columnOrder, setColumnOrder] = (0, react_1.useState)(initialStateConfig.columnOrder);
+    const [columnPinning, setColumnPinning] = (0, react_1.useState)(initialStateConfig.columnPinning);
+    const internalApiRef = (0, react_1.useRef)(null);
+    const { debouncedFetch, isLoading: fetchLoading } = (0, debounced_fetch_utils_1.useDebouncedFetch)(onFetchData);
+    const [serverData, setServerData] = (0, react_1.useState)([]);
+    const [serverTotal, setServerTotal] = (0, react_1.useState)(0);
+    const fetchData = (0, react_1.useCallback)((...args_1) => tslib_1.__awaiter(this, [...args_1], void 0, function* (overrides = {}) {
+        if (!onFetchData)
+            return;
+        const filters = Object.assign({ globalFilter,
+            pagination,
+            customColumnsFilter,
+            sorting }, overrides);
+        const result = yield debouncedFetch(filters);
+        if ((result === null || result === void 0 ? void 0 : result.data) && (result === null || result === void 0 ? void 0 : result.total) !== undefined) {
+            setServerData(result.data);
+            setServerTotal(result.total);
+        }
+    }), [
+        onFetchData,
+        globalFilter,
+        pagination,
+        customColumnsFilter,
+        sorting,
+        debouncedFetch,
+    ]);
+    const fetchDataRef = (0, react_1.useRef)(fetchData);
+    fetchDataRef.current = fetchData;
+    const tableData = (0, react_1.useMemo)(() => onFetchData ? serverData : data, [onFetchData, serverData, data]);
+    const tableTotalRow = (0, react_1.useMemo)(() => onFetchData ? serverTotal : totalRow, [onFetchData, serverTotal, totalRow]);
+    const tableLoading = (0, react_1.useMemo)(() => onFetchData ? (loading || fetchLoading) : loading, [onFetchData, loading, fetchLoading]);
+    const handleSelectionStateChange = (0, react_1.useCallback)((updaterOrValue) => {
+        setSelectionState((prevState) => {
+            const newSelectionState = typeof updaterOrValue === 'function'
+                ? updaterOrValue(prevState)
+                : updaterOrValue;
+            if (onSelectionChange) {
+                onSelectionChange(newSelectionState);
+            }
+            return newSelectionState;
+        });
+    }, [onSelectionChange]);
+    const handleColumnFilterStateChange = (0, react_1.useCallback)((filterState) => {
+        if (filterState && typeof filterState === 'object') {
+            setCustomColumnsFilter(filterState);
+            if (onColumnFiltersChange) {
+                onColumnFiltersChange(filterState);
+            }
+        }
+    }, [
+        onColumnFiltersChange,
+    ]);
+    const enhancedColumns = (0, react_1.useMemo)(() => {
+        let columnsMap = [...columns];
+        if (enableExpanding) {
+            const expandingColumnMap = (0, special_columns_utils_1.createExpandingColumn)(Object.assign({}, ((slotProps === null || slotProps === void 0 ? void 0 : slotProps.expandColumn) || {})));
+            columnsMap = [expandingColumnMap, ...columnsMap];
+        }
+        if (enableRowSelection) {
+            const selectionColumnMap = (0, special_columns_utils_1.createSelectionColumn)(Object.assign(Object.assign({}, ((slotProps === null || slotProps === void 0 ? void 0 : slotProps.selectionColumn) || {})), { multiSelect: enableMultiRowSelection }));
+            columnsMap = [selectionColumnMap, ...columnsMap];
+        }
+        return columnsMap;
+    }, [
+        columns,
+        slotProps === null || slotProps === void 0 ? void 0 : slotProps.selectionColumn,
+        slotProps === null || slotProps === void 0 ? void 0 : slotProps.expandColumn,
+        enableRowSelection,
+        enableExpanding,
+        enableMultiRowSelection,
+    ]);
+    const notifyDataStateChange = (0, react_1.useCallback)((overrides = {}) => {
+        if (onDataStateChange) {
+            const currentState = Object.assign({ globalFilter,
+                customColumnsFilter,
+                sorting,
+                pagination,
+                columnOrder,
+                columnPinning }, overrides);
+            onDataStateChange(currentState);
+        }
+    }, [
+        onDataStateChange,
+        globalFilter,
+        customColumnsFilter,
+        sorting,
+        pagination,
+        columnOrder,
+        columnPinning,
+    ]);
+    const stateChangeRef = (0, react_1.useRef)(notifyDataStateChange);
+    stateChangeRef.current = notifyDataStateChange;
+    const handleSortingChange = (0, react_1.useCallback)((updaterOrValue) => {
+        let newSorting = typeof updaterOrValue === 'function'
+            ? updaterOrValue(sorting)
+            : updaterOrValue;
+        console.log('handleSortingChange', newSorting);
+        newSorting = newSorting.filter((sort) => sort.id);
+        setSorting(newSorting);
+        if (onSortingChange) {
+            onSortingChange(newSorting);
+        }
+        if (isServerMode || isServerSorting) {
+            stateChangeRef.current({ sorting: newSorting });
+            fetchDataRef === null || fetchDataRef === void 0 ? void 0 : fetchDataRef.current({
+                sorting: newSorting,
+            });
+        }
+        else if (onDataStateChange) {
+            stateChangeRef.current({ sorting: newSorting });
+        }
+    }, [
+        sorting,
+        onSortingChange,
+        isServerMode,
+        isServerSorting,
+        onDataStateChange,
+    ]);
+    const handleColumnOrderChange = (0, react_1.useCallback)((updatedColumnOrder) => {
+        setColumnOrder(updatedColumnOrder);
+        if (onColumnDragEnd) {
+            onColumnDragEnd(updatedColumnOrder);
+        }
+    }, [onColumnDragEnd]);
+    const handleColumnPinningChange = (0, react_1.useCallback)((updatedColumnPinning) => {
+        setColumnPinning(updatedColumnPinning);
+        if (onColumnPinningChange) {
+            onColumnPinningChange(updatedColumnPinning);
+        }
+    }, [onColumnPinningChange]);
+    const handlePaginationChange = (0, react_1.useCallback)((updater) => {
+        setPagination(updater);
+        const newPagination = typeof updater === 'function' ? updater(pagination) : updater;
+        if (isServerMode || isServerPagination) {
+            setTimeout(() => {
+                stateChangeRef.current({ pagination: newPagination });
+                fetchDataRef === null || fetchDataRef === void 0 ? void 0 : fetchDataRef.current({ pagination: newPagination });
+            }, 0);
+        }
+        else if (onDataStateChange) {
+            setTimeout(() => {
+                stateChangeRef.current({ pagination: newPagination });
+            }, 0);
+        }
+    }, [pagination, isServerMode, isServerPagination, onDataStateChange]);
+    const handleGlobalFilterChange = (0, react_1.useCallback)((updaterOrValue) => {
+        const newFilter = typeof updaterOrValue === 'function'
+            ? updaterOrValue(globalFilter)
+            : updaterOrValue;
+        setGlobalFilter(newFilter);
+        if (isServerMode || isServerFiltering) {
+            stateChangeRef.current({ globalFilter: newFilter });
+            fetchDataRef === null || fetchDataRef === void 0 ? void 0 : fetchDataRef.current({ globalFilter: newFilter });
+        }
+        else if (onDataStateChange) {
+            stateChangeRef.current({ globalFilter: newFilter });
+        }
+    }, [globalFilter, isServerMode, isServerFiltering, onDataStateChange]);
+    const onCustomColumnFilterChangeHandler = (0, react_1.useCallback)((updater) => {
+        const currentState = customColumnsFilter;
+        const newState = typeof updater === 'function'
+            ? updater(currentState)
+            : updater;
+        const legacyFilterState = {
+            filters: newState.filters,
+            logic: newState.logic,
+            pendingFilters: newState.pendingFilters,
+            pendingLogic: newState.pendingLogic
+        };
+        handleColumnFilterStateChange(legacyFilterState);
+    }, [customColumnsFilter, handleColumnFilterStateChange]);
+    const onCustomColumnFilterApplyHandler = (0, react_1.useCallback)((appliedState) => {
+        if (isServerFiltering) {
+            const serverFilterState = {
+                filters: appliedState.filters,
+                logic: appliedState.logic,
+                pendingFilters: appliedState.pendingFilters,
+                pendingLogic: appliedState.pendingLogic,
+            };
+            stateChangeRef.current({
+                customColumnsFilter: serverFilterState,
+            });
+            fetchDataRef === null || fetchDataRef === void 0 ? void 0 : fetchDataRef.current({
+                customColumnsFilter: serverFilterState,
+            });
+        }
+    }, [isServerFiltering]);
+    const table = (0, react_table_1.useReactTable)({
+        _features: [custom_column_filter_feature_1.CustomColumnFilterFeature, features_1.CustomSelectionFeature],
+        data: tableData,
+        columns: enhancedColumns,
+        initialState: Object.assign({}, initialStateConfig),
+        state: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ sorting }, (enablePagination ? { pagination } : {})), (enableGlobalFilter ? { globalFilter } : {})), (enableExpanding ? { expanded } : {})), (enableColumnDragging ? { columnOrder } : {})), (enableColumnPinning ? { columnPinning } : {})), (enableColumnFilter ? { customColumnFilter: customColumnsFilter } : {})), (enableRowSelection ? { selectionState } : {})),
+        selectMode: selectMode,
+        enableCustomSelection: !!enableRowSelection,
+        isRowSelectable: isRowSelectable,
+        onSelectionStateChange: enableRowSelection ? handleSelectionStateChange : undefined,
+        onSortingChange: enableSorting ? handleSortingChange : undefined,
+        onPaginationChange: enablePagination ? handlePaginationChange : undefined,
+        onRowSelectionChange: enableRowSelection ? handleSelectionStateChange : undefined,
+        onGlobalFilterChange: enableGlobalFilter ? handleGlobalFilterChange : undefined,
+        onExpandedChange: enableExpanding ? setExpanded : undefined,
+        onColumnOrderChange: enableColumnDragging ? handleColumnOrderChange : undefined,
+        onColumnPinningChange: enableColumnPinning ? handleColumnPinningChange : undefined,
+        onCustomColumnFilterChange: onCustomColumnFilterChangeHandler,
+        onCustomColumnFilterApply: onCustomColumnFilterApplyHandler,
+        getCoreRowModel: (0, react_table_1.getCoreRowModel)(),
+        getSortedRowModel: (enableSorting && !isServerSorting) ? (0, react_table_1.getSortedRowModel)() : undefined,
+        getFilteredRowModel: (enableColumnFilter && !isServerFiltering) ? (0, custom_column_filter_feature_1.getCombinedFilteredRowModel)() : undefined,
+        getPaginationRowModel: (enablePagination && !isServerPagination) ? (0, react_table_1.getPaginationRowModel)() : undefined,
+        enableSorting: enableSorting,
+        manualSorting: isServerSorting,
+        manualFiltering: isServerFiltering,
+        enableColumnResizing: enableColumnResizing,
+        columnResizeMode: columnResizeMode,
+        enableColumnPinning: enableColumnPinning,
+        getRowCanExpand: enableExpanding ? getRowCanExpand : undefined,
+        manualPagination: isServerPagination,
+        autoResetPageIndex: false,
+        rowCount: tableTotalRow,
+        getRowId: (row, index) => (0, utils_1.generateRowId)(row, index, idKey),
+        debugAll: false,
+    });
+    const rows = ((_a = table.getRowModel()) === null || _a === void 0 ? void 0 : _a.rows) || [];
+    const rowVirtualizer = (0, react_virtual_1.useVirtualizer)({
+        count: rows.length,
+        getScrollElement: () => tableContainerRef.current,
+        estimateSize: () => estimateRowHeight,
+        overscan: 10,
+        enabled: enableVirtualization && !enablePagination && rows.length > 0,
+    });
+    const tableWidth = (0, react_1.useMemo)(() => {
+        if (fitToScreen) {
+            return '100%';
+        }
+        if (enableColumnResizing) {
+            return table.getCenterTotalSize();
+        }
+        return '100%';
+    }, [
+        table,
+        enableColumnResizing,
+        fitToScreen,
+    ]);
+    const tableStyle = (0, react_1.useMemo)(() => ({
+        width: tableWidth,
+        minWidth: '100%',
+    }), [tableWidth]);
+    const handleColumnReorder = (0, react_1.useCallback)((draggedColumnId, targetColumnId) => {
+        const currentOrder = columnOrder.length > 0 ? columnOrder : enhancedColumns.map((col, index) => {
+            if (col.id)
+                return col.id;
+            const anyCol = col;
+            if (anyCol.accessorKey && typeof anyCol.accessorKey === 'string') {
+                return anyCol.accessorKey;
+            }
+            return `column_${index}`;
+        });
+        const draggedIndex = currentOrder.indexOf(draggedColumnId);
+        const targetIndex = currentOrder.indexOf(targetColumnId);
+        if (draggedIndex === -1 || targetIndex === -1)
+            return;
+        const newOrder = [...currentOrder];
+        newOrder.splice(draggedIndex, 1);
+        newOrder.splice(targetIndex, 0, draggedColumnId);
+        handleColumnOrderChange(newOrder);
+    }, [columnOrder, enhancedColumns, handleColumnOrderChange]);
+    (0, react_1.useEffect)(() => {
+        if (initialLoadData && onFetchData) {
+            fetchDataRef.current();
+        }
+    }, [initialLoadData]);
+    (0, react_1.useEffect)(() => {
+        if (enableColumnDragging && columnOrder.length === 0) {
+            const initialOrder = enhancedColumns.map((col, index) => {
+                if (col.id)
+                    return col.id;
+                const anyCol = col;
+                if (anyCol.accessorKey && typeof anyCol.accessorKey === 'string') {
+                    return anyCol.accessorKey;
+                }
+                return `column_${index}`;
+            });
+            setColumnOrder(initialOrder);
+        }
+    }, [
+        enableColumnDragging,
+        enhancedColumns,
+        columnOrder.length,
+    ]);
+    const LoadingRowSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'loadingRow', rows_1.LoadingRows);
+    const EmptyRowSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'emptyRow', rows_1.EmptyDataRow);
+    const renderTableRows = (0, react_1.useCallback)(() => {
+        var _a, _b, _c, _d;
+        if (tableLoading) {
+            return ((0, jsx_runtime_1.jsx)(LoadingRowSlot, Object.assign({ rowCount: enablePagination ? Math.min(pagination.pageSize, skeletonRows) : skeletonRows, colSpan: table.getAllColumns().length, slots: slots, slotProps: slotProps }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.loadingRow)));
+        }
+        if (rows.length === 0) {
+            return ((0, jsx_runtime_1.jsx)(EmptyRowSlot, Object.assign({ colSpan: table.getAllColumns().length, message: emptyMessage, slots: slots, slotProps: slotProps }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.emptyRow)));
+        }
+        if (enableVirtualization && !enablePagination && rows.length > 0) {
+            const virtualItems = rowVirtualizer.getVirtualItems();
+            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [virtualItems.length > 0 && ((0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsx)("td", { colSpan: table.getAllColumns().length, style: {
+                                height: `${(_b = (_a = virtualItems[0]) === null || _a === void 0 ? void 0 : _a.start) !== null && _b !== void 0 ? _b : 0}px`,
+                                padding: 0,
+                                border: 0,
+                            } }) })), virtualItems.map((virtualRow) => {
+                        const row = rows[virtualRow.index];
+                        if (!row)
+                            return null;
+                        return ((0, jsx_runtime_1.jsx)(rows_1.DataTableRow, Object.assign({ row: row, enableHover: enableHover, enableStripes: enableStripes, isOdd: virtualRow.index % 2 === 1, renderSubComponent: renderSubComponent, disableStickyHeader: enableStickyHeaderOrFooter }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.row), row.id));
+                    }), virtualItems.length > 0 && ((0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsx)("td", { colSpan: table.getAllColumns().length, style: {
+                                height: `${rowVirtualizer.getTotalSize() -
+                                    ((_d = (_c = virtualItems[virtualItems.length - 1]) === null || _c === void 0 ? void 0 : _c.end) !== null && _d !== void 0 ? _d : 0)}px`,
+                                padding: 0,
+                                border: 0,
+                            } }) }))] }));
+        }
+        return rows.map((row, index) => ((0, jsx_runtime_1.jsx)(rows_1.DataTableRow, { row: row, enableHover: enableHover, enableStripes: enableStripes, isOdd: index % 2 === 1, renderSubComponent: renderSubComponent, disableStickyHeader: enableStickyHeaderOrFooter, slots: slots, slotProps: slotProps }, row.id)));
+    }, [
+        tableLoading,
+        rows,
+        enableVirtualization,
+        enablePagination,
+        LoadingRowSlot,
+        pagination.pageSize,
+        skeletonRows,
+        table,
+        slotProps,
+        EmptyRowSlot,
+        emptyMessage,
+        rowVirtualizer,
+        enableHover,
+        enableStripes,
+        renderSubComponent,
+        enableStickyHeaderOrFooter,
+        slots,
+    ]);
+    const [exportController, setExportController] = (0, react_1.useState)(null);
+    const isExporting = (0, react_1.useMemo)(() => exportController !== null, [exportController]);
+    const handleCancelExport = (0, react_1.useCallback)(() => {
+        if (exportController) {
+            exportController.abort();
+            setExportController(null);
+            if (onExportCancel) {
+                onExportCancel();
+            }
+        }
+    }, [exportController, onExportCancel]);
+    (0, use_data_table_api_1.useDataTableApi)({
+        table,
+        data: tableData,
+        idKey,
+        globalFilter,
+        customColumnsFilter,
+        sorting,
+        pagination,
+        columnOrder,
+        columnPinning,
+        enhancedColumns,
+        enablePagination,
+        enableColumnPinning,
+        initialPageIndex: pagination.pageIndex,
+        initialPageSize: pagination.pageSize,
+        pageSize: pagination.pageSize,
+        selectMode,
+        onSelectionChange: handleSelectionStateChange,
+        handleColumnFilterStateChange,
+        onDataStateChange,
+        onFetchData: onFetchData,
+        onDataChange,
+        exportFilename,
+        onExportProgress,
+        onExportComplete,
+        onExportError,
+        onServerExport,
+        exportController,
+        setExportController,
+        isExporting,
+        dataMode,
+    }, internalApiRef);
+    (0, react_1.useImperativeHandle)(ref, () => internalApiRef.current, []);
+    const isSomeRowsSelected = (0, react_1.useMemo)(() => {
+        if (!enableBulkActions || !enableRowSelection)
+            return false;
+        if (selectionState.type === 'exclude') {
+            return selectionState.ids.length < tableTotalRow;
+        }
+        else {
+            return selectionState.ids.length > 0;
+        }
+    }, [enableBulkActions, enableRowSelection, selectionState, tableTotalRow]);
+    const selectedRowCount = (0, react_1.useMemo)(() => {
+        if (!enableBulkActions || !enableRowSelection)
+            return 0;
+        if (selectionState.type === 'exclude') {
+            return tableTotalRow - selectionState.ids.length;
+        }
+        else {
+            return selectionState.ids.length;
+        }
+    }, [enableBulkActions, enableRowSelection, selectionState, tableTotalRow]);
+    const RootSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'root', material_1.Box);
+    const ToolbarSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'toolbar', toolbar_1.DataTableToolbar);
+    const BulkActionsSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'bulkActionsToolbar', toolbar_1.BulkActionsToolbar);
+    const TableContainerSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'tableContainer', material_1.TableContainer);
+    const TableSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'table', material_1.Table);
+    const BodySlot = (0, slot_helpers_1.getSlotComponent)(slots, 'body', material_1.TableBody);
+    const FooterSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'footer', material_1.Box);
+    const PaginationSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'pagination', pagination_1.DataTablePagination);
+    return ((0, jsx_runtime_1.jsx)(data_table_context_1.DataTableProvider, { table: table, children: (0, jsx_runtime_1.jsxs)(RootSlot, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.root, { children: [(enableGlobalFilter || extraFilter) ? ((0, jsx_runtime_1.jsx)(ToolbarSlot, Object.assign({ extraFilter: extraFilter, enableGlobalFilter: enableGlobalFilter, enableColumnVisibility: enableColumnVisibility, enableColumnFilter: enableColumnFilter, enableExport: enableExport, enableReset: enableReset, enableTableSizeControl: enableTableSizeControl, enableColumnPinning: enableColumnPinning }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.toolbar))) : null, enableBulkActions && enableRowSelection && isSomeRowsSelected ? ((0, jsx_runtime_1.jsx)(BulkActionsSlot, Object.assign({ selectionState: selectionState, selectedRowCount: selectedRowCount, bulkActions: bulkActions, sx: {
+                        position: 'relative',
+                        zIndex: 2,
+                    } }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.bulkActionsToolbar))) : null, (0, jsx_runtime_1.jsx)(TableContainerSlot, Object.assign({ component: material_1.Paper, ref: tableContainerRef, sx: Object.assign(Object.assign(Object.assign({ width: '100%', overflowX: 'auto' }, (enableStickyHeaderOrFooter && {
+                        maxHeight: maxHeight,
+                        overflowY: 'auto',
+                    })), (enableVirtualization && {
+                        maxHeight: maxHeight,
+                        overflowY: 'auto',
+                    })), tableContainerProps === null || tableContainerProps === void 0 ? void 0 : tableContainerProps.sx) }, tableContainerProps, slotProps === null || slotProps === void 0 ? void 0 : slotProps.tableContainer, { children: (0, jsx_runtime_1.jsxs)(TableSlot, Object.assign({ size: tableSize, stickyHeader: enableStickyHeaderOrFooter, style: Object.assign(Object.assign(Object.assign({}, tableStyle), { tableLayout: fitToScreen ? 'fixed' : 'auto' }), tableProps === null || tableProps === void 0 ? void 0 : tableProps.style) }, tableProps, slotProps === null || slotProps === void 0 ? void 0 : slotProps.table, { children: [(0, jsx_runtime_1.jsx)(headers_1.TableHeader, { draggable: enableColumnDragging, enableColumnResizing: enableColumnResizing, enableStickyHeader: enableStickyHeaderOrFooter, fitToScreen: fitToScreen, onColumnReorder: handleColumnReorder, slots: slots, slotProps: slotProps }), (0, jsx_runtime_1.jsx)(BodySlot, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.body, { children: renderTableRows() }))] })) })), enablePagination ? ((0, jsx_runtime_1.jsx)(FooterSlot, Object.assign({ sx: Object.assign({}, (enableStickyHeaderOrFooter && {
+                        position: 'sticky',
+                        bottom: 0,
+                        backgroundColor: 'background.paper',
+                        borderTop: '1px solid',
+                        borderColor: 'divider',
+                        zIndex: 1,
+                    })) }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.footer, { children: (0, jsx_runtime_1.jsx)(PaginationSlot, Object.assign({ footerFilter: footerFilter }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.pagination, { pagination: pagination, totalRow: tableTotalRow })) }))) : null] })) }));
+});

package/src/lib/components/table/data-table.types.d.ts

@@ -0,0 +1,114 @@
+import { Row, SortingState, ColumnResizeMode, ColumnPinningState, RowData } from '@tanstack/react-table';
+import { ReactNode } from 'react';
+import type { CustomColumnFilterState, TableFilters, TableState } from '../../types';
+import { DataTableColumn } from '../../types';
+import { DataTableSlots, PartialSlotProps } from '../../types/slots.types';
+import { DataTableSize } from '../../utils/table-helpers';
+import { SelectionState } from '../../features/custom-selection.feature';
+export type SelectMode = 'page' | 'all';
+declare module '@tanstack/table-core' {
+    interface ColumnMeta<TData extends RowData, TValue> {
+    }
+}
+export interface DataTableProps<T> {
+    columns: DataTableColumn<T>[];
+    data?: T[];
+    totalRow?: number;
+    idKey?: keyof T;
+    extraFilter?: ReactNode | null;
+    footerFilter?: ReactNode | null;
+    dataMode?: 'client' | 'server';
+    initialState?: Partial<TableState>;
+    initialLoadData?: boolean;
+    onDataStateChange?: (filters: Partial<TableState>) => void;
+    onFetchData?: (filters: Partial<TableFilters>) => Promise<{
+        data: T[];
+        total: number;
+    }>;
+    exportFilename?: string;
+    onExportProgress?: (progress: {
+        processedRows: number;
+        totalRows: number;
+        percentage: number;
+    }) => void;
+    onExportComplete?: (result: {
+        success: boolean;
+        filename: string;
+        totalRows: number;
+    }) => void;
+    onExportError?: (error: {
+        message: string;
+        code: string;
+    }) => void;
+    onServerExport?: (filters?: Partial<TableState>, selection?: SelectionState) => Promise<{
+        data: any[];
+        total: number;
+    }>;
+    onExportCancel?: () => void;
+    enableRowSelection?: boolean | ((row: Row<T>) => boolean);
+    enableMultiRowSelection?: boolean;
+    selectMode?: SelectMode;
+    isRowSelectable?: (params: {
+        row: T;
+        id: string;
+    }) => boolean;
+    onRowSelectionChange?: (selectedRows: T[], selection?: SelectionState) => void;
+    onSelectionChange?: (selection: SelectionState) => void;
+    enableBulkActions?: boolean;
+    bulkActions?: (selectionState: SelectionState) => ReactNode;
+    enableColumnResizing?: boolean;
+    columnResizeMode?: ColumnResizeMode;
+    enableColumnDragging?: boolean;
+    onColumnDragEnd?: (columnOrder: string[]) => void;
+    enableColumnPinning?: boolean;
+    onColumnPinningChange?: (pinning: ColumnPinningState) => void;
+    enableExpanding?: boolean;
+    getRowCanExpand?: (row: Row<T>) => boolean;
+    renderSubComponent?: (row: Row<T>) => ReactNode;
+    enablePagination?: boolean;
+    paginationMode?: 'client' | 'server';
+    enableGlobalFilter?: boolean;
+    enableColumnFilter?: boolean;
+    filterMode?: 'client' | 'server';
+    enableSorting?: boolean;
+    sortingMode?: 'client' | 'server';
+    onSortingChange?: (sorting: SortingState) => void;
+    enableHover?: boolean;
+    enableStripes?: boolean;
+    tableContainerProps?: any;
+    tableProps?: any;
+    fitToScreen?: boolean;
+    tableSize?: DataTableSize;
+    enableStickyHeaderOrFooter?: boolean;
+    maxHeight?: string | number;
+    enableVirtualization?: boolean;
+    estimateRowHeight?: number;
+    enableColumnVisibility?: boolean;
+    enableTableSizeControl?: boolean;
+    enableExport?: boolean;
+    enableReset?: boolean;
+    loading?: boolean;
+    emptyMessage?: string;
+    skeletonRows?: number;
+    onColumnFiltersChange?: (filterState: CustomColumnFilterState) => void;
+    onDataChange?: (data: T[]) => void;
+    selectionColumn?: {
+        width?: number;
+        pinLeft?: boolean;
+        customColumn?: DataTableColumn<any>;
+        id?: string;
+    };
+    actionColumn?: {
+        pinRight?: boolean;
+        customColumn?: DataTableColumn<any>;
+        id?: string;
+    };
+    expandingColumn?: {
+        width?: number;
+        pinLeft?: boolean;
+        customColumn?: DataTableColumn<any>;
+        id?: string;
+    };
+    slots?: Partial<DataTableSlots<T>>;
+    slotProps?: PartialSlotProps<T>;
+}

package/src/lib/components/table/data-table.types.js

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

package/{lib/components/table/index.js → src/lib/components/table/index.d.ts}

@@ -1,5 +1,2 @@
-/**
- * Main table components
- */
 export * from './data-table.types';
 export * from './data-table';

package/src/lib/components/table/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./data-table.types"), exports);
+tslib_1.__exportStar(require("./data-table"), exports);

package/src/lib/components/toolbar/bulk-actions-toolbar.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+import { SelectionState } from '../../features/custom-selection.feature';
+export interface BulkActionsToolbarProps<T = any> {
+    selectionState: SelectionState;
+    selectedRowCount: number;
+    bulkActions?: (selectionState: SelectionState) => ReactNode;
+    sx?: any;
+}
+export declare function BulkActionsToolbar<T = any>({ selectionState, selectedRowCount, bulkActions, sx, }: BulkActionsToolbarProps<T>): import("react/jsx-runtime").JSX.Element;

package/src/lib/components/toolbar/bulk-actions-toolbar.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BulkActionsToolbar = BulkActionsToolbar;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const react_1 = require("react");
+const data_table_context_1 = require("../../contexts/data-table-context");
+const slot_helpers_1 = require("../../utils/slot-helpers");
+function BulkActionsToolbar({ selectionState, selectedRowCount, bulkActions, sx, }) {
+    const { slots, slotProps } = (0, data_table_context_1.useDataTableContext)();
+    const ToolbarSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'toolbar', material_1.Toolbar);
+    const renderedBulkActions = (0, react_1.useMemo)(() => {
+        if (!bulkActions)
+            return null;
+        return bulkActions(selectionState);
+    }, [bulkActions, selectionState]);
+    return ((0, jsx_runtime_1.jsx)(material_1.Fade, { in: selectedRowCount > 0, children: (0, jsx_runtime_1.jsxs)(ToolbarSlot, Object.assign({ sx: Object.assign({ pl: { sm: 2 }, pr: {
+                    xs: 1,
+                    sm: 1,
+                }, bgcolor: (theme) => (0, material_1.alpha)(theme.palette.primary.main, 0.05), mb: 1, position: 'relative', zIndex: 1 }, sx) }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.bulkActionsToolbar, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: { flex: '1 1 100%' }, children: (0, jsx_runtime_1.jsx)(material_1.Typography, { color: "inherit", variant: "subtitle1", component: "div", children: (0, jsx_runtime_1.jsx)(material_1.Chip, { label: `${selectedRowCount} selected`, size: "small", color: "primary", variant: "outlined" }) }) }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: 1,
+                    }, children: renderedBulkActions })] })) }));
+}

package/src/lib/components/toolbar/column-custom-filter-control.d.ts

@@ -0,0 +1 @@
+export declare function ColumnCustomFilterControl(): import("react/jsx-runtime").JSX.Element;