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

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

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataTableRow = DataTableRow;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const react_table_1 = require("@tanstack/react-table");
+const utils_1 = require("../../utils");
+const slot_helpers_1 = require("../../utils/slot-helpers");
+function DataTableRow({ row, enableHover = true, enableStripes = false, isOdd = false, renderSubComponent, disableStickyHeader = false, slots, slotProps, }) {
+    const CellSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'cell', material_1.TableCell);
+    const ExpandedRowSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'expandedRow', material_1.TableRow);
+    const TableRowSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'row', material_1.TableRow);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TableRowSlot, { hover: enableHover, sx: {
+                    backgroundColor: enableStripes && isOdd ? 'action.hover' : 'transparent',
+                }, children: row.getVisibleCells().map(cell => {
+                    const isPinned = cell.column.getIsPinned();
+                    const pinnedPosition = isPinned ? cell.column.getStart('left') : undefined;
+                    const pinnedRightPosition = isPinned === 'right' ? cell.column.getAfter('right') : undefined;
+                    const alignment = (0, utils_1.getColumnAlignment)(cell.column.columnDef);
+                    return ((0, jsx_runtime_1.jsx)(CellSlot, Object.assign({ align: alignment, sx: Object.assign({}, (0, utils_1.getPinnedColumnStyle)({
+                            width: cell.column.getSize() || 'auto',
+                            isPinned,
+                            pinnedPosition,
+                            pinnedRightPosition,
+                            zIndex: isPinned ? 9 : 1,
+                            disableStickyHeader,
+                            isLastLeftPinnedColumn: isPinned === 'left' && cell.column.getIsLastColumn('left'),
+                            isFirstRightPinnedColumn: isPinned === 'right' && cell.column.getIsFirstColumn('right'),
+                        })) }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.cell, { children: (0, react_table_1.flexRender)(cell.column.columnDef.cell, cell.getContext()) }), cell.id));
+                }) }), row.getIsExpanded() && renderSubComponent ? ((0, jsx_runtime_1.jsx)(ExpandedRowSlot, { children: (0, jsx_runtime_1.jsx)(CellSlot, { colSpan: row.getVisibleCells().length + 1, sx: { py: 0 }, children: (0, jsx_runtime_1.jsx)(material_1.Collapse, { in: row.getIsExpanded(), timeout: "auto", unmountOnExit: true, children: renderSubComponent(row) }) }) })) : null] }));
+}

package/src/lib/components/rows/empty-data-row.d.ts

@@ -0,0 +1,6 @@
+export declare function EmptyDataRow({ colSpan, message, slots, slotProps }: {
+    colSpan: number;
+    message: string;
+    slots: Record<string, any>;
+    slotProps: Record<string, any>;
+}): import("react/jsx-runtime").JSX.Element;

package/src/lib/components/rows/empty-data-row.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EmptyDataRow = EmptyDataRow;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const slot_helpers_1 = require("../../utils/slot-helpers");
+function EmptyDataRow({ colSpan, message, slots, slotProps }) {
+    const EmptyRowSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'emptyRow', material_1.TableRow);
+    const EmptyCellSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'cell', material_1.TableCell);
+    return ((0, jsx_runtime_1.jsx)(EmptyRowSlot, { children: (0, jsx_runtime_1.jsx)(EmptyCellSlot, Object.assign({ colSpan: colSpan, align: "center", sx: { py: 4 } }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.emptyCell, { children: message })) }));
+}

package/src/lib/components/rows/index.d.ts

@@ -0,0 +1,3 @@
+export * from './data-table-row';
+export * from './empty-data-row';
+export * from './loading-rows';

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

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

package/src/lib/components/rows/loading-rows.d.ts

@@ -0,0 +1,5 @@
+export declare function LoadingRows({ rowCount, slots, slotProps, }: {
+    rowCount?: number;
+    slots?: Record<string, any>;
+    slotProps?: Record<string, any>;
+}): import("react/jsx-runtime").JSX.Element;

package/src/lib/components/rows/loading-rows.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LoadingRows = LoadingRows;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const material_2 = require("@mui/material");
+const data_table_context_1 = require("../../contexts/data-table-context");
+const utils_1 = require("../../utils");
+const slot_helpers_1 = require("../../utils/slot-helpers");
+function LoadingRows({ rowCount = 5, slots, slotProps, }) {
+    const { table } = (0, data_table_context_1.useDataTableContext)();
+    const visibleColumns = table.getVisibleLeafColumns();
+    const CellSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'cell', material_1.TableCell);
+    const TableRowSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'row', material_1.TableRow);
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: Array.from({ length: rowCount }, (_, rowIndex) => ((0, jsx_runtime_1.jsx)(TableRowSlot, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.row, { children: visibleColumns.map((column, colIndex) => {
+                var _a;
+                const isPinned = column.getIsPinned();
+                const pinnedPosition = isPinned ? column.getStart('left') : undefined;
+                const pinnedRightPosition = isPinned === 'right' ? column.getAfter('right') : undefined;
+                const columnMeta = (_a = column.columnDef) === null || _a === void 0 ? void 0 : _a.meta;
+                const isDateColumn = (columnMeta === null || columnMeta === void 0 ? void 0 : columnMeta.type) === 'date';
+                const isBooleanColumn = (columnMeta === null || columnMeta === void 0 ? void 0 : columnMeta.type) === 'boolean';
+                const isNumberColumn = (columnMeta === null || columnMeta === void 0 ? void 0 : columnMeta.type) === 'number';
+                const isSelectionColumn = column.id === 'select';
+                return ((0, jsx_runtime_1.jsx)(CellSlot, Object.assign({ sx: (0, utils_1.getPinnedColumnStyle)({
+                        width: column.getSize() || 'auto',
+                        isPinned,
+                        pinnedPosition,
+                        pinnedRightPosition,
+                        zIndex: isPinned ? 9 : 1,
+                        isLastLeftPinnedColumn: isPinned === 'left' && column.getIsLastColumn('left'),
+                        isFirstRightPinnedColumn: isPinned === 'right' && column.getIsFirstColumn('right'),
+                    }) }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.cell, { children: (() => {
+                        if (isSelectionColumn) {
+                            return ((0, jsx_runtime_1.jsx)(material_2.Skeleton, { variant: "rectangular", width: 20, height: 20 }));
+                        }
+                        if (isBooleanColumn) {
+                            return ((0, jsx_runtime_1.jsx)(material_2.Skeleton, { variant: "circular", width: 20, height: 20 }));
+                        }
+                        if (isDateColumn) {
+                            return ((0, jsx_runtime_1.jsx)(material_2.Skeleton, { variant: "text", width: "80%", height: 20, animation: "wave" }));
+                        }
+                        if (isNumberColumn) {
+                            return ((0, jsx_runtime_1.jsx)(material_2.Skeleton, { variant: "text", width: "60%", height: 20, animation: "wave" }));
+                        }
+                        return ((0, jsx_runtime_1.jsx)(material_2.Skeleton, { variant: "text", width: `${Math.random() * 40 + 60}%`, height: 20, animation: "wave" }));
+                    })() }), `skeleton-${column.id || colIndex}-${rowIndex}`));
+            }) }), `skeleton-row-${rowIndex}`))) }));
+}

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

@@ -0,0 +1,3 @@
+import { DataTableProps } from './data-table.types';
+import { DataTableApi } from '../../types/data-table-api';
+export declare const DataTable: import("react").ForwardRefExoticComponent<DataTableProps<any> & import("react").RefAttributes<DataTableApi<any>>>;

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] })) }));
+});