@ackplus/react-tanstack-data-table 1.1.8 → 1.1.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/lib/data-table.d.ts.map +1 -1
- package/dist/lib/data-table.js +8 -11
- package/dist/lib/utils/debounced-fetch.utils.d.ts +9 -4
- package/dist/lib/utils/debounced-fetch.utils.d.ts.map +1 -1
- package/dist/lib/utils/debounced-fetch.utils.js +5 -4
- package/package.json +1 -1
- package/src/lib/data-table.tsx +9 -12
- package/src/lib/utils/debounced-fetch.utils.ts +11 -6
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"data-table.d.ts","sourceRoot":"","sources":["../../src/lib/data-table.tsx"],"names":[],"mappings":"AA8EA;;GAEG;AACH,eAAO,MAAM,SAAS,
|
|
1
|
+
{"version":3,"file":"data-table.d.ts","sourceRoot":"","sources":["../../src/lib/data-table.tsx"],"names":[],"mappings":"AA8EA;;GAEG;AACH,eAAO,MAAM,SAAS,KAszDpB,CAAC"}
|
package/dist/lib/data-table.js
CHANGED
|
@@ -238,7 +238,7 @@ logging, }, ref) {
|
|
|
238
238
|
// -------------------------------
|
|
239
239
|
// Callback hooks (grouped together)
|
|
240
240
|
// -------------------------------
|
|
241
|
-
const fetchData = (0, react_1.useCallback)(async (overrides = {}) => {
|
|
241
|
+
const fetchData = (0, react_1.useCallback)(async (overrides = {}, options) => {
|
|
242
242
|
var _a, _b;
|
|
243
243
|
if (!onFetchData) {
|
|
244
244
|
if (logger.isLevelEnabled('debug')) {
|
|
@@ -257,7 +257,7 @@ logging, }, ref) {
|
|
|
257
257
|
logger.info('Requesting data', { filters });
|
|
258
258
|
}
|
|
259
259
|
try {
|
|
260
|
-
const result = await debouncedFetch(filters);
|
|
260
|
+
const result = await debouncedFetch(filters, options === undefined ? 0 : options.delay || 300);
|
|
261
261
|
if (logger.isLevelEnabled('info')) {
|
|
262
262
|
logger.info('Fetch resolved', {
|
|
263
263
|
rows: (_b = (_a = result === null || result === void 0 ? void 0 : result.data) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0,
|
|
@@ -603,7 +603,8 @@ logging, }, ref) {
|
|
|
603
603
|
getCoreRowModel: (0, react_table_1.getCoreRowModel)(),
|
|
604
604
|
...(enableSorting ? { getSortedRowModel: (0, react_table_1.getSortedRowModel)() } : {}),
|
|
605
605
|
...(enableColumnFilter || enableGlobalFilter ? { getFilteredRowModel: (0, column_filter_feature_1.getCombinedFilteredRowModel)() } : {}),
|
|
606
|
-
|
|
606
|
+
// Only use getPaginationRowModel for client-side pagination
|
|
607
|
+
...(enablePagination && !isServerPagination ? { getPaginationRowModel: (0, react_table_1.getPaginationRowModel)() } : {}),
|
|
607
608
|
// Sorting
|
|
608
609
|
enableSorting: enableSorting,
|
|
609
610
|
manualSorting: isServerSorting,
|
|
@@ -647,11 +648,7 @@ logging, }, ref) {
|
|
|
647
648
|
// -------------------------------
|
|
648
649
|
// Note: globalFilter is needed in dependencies to trigger recalculation when filter changes
|
|
649
650
|
// The table object is stable, so we need to depend on the filter state directly
|
|
650
|
-
const rows =
|
|
651
|
-
const rowModel = table.getRowModel();
|
|
652
|
-
return (rowModel === null || rowModel === void 0 ? void 0 : rowModel.rows) || [];
|
|
653
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
654
|
-
}, [table, tableData, globalFilter, enableGlobalFilter, enableColumnFilter, enablePagination]);
|
|
651
|
+
const rows = table.getRowModel().rows;
|
|
655
652
|
const rowVirtualizer = (0, react_virtual_1.useVirtualizer)({
|
|
656
653
|
count: rows.length,
|
|
657
654
|
getScrollElement: () => tableContainerRef.current,
|
|
@@ -689,7 +686,7 @@ logging, }, ref) {
|
|
|
689
686
|
if (logger.isLevelEnabled('info')) {
|
|
690
687
|
logger.info('Initial data load triggered', { initialLoadData });
|
|
691
688
|
}
|
|
692
|
-
fetchData();
|
|
689
|
+
fetchData({});
|
|
693
690
|
}
|
|
694
691
|
else if (logger.isLevelEnabled('debug')) {
|
|
695
692
|
logger.debug('Skipping initial data load', {
|
|
@@ -1019,7 +1016,7 @@ logging, }, ref) {
|
|
|
1019
1016
|
reload: () => {
|
|
1020
1017
|
const allState = table.getState();
|
|
1021
1018
|
onDataStateChange === null || onDataStateChange === void 0 ? void 0 : onDataStateChange(allState);
|
|
1022
|
-
|
|
1019
|
+
fetchData === null || fetchData === void 0 ? void 0 : fetchData({});
|
|
1023
1020
|
if (logger.isLevelEnabled('debug')) {
|
|
1024
1021
|
logger.info('Reloading data', allState);
|
|
1025
1022
|
}
|
|
@@ -1444,7 +1441,7 @@ logging, }, ref) {
|
|
|
1444
1441
|
handleColumnFilterStateChange,
|
|
1445
1442
|
idKey,
|
|
1446
1443
|
onDataStateChange,
|
|
1447
|
-
|
|
1444
|
+
fetchData,
|
|
1448
1445
|
enableColumnPinning,
|
|
1449
1446
|
enablePagination,
|
|
1450
1447
|
// Export dependencies
|
|
@@ -1,9 +1,14 @@
|
|
|
1
1
|
import { TableFiltersForFetch } from '../types';
|
|
2
|
+
interface useDebouncedFetchReturn<T extends Record<string, any>> {
|
|
3
|
+
debouncedFetch: (filters: TableFiltersForFetch, debounceDelay?: number) => Promise<{
|
|
4
|
+
data: T[];
|
|
5
|
+
total: number;
|
|
6
|
+
}>;
|
|
7
|
+
isLoading: boolean;
|
|
8
|
+
}
|
|
2
9
|
export declare function useDebouncedFetch<T extends Record<string, any>>(onFetchData: ((filters: TableFiltersForFetch) => Promise<{
|
|
3
10
|
data: T[];
|
|
4
11
|
total: number;
|
|
5
|
-
}>) | undefined
|
|
6
|
-
|
|
7
|
-
isLoading: any;
|
|
8
|
-
};
|
|
12
|
+
}>) | undefined): useDebouncedFetchReturn<T>;
|
|
13
|
+
export {};
|
|
9
14
|
//# sourceMappingURL=debounced-fetch.utils.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"debounced-fetch.utils.d.ts","sourceRoot":"","sources":["../../../src/lib/utils/debounced-fetch.utils.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"debounced-fetch.utils.d.ts","sourceRoot":"","sources":["../../../src/lib/utils/debounced-fetch.utils.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAI/C,UAAU,uBAAuB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;IAC5D,cAAc,EAAE,CAAC,OAAO,EAAE,oBAAoB,EAAE,aAAa,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC;QAAE,IAAI,EAAE,CAAC,EAAE,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACjH,SAAS,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAC3D,WAAW,EAAE,CAAC,CAAC,OAAO,EAAE,oBAAoB,KAAK,OAAO,CAAC;IAAE,IAAI,EAAE,CAAC,EAAE,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC,GAAG,SAAS,GACpG,uBAAuB,CAAC,CAAC,CAAC,CA6C5B"}
|
|
@@ -2,10 +2,11 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.useDebouncedFetch = useDebouncedFetch;
|
|
4
4
|
const react_1 = require("react");
|
|
5
|
-
|
|
5
|
+
const DEFAULT_DEBOUNCE_DELAY = 300;
|
|
6
|
+
function useDebouncedFetch(onFetchData) {
|
|
6
7
|
const [isLoading, setIsLoading] = (0, react_1.useState)(false);
|
|
7
8
|
const debounceTimer = (0, react_1.useRef)(null);
|
|
8
|
-
const debouncedFetch = (0, react_1.useCallback)(async (filters) => {
|
|
9
|
+
const debouncedFetch = (0, react_1.useCallback)(async (filters, debounceDelay = DEFAULT_DEBOUNCE_DELAY) => {
|
|
9
10
|
if (!onFetchData)
|
|
10
11
|
return null;
|
|
11
12
|
// Create a unique key for the current fetch parameters
|
|
@@ -29,9 +30,9 @@ function useDebouncedFetch(onFetchData, delay = 300) {
|
|
|
29
30
|
finally {
|
|
30
31
|
setIsLoading(false);
|
|
31
32
|
}
|
|
32
|
-
},
|
|
33
|
+
}, debounceDelay);
|
|
33
34
|
});
|
|
34
|
-
}, [onFetchData
|
|
35
|
+
}, [onFetchData]);
|
|
35
36
|
// Cleanup timer on unmount
|
|
36
37
|
(0, react_1.useEffect)(() => {
|
|
37
38
|
// Fetch data when dependencies change
|
package/package.json
CHANGED
package/src/lib/data-table.tsx
CHANGED
|
@@ -308,7 +308,7 @@ export const DataTable = forwardRef<DataTableApi<any>, DataTableProps<any>>(func
|
|
|
308
308
|
// -------------------------------
|
|
309
309
|
// Callback hooks (grouped together)
|
|
310
310
|
// -------------------------------
|
|
311
|
-
const fetchData = useCallback(async (overrides: Partial<TableState> = {}) => {
|
|
311
|
+
const fetchData = useCallback(async (overrides: Partial<TableState> = {}, options?: { delay?: number }) => {
|
|
312
312
|
if (!onFetchData) {
|
|
313
313
|
if (logger.isLevelEnabled('debug')) {
|
|
314
314
|
logger.debug('onFetchData not provided, skipping fetch', { overrides, columnFilter, sorting, pagination });
|
|
@@ -329,7 +329,7 @@ export const DataTable = forwardRef<DataTableApi<any>, DataTableProps<any>>(func
|
|
|
329
329
|
}
|
|
330
330
|
|
|
331
331
|
try {
|
|
332
|
-
const result = await debouncedFetch(filters);
|
|
332
|
+
const result = await debouncedFetch(filters, options === undefined ? 0 : options.delay || 300);
|
|
333
333
|
|
|
334
334
|
if (logger.isLevelEnabled('info')) {
|
|
335
335
|
logger.info('Fetch resolved', {
|
|
@@ -713,7 +713,8 @@ export const DataTable = forwardRef<DataTableApi<any>, DataTableProps<any>>(func
|
|
|
713
713
|
getCoreRowModel: getCoreRowModel(),
|
|
714
714
|
...(enableSorting ? { getSortedRowModel: getSortedRowModel() } : {}),
|
|
715
715
|
...(enableColumnFilter || enableGlobalFilter ? { getFilteredRowModel: getCombinedFilteredRowModel<T>() } : {}),
|
|
716
|
-
|
|
716
|
+
// Only use getPaginationRowModel for client-side pagination
|
|
717
|
+
...(enablePagination && !isServerPagination ? { getPaginationRowModel: getPaginationRowModel() } : {}),
|
|
717
718
|
// Sorting
|
|
718
719
|
enableSorting: enableSorting,
|
|
719
720
|
manualSorting: isServerSorting,
|
|
@@ -760,11 +761,7 @@ export const DataTable = forwardRef<DataTableApi<any>, DataTableProps<any>>(func
|
|
|
760
761
|
// -------------------------------
|
|
761
762
|
// Note: globalFilter is needed in dependencies to trigger recalculation when filter changes
|
|
762
763
|
// The table object is stable, so we need to depend on the filter state directly
|
|
763
|
-
const rows =
|
|
764
|
-
const rowModel = table.getRowModel();
|
|
765
|
-
return rowModel?.rows || [];
|
|
766
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
767
|
-
}, [table, tableData, globalFilter, enableGlobalFilter, enableColumnFilter, enablePagination]);
|
|
764
|
+
const rows = table.getRowModel().rows;
|
|
768
765
|
const rowVirtualizer = useVirtualizer({
|
|
769
766
|
count: rows.length,
|
|
770
767
|
getScrollElement: () => tableContainerRef.current,
|
|
@@ -803,7 +800,7 @@ export const DataTable = forwardRef<DataTableApi<any>, DataTableProps<any>>(func
|
|
|
803
800
|
if (logger.isLevelEnabled('info')) {
|
|
804
801
|
logger.info('Initial data load triggered', { initialLoadData });
|
|
805
802
|
}
|
|
806
|
-
fetchData();
|
|
803
|
+
fetchData({});
|
|
807
804
|
} else if (logger.isLevelEnabled('debug')) {
|
|
808
805
|
logger.debug('Skipping initial data load', {
|
|
809
806
|
initialLoadData,
|
|
@@ -1143,7 +1140,7 @@ export const DataTable = forwardRef<DataTableApi<any>, DataTableProps<any>>(func
|
|
|
1143
1140
|
const allState = table.getState();
|
|
1144
1141
|
|
|
1145
1142
|
onDataStateChange?.(allState);
|
|
1146
|
-
|
|
1143
|
+
fetchData?.({});
|
|
1147
1144
|
if (logger.isLevelEnabled('debug')) {
|
|
1148
1145
|
logger.info('Reloading data', allState);
|
|
1149
1146
|
}
|
|
@@ -1553,14 +1550,14 @@ export const DataTable = forwardRef<DataTableApi<any>, DataTableProps<any>>(func
|
|
|
1553
1550
|
}
|
|
1554
1551
|
},
|
|
1555
1552
|
},
|
|
1556
|
-
|
|
1553
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
1557
1554
|
}), [
|
|
1558
1555
|
table,
|
|
1559
1556
|
enhancedColumns,
|
|
1560
1557
|
handleColumnFilterStateChange,
|
|
1561
1558
|
idKey,
|
|
1562
1559
|
onDataStateChange,
|
|
1563
|
-
|
|
1560
|
+
fetchData,
|
|
1564
1561
|
enableColumnPinning,
|
|
1565
1562
|
enablePagination,
|
|
1566
1563
|
// Export dependencies
|
|
@@ -2,15 +2,20 @@ import { useCallback, useEffect, useRef, useState } from 'react';
|
|
|
2
2
|
|
|
3
3
|
import { TableFiltersForFetch } from '../types';
|
|
4
4
|
|
|
5
|
+
const DEFAULT_DEBOUNCE_DELAY = 300;
|
|
6
|
+
|
|
7
|
+
interface useDebouncedFetchReturn<T extends Record<string, any>> {
|
|
8
|
+
debouncedFetch: (filters: TableFiltersForFetch, debounceDelay?: number) => Promise<{ data: T[]; total: number }>;
|
|
9
|
+
isLoading: boolean;
|
|
10
|
+
}
|
|
5
11
|
|
|
6
12
|
export function useDebouncedFetch<T extends Record<string, any>>(
|
|
7
|
-
onFetchData: ((filters: TableFiltersForFetch) => Promise<{ data: T[]; total: number }>) | undefined
|
|
8
|
-
|
|
9
|
-
) {
|
|
13
|
+
onFetchData: ((filters: TableFiltersForFetch) => Promise<{ data: T[]; total: number }>) | undefined
|
|
14
|
+
): useDebouncedFetchReturn<T> {
|
|
10
15
|
const [isLoading, setIsLoading] = useState(false);
|
|
11
16
|
const debounceTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
|
|
12
17
|
|
|
13
|
-
const debouncedFetch = useCallback(async (filters: TableFiltersForFetch) => {
|
|
18
|
+
const debouncedFetch = useCallback(async (filters: TableFiltersForFetch, debounceDelay = DEFAULT_DEBOUNCE_DELAY) => {
|
|
14
19
|
if (!onFetchData) return null;
|
|
15
20
|
|
|
16
21
|
// Create a unique key for the current fetch parameters
|
|
@@ -33,9 +38,9 @@ export function useDebouncedFetch<T extends Record<string, any>>(
|
|
|
33
38
|
} finally {
|
|
34
39
|
setIsLoading(false);
|
|
35
40
|
}
|
|
36
|
-
},
|
|
41
|
+
}, debounceDelay);
|
|
37
42
|
});
|
|
38
|
-
}, [onFetchData
|
|
43
|
+
}, [onFetchData]);
|
|
39
44
|
|
|
40
45
|
// Cleanup timer on unmount
|
|
41
46
|
useEffect(() => {
|