@ackplus/react-tanstack-data-table 1.0.20 → 1.0.22

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ackplus/react-tanstack-data-table",
   "type": "commonjs",
-  "version": "1.0.20",
+  "version": "1.0.22",
   "description": "A powerful React data table component built with MUI and TanStack Table",
   "keywords": [
     "react",

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

@@ -10,8 +10,6 @@ const slot_helpers_1 = require("../../utils/slot-helpers");
 exports.DataTablePagination = (0, react_1.memo)((props) => {
     const { footerFilter = null, pagination, totalRow, containerSx, paginationProps, footerSx, slots, slotProps } = props, otherProps = tslib_1.__rest(props, ["footerFilter", "pagination", "totalRow", "containerSx", "paginationProps", "footerSx", "slots", "slotProps"]);
     const { table } = (0, data_table_context_1.useDataTableContext)();
-    const paginationSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'pagination');
-    const PaginationSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'pagination', material_1.TablePagination);
     const mergedContainerProps = (0, slot_helpers_1.mergeSlotProps)({
         sx: Object.assign({ display: 'flex', alignItems: 'center', gap: 1, justifyContent: 'space-between', px: 2 }, containerSx),
     });
@@ -32,6 +30,6 @@ exports.DataTablePagination = (0, react_1.memo)((props) => {
         showLastButton: true,
         labelRowsPerPage: 'Rows per page:',
         labelDisplayedRows: ({ from, to, count }) => `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`,
-    }, paginationSlotProps, Object.assign(Object.assign({}, paginationProps), otherProps));
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({}, mergedContainerProps, { children: [footerFilter && ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: footerSx, children: footerFilter })), (0, jsx_runtime_1.jsx)(PaginationSlot, Object.assign({}, mergedPaginationProps))] })));
+    }, Object.assign(Object.assign({}, paginationProps), otherProps));
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({}, mergedContainerProps, { children: [footerFilter && ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: footerSx, children: footerFilter })), (0, jsx_runtime_1.jsx)(material_1.TablePagination, Object.assign({}, mergedPaginationProps))] })));
 });

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

@@ -25,7 +25,7 @@ const DEFAULT_INITIAL_STATE = {
         pageIndex: 0,
         pageSize: 10,
     },
-    rowSelection: {},
+    selectionState: { ids: [], type: 'include' },
     globalFilter: '',
     expanded: {},
     columnOrder: [],
@@ -33,7 +33,7 @@ const DEFAULT_INITIAL_STATE = {
         left: [],
         right: [],
     },
-    customColumnFilter: {
+    columnFilter: {
         filters: [],
         logic: 'AND',
         pendingFilters: [],
@@ -49,20 +49,15 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
     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 [columnFilter, setColumnFilter] = (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 [sorting, setSorting] = (0, react_1.useState)((initialState === null || initialState === void 0 ? void 0 : initialState.sorting) || DEFAULT_INITIAL_STATE.sorting);
+    const [pagination, setPagination] = (0, react_1.useState)((initialState === null || initialState === void 0 ? void 0 : initialState.pagination) || DEFAULT_INITIAL_STATE.pagination);
+    const [globalFilter, setGlobalFilter] = (0, react_1.useState)((initialState === null || initialState === void 0 ? void 0 : initialState.globalFilter) || DEFAULT_INITIAL_STATE.globalFilter);
+    const [selectionState, setSelectionState] = (0, react_1.useState)((initialState === null || initialState === void 0 ? void 0 : initialState.selectionState) || DEFAULT_INITIAL_STATE.selectionState);
+    const [columnFilter, setColumnFilter] = (0, react_1.useState)((initialState === null || initialState === void 0 ? void 0 : initialState.columnFilter) || DEFAULT_INITIAL_STATE.columnFilter);
+    const [expanded, setExpanded] = (0, react_1.useState)({});
+    const [tableSize, setTableSize] = (0, react_1.useState)();
+    const [columnOrder, setColumnOrder] = (0, react_1.useState)((initialState === null || initialState === void 0 ? void 0 : initialState.columnOrder) || DEFAULT_INITIAL_STATE.columnOrder);
+    const [columnPinning, setColumnPinning] = (0, react_1.useState)((initialState === null || initialState === void 0 ? void 0 : initialState.columnPinning) || DEFAULT_INITIAL_STATE.columnPinning);
     const [serverData, setServerData] = (0, react_1.useState)(null);
     const [serverTotal, setServerTotal] = (0, react_1.useState)(0);
     const [exportController, setExportController] = (0, react_1.useState)(null);
@@ -307,7 +302,7 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
             }
         }, 0);
     }, [isServerFiltering, fetchData, tableStateChange]);
-    const table = (0, react_table_1.useReactTable)(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ _features: [column_filter_feature_1.ColumnFilterFeature, features_1.SelectionFeature], data: tableData, columns: enhancedColumns, initialState: Object.assign({}, initialStateConfig), state: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (enableSorting ? { sorting } : {})), (enablePagination ? { pagination } : {})), (enableGlobalFilter ? { globalFilter } : {})), (enableExpanding ? { expanded } : {})), (enableColumnDragging ? { columnOrder } : {})), (enableColumnPinning ? { columnPinning } : {})), (enableColumnFilter ? { columnFilter } : {})), (enableRowSelection ? { selectionState } : {})), selectMode: selectMode, enableAdvanceSelection: !!enableRowSelection, isRowSelectable: isRowSelectable }, (enableRowSelection ? { onSelectionStateChange: handleSelectionStateChange } : {})), { enableAdvanceColumnFilter: enableColumnFilter, onColumnFilterChange: onColumnFilterChangeHandler, onColumnFilterApply: onColumnFilterApplyHandler }), (enableSorting ? { onSortingChange: handleSortingChange } : {})), (enablePagination ? { onPaginationChange: handlePaginationChange } : {})), (enableRowSelection ? { onRowSelectionChange: handleSelectionStateChange } : {})), (enableGlobalFilter ? { onGlobalFilterChange: handleGlobalFilterChange } : {})), (enableExpanding ? { onExpandedChange: setExpanded } : {})), (enableColumnDragging ? { onColumnOrderChange: handleColumnOrderChange } : {})), (enableColumnPinning ? { onColumnPinningChange: handleColumnPinningChange } : {})), { getCoreRowModel: (0, react_table_1.getCoreRowModel)() }), (enableSorting ? { getSortedRowModel: (0, react_table_1.getSortedRowModel)() } : {})), (enableColumnFilter ? { getFilteredRowModel: (0, column_filter_feature_1.getCombinedFilteredRowModel)() } : {})), (enablePagination ? { getPaginationRowModel: (0, react_table_1.getPaginationRowModel)() } : {})), { enableSorting: enableSorting, manualSorting: isServerSorting, manualFiltering: isServerFiltering, enableColumnResizing: enableColumnResizing, columnResizeMode: columnResizeMode, enableColumnPinning: enableColumnPinning }), (enableExpanding ? { getRowCanExpand: getRowCanExpand } : {})), { manualPagination: isServerPagination, autoResetPageIndex: false, rowCount: tableTotalRow, getRowId: (row, index) => (0, utils_1.generateRowId)(row, index, idKey), debugAll: false }));
+    const table = (0, react_table_1.useReactTable)(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ _features: [column_filter_feature_1.ColumnFilterFeature, features_1.SelectionFeature], data: tableData, columns: enhancedColumns, initialState: Object.assign({}, DEFAULT_INITIAL_STATE), state: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (enableSorting ? { sorting } : {})), (enablePagination ? { pagination } : {})), (enableGlobalFilter ? { globalFilter } : {})), (enableExpanding ? { expanded } : {})), (enableColumnDragging ? { columnOrder } : {})), (enableColumnPinning ? { columnPinning } : {})), (enableColumnFilter ? { columnFilter } : {})), (enableRowSelection ? { selectionState } : {})), selectMode: selectMode, enableAdvanceSelection: !!enableRowSelection, isRowSelectable: isRowSelectable }, (enableRowSelection ? { onSelectionStateChange: handleSelectionStateChange } : {})), { enableAdvanceColumnFilter: enableColumnFilter, onColumnFilterChange: onColumnFilterChangeHandler, onColumnFilterApply: onColumnFilterApplyHandler }), (enableSorting ? { onSortingChange: handleSortingChange } : {})), (enablePagination ? { onPaginationChange: handlePaginationChange } : {})), (enableRowSelection ? { onRowSelectionChange: handleSelectionStateChange } : {})), (enableGlobalFilter ? { onGlobalFilterChange: handleGlobalFilterChange } : {})), (enableExpanding ? { onExpandedChange: setExpanded } : {})), (enableColumnDragging ? { onColumnOrderChange: handleColumnOrderChange } : {})), (enableColumnPinning ? { onColumnPinningChange: handleColumnPinningChange } : {})), { getCoreRowModel: (0, react_table_1.getCoreRowModel)() }), (enableSorting ? { getSortedRowModel: (0, react_table_1.getSortedRowModel)() } : {})), (enableColumnFilter ? { getFilteredRowModel: (0, column_filter_feature_1.getCombinedFilteredRowModel)() } : {})), (enablePagination ? { getPaginationRowModel: (0, react_table_1.getPaginationRowModel)() } : {})), { enableSorting: enableSorting, manualSorting: isServerSorting, manualFiltering: isServerFiltering, enableColumnResizing: enableColumnResizing, columnResizeMode: columnResizeMode, enableColumnPinning: enableColumnPinning }), (enableExpanding ? { getRowCanExpand: getRowCanExpand } : {})), { 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,
@@ -366,7 +361,7 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
         enhancedColumns,
         enablePagination,
         enableColumnPinning,
-        initialStateConfig,
+        initialStateConfig: Object.assign(Object.assign({}, DEFAULT_INITIAL_STATE), initialState),
         selectMode,
         onSelectionChange: handleSelectionStateChange,
         handleColumnFilterStateChange,
@@ -607,6 +602,7 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
                     pageSize: ((_a = filters.pagination) === null || _a === void 0 ? void 0 : _a.pageSize) || ((_b = initialStateConfig.pagination) === null || _b === void 0 ? void 0 : _b.pageSize) || 10,
                 };
                 const allState = table.getState();
+                setPagination(pagination);
                 onDataStateChange === null || onDataStateChange === void 0 ? void 0 : onDataStateChange(allState);
                 fetchData === null || fetchData === void 0 ? void 0 : fetchData({ pagination });
             },

package/src/lib/examples/server-side-fetching-example.js

@@ -35,7 +35,7 @@ function ServerSideFetchingExample() {
     const apiRef = (0, react_1.useRef)(null);
     const handleFetchData = (0, react_1.useCallback)((filters) => tslib_1.__awaiter(this, void 0, void 0, function* () {
         var _a, _b, _c;
-        console.log('🔄 Fetching data with filters:', filters);
+        console.log('🔄 handleFetchData', { filters });
         setLoading(true);
         setError(null);
         setLastFetchParams(filters);
@@ -114,13 +114,12 @@ function ServerSideFetchingExample() {
         }
     }), [tab]);
     const handleSelectionChange = (0, react_1.useCallback)((selection) => {
-        console.log('🔄 Selection changed:', selection);
         setSelectionInfo(selection);
     }, []);
     (0, react_1.useEffect)(() => {
         var _a;
-        console.log('🔄 Tab changed:', tab);
-        if (tab && tab !== 'all') {
+        if (tab) {
+            console.log('🔄 Refreshing data');
             (_a = apiRef.current) === null || _a === void 0 ? void 0 : _a.data.refresh();
         }
     }, [tab]);
@@ -233,7 +232,7 @@ function ServerSideFetchingExample() {
                             }, children: "Update Selected" })] })), enableGlobalFilter: true, enableColumnFilter: true, enableSorting: true, enablePagination: true, initialState: {
                     pagination: {
                         pageIndex: 0,
-                        pageSize: 10,
+                        pageSize: 50,
                     },
                     columnPinning: {
                         left: [types_1.DEFAULT_SELECTION_COLUMN_NAME],
@@ -245,5 +244,9 @@ function ServerSideFetchingExample() {
                     console.log('Export completed:', result);
                 }, onExportError: (error) => {
                     console.error('Export error:', error);
-                }, enableHover: true, enableStripes: true, tableSize: "medium", enableColumnVisibility: true, enableTableSizeControl: true, enableReset: true, emptyMessage: "No employees found matching your criteria", skeletonRows: 10 })] }));
+                }, enableHover: true, enableStripes: true, tableSize: "medium", enableColumnVisibility: true, enableTableSizeControl: true, enableReset: true, emptyMessage: "No employees found matching your criteria", skeletonRows: 10, slotProps: {
+                    pagination: {
+                        rowsPerPageOptions: [5, 10, 20, 50, 100, 200],
+                    },
+                } })] }));
 }

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

@@ -6,21 +6,14 @@ 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);