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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ackplus/react-tanstack-data-table",
   "type": "commonjs",
-  "version": "1.0.21",
+  "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

@@ -602,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);