@ackplus/react-tanstack-data-table 1.1.8 → 1.1.10
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.js +5 -5
- 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 +6 -6
- package/src/lib/utils/debounced-fetch.utils.ts +11 -6
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,
|
|
@@ -689,7 +689,7 @@ logging, }, ref) {
|
|
|
689
689
|
if (logger.isLevelEnabled('info')) {
|
|
690
690
|
logger.info('Initial data load triggered', { initialLoadData });
|
|
691
691
|
}
|
|
692
|
-
fetchData();
|
|
692
|
+
fetchData({});
|
|
693
693
|
}
|
|
694
694
|
else if (logger.isLevelEnabled('debug')) {
|
|
695
695
|
logger.debug('Skipping initial data load', {
|
|
@@ -1019,7 +1019,7 @@ logging, }, ref) {
|
|
|
1019
1019
|
reload: () => {
|
|
1020
1020
|
const allState = table.getState();
|
|
1021
1021
|
onDataStateChange === null || onDataStateChange === void 0 ? void 0 : onDataStateChange(allState);
|
|
1022
|
-
|
|
1022
|
+
fetchData === null || fetchData === void 0 ? void 0 : fetchData({});
|
|
1023
1023
|
if (logger.isLevelEnabled('debug')) {
|
|
1024
1024
|
logger.info('Reloading data', allState);
|
|
1025
1025
|
}
|
|
@@ -1444,7 +1444,7 @@ logging, }, ref) {
|
|
|
1444
1444
|
handleColumnFilterStateChange,
|
|
1445
1445
|
idKey,
|
|
1446
1446
|
onDataStateChange,
|
|
1447
|
-
|
|
1447
|
+
fetchData,
|
|
1448
1448
|
enableColumnPinning,
|
|
1449
1449
|
enablePagination,
|
|
1450
1450
|
// 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', {
|
|
@@ -803,7 +803,7 @@ export const DataTable = forwardRef<DataTableApi<any>, DataTableProps<any>>(func
|
|
|
803
803
|
if (logger.isLevelEnabled('info')) {
|
|
804
804
|
logger.info('Initial data load triggered', { initialLoadData });
|
|
805
805
|
}
|
|
806
|
-
fetchData();
|
|
806
|
+
fetchData({});
|
|
807
807
|
} else if (logger.isLevelEnabled('debug')) {
|
|
808
808
|
logger.debug('Skipping initial data load', {
|
|
809
809
|
initialLoadData,
|
|
@@ -1143,7 +1143,7 @@ export const DataTable = forwardRef<DataTableApi<any>, DataTableProps<any>>(func
|
|
|
1143
1143
|
const allState = table.getState();
|
|
1144
1144
|
|
|
1145
1145
|
onDataStateChange?.(allState);
|
|
1146
|
-
|
|
1146
|
+
fetchData?.({});
|
|
1147
1147
|
if (logger.isLevelEnabled('debug')) {
|
|
1148
1148
|
logger.info('Reloading data', allState);
|
|
1149
1149
|
}
|
|
@@ -1553,14 +1553,14 @@ export const DataTable = forwardRef<DataTableApi<any>, DataTableProps<any>>(func
|
|
|
1553
1553
|
}
|
|
1554
1554
|
},
|
|
1555
1555
|
},
|
|
1556
|
-
|
|
1556
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
1557
1557
|
}), [
|
|
1558
1558
|
table,
|
|
1559
1559
|
enhancedColumns,
|
|
1560
1560
|
handleColumnFilterStateChange,
|
|
1561
1561
|
idKey,
|
|
1562
1562
|
onDataStateChange,
|
|
1563
|
-
|
|
1563
|
+
fetchData,
|
|
1564
1564
|
enableColumnPinning,
|
|
1565
1565
|
enablePagination,
|
|
1566
1566
|
// 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(() => {
|