@ackplus/react-tanstack-data-table 1.0.34 → 1.1.1
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/LICENSE +21 -0
- package/{src → dist}/index.d.ts +21 -4
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +63 -0
- package/{src → dist}/lib/components/droupdown/menu-dropdown.d.ts +2 -1
- package/dist/lib/components/droupdown/menu-dropdown.d.ts.map +1 -0
- package/{src → dist}/lib/components/droupdown/menu-dropdown.js +38 -7
- package/{src → dist}/lib/components/filters/filter-value-input.d.ts +3 -1
- package/dist/lib/components/filters/filter-value-input.d.ts.map +1 -0
- package/dist/lib/components/filters/filter-value-input.js +83 -0
- package/{src → dist}/lib/components/filters/index.d.ts +1 -0
- package/dist/lib/components/filters/index.d.ts.map +1 -0
- package/dist/lib/components/filters/index.js +142 -0
- package/{src → dist}/lib/components/headers/draggable-header.d.ts +2 -2
- package/dist/lib/components/headers/draggable-header.d.ts.map +1 -0
- package/{src → dist}/lib/components/headers/draggable-header.js +81 -17
- package/dist/lib/components/headers/index.d.ts +6 -0
- package/dist/lib/components/headers/index.d.ts.map +1 -0
- package/dist/lib/components/headers/index.js +21 -0
- package/{src → dist}/lib/components/headers/table-header.d.ts +15 -1
- package/dist/lib/components/headers/table-header.d.ts.map +1 -0
- package/{src → dist}/lib/components/headers/table-header.js +50 -17
- package/{src → dist}/lib/components/index.d.ts +6 -1
- package/dist/lib/components/index.d.ts.map +1 -0
- package/dist/lib/components/index.js +32 -0
- package/{src → dist}/lib/components/pagination/data-table-pagination.d.ts +2 -1
- package/dist/lib/components/pagination/data-table-pagination.d.ts.map +1 -0
- package/{src → dist}/lib/components/pagination/data-table-pagination.js +20 -6
- package/dist/lib/components/pagination/index.d.ts +5 -0
- package/dist/lib/components/pagination/index.d.ts.map +1 -0
- package/dist/lib/components/pagination/index.js +20 -0
- package/{src → dist}/lib/components/rows/data-table-row.d.ts +15 -2
- package/dist/lib/components/rows/data-table-row.d.ts.map +1 -0
- package/{src → dist}/lib/components/rows/data-table-row.js +58 -25
- package/{src → dist}/lib/components/rows/empty-data-row.d.ts +3 -3
- package/dist/lib/components/rows/empty-data-row.d.ts.map +1 -0
- package/{src → dist}/lib/components/rows/empty-data-row.js +12 -4
- package/dist/lib/components/rows/index.d.ts +7 -0
- package/dist/lib/components/rows/index.d.ts.map +1 -0
- package/dist/lib/components/rows/index.js +22 -0
- package/{src → dist}/lib/components/rows/loading-rows.d.ts +3 -1
- package/dist/lib/components/rows/loading-rows.d.ts.map +1 -0
- package/{src → dist}/lib/components/rows/loading-rows.js +27 -19
- package/{src → dist}/lib/components/toolbar/bulk-actions-toolbar.d.ts +4 -3
- package/dist/lib/components/toolbar/bulk-actions-toolbar.d.ts.map +1 -0
- package/dist/lib/components/toolbar/bulk-actions-toolbar.js +49 -0
- package/{src → dist}/lib/components/toolbar/column-filter-control.d.ts +3 -1
- package/dist/lib/components/toolbar/column-filter-control.d.ts.map +1 -0
- package/{src → dist}/lib/components/toolbar/column-filter-control.js +73 -4
- package/{src → dist}/lib/components/toolbar/column-pinning-control.d.ts +2 -1
- package/dist/lib/components/toolbar/column-pinning-control.d.ts.map +1 -0
- package/{src → dist}/lib/components/toolbar/column-pinning-control.js +71 -7
- package/{src → dist}/lib/components/toolbar/column-reset-control.d.ts +3 -1
- package/dist/lib/components/toolbar/column-reset-control.d.ts.map +1 -0
- package/{src → dist}/lib/components/toolbar/column-reset-control.js +9 -3
- package/{src → dist}/lib/components/toolbar/column-visibility-control.d.ts +2 -1
- package/dist/lib/components/toolbar/column-visibility-control.d.ts.map +1 -0
- package/dist/lib/components/toolbar/column-visibility-control.js +77 -0
- package/{src → dist}/lib/components/toolbar/data-table-toolbar.d.ts +3 -2
- package/dist/lib/components/toolbar/data-table-toolbar.d.ts.map +1 -0
- package/{src → dist}/lib/components/toolbar/data-table-toolbar.js +17 -4
- package/{src → dist}/lib/components/toolbar/index.d.ts +4 -0
- package/dist/lib/components/toolbar/index.d.ts.map +1 -0
- package/{src → dist}/lib/components/toolbar/index.js +6 -0
- package/dist/lib/components/toolbar/table-export-control.d.ts +12 -0
- package/dist/lib/components/toolbar/table-export-control.d.ts.map +1 -0
- package/dist/lib/components/toolbar/table-export-control.js +67 -0
- package/{src → dist}/lib/components/toolbar/table-search-control.d.ts +3 -1
- package/dist/lib/components/toolbar/table-search-control.d.ts.map +1 -0
- package/{src → dist}/lib/components/toolbar/table-search-control.js +45 -2
- package/{src → dist}/lib/components/toolbar/table-size-control.d.ts +3 -1
- package/dist/lib/components/toolbar/table-size-control.d.ts.map +1 -0
- package/{src → dist}/lib/components/toolbar/table-size-control.js +20 -8
- package/{src → dist}/lib/contexts/data-table-context.d.ts +6 -2
- package/dist/lib/contexts/data-table-context.d.ts.map +1 -0
- package/{src → dist}/lib/contexts/data-table-context.js +34 -1
- package/dist/lib/data-table.d.ts +5 -0
- package/dist/lib/data-table.d.ts.map +1 -0
- package/{src/lib/components/table → dist/lib}/data-table.js +449 -151
- package/dist/lib/features/column-filter.feature.d.ts +55 -0
- package/dist/lib/features/column-filter.feature.d.ts.map +1 -0
- package/{src → dist}/lib/features/column-filter.feature.js +116 -18
- package/dist/lib/features/index.d.ts +9 -0
- package/dist/lib/features/index.d.ts.map +1 -0
- package/{src → dist}/lib/features/index.js +7 -0
- package/{src → dist}/lib/features/selection.feature.d.ts +8 -1
- package/dist/lib/features/selection.feature.d.ts.map +1 -0
- package/{src → dist}/lib/features/selection.feature.js +76 -15
- package/dist/lib/icons/add-icon.d.ts +4 -0
- package/dist/lib/icons/add-icon.d.ts.map +1 -0
- package/dist/lib/icons/add-icon.js +12 -0
- package/dist/lib/icons/csv-icon.d.ts +4 -0
- package/dist/lib/icons/csv-icon.d.ts.map +1 -0
- package/dist/lib/icons/csv-icon.js +12 -0
- package/dist/lib/icons/delete-icon.d.ts +4 -0
- package/dist/lib/icons/delete-icon.d.ts.map +1 -0
- package/dist/lib/icons/delete-icon.js +12 -0
- package/dist/lib/icons/excel-icon.d.ts +4 -0
- package/dist/lib/icons/excel-icon.d.ts.map +1 -0
- package/dist/lib/icons/excel-icon.js +12 -0
- package/dist/lib/icons/index.d.ts +8 -0
- package/dist/lib/icons/index.d.ts.map +1 -0
- package/dist/lib/icons/unpin-icon.d.ts +4 -0
- package/dist/lib/icons/unpin-icon.d.ts.map +1 -0
- package/dist/lib/icons/unpin-icon.js +12 -0
- package/{src → dist}/lib/icons/view-comfortable-icon.d.ts +3 -1
- package/dist/lib/icons/view-comfortable-icon.d.ts.map +1 -0
- package/dist/lib/icons/view-comfortable-icon.js +12 -0
- package/dist/lib/icons/view-compact-icon.d.ts +4 -0
- package/dist/lib/icons/view-compact-icon.d.ts.map +1 -0
- package/dist/lib/icons/view-compact-icon.js +12 -0
- package/{src → dist}/lib/types/column.types.d.ts +10 -1
- package/dist/lib/types/column.types.d.ts.map +1 -0
- package/{src → dist}/lib/types/data-table-api.d.ts +2 -1
- package/dist/lib/types/data-table-api.d.ts.map +1 -0
- package/{src/lib/components/table → dist/lib/types}/data-table.types.d.ts +10 -10
- package/dist/lib/types/data-table.types.d.ts.map +1 -0
- package/{src → dist}/lib/types/export.types.d.ts +38 -0
- package/dist/lib/types/export.types.d.ts.map +1 -0
- package/dist/lib/types/export.types.js +6 -0
- package/{src → dist}/lib/types/index.d.ts +5 -0
- package/dist/lib/types/index.d.ts.map +1 -0
- package/dist/lib/types/index.js +30 -0
- package/{src → dist}/lib/types/slots.types.d.ts +50 -3
- package/dist/lib/types/slots.types.d.ts.map +1 -0
- package/{src → dist}/lib/types/table.types.d.ts +14 -0
- package/dist/lib/types/table.types.d.ts.map +1 -0
- package/{src → dist}/lib/utils/column-helpers.d.ts +10 -0
- package/dist/lib/utils/column-helpers.d.ts.map +1 -0
- package/{src → dist}/lib/utils/column-helpers.js +20 -4
- package/{src → dist}/lib/utils/debounced-fetch.utils.d.ts +3 -5
- package/dist/lib/utils/debounced-fetch.utils.d.ts.map +1 -0
- package/{src → dist}/lib/utils/debounced-fetch.utils.js +12 -6
- package/{src → dist}/lib/utils/export-utils.d.ts +13 -0
- package/dist/lib/utils/export-utils.d.ts.map +1 -0
- package/dist/lib/utils/export-utils.js +252 -0
- package/{src → dist}/lib/utils/index.d.ts +4 -0
- package/dist/lib/utils/index.d.ts.map +1 -0
- package/dist/lib/utils/index.js +35 -0
- package/{src → dist}/lib/utils/logger.d.ts +43 -0
- package/dist/lib/utils/logger.d.ts.map +1 -0
- package/{src → dist}/lib/utils/logger.js +22 -2
- package/{src → dist}/lib/utils/slot-helpers.d.ts +39 -1
- package/dist/lib/utils/slot-helpers.d.ts.map +1 -0
- package/{src → dist}/lib/utils/slot-helpers.js +55 -6
- package/{src → dist}/lib/utils/special-columns.utils.d.ts +10 -0
- package/dist/lib/utils/special-columns.utils.d.ts.map +1 -0
- package/{src → dist}/lib/utils/special-columns.utils.js +41 -5
- package/{src → dist}/lib/utils/styling-helpers.d.ts +20 -0
- package/dist/lib/utils/styling-helpers.d.ts.map +1 -0
- package/dist/lib/utils/styling-helpers.js +108 -0
- package/{src → dist}/lib/utils/table-helpers.d.ts +25 -0
- package/dist/lib/utils/table-helpers.d.ts.map +1 -0
- package/{src → dist}/lib/utils/table-helpers.js +24 -0
- package/package.json +36 -11
- package/src/index.ts +71 -0
- package/src/lib/components/droupdown/menu-dropdown.tsx +97 -0
- package/src/lib/components/filters/filter-value-input.tsx +225 -0
- package/src/lib/components/filters/{index.js → index.ts} +3 -6
- package/src/lib/components/headers/draggable-header.tsx +326 -0
- package/src/lib/components/headers/{index.d.ts → index.ts} +4 -0
- package/src/lib/components/headers/table-header.tsx +173 -0
- package/src/lib/components/index.ts +21 -0
- package/src/lib/components/pagination/data-table-pagination.tsx +99 -0
- package/src/lib/components/pagination/index.ts +5 -0
- package/src/lib/components/rows/data-table-row.tsx +208 -0
- package/src/lib/components/rows/empty-data-row.tsx +69 -0
- package/src/lib/components/rows/{index.d.ts → index.ts} +4 -0
- package/src/lib/components/rows/loading-rows.tsx +160 -0
- package/src/lib/components/toolbar/bulk-actions-toolbar.tsx +125 -0
- package/src/lib/components/toolbar/column-filter-control.tsx +374 -0
- package/src/lib/components/toolbar/column-pinning-control.tsx +275 -0
- package/src/lib/components/toolbar/column-reset-control.tsx +74 -0
- package/src/lib/components/toolbar/column-visibility-control.tsx +105 -0
- package/src/lib/components/toolbar/data-table-toolbar.tsx +229 -0
- package/src/lib/components/toolbar/index.ts +17 -0
- package/src/lib/components/toolbar/table-export-control.tsx +179 -0
- package/src/lib/components/toolbar/table-search-control.tsx +155 -0
- package/src/lib/components/toolbar/table-size-control.tsx +102 -0
- package/src/lib/contexts/data-table-context.tsx +112 -0
- package/src/lib/data-table.tsx +1911 -0
- package/src/lib/features/README.md +161 -0
- package/src/lib/features/column-filter.feature.ts +456 -0
- package/src/lib/features/index.ts +23 -0
- package/src/lib/features/selection.feature.ts +318 -0
- package/src/lib/icons/add-icon.tsx +23 -0
- package/src/lib/icons/csv-icon.tsx +15 -0
- package/src/lib/icons/delete-icon.tsx +30 -0
- package/src/lib/icons/excel-icon.tsx +15 -0
- package/src/lib/icons/unpin-icon.tsx +18 -0
- package/src/lib/icons/view-comfortable-icon.tsx +45 -0
- package/src/lib/icons/view-compact-icon.tsx +55 -0
- package/src/lib/types/column.types.ts +44 -0
- package/src/lib/types/data-table-api.ts +169 -0
- package/src/lib/types/data-table.types.ts +139 -0
- package/src/lib/types/export.types.ts +154 -0
- package/src/lib/types/index.ts +22 -0
- package/src/lib/types/slots.types.ts +332 -0
- package/src/lib/types/table.types.ts +90 -0
- package/src/lib/utils/column-helpers.ts +72 -0
- package/src/lib/utils/debounced-fetch.utils.ts +54 -0
- package/src/lib/utils/export-utils.ts +285 -0
- package/src/lib/utils/index.ts +27 -0
- package/src/lib/utils/logger.ts +203 -0
- package/src/lib/utils/slot-helpers.tsx +194 -0
- package/src/lib/utils/special-columns.utils.ts +94 -0
- package/src/lib/utils/styling-helpers.ts +126 -0
- package/src/lib/utils/table-helpers.ts +106 -0
- package/src/index.js +0 -27
- package/src/lib/components/filters/filter-value-input.js +0 -41
- package/src/lib/components/headers/index.js +0 -5
- package/src/lib/components/index.js +0 -10
- package/src/lib/components/pagination/index.d.ts +0 -1
- package/src/lib/components/pagination/index.js +0 -4
- package/src/lib/components/rows/index.js +0 -6
- package/src/lib/components/table/data-table.d.ts +0 -4
- package/src/lib/components/table/index.d.ts +0 -2
- package/src/lib/components/table/index.js +0 -5
- package/src/lib/components/toolbar/bulk-actions-toolbar.js +0 -30
- package/src/lib/components/toolbar/column-visibility-control.js +0 -31
- package/src/lib/components/toolbar/table-export-control.d.ts +0 -31
- package/src/lib/components/toolbar/table-export-control.js +0 -56
- package/src/lib/examples/advanced-features-example.d.ts +0 -1
- package/src/lib/examples/advanced-features-example.js +0 -269
- package/src/lib/examples/bulk-actions-test.d.ts +0 -1
- package/src/lib/examples/bulk-actions-test.js +0 -44
- package/src/lib/examples/custom-column-filter-example.d.ts +0 -1
- package/src/lib/examples/custom-column-filter-example.js +0 -60
- package/src/lib/examples/index.d.ts +0 -8
- package/src/lib/examples/index.js +0 -19
- package/src/lib/examples/selection-test-example.d.ts +0 -1
- package/src/lib/examples/selection-test-example.js +0 -101
- package/src/lib/examples/server-side-fetching-example.d.ts +0 -1
- package/src/lib/examples/server-side-fetching-example.js +0 -245
- package/src/lib/examples/server-side-test.d.ts +0 -1
- package/src/lib/examples/server-side-test.js +0 -9
- package/src/lib/examples/simple-local-example.d.ts +0 -1
- package/src/lib/examples/simple-local-example.js +0 -95
- package/src/lib/examples/simple-slots-example.d.ts +0 -1
- package/src/lib/examples/simple-slots-example.js +0 -115
- package/src/lib/features/column-filter.feature.d.ts +0 -45
- package/src/lib/features/index.d.ts +0 -2
- package/src/lib/hooks/index.d.ts +0 -1
- package/src/lib/hooks/index.js +0 -4
- package/src/lib/hooks/use-data-table-api.d.ts +0 -46
- package/src/lib/hooks/use-data-table-api.js +0 -690
- package/src/lib/icons/add-icon.d.ts +0 -2
- package/src/lib/icons/add-icon.js +0 -8
- package/src/lib/icons/csv-icon.d.ts +0 -2
- package/src/lib/icons/csv-icon.js +0 -8
- package/src/lib/icons/delete-icon.d.ts +0 -2
- package/src/lib/icons/delete-icon.js +0 -8
- package/src/lib/icons/excel-icon.d.ts +0 -2
- package/src/lib/icons/excel-icon.js +0 -8
- package/src/lib/icons/unpin-icon.d.ts +0 -2
- package/src/lib/icons/unpin-icon.js +0 -8
- package/src/lib/icons/view-comfortable-icon.js +0 -8
- package/src/lib/icons/view-compact-icon.d.ts +0 -2
- package/src/lib/icons/view-compact-icon.js +0 -8
- package/src/lib/types/export.types.js +0 -2
- package/src/lib/types/index.js +0 -8
- package/src/lib/utils/export-utils.js +0 -175
- package/src/lib/utils/index.js +0 -11
- package/src/lib/utils/styling-helpers.js +0 -70
- package/tsconfig.tsbuildinfo +0 -1
- /package/{src → dist}/lib/icons/index.js +0 -0
- /package/{src → dist}/lib/types/column.types.js +0 -0
- /package/{src → dist}/lib/types/data-table-api.js +0 -0
- /package/{src/lib/components/table → dist/lib/types}/data-table.types.js +0 -0
- /package/{src → dist}/lib/types/slots.types.js +0 -0
- /package/{src → dist}/lib/types/table.types.js +0 -0
- /package/src/lib/icons/{index.d.ts → index.ts} +0 -0
|
@@ -0,0 +1,194 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Enhanced Slot Helper Utilities
|
|
3
|
+
*
|
|
4
|
+
* Utilities to help with rendering slotted components with enhanced prop merging,
|
|
5
|
+
* type safety, and full customization support.
|
|
6
|
+
*/
|
|
7
|
+
import { ComponentType, createElement } from 'react';
|
|
8
|
+
import { DataTableSlots } from '../types/slots.types';
|
|
9
|
+
|
|
10
|
+
/**
|
|
11
|
+
* Enhanced slot component retrieval with better type safety
|
|
12
|
+
*/
|
|
13
|
+
export function getSlotComponent<T, K extends keyof DataTableSlots<T>>(
|
|
14
|
+
slots: Partial<DataTableSlots<T>> | undefined,
|
|
15
|
+
slotName: K,
|
|
16
|
+
fallback: ComponentType<any>,
|
|
17
|
+
): ComponentType<any> {
|
|
18
|
+
return (slots?.[slotName] as ComponentType<any>) || fallback;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
/**
|
|
22
|
+
* Merge slot props with default props and user overrides
|
|
23
|
+
* Handles special cases for MUI sx prop, style prop, and className
|
|
24
|
+
*/
|
|
25
|
+
export function mergeSlotProps(
|
|
26
|
+
defaultProps: Record<string, any> = {},
|
|
27
|
+
slotProps: Record<string, any> = {},
|
|
28
|
+
userProps: Record<string, any> = {}
|
|
29
|
+
): Record<string, any> {
|
|
30
|
+
// Deep merge objects, giving priority to user props
|
|
31
|
+
const merged = { ...defaultProps };
|
|
32
|
+
|
|
33
|
+
// Merge slot props
|
|
34
|
+
Object.keys(slotProps).forEach(key => {
|
|
35
|
+
const slotValue = slotProps[key];
|
|
36
|
+
const mergedValue = merged[key];
|
|
37
|
+
|
|
38
|
+
if (key === 'sx' && typeof slotValue === 'object' && typeof mergedValue === 'object') {
|
|
39
|
+
// Special handling for MUI sx prop
|
|
40
|
+
merged[key] = { ...mergedValue, ...slotValue };
|
|
41
|
+
} else if (key === 'style' && typeof slotValue === 'object' && typeof mergedValue === 'object') {
|
|
42
|
+
// Special handling for style prop
|
|
43
|
+
merged[key] = { ...mergedValue, ...slotValue };
|
|
44
|
+
} else if (key === 'className' && typeof slotValue === 'string' && typeof mergedValue === 'string') {
|
|
45
|
+
// Special handling for className prop
|
|
46
|
+
merged[key] = `${mergedValue} ${slotValue}`.trim();
|
|
47
|
+
} else {
|
|
48
|
+
merged[key] = slotValue;
|
|
49
|
+
}
|
|
50
|
+
});
|
|
51
|
+
|
|
52
|
+
// Merge user props (highest priority)
|
|
53
|
+
Object.keys(userProps).forEach(key => {
|
|
54
|
+
const userValue = userProps[key];
|
|
55
|
+
const mergedValue = merged[key];
|
|
56
|
+
|
|
57
|
+
if (key === 'sx' && typeof userValue === 'object' && typeof mergedValue === 'object') {
|
|
58
|
+
// Special handling for MUI sx prop
|
|
59
|
+
merged[key] = { ...mergedValue, ...userValue };
|
|
60
|
+
} else if (key === 'style' && typeof userValue === 'object' && typeof mergedValue === 'object') {
|
|
61
|
+
// Special handling for style prop
|
|
62
|
+
merged[key] = { ...mergedValue, ...userValue };
|
|
63
|
+
} else if (key === 'className' && typeof userValue === 'string' && typeof mergedValue === 'string') {
|
|
64
|
+
// Special handling for className prop
|
|
65
|
+
merged[key] = `${mergedValue} ${userValue}`.trim();
|
|
66
|
+
} else {
|
|
67
|
+
merged[key] = userValue;
|
|
68
|
+
}
|
|
69
|
+
});
|
|
70
|
+
|
|
71
|
+
return merged;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
/**
|
|
75
|
+
* Enhanced slot component retrieval with automatic prop merging
|
|
76
|
+
*/
|
|
77
|
+
export function getSlotComponentWithProps<T, K extends keyof DataTableSlots<T>>(
|
|
78
|
+
slots: Partial<DataTableSlots<T>> | undefined,
|
|
79
|
+
slotProps: Record<string, any> = {},
|
|
80
|
+
slotName: K,
|
|
81
|
+
fallback: ComponentType<any>,
|
|
82
|
+
defaultProps: Record<string, any> = {}
|
|
83
|
+
): {
|
|
84
|
+
component: ComponentType<any>;
|
|
85
|
+
props: Record<string, any>;
|
|
86
|
+
} {
|
|
87
|
+
const component = getSlotComponent(slots, slotName, fallback);
|
|
88
|
+
const props = mergeSlotProps(
|
|
89
|
+
defaultProps,
|
|
90
|
+
slotProps[slotName as string] || {},
|
|
91
|
+
{}
|
|
92
|
+
);
|
|
93
|
+
|
|
94
|
+
return { component, props };
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
/**
|
|
98
|
+
* Utility to check if a slot is overridden by user
|
|
99
|
+
*/
|
|
100
|
+
export function isSlotOverridden<T, K extends keyof DataTableSlots<T>>(
|
|
101
|
+
slots: Partial<DataTableSlots<T>> | undefined,
|
|
102
|
+
slotName: K
|
|
103
|
+
): boolean {
|
|
104
|
+
return Boolean(slots?.[slotName]);
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
/**
|
|
108
|
+
* Utility to get all overridden slots
|
|
109
|
+
*/
|
|
110
|
+
export function getOverriddenSlots<T>(
|
|
111
|
+
slots: Partial<DataTableSlots<T>> | undefined
|
|
112
|
+
): Array<keyof DataTableSlots<T>> {
|
|
113
|
+
if (!slots) return [];
|
|
114
|
+
return Object.keys(slots).filter(key => Boolean(slots[key as keyof DataTableSlots<T>])) as Array<keyof DataTableSlots<T>>;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
/**
|
|
118
|
+
* Type-safe slot prop extractor
|
|
119
|
+
*/
|
|
120
|
+
export function extractSlotProps<T, K extends keyof DataTableSlots<T>>(
|
|
121
|
+
slotProps: Record<string, any> | undefined,
|
|
122
|
+
slotName: K
|
|
123
|
+
): Record<string, any> {
|
|
124
|
+
return (slotProps?.[slotName as string] || {}) as Record<string, any>;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
/**
|
|
128
|
+
* Enhanced slot component with better prop handling
|
|
129
|
+
*/
|
|
130
|
+
export function createEnhancedSlotComponent<T, K extends keyof DataTableSlots<T>>(
|
|
131
|
+
slots: Partial<DataTableSlots<T>> | undefined,
|
|
132
|
+
slotName: K,
|
|
133
|
+
fallback: ComponentType<any>,
|
|
134
|
+
baseProps: Record<string, any> = {}
|
|
135
|
+
): ComponentType<any> {
|
|
136
|
+
const SlotComponent = getSlotComponent(slots, slotName, fallback);
|
|
137
|
+
|
|
138
|
+
return function EnhancedSlot(props: any) {
|
|
139
|
+
const mergedProps = mergeSlotProps(baseProps, {}, props);
|
|
140
|
+
return createElement(SlotComponent, mergedProps);
|
|
141
|
+
};
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
/**
|
|
145
|
+
* Utility to validate slot props at runtime (development only)
|
|
146
|
+
*/
|
|
147
|
+
export function validateSlotProps<T, K extends keyof DataTableSlots<T>>(
|
|
148
|
+
slotName: K,
|
|
149
|
+
props: any,
|
|
150
|
+
requiredProps: string[] = []
|
|
151
|
+
): boolean {
|
|
152
|
+
if (process.env.NODE_ENV === 'development') {
|
|
153
|
+
const missingProps = requiredProps.filter(prop => !(prop in props));
|
|
154
|
+
if (missingProps.length > 0) {
|
|
155
|
+
console.warn(`Missing required props for slot "${String(slotName)}": ${missingProps.join(', ')}`);
|
|
156
|
+
return false;
|
|
157
|
+
}
|
|
158
|
+
}
|
|
159
|
+
return true;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
/**
|
|
163
|
+
* Helper to create slot props with proper typing
|
|
164
|
+
*/
|
|
165
|
+
export function createSlotProps<T>(
|
|
166
|
+
table: any,
|
|
167
|
+
additionalProps: Record<string, any> = {}
|
|
168
|
+
): Record<string, any> {
|
|
169
|
+
return {
|
|
170
|
+
table,
|
|
171
|
+
...additionalProps,
|
|
172
|
+
};
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
/**
|
|
176
|
+
* Enhanced slot component wrapper that handles all prop merging automatically
|
|
177
|
+
*/
|
|
178
|
+
export function withSlotProps<T, K extends keyof DataTableSlots<T>>(
|
|
179
|
+
slots: Partial<DataTableSlots<T>> | undefined,
|
|
180
|
+
slotProps: Record<string, any> = {},
|
|
181
|
+
slotName: K,
|
|
182
|
+
fallback: ComponentType<any>
|
|
183
|
+
) {
|
|
184
|
+
return function SlotWrapper(props: any) {
|
|
185
|
+
const SlotComponent = getSlotComponent(slots, slotName, fallback);
|
|
186
|
+
const mergedProps = mergeSlotProps(
|
|
187
|
+
{},
|
|
188
|
+
slotProps[slotName as string] || {},
|
|
189
|
+
props
|
|
190
|
+
);
|
|
191
|
+
|
|
192
|
+
return createElement(SlotComponent, mergedProps);
|
|
193
|
+
};
|
|
194
|
+
}
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
import { KeyboardArrowDownOutlined, KeyboardArrowUpOutlined } from '@mui/icons-material';
|
|
2
|
+
import { Checkbox, IconButton } from '@mui/material';
|
|
3
|
+
import { createElement } from 'react';
|
|
4
|
+
|
|
5
|
+
import { DataTableColumn, DEFAULT_EXPANDING_COLUMN_NAME, DEFAULT_SELECTION_COLUMN_NAME } from '../types';
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* Enhanced configuration for selection column
|
|
9
|
+
*/
|
|
10
|
+
export interface SelectionColumnConfig<T> {
|
|
11
|
+
multiSelect?: boolean;
|
|
12
|
+
// Note: isRowSelectable is handled by table options via table.canSelectRow(), not column config
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
/**
|
|
16
|
+
* Creates a default selection column using TanStack Table custom feature methods
|
|
17
|
+
*/
|
|
18
|
+
export const createSelectionColumn = <T>(config: Partial<DataTableColumn<T>> & SelectionColumnConfig<T>): DataTableColumn<T, any> => ({
|
|
19
|
+
id: DEFAULT_SELECTION_COLUMN_NAME,
|
|
20
|
+
size: 60,
|
|
21
|
+
minSize: 60,
|
|
22
|
+
align: 'center',
|
|
23
|
+
filterable: false,
|
|
24
|
+
enableResizing: false,
|
|
25
|
+
enableSorting: false,
|
|
26
|
+
enableHiding: false,
|
|
27
|
+
enablePinning: false,
|
|
28
|
+
hideInExport: true,
|
|
29
|
+
header: ({ table }) => {
|
|
30
|
+
if (!config.multiSelect) return null;
|
|
31
|
+
|
|
32
|
+
// Use TanStack Table custom feature methods (same pattern as TanStack documentation)
|
|
33
|
+
const allSelected = table.getIsAllRowsSelected?.() || false;
|
|
34
|
+
const someSelected = table.getIsSomeRowsSelected?.() || false;
|
|
35
|
+
|
|
36
|
+
return createElement(Checkbox, {
|
|
37
|
+
checked: allSelected,
|
|
38
|
+
indeterminate: someSelected && !allSelected,
|
|
39
|
+
disabled: false,
|
|
40
|
+
onChange: () => {
|
|
41
|
+
table.toggleAllRowsSelected?.();
|
|
42
|
+
},
|
|
43
|
+
size: 'small',
|
|
44
|
+
sx: { p: 0 },
|
|
45
|
+
});
|
|
46
|
+
},
|
|
47
|
+
|
|
48
|
+
cell: ({ row, table }) => {
|
|
49
|
+
const rowId = row.id as string;
|
|
50
|
+
|
|
51
|
+
// Use TanStack Table custom feature methods (same pattern as TanStack documentation)
|
|
52
|
+
const checked = table.getIsRowSelected?.(rowId) || false;
|
|
53
|
+
const canSelect = table.canSelectRow?.(rowId) ?? true;
|
|
54
|
+
|
|
55
|
+
return createElement(Checkbox, {
|
|
56
|
+
checked,
|
|
57
|
+
disabled: !canSelect,
|
|
58
|
+
onChange: () => {
|
|
59
|
+
if (canSelect) {
|
|
60
|
+
table.toggleRowSelected?.(rowId);
|
|
61
|
+
}
|
|
62
|
+
},
|
|
63
|
+
size: 'small',
|
|
64
|
+
sx: {
|
|
65
|
+
p: 0,
|
|
66
|
+
opacity: canSelect ? 1 : 0.5
|
|
67
|
+
},
|
|
68
|
+
});
|
|
69
|
+
},
|
|
70
|
+
...config,
|
|
71
|
+
});
|
|
72
|
+
|
|
73
|
+
/**
|
|
74
|
+
* Creates a default expanding column
|
|
75
|
+
*/
|
|
76
|
+
export const createExpandingColumn = <T>(config: Partial<DataTableColumn<T>>): DataTableColumn<T> => ({
|
|
77
|
+
id: DEFAULT_EXPANDING_COLUMN_NAME,
|
|
78
|
+
size: 60,
|
|
79
|
+
minSize: 60,
|
|
80
|
+
align: 'center',
|
|
81
|
+
filterable: false,
|
|
82
|
+
enableResizing: false,
|
|
83
|
+
enableSorting: false,
|
|
84
|
+
enableHiding: false,
|
|
85
|
+
enablePinning: false,
|
|
86
|
+
hideInExport: true,
|
|
87
|
+
header: '',
|
|
88
|
+
cell: ({ row }) => createElement(IconButton, {
|
|
89
|
+
onClick: row.getToggleExpandedHandler(),
|
|
90
|
+
size: 'small',
|
|
91
|
+
sx: { p: 0 },
|
|
92
|
+
}, row.getIsExpanded() ? createElement(KeyboardArrowUpOutlined) : createElement(KeyboardArrowDownOutlined)),
|
|
93
|
+
...config,
|
|
94
|
+
});
|
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Styling utilities for DataTable components
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
// Import types from centralized location
|
|
6
|
+
import type { DataTableColumn, PinnedColumnStyleOptions } from '../types';
|
|
7
|
+
|
|
8
|
+
/**
|
|
9
|
+
* Generate consistent styling for pinned columns
|
|
10
|
+
*/
|
|
11
|
+
export function getPinnedColumnStyle(options: PinnedColumnStyleOptions) {
|
|
12
|
+
const {
|
|
13
|
+
width = 'auto',
|
|
14
|
+
minWidth,
|
|
15
|
+
maxWidth,
|
|
16
|
+
isPinned,
|
|
17
|
+
pinnedPosition,
|
|
18
|
+
pinnedRightPosition,
|
|
19
|
+
isLastLeftPinnedColumn,
|
|
20
|
+
isFirstRightPinnedColumn,
|
|
21
|
+
zIndex = 1,
|
|
22
|
+
disableStickyHeader = false,
|
|
23
|
+
wrapText = false,
|
|
24
|
+
} = options;
|
|
25
|
+
|
|
26
|
+
// Pinned columns should ALWAYS be sticky, regardless of enableStickyHeader setting
|
|
27
|
+
const needsPinnedPositioning = isPinned;
|
|
28
|
+
const shouldBeSticky = isPinned; // Pinned columns are always sticky
|
|
29
|
+
|
|
30
|
+
// Position logic
|
|
31
|
+
let positionStyle = {};
|
|
32
|
+
if (shouldBeSticky) {
|
|
33
|
+
// Pinned columns must always be sticky - override any Table-level sticky positioning
|
|
34
|
+
positionStyle = { position: 'sticky' };
|
|
35
|
+
} else if (!disableStickyHeader) {
|
|
36
|
+
// Non-pinned columns: set relative when we're managing positioning
|
|
37
|
+
positionStyle = { position: 'relative' };
|
|
38
|
+
}
|
|
39
|
+
// When disableStickyHeader is true and column is not pinned, let Table handle stickiness
|
|
40
|
+
|
|
41
|
+
// Text wrapping styles - configurable per column
|
|
42
|
+
const textWrappingStyles = wrapText
|
|
43
|
+
? {
|
|
44
|
+
whiteSpace: 'normal' as const,
|
|
45
|
+
wordBreak: 'break-word' as const,
|
|
46
|
+
overflow: 'visible' as const,
|
|
47
|
+
}
|
|
48
|
+
: {
|
|
49
|
+
overflow: 'hidden' as const,
|
|
50
|
+
whiteSpace: 'nowrap' as const,
|
|
51
|
+
textOverflow: 'ellipsis' as const,
|
|
52
|
+
};
|
|
53
|
+
|
|
54
|
+
return {
|
|
55
|
+
// Width constraints - more strict for narrow columns
|
|
56
|
+
width,
|
|
57
|
+
...(minWidth !== undefined && { minWidth }),
|
|
58
|
+
...(maxWidth !== undefined ? { maxWidth } : { maxWidth: width }),
|
|
59
|
+
boxSizing: 'border-box',
|
|
60
|
+
...textWrappingStyles,
|
|
61
|
+
// Position handling
|
|
62
|
+
...positionStyle,
|
|
63
|
+
// Pinned positioning (works with both sticky modes)
|
|
64
|
+
...(needsPinnedPositioning ? {
|
|
65
|
+
left: isPinned === 'left' ? pinnedPosition : undefined,
|
|
66
|
+
right: isPinned === 'right' ? pinnedRightPosition : undefined,
|
|
67
|
+
zIndex,
|
|
68
|
+
} : {}),
|
|
69
|
+
|
|
70
|
+
boxShadow:
|
|
71
|
+
isPinned === 'left' && isLastLeftPinnedColumn
|
|
72
|
+
? 'inset -1px 0 0 var(--palette-TableCell-border), 2px 0 2px -4px rgba(0,0,0,.18)'
|
|
73
|
+
: isPinned === 'right' && isFirstRightPinnedColumn
|
|
74
|
+
? 'inset 1px 0 0 var(--palette-TableCell-border), -1px 0 2px -4px rgba(0,0,0,.18)'
|
|
75
|
+
: undefined,
|
|
76
|
+
// For pinned columns: use solid background + transparent overlay to prevent text bleeding through
|
|
77
|
+
...(isPinned ? {
|
|
78
|
+
// Solid base background (opaque)
|
|
79
|
+
backgroundColor: (theme) => theme.palette.background.paper,
|
|
80
|
+
// Transparent overlay for hover/selected states
|
|
81
|
+
backgroundImage: (theme) => `linear-gradient(var(--row-bg, ${theme.palette.background.paper}), var(--row-bg, ${theme.palette.background.paper}))`,
|
|
82
|
+
} : {
|
|
83
|
+
// Non-pinned columns: use standard transparent background
|
|
84
|
+
backgroundColor: (theme) => `var(--row-bg, ${theme.palette.background.paper})`,
|
|
85
|
+
}),
|
|
86
|
+
};
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
/**
|
|
90
|
+
* Common table cell styling
|
|
91
|
+
*/
|
|
92
|
+
export const tableCellStyles = {
|
|
93
|
+
sticky: {
|
|
94
|
+
position: 'sticky',
|
|
95
|
+
zIndex: 10,
|
|
96
|
+
backgroundColor: 'background.paper',
|
|
97
|
+
},
|
|
98
|
+
pinned: {
|
|
99
|
+
borderRight: '1px solid',
|
|
100
|
+
borderColor: 'divider',
|
|
101
|
+
},
|
|
102
|
+
} as const;
|
|
103
|
+
|
|
104
|
+
/**
|
|
105
|
+
* Common table row styling
|
|
106
|
+
*/
|
|
107
|
+
export const tableRowStyles = {
|
|
108
|
+
hover: {
|
|
109
|
+
'&:hover': {
|
|
110
|
+
backgroundColor: 'action.hover',
|
|
111
|
+
},
|
|
112
|
+
},
|
|
113
|
+
striped: {
|
|
114
|
+
'&:nth-of-type(odd)': {
|
|
115
|
+
backgroundColor: 'action.selected',
|
|
116
|
+
},
|
|
117
|
+
},
|
|
118
|
+
} as const;
|
|
119
|
+
|
|
120
|
+
/**
|
|
121
|
+
* Get text alignment style from column metadata
|
|
122
|
+
*/
|
|
123
|
+
export function getColumnAlignment(column?: DataTableColumn<any>): 'left' | 'center' | 'right' {
|
|
124
|
+
if (!column) return 'left';
|
|
125
|
+
return column.align || 'left';
|
|
126
|
+
}
|
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* General table utilities for DataTable components
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
// Import types from centralized location
|
|
6
|
+
import type { TableMetrics } from '../types';
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
export type DataTableSize = 'small' | 'medium';
|
|
10
|
+
|
|
11
|
+
/**
|
|
12
|
+
* Calculate skeleton rows count based on viewport and row height
|
|
13
|
+
*/
|
|
14
|
+
export function calculateSkeletonRows(
|
|
15
|
+
containerHeight: number,
|
|
16
|
+
rowHeight: number,
|
|
17
|
+
maxRows = 10,
|
|
18
|
+
): number {
|
|
19
|
+
const estimatedRows = Math.ceil(containerHeight / rowHeight);
|
|
20
|
+
return Math.min(estimatedRows, maxRows);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
/**
|
|
24
|
+
* Generate unique row ID for virtualization
|
|
25
|
+
*/
|
|
26
|
+
export function generateRowId<T>(row: T, index: number, idKey?: keyof T): string {
|
|
27
|
+
if (idKey && row[idKey]) {
|
|
28
|
+
return String(row[idKey]);
|
|
29
|
+
}
|
|
30
|
+
return `row-${index}`;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
/**
|
|
34
|
+
* Calculate total width of pinned columns
|
|
35
|
+
*/
|
|
36
|
+
export function calculatePinnedColumnsWidth(
|
|
37
|
+
columns: any[],
|
|
38
|
+
side: 'left' | 'right',
|
|
39
|
+
): number {
|
|
40
|
+
return columns
|
|
41
|
+
.filter(col => col.getIsPinned() === side)
|
|
42
|
+
.reduce((total, col) => total + (col.getSize() || 0), 0);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
/**
|
|
46
|
+
* Check if table should use fixed layout
|
|
47
|
+
*/
|
|
48
|
+
export function shouldUseFixedLayout(
|
|
49
|
+
fitToScreen: boolean,
|
|
50
|
+
enableColumnResizing: boolean,
|
|
51
|
+
totalColumns: number,
|
|
52
|
+
): boolean {
|
|
53
|
+
return fitToScreen || (enableColumnResizing && totalColumns > 5);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
/**
|
|
57
|
+
* Format cell value based on column type
|
|
58
|
+
*/
|
|
59
|
+
export function formatCellValue(value: any, type: string): string {
|
|
60
|
+
if (value === null || value === undefined) {
|
|
61
|
+
return '-';
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
switch (type) {
|
|
65
|
+
case 'date':
|
|
66
|
+
return value instanceof Date ? value.toLocaleDateString() : String(value);
|
|
67
|
+
case 'number':
|
|
68
|
+
return typeof value === 'number' ? value.toLocaleString() : String(value);
|
|
69
|
+
case 'boolean':
|
|
70
|
+
return value ? 'Yes' : 'No';
|
|
71
|
+
default:
|
|
72
|
+
return String(value);
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
/**
|
|
77
|
+
* Debounce function for search and filters
|
|
78
|
+
*/
|
|
79
|
+
export function debounce<T extends (...args: any[]) => any>(
|
|
80
|
+
func: T,
|
|
81
|
+
wait: number,
|
|
82
|
+
): (...args: Parameters<T>) => void {
|
|
83
|
+
let timeout: NodeJS.Timeout;
|
|
84
|
+
return (...args: Parameters<T>) => {
|
|
85
|
+
clearTimeout(timeout);
|
|
86
|
+
timeout = setTimeout(() => func(...args), wait);
|
|
87
|
+
};
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
/**
|
|
91
|
+
* Get table performance metrics
|
|
92
|
+
*/
|
|
93
|
+
|
|
94
|
+
export function calculateTableMetrics(
|
|
95
|
+
totalRows: number,
|
|
96
|
+
visibleRows: number,
|
|
97
|
+
columns: any[],
|
|
98
|
+
renderStartTime: number,
|
|
99
|
+
): TableMetrics {
|
|
100
|
+
return {
|
|
101
|
+
totalRows,
|
|
102
|
+
visibleRows,
|
|
103
|
+
pinnedColumns: columns.filter(col => col.getIsPinned()).length,
|
|
104
|
+
renderTime: performance.now() - renderStartTime,
|
|
105
|
+
};
|
|
106
|
+
}
|
package/src/index.js
DELETED
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.DataTableToolbar = exports.BulkActionsToolbar = exports.TableSizeControl = exports.TableExportControl = exports.ColumnResetControl = exports.ColumnPinningControl = exports.ColumnVisibilityControl = exports.DataTable = void 0;
|
|
4
|
-
const tslib_1 = require("tslib");
|
|
5
|
-
var table_1 = require("./lib/components/table");
|
|
6
|
-
Object.defineProperty(exports, "DataTable", { enumerable: true, get: function () { return table_1.DataTable; } });
|
|
7
|
-
tslib_1.__exportStar(require("./lib/components/headers"), exports);
|
|
8
|
-
tslib_1.__exportStar(require("./lib/components/rows"), exports);
|
|
9
|
-
tslib_1.__exportStar(require("./lib/components/filters"), exports);
|
|
10
|
-
tslib_1.__exportStar(require("./lib/components/pagination"), exports);
|
|
11
|
-
tslib_1.__exportStar(require("./lib/components/droupdown/menu-dropdown"), exports);
|
|
12
|
-
var toolbar_1 = require("./lib/components/toolbar");
|
|
13
|
-
Object.defineProperty(exports, "ColumnVisibilityControl", { enumerable: true, get: function () { return toolbar_1.ColumnVisibilityControl; } });
|
|
14
|
-
Object.defineProperty(exports, "ColumnPinningControl", { enumerable: true, get: function () { return toolbar_1.ColumnPinningControl; } });
|
|
15
|
-
Object.defineProperty(exports, "ColumnResetControl", { enumerable: true, get: function () { return toolbar_1.ColumnResetControl; } });
|
|
16
|
-
Object.defineProperty(exports, "TableExportControl", { enumerable: true, get: function () { return toolbar_1.TableExportControl; } });
|
|
17
|
-
Object.defineProperty(exports, "TableSizeControl", { enumerable: true, get: function () { return toolbar_1.TableSizeControl; } });
|
|
18
|
-
Object.defineProperty(exports, "BulkActionsToolbar", { enumerable: true, get: function () { return toolbar_1.BulkActionsToolbar; } });
|
|
19
|
-
Object.defineProperty(exports, "DataTableToolbar", { enumerable: true, get: function () { return toolbar_1.DataTableToolbar; } });
|
|
20
|
-
tslib_1.__exportStar(require("./lib/utils/styling-helpers"), exports);
|
|
21
|
-
tslib_1.__exportStar(require("./lib/utils/column-helpers"), exports);
|
|
22
|
-
tslib_1.__exportStar(require("./lib/utils/table-helpers"), exports);
|
|
23
|
-
tslib_1.__exportStar(require("./lib/utils/logger"), exports);
|
|
24
|
-
tslib_1.__exportStar(require("./lib/hooks"), exports);
|
|
25
|
-
tslib_1.__exportStar(require("./lib/types"), exports);
|
|
26
|
-
tslib_1.__exportStar(require("./lib/features"), exports);
|
|
27
|
-
tslib_1.__exportStar(require("./lib/examples"), exports);
|
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.FilterValueInput = FilterValueInput;
|
|
4
|
-
const tslib_1 = require("tslib");
|
|
5
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
6
|
-
const material_1 = require("@mui/material");
|
|
7
|
-
const DatePicker_1 = require("@mui/x-date-pickers/DatePicker");
|
|
8
|
-
const moment_1 = tslib_1.__importDefault(require("moment"));
|
|
9
|
-
const column_helpers_1 = require("../../utils/column-helpers");
|
|
10
|
-
const AdapterMoment_1 = require("@mui/x-date-pickers/AdapterMoment");
|
|
11
|
-
const x_date_pickers_1 = require("@mui/x-date-pickers");
|
|
12
|
-
function FilterValueInput(props) {
|
|
13
|
-
const { filter, column, onValueChange, formControlProps, textFieldProps, selectProps, datePickerProps, containerSx } = props, otherProps = tslib_1.__rest(props, ["filter", "column", "onValueChange", "formControlProps", "textFieldProps", "selectProps", "datePickerProps", "containerSx"]);
|
|
14
|
-
const columnType = (0, column_helpers_1.getColumnType)(column);
|
|
15
|
-
const customComponent = (0, column_helpers_1.getCustomFilterComponent)(column);
|
|
16
|
-
const options = (0, column_helpers_1.getColumnOptions)(column);
|
|
17
|
-
const operator = filter.operator;
|
|
18
|
-
if (customComponent) {
|
|
19
|
-
const CustomComponent = customComponent;
|
|
20
|
-
return ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: containerSx, children: (0, jsx_runtime_1.jsx)(CustomComponent, Object.assign({ value: filter.value, onChange: onValueChange, filter: filter, column: column }, otherProps)) }));
|
|
21
|
-
}
|
|
22
|
-
if (columnType === 'boolean') {
|
|
23
|
-
return ((0, jsx_runtime_1.jsxs)(material_1.FormControl, Object.assign({ size: "small", sx: Object.assign({ flex: 1, minWidth: 120 }, containerSx) }, formControlProps, { children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, { children: "Value" }), (0, jsx_runtime_1.jsxs)(material_1.Select, Object.assign({ value: filter.value || 'any', label: "Value", onChange: (e) => onValueChange(e.target.value) }, selectProps, { children: [(0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: 'any', children: "Any" }, 'any'), (0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: 'true', children: "True" }, 'true'), (0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: 'false', children: "False" }, 'false')] }))] })));
|
|
24
|
-
}
|
|
25
|
-
if (options && options.length > 0) {
|
|
26
|
-
if (operator === 'in') {
|
|
27
|
-
const currentValue = Array.isArray(filter.value) ? filter.value : [];
|
|
28
|
-
return ((0, jsx_runtime_1.jsxs)(material_1.FormControl, Object.assign({ size: "small", sx: Object.assign({ flex: 1, minWidth: 120 }, containerSx) }, formControlProps, { children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, { children: "Values" }), (0, jsx_runtime_1.jsx)(material_1.Select, Object.assign({ multiple: true, value: currentValue, label: "Values", onChange: (e) => onValueChange(e.target.value), renderValue: (selected) => selected.join(', ') }, selectProps, { children: options.map(option => ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, { value: option.value, children: [(0, jsx_runtime_1.jsx)(material_1.Checkbox, { checked: currentValue.includes(option.value) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: option.label })] }, String(option.value)))) }))] })));
|
|
29
|
-
}
|
|
30
|
-
return ((0, jsx_runtime_1.jsxs)(material_1.FormControl, Object.assign({ size: "small", sx: Object.assign({ flex: 1, minWidth: 120 }, containerSx) }, formControlProps, { children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, { children: "Value" }), (0, jsx_runtime_1.jsx)(material_1.Select, Object.assign({ value: filter.value, label: "Value", onChange: (e) => onValueChange(e.target.value) }, selectProps, { children: options.map(option => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: option.value, children: option.label }, String(option.value)))) }))] })));
|
|
31
|
-
}
|
|
32
|
-
if (columnType === 'date') {
|
|
33
|
-
return ((0, jsx_runtime_1.jsx)(x_date_pickers_1.LocalizationProvider, { dateAdapter: AdapterMoment_1.AdapterMoment, children: (0, jsx_runtime_1.jsx)(DatePicker_1.DatePicker, Object.assign({ value: filter.value ? (0, moment_1.default)(filter.value) : null, onChange: (e) => onValueChange(e === null || e === void 0 ? void 0 : e.toDate()), slotProps: {
|
|
34
|
-
textField: Object.assign({ size: 'small', label: 'Value', sx: Object.assign({ flex: 1, minWidth: 120 }, containerSx) }, textFieldProps),
|
|
35
|
-
} }, datePickerProps)) }));
|
|
36
|
-
}
|
|
37
|
-
if (columnType === 'number') {
|
|
38
|
-
return ((0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({ size: "small", label: "Value", value: filter.value, onChange: (e) => onValueChange(e.target.value), type: "number", sx: Object.assign({ flex: 1, minWidth: 120 }, containerSx) }, textFieldProps)));
|
|
39
|
-
}
|
|
40
|
-
return ((0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({ size: "small", label: "Value", value: filter.value, onChange: (e) => onValueChange(e.target.value), sx: Object.assign({ flex: 1, minWidth: 120 }, containerSx) }, textFieldProps)));
|
|
41
|
-
}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
const tslib_1 = require("tslib");
|
|
4
|
-
tslib_1.__exportStar(require("./table"), exports);
|
|
5
|
-
tslib_1.__exportStar(require("./headers"), exports);
|
|
6
|
-
tslib_1.__exportStar(require("./rows"), exports);
|
|
7
|
-
tslib_1.__exportStar(require("./toolbar"), exports);
|
|
8
|
-
tslib_1.__exportStar(require("./filters"), exports);
|
|
9
|
-
tslib_1.__exportStar(require("./pagination"), exports);
|
|
10
|
-
tslib_1.__exportStar(require("./droupdown/menu-dropdown"), exports);
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './data-table-pagination';
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
const tslib_1 = require("tslib");
|
|
4
|
-
tslib_1.__exportStar(require("./data-table-row"), exports);
|
|
5
|
-
tslib_1.__exportStar(require("./empty-data-row"), exports);
|
|
6
|
-
tslib_1.__exportStar(require("./loading-rows"), exports);
|