@ackplus/react-tanstack-data-table 1.1.19 → 1.1.21
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/hooks/use-data-table-engine.d.ts.map +1 -1
- package/dist/lib/hooks/use-data-table-engine.js +54 -15
- package/dist/lib/types/data-table.types.d.ts +2 -1
- package/dist/lib/types/data-table.types.d.ts.map +1 -1
- package/package.json +3 -4
- package/src/index.ts +0 -75
- package/src/lib/components/data-table-view.tsx +0 -386
- package/src/lib/components/droupdown/menu-dropdown.tsx +0 -103
- package/src/lib/components/filters/filter-value-input.tsx +0 -225
- package/src/lib/components/filters/index.ts +0 -126
- package/src/lib/components/headers/draggable-header.tsx +0 -326
- package/src/lib/components/headers/index.ts +0 -6
- package/src/lib/components/headers/table-header.tsx +0 -175
- package/src/lib/components/index.ts +0 -21
- package/src/lib/components/pagination/data-table-pagination.tsx +0 -111
- package/src/lib/components/pagination/index.ts +0 -5
- package/src/lib/components/rows/data-table-row.tsx +0 -218
- package/src/lib/components/rows/empty-data-row.tsx +0 -69
- package/src/lib/components/rows/index.ts +0 -7
- package/src/lib/components/rows/loading-rows.tsx +0 -164
- package/src/lib/components/toolbar/bulk-actions-toolbar.tsx +0 -125
- package/src/lib/components/toolbar/column-filter-control.tsx +0 -432
- package/src/lib/components/toolbar/column-pinning-control.tsx +0 -275
- package/src/lib/components/toolbar/column-reset-control.tsx +0 -74
- package/src/lib/components/toolbar/column-visibility-control.tsx +0 -105
- package/src/lib/components/toolbar/data-table-toolbar.tsx +0 -257
- package/src/lib/components/toolbar/index.ts +0 -17
- package/src/lib/components/toolbar/table-export-control.tsx +0 -233
- package/src/lib/components/toolbar/table-refresh-control.tsx +0 -62
- package/src/lib/components/toolbar/table-search-control.tsx +0 -155
- package/src/lib/components/toolbar/table-size-control.tsx +0 -102
- package/src/lib/contexts/data-table-context.tsx +0 -126
- package/src/lib/data-table.tsx +0 -29
- package/src/lib/features/README.md +0 -161
- package/src/lib/features/column-filter.feature.ts +0 -493
- package/src/lib/features/index.ts +0 -23
- package/src/lib/features/selection.feature.ts +0 -322
- package/src/lib/hooks/index.ts +0 -2
- package/src/lib/hooks/use-data-table-engine.ts +0 -1516
- package/src/lib/icons/add-icon.tsx +0 -23
- package/src/lib/icons/csv-icon.tsx +0 -15
- package/src/lib/icons/delete-icon.tsx +0 -30
- package/src/lib/icons/excel-icon.tsx +0 -15
- package/src/lib/icons/index.ts +0 -7
- package/src/lib/icons/unpin-icon.tsx +0 -18
- package/src/lib/icons/view-comfortable-icon.tsx +0 -45
- package/src/lib/icons/view-compact-icon.tsx +0 -55
- package/src/lib/types/column.types.ts +0 -63
- package/src/lib/types/data-table-api.ts +0 -191
- package/src/lib/types/data-table.types.ts +0 -192
- package/src/lib/types/export.types.ts +0 -223
- package/src/lib/types/index.ts +0 -24
- package/src/lib/types/slots.types.ts +0 -342
- package/src/lib/types/table.types.ts +0 -88
- package/src/lib/utils/column-helpers.ts +0 -72
- package/src/lib/utils/debounced-fetch.utils.ts +0 -131
- package/src/lib/utils/export-utils.ts +0 -712
- package/src/lib/utils/index.ts +0 -27
- package/src/lib/utils/logger.ts +0 -203
- package/src/lib/utils/slot-helpers.tsx +0 -194
- package/src/lib/utils/special-columns.utils.ts +0 -101
- package/src/lib/utils/styling-helpers.ts +0 -126
- package/src/lib/utils/table-helpers.ts +0 -106
|
@@ -1,72 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Column utilities for DataTable components
|
|
3
|
-
*/
|
|
4
|
-
import { Column, ColumnDef } from "@tanstack/react-table";
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
export type ColumnType = 'text' | 'number' | 'date' | 'boolean' | 'select' | 'actions';
|
|
8
|
-
|
|
9
|
-
/**
|
|
10
|
-
* Get the type of a column from its metadata
|
|
11
|
-
*/
|
|
12
|
-
export function getColumnType(column: Column<any, unknown>): ColumnType {
|
|
13
|
-
// Check if column has explicit type in columnDef
|
|
14
|
-
if (column?.columnDef?.type) {
|
|
15
|
-
return column.columnDef.type;
|
|
16
|
-
}
|
|
17
|
-
return 'text'; // Default to text
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
export function getCustomFilterComponent(column: Column<any, unknown>): any {
|
|
21
|
-
// Check if column has custom filter component in meta
|
|
22
|
-
return column?.columnDef?.filterComponent || column?.columnDef?.editComponent;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
export function getColumnOptions(column: Column<any, unknown>): any[] {
|
|
27
|
-
// Check if column has explicit options in meta
|
|
28
|
-
if (column?.columnDef?.options) {
|
|
29
|
-
return column?.columnDef.options || [];
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
// Default options for boolean type
|
|
33
|
-
const columnType = getColumnType(column);
|
|
34
|
-
if (columnType === 'boolean') {
|
|
35
|
-
return [
|
|
36
|
-
{
|
|
37
|
-
value: true,
|
|
38
|
-
label: 'Yes',
|
|
39
|
-
},
|
|
40
|
-
{
|
|
41
|
-
value: false,
|
|
42
|
-
label: 'No',
|
|
43
|
-
},
|
|
44
|
-
];
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
return [];
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
export function withIdsDeep<T>(cols: ColumnDef<T, any>[]): ColumnDef<T, any>[] {
|
|
51
|
-
return cols.map((c, i) => ({
|
|
52
|
-
...c,
|
|
53
|
-
id: c.id ?? (c as any).accessorKey ?? `col_${i}`,
|
|
54
|
-
...(Array.isArray((c as any).columns) && {
|
|
55
|
-
columns: withIdsDeep((c as any).columns)
|
|
56
|
-
}),
|
|
57
|
-
}));
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
/**
|
|
62
|
-
* Determine if a column should be filterable
|
|
63
|
-
*/
|
|
64
|
-
export function isColumnFilterable(column: Column<any, unknown>): boolean {
|
|
65
|
-
// Check if column is explicitly marked as filterable
|
|
66
|
-
if (column?.columnDef?.filterable !== undefined) {
|
|
67
|
-
return column?.columnDef?.filterable;
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
// Default to filterable for data columns
|
|
71
|
-
return true;
|
|
72
|
-
}
|
|
@@ -1,131 +0,0 @@
|
|
|
1
|
-
import { useCallback, useEffect, useRef, useState } from 'react';
|
|
2
|
-
|
|
3
|
-
import { DataFetchMeta, TableFilters } from '../types';
|
|
4
|
-
|
|
5
|
-
const DEFAULT_DEBOUNCE_DELAY = 300;
|
|
6
|
-
|
|
7
|
-
interface DebouncedFetchOptions {
|
|
8
|
-
debounceDelay?: number;
|
|
9
|
-
meta?: DataFetchMeta;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
interface useDebouncedFetchReturn<T extends Record<string, any>> {
|
|
13
|
-
debouncedFetch: (
|
|
14
|
-
filters: Partial<TableFilters>,
|
|
15
|
-
optionsOrDelay?: number | DebouncedFetchOptions
|
|
16
|
-
) => Promise<{ data: T[]; total: number } | null>;
|
|
17
|
-
isLoading: boolean;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
interface PendingRequest<T extends Record<string, any>> {
|
|
21
|
-
id: number;
|
|
22
|
-
resolve: (value: { data: T[]; total: number } | null) => void;
|
|
23
|
-
reject: (reason?: unknown) => void;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
export function useDebouncedFetch<T extends Record<string, any>>(
|
|
27
|
-
onFetchData: ((
|
|
28
|
-
filters: Partial<TableFilters>,
|
|
29
|
-
meta?: DataFetchMeta
|
|
30
|
-
) => Promise<{ data: T[]; total: number }>) | undefined
|
|
31
|
-
): useDebouncedFetchReturn<T> {
|
|
32
|
-
const [isLoading, setIsLoading] = useState(false);
|
|
33
|
-
const debounceTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
|
|
34
|
-
const pendingRequestRef = useRef<PendingRequest<T> | null>(null);
|
|
35
|
-
const latestRequestIdRef = useRef(0);
|
|
36
|
-
const activeRequestCountRef = useRef(0);
|
|
37
|
-
const isMountedRef = useRef(true);
|
|
38
|
-
|
|
39
|
-
const resetLoadingIfIdle = useCallback(() => {
|
|
40
|
-
if (!isMountedRef.current) return;
|
|
41
|
-
if (!debounceTimer.current && !pendingRequestRef.current && activeRequestCountRef.current === 0) {
|
|
42
|
-
setIsLoading(false);
|
|
43
|
-
}
|
|
44
|
-
}, []);
|
|
45
|
-
|
|
46
|
-
const debouncedFetch = useCallback(async (
|
|
47
|
-
filters: Partial<TableFilters>,
|
|
48
|
-
optionsOrDelay: number | DebouncedFetchOptions = DEFAULT_DEBOUNCE_DELAY
|
|
49
|
-
) => {
|
|
50
|
-
if (!onFetchData) return null;
|
|
51
|
-
|
|
52
|
-
const options = typeof optionsOrDelay === 'number'
|
|
53
|
-
? { debounceDelay: optionsOrDelay }
|
|
54
|
-
: optionsOrDelay;
|
|
55
|
-
const debounceDelay = options.debounceDelay ?? DEFAULT_DEBOUNCE_DELAY;
|
|
56
|
-
const requestId = latestRequestIdRef.current + 1;
|
|
57
|
-
latestRequestIdRef.current = requestId;
|
|
58
|
-
|
|
59
|
-
// Clear existing timer and resolve pending debounced request.
|
|
60
|
-
if (debounceTimer.current) {
|
|
61
|
-
clearTimeout(debounceTimer.current);
|
|
62
|
-
debounceTimer.current = null;
|
|
63
|
-
}
|
|
64
|
-
if (pendingRequestRef.current) {
|
|
65
|
-
pendingRequestRef.current.resolve(null);
|
|
66
|
-
pendingRequestRef.current = null;
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
setIsLoading(true);
|
|
70
|
-
|
|
71
|
-
return new Promise<{ data: T[]; total: number } | null>((resolve, reject) => {
|
|
72
|
-
pendingRequestRef.current = {
|
|
73
|
-
id: requestId,
|
|
74
|
-
resolve,
|
|
75
|
-
reject,
|
|
76
|
-
};
|
|
77
|
-
|
|
78
|
-
debounceTimer.current = setTimeout(async () => {
|
|
79
|
-
const pendingRequest = pendingRequestRef.current;
|
|
80
|
-
if (!pendingRequest || pendingRequest.id !== requestId) {
|
|
81
|
-
return;
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
pendingRequestRef.current = null;
|
|
85
|
-
debounceTimer.current = null;
|
|
86
|
-
activeRequestCountRef.current += 1;
|
|
87
|
-
|
|
88
|
-
try {
|
|
89
|
-
const result = await onFetchData(filters, options.meta);
|
|
90
|
-
|
|
91
|
-
// Ignore stale responses if a newer request was queued.
|
|
92
|
-
if (requestId === latestRequestIdRef.current) {
|
|
93
|
-
resolve(result);
|
|
94
|
-
} else {
|
|
95
|
-
resolve(null);
|
|
96
|
-
}
|
|
97
|
-
} catch (error) {
|
|
98
|
-
if (requestId === latestRequestIdRef.current) {
|
|
99
|
-
reject(error);
|
|
100
|
-
} else {
|
|
101
|
-
resolve(null);
|
|
102
|
-
}
|
|
103
|
-
} finally {
|
|
104
|
-
activeRequestCountRef.current = Math.max(0, activeRequestCountRef.current - 1);
|
|
105
|
-
resetLoadingIfIdle();
|
|
106
|
-
}
|
|
107
|
-
}, debounceDelay);
|
|
108
|
-
});
|
|
109
|
-
}, [onFetchData, resetLoadingIfIdle]);
|
|
110
|
-
|
|
111
|
-
// Cleanup timer on unmount
|
|
112
|
-
useEffect(() => {
|
|
113
|
-
isMountedRef.current = true;
|
|
114
|
-
return () => {
|
|
115
|
-
isMountedRef.current = false;
|
|
116
|
-
if (debounceTimer.current) {
|
|
117
|
-
clearTimeout(debounceTimer.current);
|
|
118
|
-
debounceTimer.current = null;
|
|
119
|
-
}
|
|
120
|
-
if (pendingRequestRef.current) {
|
|
121
|
-
pendingRequestRef.current.resolve(null);
|
|
122
|
-
pendingRequestRef.current = null;
|
|
123
|
-
}
|
|
124
|
-
};
|
|
125
|
-
}, []);
|
|
126
|
-
|
|
127
|
-
return {
|
|
128
|
-
debouncedFetch,
|
|
129
|
-
isLoading,
|
|
130
|
-
};
|
|
131
|
-
}
|