material-react-table 0.40.9 → 0.40.12
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/README.md +15 -13
- package/dist/cjs/MaterialReactTable.d.ts +8 -4
- package/dist/cjs/column.utils.d.ts +81 -76
- package/dist/cjs/index.js +81 -52
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/MaterialReactTable.d.ts +8 -4
- package/dist/esm/column.utils.d.ts +81 -76
- package/dist/esm/material-react-table.esm.js +81 -52
- package/dist/esm/material-react-table.esm.js.map +1 -1
- package/dist/index.d.ts +8 -4
- package/package.json +4 -4
- package/src/MaterialReactTable.tsx +24 -2
- package/src/buttons/MRT_CopyButton.tsx +7 -1
- package/src/buttons/MRT_ExpandAllButton.tsx +2 -1
- package/src/buttons/MRT_ExpandButton.tsx +2 -1
- package/src/buttons/MRT_FullScreenToggleButton.tsx +2 -1
- package/src/buttons/MRT_GrabHandleButton.tsx +2 -1
- package/src/buttons/MRT_ShowHideColumnsButton.tsx +2 -1
- package/src/buttons/MRT_ToggleDensePaddingButton.tsx +2 -1
- package/src/buttons/MRT_ToggleFiltersButton.tsx +2 -1
- package/src/buttons/MRT_ToggleGlobalFilterButton.tsx +2 -2
- package/src/column.utils.ts +18 -25
- package/src/head/MRT_TableHeadCellColumnActionsButton.tsx +2 -1
- package/src/inputs/MRT_FilterTextField.tsx +18 -3
- package/src/inputs/MRT_SelectCheckbox.tsx +5 -1
- package/src/table/MRT_TableRoot.tsx +18 -13
|
@@ -181,9 +181,11 @@ export declare type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit
|
|
|
181
181
|
* @default gets set to the same value as `accessorKey` by default
|
|
182
182
|
*/
|
|
183
183
|
id?: LiteralUnion<string & keyof TData>;
|
|
184
|
-
muiTableBodyCellCopyButtonProps?: ButtonProps | (({ cell, table, }: {
|
|
185
|
-
table: MRT_TableInstance<TData>;
|
|
184
|
+
muiTableBodyCellCopyButtonProps?: ButtonProps | (({ cell, column, row, table, }: {
|
|
186
185
|
cell: MRT_Cell<TData>;
|
|
186
|
+
column: MRT_Column<TData>;
|
|
187
|
+
row: MRT_Row<TData>;
|
|
188
|
+
table: MRT_TableInstance<TData>;
|
|
187
189
|
}) => ButtonProps);
|
|
188
190
|
muiTableBodyCellEditTextFieldProps?: TextFieldProps | (({ cell, column, row, table, }: {
|
|
189
191
|
cell: MRT_Cell<TData>;
|
|
@@ -229,7 +231,8 @@ export declare type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit
|
|
|
229
231
|
}) => ReactNode[];
|
|
230
232
|
sortingFn?: MRT_SortingFn;
|
|
231
233
|
};
|
|
232
|
-
export declare type MRT_DefinedColumnDef<TData extends Record<string, any> = {}> = Omit<MRT_ColumnDef<TData>, 'id'> & {
|
|
234
|
+
export declare type MRT_DefinedColumnDef<TData extends Record<string, any> = {}> = Omit<MRT_ColumnDef<TData>, 'id' | 'defaultDisplayColumn'> & {
|
|
235
|
+
defaultDisplayColumn: Partial<MRT_ColumnDef<TData>>;
|
|
233
236
|
id: string;
|
|
234
237
|
_filterFn: MRT_FilterOption;
|
|
235
238
|
};
|
|
@@ -281,6 +284,7 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
|
|
|
281
284
|
columns: MRT_ColumnDef<TData>[];
|
|
282
285
|
data: TData[];
|
|
283
286
|
defaultColumn?: Partial<MRT_ColumnDef<TData>>;
|
|
287
|
+
defaultDisplayColumn?: Partial<MRT_ColumnDef<TData>>;
|
|
284
288
|
displayColumnDefOptions?: Partial<{
|
|
285
289
|
[key in MRT_DisplayColumnIds]: Partial<MRT_ColumnDef>;
|
|
286
290
|
}>;
|
|
@@ -530,5 +534,5 @@ export declare type Virtualizer = {
|
|
|
530
534
|
scrollToIndex: (index: number, options?: any | undefined) => void;
|
|
531
535
|
measure: () => void;
|
|
532
536
|
};
|
|
533
|
-
declare const _default: <TData extends Record<string, any> = {}>({ aggregationFns, autoResetExpanded, columnResizeMode, defaultColumn, editingMode, enableBottomToolbar, enableColumnActions, enableColumnFilters, enableColumnOrdering, enableColumnResizing, enableDensityToggle, enableExpandAll, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableGlobalFilterRankedResults, enableGrouping, enableHiding, enableMultiRowSelection, enableMultiSort, enablePagination, enablePinning, enableRowSelection, enableSelectAll, enableSorting, enableStickyHeader, enableTableFooter, enableTableHead, enableToolbarInternalActions, enableTopToolbar, filterFns, icons, localization, positionActionsColumn, positionExpandColumn, positionGlobalFilter, positionPagination, positionToolbarAlertBanner, positionToolbarDropZone, rowNumberMode, selectAllMode, sortingFns, ...rest }: MaterialReactTableProps<TData>) => JSX.Element;
|
|
537
|
+
declare const _default: <TData extends Record<string, any> = {}>({ aggregationFns, autoResetExpanded, columnResizeMode, defaultColumn, defaultDisplayColumn, editingMode, enableBottomToolbar, enableColumnActions, enableColumnFilters, enableColumnOrdering, enableColumnResizing, enableDensityToggle, enableExpandAll, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableGlobalFilterRankedResults, enableGrouping, enableHiding, enableMultiRowSelection, enableMultiSort, enablePagination, enablePinning, enableRowSelection, enableSelectAll, enableSorting, enableStickyHeader, enableTableFooter, enableTableHead, enableToolbarInternalActions, enableTopToolbar, filterFns, icons, localization, positionActionsColumn, positionExpandColumn, positionGlobalFilter, positionPagination, positionToolbarAlertBanner, positionToolbarDropZone, rowNumberMode, selectAllMode, sortingFns, ...rest }: MaterialReactTableProps<TData>) => JSX.Element;
|
|
534
538
|
export default _default;
|
|
@@ -2,85 +2,90 @@ import { ColumnOrderState, GroupingState } from '@tanstack/react-table';
|
|
|
2
2
|
import { MaterialReactTableProps, MRT_Column, MRT_ColumnDef, MRT_DefinedColumnDef, MRT_DisplayColumnIds, MRT_FilterOption } from '.';
|
|
3
3
|
import { MRT_FilterFns } from './filterFns';
|
|
4
4
|
import { MRT_SortingFns } from './sortingFns';
|
|
5
|
-
export declare const defaultDisplayColumnDefOptions: Partial<MRT_ColumnDef<{}>>;
|
|
6
5
|
export declare const getColumnId: <TData extends Record<string, any> = {}>(columnDef: MRT_ColumnDef<TData>) => string;
|
|
7
6
|
export declare const getAllLeafColumnDefs: <TData extends Record<string, any> = {}>(columns: MRT_ColumnDef<TData>[]) => MRT_ColumnDef<TData>[];
|
|
8
|
-
export declare const prepareColumns: <TData extends Record<string, any> = {}>(columnDefs
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
<TData_1 extends Record<string, any> = {}>(row: import("@tanstack/table-core").Row<TData_1>, id: string, filterValues: [string | number, string | number]): boolean;
|
|
13
|
-
autoRemove(val: any): boolean;
|
|
7
|
+
export declare const prepareColumns: <TData extends Record<string, any> = {}>({ columnDefs, columnFilterFns, defaultDisplayColumn, filterFns, sortingFns, }: {
|
|
8
|
+
columnDefs: MRT_ColumnDef<TData>[];
|
|
9
|
+
columnFilterFns: {
|
|
10
|
+
[key: string]: MRT_FilterOption;
|
|
14
11
|
};
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
12
|
+
defaultDisplayColumn: Partial<MRT_ColumnDef<TData>>;
|
|
13
|
+
filterFns: {
|
|
14
|
+
between: {
|
|
15
|
+
<TData_1 extends Record<string, any> = {}>(row: import("@tanstack/table-core").Row<TData_1>, id: string, filterValues: [string | number, string | number]): boolean;
|
|
16
|
+
autoRemove(val: any): boolean;
|
|
17
|
+
};
|
|
18
|
+
betweenInclusive: {
|
|
19
|
+
<TData_2 extends Record<string, any> = {}>(row: import("@tanstack/table-core").Row<TData_2>, id: string, filterValues: [string | number, string | number]): boolean;
|
|
20
|
+
autoRemove(val: any): boolean;
|
|
21
|
+
};
|
|
22
|
+
contains: {
|
|
23
|
+
<TData_3 extends Record<string, any> = {}>(row: import("@tanstack/table-core").Row<TData_3>, id: string, filterValue: string | number): boolean;
|
|
24
|
+
autoRemove(val: any): boolean;
|
|
25
|
+
};
|
|
26
|
+
empty: {
|
|
27
|
+
<TData_4 extends Record<string, any> = {}>(row: import("@tanstack/table-core").Row<TData_4>, id: string, _filterValue: string | number): boolean;
|
|
28
|
+
autoRemove(val: any): boolean;
|
|
29
|
+
};
|
|
30
|
+
endsWith: {
|
|
31
|
+
<TData_5 extends Record<string, any> = {}>(row: import("@tanstack/table-core").Row<TData_5>, id: string, filterValue: string | number): boolean;
|
|
32
|
+
autoRemove(val: any): boolean;
|
|
33
|
+
};
|
|
34
|
+
equals: {
|
|
35
|
+
<TData_6 extends Record<string, any> = {}>(row: import("@tanstack/table-core").Row<TData_6>, id: string, filterValue: string | number): boolean;
|
|
36
|
+
autoRemove(val: any): boolean;
|
|
37
|
+
};
|
|
38
|
+
fuzzy: {
|
|
39
|
+
<TData_7 extends Record<string, any> = {}>(row: import("@tanstack/table-core").Row<TData_7>, columnId: string, filterValue: string | number, addMeta: (item: import("@tanstack/match-sorter-utils").RankingInfo) => void): boolean;
|
|
40
|
+
autoRemove(val: any): boolean;
|
|
41
|
+
};
|
|
42
|
+
greaterThan: {
|
|
43
|
+
<TData_8 extends Record<string, any> = {}>(row: import("@tanstack/table-core").Row<TData_8>, id: string, filterValue: string | number): boolean;
|
|
44
|
+
autoRemove(val: any): boolean;
|
|
45
|
+
};
|
|
46
|
+
greaterThanOrEqualTo: {
|
|
47
|
+
<TData_9 extends Record<string, any> = {}>(row: import("@tanstack/table-core").Row<TData_9>, id: string, filterValue: string | number): boolean;
|
|
48
|
+
autoRemove(val: any): boolean;
|
|
49
|
+
};
|
|
50
|
+
lessThan: {
|
|
51
|
+
<TData_10 extends Record<string, any> = {}>(row: import("@tanstack/table-core").Row<TData_10>, id: string, filterValue: string | number): boolean;
|
|
52
|
+
autoRemove(val: any): boolean;
|
|
53
|
+
};
|
|
54
|
+
lessThanOrEqualTo: {
|
|
55
|
+
<TData_11 extends Record<string, any> = {}>(row: import("@tanstack/table-core").Row<TData_11>, id: string, filterValue: string | number): boolean;
|
|
56
|
+
autoRemove(val: any): boolean;
|
|
57
|
+
};
|
|
58
|
+
notEmpty: {
|
|
59
|
+
<TData_12 extends Record<string, any> = {}>(row: import("@tanstack/table-core").Row<TData_12>, id: string, _filterValue: string | number): boolean;
|
|
60
|
+
autoRemove(val: any): boolean;
|
|
61
|
+
};
|
|
62
|
+
notEquals: {
|
|
63
|
+
<TData_13 extends Record<string, any> = {}>(row: import("@tanstack/table-core").Row<TData_13>, id: string, filterValue: string | number): boolean;
|
|
64
|
+
autoRemove(val: any): boolean;
|
|
65
|
+
};
|
|
66
|
+
startsWith: {
|
|
67
|
+
<TData_14 extends Record<string, any> = {}>(row: import("@tanstack/table-core").Row<TData_14>, id: string, filterValue: string | number): boolean;
|
|
68
|
+
autoRemove(val: any): boolean;
|
|
69
|
+
};
|
|
70
|
+
includesString: import("@tanstack/table-core").FilterFn<any>;
|
|
71
|
+
includesStringSensitive: import("@tanstack/table-core").FilterFn<any>;
|
|
72
|
+
equalsString: import("@tanstack/table-core").FilterFn<any>;
|
|
73
|
+
arrIncludes: import("@tanstack/table-core").FilterFn<any>;
|
|
74
|
+
arrIncludesAll: import("@tanstack/table-core").FilterFn<any>;
|
|
75
|
+
arrIncludesSome: import("@tanstack/table-core").FilterFn<any>;
|
|
76
|
+
weakEquals: import("@tanstack/table-core").FilterFn<any>;
|
|
77
|
+
inNumberRange: import("@tanstack/table-core").FilterFn<any>;
|
|
78
|
+
} & Record<string, import("@tanstack/table-core").FilterFn<any>>;
|
|
79
|
+
sortingFns: {
|
|
80
|
+
fuzzy: <TData_15 extends Record<string, any> = {}>(rowA: import("@tanstack/table-core").Row<TData_15>, rowB: import("@tanstack/table-core").Row<TData_15>, columnId: string) => number;
|
|
81
|
+
alphanumeric: import("@tanstack/table-core").SortingFn<any>;
|
|
82
|
+
alphanumericCaseSensitive: import("@tanstack/table-core").SortingFn<any>;
|
|
83
|
+
text: import("@tanstack/table-core").SortingFn<any>;
|
|
84
|
+
textCaseSensitive: import("@tanstack/table-core").SortingFn<any>;
|
|
85
|
+
datetime: import("@tanstack/table-core").SortingFn<any>;
|
|
86
|
+
basic: import("@tanstack/table-core").SortingFn<any>;
|
|
87
|
+
} & Record<string, import("@tanstack/table-core").SortingFn<any>>;
|
|
88
|
+
}) => MRT_DefinedColumnDef<TData>[];
|
|
84
89
|
export declare const reorderColumn: <TData extends Record<string, any> = {}>(draggedColumn: MRT_Column<TData>, targetColumn: MRT_Column<TData>, columnOrder: ColumnOrderState) => ColumnOrderState;
|
|
85
90
|
export declare const showExpandColumn: <TData extends Record<string, any> = {}>(props: MaterialReactTableProps<TData>, grouping?: GroupingState) => boolean;
|
|
86
91
|
export declare const getLeadingDisplayColumnIds: <TData extends Record<string, any> = {}>(props: MaterialReactTableProps<TData>) => MRT_DisplayColumnIds[];
|
|
@@ -248,16 +248,17 @@ const rankGlobalFuzzy = (rowA, rowB) => Math.max(...Object.values(rowB.columnFil
|
|
|
248
248
|
Math.max(...Object.values(rowA.columnFiltersMeta).map((v) => v.rank));
|
|
249
249
|
|
|
250
250
|
const MRT_ExpandAllButton = ({ table }) => {
|
|
251
|
+
var _a;
|
|
251
252
|
const { getIsAllRowsExpanded, getIsSomeRowsExpanded, getCanSomeRowsExpand, getState, options: { icons: { KeyboardDoubleArrowDownIcon }, localization, muiExpandAllButtonProps, renderDetailPanel, }, toggleAllRowsExpanded, } = table;
|
|
252
253
|
const { density } = getState();
|
|
253
254
|
const iconButtonProps = muiExpandAllButtonProps instanceof Function
|
|
254
255
|
? muiExpandAllButtonProps({ table })
|
|
255
256
|
: muiExpandAllButtonProps;
|
|
256
|
-
return (React.createElement(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: localization.expandAll },
|
|
257
|
+
return (React.createElement(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : localization.expandAll },
|
|
257
258
|
React.createElement("span", null,
|
|
258
259
|
React.createElement(IconButton, Object.assign({ "aria-label": localization.expandAll, disabled: !getCanSomeRowsExpand() && !renderDetailPanel, onClick: () => toggleAllRowsExpanded(!getIsAllRowsExpanded()) }, iconButtonProps, { sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.25rem', width: density === 'compact' ? '1.75rem' : '2.25rem', mt: density !== 'compact' ? '-0.25rem' : undefined }, ((iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx) instanceof Function
|
|
259
260
|
? iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx(theme)
|
|
260
|
-
: iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx))) }),
|
|
261
|
+
: iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx))), title: undefined }),
|
|
261
262
|
React.createElement(KeyboardDoubleArrowDownIcon, { style: {
|
|
262
263
|
transform: `rotate(${getIsAllRowsExpanded()
|
|
263
264
|
? -180
|
|
@@ -269,6 +270,7 @@ const MRT_ExpandAllButton = ({ table }) => {
|
|
|
269
270
|
};
|
|
270
271
|
|
|
271
272
|
const MRT_ExpandButton = ({ row, table }) => {
|
|
273
|
+
var _a;
|
|
272
274
|
const { getState, options: { icons: { ExpandMoreIcon }, localization, muiExpandButtonProps, renderDetailPanel, }, } = table;
|
|
273
275
|
const { density } = getState();
|
|
274
276
|
const iconButtonProps = muiExpandButtonProps instanceof Function
|
|
@@ -280,11 +282,11 @@ const MRT_ExpandButton = ({ row, table }) => {
|
|
|
280
282
|
row.toggleExpanded();
|
|
281
283
|
(_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.onClick) === null || _a === void 0 ? void 0 : _a.call(iconButtonProps, event);
|
|
282
284
|
};
|
|
283
|
-
return (React.createElement(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: localization.expand },
|
|
285
|
+
return (React.createElement(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : localization.expand },
|
|
284
286
|
React.createElement("span", null,
|
|
285
287
|
React.createElement(IconButton, Object.assign({ "aria-label": localization.expand, disabled: !row.getCanExpand() && !renderDetailPanel }, iconButtonProps, { onClick: handleToggleExpand, sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.25rem', width: density === 'compact' ? '1.75rem' : '2.25rem' }, ((iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx) instanceof Function
|
|
286
288
|
? iconButtonProps.sx(theme)
|
|
287
|
-
: iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx))) }),
|
|
289
|
+
: iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx))), title: undefined }),
|
|
288
290
|
React.createElement(ExpandMoreIcon, { style: {
|
|
289
291
|
transform: `rotate(${!row.getCanExpand() && !renderDetailPanel
|
|
290
292
|
? -90
|
|
@@ -464,8 +466,9 @@ const MRT_ColumnPinningButtons = ({ column, table, }) => {
|
|
|
464
466
|
};
|
|
465
467
|
|
|
466
468
|
const MRT_GrabHandleButton = ({ iconButtonProps, onDragEnd, onDragStart, table, }) => {
|
|
469
|
+
var _a;
|
|
467
470
|
const { options: { icons: { DragHandleIcon }, localization, }, } = table;
|
|
468
|
-
return (React.createElement(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: localization.move },
|
|
471
|
+
return (React.createElement(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : localization.move },
|
|
469
472
|
React.createElement(IconButton, Object.assign({ disableRipple: true, draggable: "true", onDragStart: onDragStart, onDragEnd: onDragEnd, size: "small" }, iconButtonProps, { onClick: (e) => {
|
|
470
473
|
var _a;
|
|
471
474
|
e.stopPropagation();
|
|
@@ -477,24 +480,10 @@ const MRT_GrabHandleButton = ({ iconButtonProps, onDragEnd, onDragStart, table,
|
|
|
477
480
|
cursor: 'grabbing',
|
|
478
481
|
} }, ((iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx) instanceof Function
|
|
479
482
|
? iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx(theme)
|
|
480
|
-
: iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx))) }),
|
|
483
|
+
: iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx))), title: undefined }),
|
|
481
484
|
React.createElement(DragHandleIcon, null))));
|
|
482
485
|
};
|
|
483
486
|
|
|
484
|
-
const defaultDisplayColumnDefOptions = {
|
|
485
|
-
columnDefType: 'display',
|
|
486
|
-
enableClickToCopy: false,
|
|
487
|
-
enableColumnActions: false,
|
|
488
|
-
enableColumnDragging: false,
|
|
489
|
-
enableColumnFilter: false,
|
|
490
|
-
enableColumnOrdering: false,
|
|
491
|
-
enableEditing: false,
|
|
492
|
-
enableGlobalFilter: false,
|
|
493
|
-
enableGrouping: false,
|
|
494
|
-
enableHiding: false,
|
|
495
|
-
enableResizing: false,
|
|
496
|
-
enableSorting: false,
|
|
497
|
-
};
|
|
498
487
|
const getColumnId = (columnDef) => { var _a, _b, _c, _d; return (_d = (_a = columnDef.id) !== null && _a !== void 0 ? _a : (_c = (_b = columnDef.accessorKey) === null || _b === void 0 ? void 0 : _b.toString) === null || _c === void 0 ? void 0 : _c.call(_b)) !== null && _d !== void 0 ? _d : columnDef.header; };
|
|
499
488
|
const getAllLeafColumnDefs = (columns) => {
|
|
500
489
|
let lowestLevelColumns = columns;
|
|
@@ -511,7 +500,7 @@ const getAllLeafColumnDefs = (columns) => {
|
|
|
511
500
|
}
|
|
512
501
|
return lowestLevelColumns.filter((col) => !col.columns);
|
|
513
502
|
};
|
|
514
|
-
const prepareColumns = (columnDefs, columnFilterFns, filterFns, sortingFns) => columnDefs.map((columnDef) => {
|
|
503
|
+
const prepareColumns = ({ columnDefs, columnFilterFns, defaultDisplayColumn, filterFns, sortingFns, }) => columnDefs.map((columnDef) => {
|
|
515
504
|
var _a, _b;
|
|
516
505
|
if (!columnDef.id)
|
|
517
506
|
columnDef.id = getColumnId(columnDef);
|
|
@@ -522,7 +511,13 @@ const prepareColumns = (columnDefs, columnFilterFns, filterFns, sortingFns) => c
|
|
|
522
511
|
columnDef.columnDefType = 'data';
|
|
523
512
|
if (!!((_a = columnDef.columns) === null || _a === void 0 ? void 0 : _a.length)) {
|
|
524
513
|
columnDef.columnDefType = 'group';
|
|
525
|
-
columnDef.columns = prepareColumns(
|
|
514
|
+
columnDef.columns = prepareColumns({
|
|
515
|
+
columnDefs: columnDef.columns,
|
|
516
|
+
columnFilterFns,
|
|
517
|
+
defaultDisplayColumn,
|
|
518
|
+
filterFns,
|
|
519
|
+
sortingFns,
|
|
520
|
+
});
|
|
526
521
|
}
|
|
527
522
|
else if (columnDef.columnDefType === 'data') {
|
|
528
523
|
if (Object.keys(filterFns).includes(columnFilterFns[columnDef.id])) {
|
|
@@ -537,7 +532,7 @@ const prepareColumns = (columnDefs, columnFilterFns, filterFns, sortingFns) => c
|
|
|
537
532
|
}
|
|
538
533
|
}
|
|
539
534
|
else if (columnDef.columnDefType === 'display') {
|
|
540
|
-
columnDef = Object.assign(Object.assign({},
|
|
535
|
+
columnDef = Object.assign(Object.assign({}, defaultDisplayColumn), columnDef);
|
|
541
536
|
}
|
|
542
537
|
return columnDef;
|
|
543
538
|
});
|
|
@@ -973,6 +968,7 @@ const MRT_ToggleRowActionMenuButton = ({ cell, row, table, }) => {
|
|
|
973
968
|
};
|
|
974
969
|
|
|
975
970
|
const MRT_SelectCheckbox = ({ row, selectAll, table }) => {
|
|
971
|
+
var _a;
|
|
976
972
|
const { getState, options: { localization, muiSelectCheckboxProps, muiSelectAllCheckboxProps, selectAllMode, }, } = table;
|
|
977
973
|
const { density } = getState();
|
|
978
974
|
const checkboxProps = !row
|
|
@@ -982,7 +978,9 @@ const MRT_SelectCheckbox = ({ row, selectAll, table }) => {
|
|
|
982
978
|
: muiSelectCheckboxProps instanceof Function
|
|
983
979
|
? muiSelectCheckboxProps({ row, table })
|
|
984
980
|
: muiSelectCheckboxProps;
|
|
985
|
-
return (React.createElement(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title:
|
|
981
|
+
return (React.createElement(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: (_a = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.title) !== null && _a !== void 0 ? _a : (selectAll
|
|
982
|
+
? localization.toggleSelectAll
|
|
983
|
+
: localization.toggleSelectRow) },
|
|
986
984
|
React.createElement(Checkbox, Object.assign({ checked: selectAll ? table.getIsAllRowsSelected() : row === null || row === void 0 ? void 0 : row.getIsSelected(), indeterminate: selectAll ? table.getIsSomeRowsSelected() : row === null || row === void 0 ? void 0 : row.getIsSomeSelected(), inputProps: {
|
|
987
985
|
'aria-label': selectAll
|
|
988
986
|
? localization.toggleSelectAll
|
|
@@ -997,7 +995,7 @@ const MRT_SelectCheckbox = ({ row, selectAll, table }) => {
|
|
|
997
995
|
(_a = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.onClick) === null || _a === void 0 ? void 0 : _a.call(checkboxProps, e);
|
|
998
996
|
}, sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.5rem', width: density === 'compact' ? '1.75rem' : '2.5rem', m: density !== 'compact' ? '-0.4rem' : undefined }, ((checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.sx) instanceof Function
|
|
999
997
|
? checkboxProps.sx(theme)
|
|
1000
|
-
: checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.sx))) }))));
|
|
998
|
+
: checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.sx))), title: undefined }))));
|
|
1001
999
|
};
|
|
1002
1000
|
|
|
1003
1001
|
const MRT_GlobalFilterTextField = ({ table, }) => {
|
|
@@ -1115,17 +1113,19 @@ const MRT_ToolbarAlertBanner = ({ stackAlertBanner, table, }) => {
|
|
|
1115
1113
|
};
|
|
1116
1114
|
|
|
1117
1115
|
const MRT_FullScreenToggleButton = (_a) => {
|
|
1116
|
+
var _b;
|
|
1118
1117
|
var { table } = _a, rest = __rest(_a, ["table"]);
|
|
1119
1118
|
const { getState, options: { icons: { FullscreenExitIcon, FullscreenIcon }, localization, }, setIsFullScreen, } = table;
|
|
1120
1119
|
const { isFullScreen } = getState();
|
|
1121
1120
|
const handleToggleFullScreen = () => {
|
|
1122
1121
|
setIsFullScreen(!isFullScreen);
|
|
1123
1122
|
};
|
|
1124
|
-
return (React.createElement(Tooltip, { arrow: true, title: localization.toggleFullScreen },
|
|
1125
|
-
React.createElement(IconButton, Object.assign({ "aria-label": localization.showHideFilters, onClick: handleToggleFullScreen }, rest), isFullScreen ? React.createElement(FullscreenExitIcon, null) : React.createElement(FullscreenIcon, null))));
|
|
1123
|
+
return (React.createElement(Tooltip, { arrow: true, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.toggleFullScreen },
|
|
1124
|
+
React.createElement(IconButton, Object.assign({ "aria-label": localization.showHideFilters, onClick: handleToggleFullScreen }, rest, { title: undefined }), isFullScreen ? React.createElement(FullscreenExitIcon, null) : React.createElement(FullscreenIcon, null))));
|
|
1126
1125
|
};
|
|
1127
1126
|
|
|
1128
1127
|
const MRT_ShowHideColumnsButton = (_a) => {
|
|
1128
|
+
var _b;
|
|
1129
1129
|
var { table } = _a, rest = __rest(_a, ["table"]);
|
|
1130
1130
|
const { options: { icons: { ViewColumnIcon }, localization, }, } = table;
|
|
1131
1131
|
const [anchorEl, setAnchorEl] = useState(null);
|
|
@@ -1133,13 +1133,14 @@ const MRT_ShowHideColumnsButton = (_a) => {
|
|
|
1133
1133
|
setAnchorEl(event.currentTarget);
|
|
1134
1134
|
};
|
|
1135
1135
|
return (React.createElement(React.Fragment, null,
|
|
1136
|
-
React.createElement(Tooltip, { arrow: true, title: localization.showHideColumns },
|
|
1137
|
-
React.createElement(IconButton, Object.assign({ "aria-label": localization.showHideColumns, onClick: handleClick }, rest),
|
|
1136
|
+
React.createElement(Tooltip, { arrow: true, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.showHideColumns },
|
|
1137
|
+
React.createElement(IconButton, Object.assign({ "aria-label": localization.showHideColumns, onClick: handleClick }, rest, { title: undefined }),
|
|
1138
1138
|
React.createElement(ViewColumnIcon, null))),
|
|
1139
1139
|
React.createElement(MRT_ShowHideColumnsMenu, { anchorEl: anchorEl, setAnchorEl: setAnchorEl, table: table })));
|
|
1140
1140
|
};
|
|
1141
1141
|
|
|
1142
1142
|
const MRT_ToggleDensePaddingButton = (_a) => {
|
|
1143
|
+
var _b;
|
|
1143
1144
|
var { table } = _a, rest = __rest(_a, ["table"]);
|
|
1144
1145
|
const { getState, options: { icons: { DensityLargeIcon, DensityMediumIcon, DensitySmallIcon }, localization, }, setDensity, } = table;
|
|
1145
1146
|
const { density } = getState();
|
|
@@ -1151,22 +1152,24 @@ const MRT_ToggleDensePaddingButton = (_a) => {
|
|
|
1151
1152
|
: 'comfortable';
|
|
1152
1153
|
setDensity(nextDensity);
|
|
1153
1154
|
};
|
|
1154
|
-
return (React.createElement(Tooltip, { arrow: true, title: localization.toggleDensity },
|
|
1155
|
-
React.createElement(IconButton, Object.assign({ "aria-label": localization.toggleDensity, onClick: handleToggleDensePadding }, rest), density === 'compact' ? (React.createElement(DensitySmallIcon, null)) : density === 'comfortable' ? (React.createElement(DensityMediumIcon, null)) : (React.createElement(DensityLargeIcon, null)))));
|
|
1155
|
+
return (React.createElement(Tooltip, { arrow: true, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.toggleDensity },
|
|
1156
|
+
React.createElement(IconButton, Object.assign({ "aria-label": localization.toggleDensity, onClick: handleToggleDensePadding }, rest, { title: undefined }), density === 'compact' ? (React.createElement(DensitySmallIcon, null)) : density === 'comfortable' ? (React.createElement(DensityMediumIcon, null)) : (React.createElement(DensityLargeIcon, null)))));
|
|
1156
1157
|
};
|
|
1157
1158
|
|
|
1158
1159
|
const MRT_ToggleFiltersButton = (_a) => {
|
|
1160
|
+
var _b;
|
|
1159
1161
|
var { table } = _a, rest = __rest(_a, ["table"]);
|
|
1160
1162
|
const { getState, options: { icons: { FilterListIcon, FilterListOffIcon }, localization, }, setShowFilters, } = table;
|
|
1161
1163
|
const { showColumnFilters } = getState();
|
|
1162
1164
|
const handleToggleShowFilters = () => {
|
|
1163
1165
|
setShowFilters(!showColumnFilters);
|
|
1164
1166
|
};
|
|
1165
|
-
return (React.createElement(Tooltip, { arrow: true, title: localization.showHideFilters },
|
|
1166
|
-
React.createElement(IconButton, Object.assign({ "aria-label": localization.showHideFilters, onClick: handleToggleShowFilters }, rest), showColumnFilters ? React.createElement(FilterListOffIcon, null) : React.createElement(FilterListIcon, null))));
|
|
1167
|
+
return (React.createElement(Tooltip, { arrow: true, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.showHideFilters },
|
|
1168
|
+
React.createElement(IconButton, Object.assign({ "aria-label": localization.showHideFilters, onClick: handleToggleShowFilters }, rest, { title: undefined }), showColumnFilters ? React.createElement(FilterListOffIcon, null) : React.createElement(FilterListIcon, null))));
|
|
1167
1169
|
};
|
|
1168
1170
|
|
|
1169
1171
|
const MRT_ToggleGlobalFilterButton = (_a) => {
|
|
1172
|
+
var _b;
|
|
1170
1173
|
var { table } = _a, rest = __rest(_a, ["table"]);
|
|
1171
1174
|
const { getState, options: { icons: { SearchIcon, SearchOffIcon }, localization, }, refs: { searchInputRef }, setShowGlobalFilter, } = table;
|
|
1172
1175
|
const { showGlobalFilter } = getState();
|
|
@@ -1174,8 +1177,8 @@ const MRT_ToggleGlobalFilterButton = (_a) => {
|
|
|
1174
1177
|
setShowGlobalFilter(!showGlobalFilter);
|
|
1175
1178
|
queueMicrotask(() => { var _a; return (_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); });
|
|
1176
1179
|
};
|
|
1177
|
-
return (React.createElement(Tooltip, { arrow: true, title: localization.showHideSearch },
|
|
1178
|
-
React.createElement(IconButton, Object.assign({ onClick: handleToggleSearch }, rest), showGlobalFilter ? React.createElement(SearchOffIcon, null) : React.createElement(SearchIcon, null))));
|
|
1180
|
+
return (React.createElement(Tooltip, { arrow: true, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.showHideSearch },
|
|
1181
|
+
React.createElement(IconButton, Object.assign({ onClick: handleToggleSearch }, rest, { title: undefined }), showGlobalFilter ? React.createElement(SearchOffIcon, null) : React.createElement(SearchIcon, null))));
|
|
1179
1182
|
};
|
|
1180
1183
|
|
|
1181
1184
|
const MRT_ToolbarInternalButtons = ({ table }) => {
|
|
@@ -1307,6 +1310,7 @@ const MRT_BottomToolbar = ({ table }) => {
|
|
|
1307
1310
|
};
|
|
1308
1311
|
|
|
1309
1312
|
const MRT_TableHeadCellColumnActionsButton = ({ header, table, }) => {
|
|
1313
|
+
var _a;
|
|
1310
1314
|
const { options: { icons: { MoreVertIcon }, localization, muiTableHeadCellColumnActionsButtonProps, }, } = table;
|
|
1311
1315
|
const { column } = header;
|
|
1312
1316
|
const { columnDef } = column;
|
|
@@ -1327,12 +1331,12 @@ const MRT_TableHeadCellColumnActionsButton = ({ header, table, }) => {
|
|
|
1327
1331
|
: columnDef.muiTableHeadCellColumnActionsButtonProps;
|
|
1328
1332
|
const iconButtonProps = Object.assign(Object.assign({}, mTableHeadCellColumnActionsButtonProps), mcTableHeadCellColumnActionsButtonProps);
|
|
1329
1333
|
return (React.createElement(React.Fragment, null,
|
|
1330
|
-
React.createElement(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: localization.columnActions },
|
|
1334
|
+
React.createElement(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : localization.columnActions },
|
|
1331
1335
|
React.createElement(IconButton, Object.assign({ "aria-label": localization.columnActions, onClick: handleClick, size: "small" }, iconButtonProps, { sx: (theme) => (Object.assign({ height: '2rem', mt: '-0.2rem', opacity: 0.5, transition: 'opacity 0.2s', width: '2rem', '&:hover': {
|
|
1332
1336
|
opacity: 1,
|
|
1333
1337
|
} }, ((iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx) instanceof Function
|
|
1334
1338
|
? iconButtonProps.sx(theme)
|
|
1335
|
-
: iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx))) }),
|
|
1339
|
+
: iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx))), title: undefined }),
|
|
1336
1340
|
React.createElement(MoreVertIcon, null))),
|
|
1337
1341
|
React.createElement(MRT_ColumnActionMenu, { anchorEl: anchorEl, header: header, setAnchorEl: setAnchorEl, table: table })));
|
|
1338
1342
|
};
|
|
@@ -1476,7 +1480,15 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
|
|
|
1476
1480
|
displayEmpty: true,
|
|
1477
1481
|
multiple: isMultiSelectFilter,
|
|
1478
1482
|
renderValue: isMultiSelectFilter
|
|
1479
|
-
? (selected) => !(selected === null || selected === void 0 ? void 0 : selected.length) ? (React.createElement(Box, { sx: { opacity: 0.5 } }, filterPlaceholder)) : (React.createElement(Box, { sx: { display: 'flex', flexWrap: 'wrap', gap: '2px' } }, selected === null || selected === void 0 ? void 0 : selected.map((value) =>
|
|
1483
|
+
? (selected) => !(selected === null || selected === void 0 ? void 0 : selected.length) ? (React.createElement(Box, { sx: { opacity: 0.5 } }, filterPlaceholder)) : (React.createElement(Box, { sx: { display: 'flex', flexWrap: 'wrap', gap: '2px' } }, selected === null || selected === void 0 ? void 0 : selected.map((value) => {
|
|
1484
|
+
var _a;
|
|
1485
|
+
const selectedValue = (_a = columnDef.filterSelectOptions) === null || _a === void 0 ? void 0 : _a.find((option) => option instanceof Object
|
|
1486
|
+
? option.value === value
|
|
1487
|
+
: option === value);
|
|
1488
|
+
return (React.createElement(Chip, { key: value, label: selectedValue instanceof Object
|
|
1489
|
+
? selectedValue.text
|
|
1490
|
+
: selectedValue }));
|
|
1491
|
+
})))
|
|
1480
1492
|
: undefined,
|
|
1481
1493
|
} }, textFieldProps, { inputRef: (inputRef) => {
|
|
1482
1494
|
filterInputRefs.current[`${column.id}-${rangeFilterIndex !== null && rangeFilterIndex !== void 0 ? rangeFilterIndex : 0}`] =
|
|
@@ -1867,6 +1879,7 @@ const MRT_EditCellTextField = ({ cell, showLabel, table, }) => {
|
|
|
1867
1879
|
};
|
|
1868
1880
|
|
|
1869
1881
|
const MRT_CopyButton = ({ cell, children, table, }) => {
|
|
1882
|
+
var _a;
|
|
1870
1883
|
const { options: { localization, muiTableBodyCellCopyButtonProps }, } = table;
|
|
1871
1884
|
const { column, row } = cell;
|
|
1872
1885
|
const { columnDef } = column;
|
|
@@ -1883,14 +1896,16 @@ const MRT_CopyButton = ({ cell, children, table, }) => {
|
|
|
1883
1896
|
const mcTableBodyCellCopyButtonProps = columnDef.muiTableBodyCellCopyButtonProps instanceof Function
|
|
1884
1897
|
? columnDef.muiTableBodyCellCopyButtonProps({
|
|
1885
1898
|
cell,
|
|
1899
|
+
column,
|
|
1900
|
+
row,
|
|
1886
1901
|
table,
|
|
1887
1902
|
})
|
|
1888
1903
|
: columnDef.muiTableBodyCellCopyButtonProps;
|
|
1889
1904
|
const buttonProps = Object.assign(Object.assign({}, mTableBodyCellCopyButtonProps), mcTableBodyCellCopyButtonProps);
|
|
1890
|
-
return (React.createElement(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: copied ? localization.copiedToClipboard : localization.clickToCopy },
|
|
1905
|
+
return (React.createElement(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: (_a = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.title) !== null && _a !== void 0 ? _a : (copied ? localization.copiedToClipboard : localization.clickToCopy) },
|
|
1891
1906
|
React.createElement(Button, Object.assign({ onClick: (e) => handleCopy(e, cell.getValue()), size: "small", type: "button", variant: "text" }, buttonProps, { sx: (theme) => (Object.assign({ backgroundColor: 'transparent', border: 'none', color: 'inherit', cursor: 'copy', fontFamily: 'inherit', fontSize: 'inherit', letterSpacing: 'inherit', m: '-0.25rem', minWidth: 'unset', textAlign: 'inherit', textTransform: 'inherit' }, ((buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.sx) instanceof Function
|
|
1892
1907
|
? buttonProps.sx(theme)
|
|
1893
|
-
: buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.sx))) }), children)));
|
|
1908
|
+
: buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.sx))), title: undefined }), children)));
|
|
1894
1909
|
};
|
|
1895
1910
|
|
|
1896
1911
|
const MRT_TableBodyRowGrabHandle = ({ cell, rowRef, table, }) => {
|
|
@@ -2370,7 +2385,7 @@ const MRT_EditRowModal = ({ open, row, table, }) => {
|
|
|
2370
2385
|
};
|
|
2371
2386
|
|
|
2372
2387
|
const MRT_TableRoot = (props) => {
|
|
2373
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8;
|
|
2388
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9;
|
|
2374
2389
|
const bottomToolbarRef = useRef(null);
|
|
2375
2390
|
const editInputRefs = useRef({});
|
|
2376
2391
|
const filterInputRefs = useRef({});
|
|
@@ -2413,12 +2428,12 @@ const MRT_TableRoot = (props) => {
|
|
|
2413
2428
|
const displayColumns = useMemo(() => {
|
|
2414
2429
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
2415
2430
|
return [
|
|
2416
|
-
columnOrder.includes('mrt-row-drag') && Object.assign(Object.assign(Object.assign({ header: (_a = props.localization) === null || _a === void 0 ? void 0 : _a.move, size: 60 },
|
|
2417
|
-
columnOrder.includes('mrt-row-actions') && Object.assign(Object.assign(Object.assign({ Cell: ({ cell, row }) => (React.createElement(MRT_ToggleRowActionMenuButton, { cell: cell, row: row, table: table })), header: (_c = props.localization) === null || _c === void 0 ? void 0 : _c.actions, size: 70 },
|
|
2431
|
+
columnOrder.includes('mrt-row-drag') && Object.assign(Object.assign(Object.assign({ header: (_a = props.localization) === null || _a === void 0 ? void 0 : _a.move, size: 60 }, props.defaultDisplayColumn), (_b = props.displayColumnDefOptions) === null || _b === void 0 ? void 0 : _b['mrt-row-drag']), { id: 'mrt-row-drag' }),
|
|
2432
|
+
columnOrder.includes('mrt-row-actions') && Object.assign(Object.assign(Object.assign({ Cell: ({ cell, row }) => (React.createElement(MRT_ToggleRowActionMenuButton, { cell: cell, row: row, table: table })), header: (_c = props.localization) === null || _c === void 0 ? void 0 : _c.actions, size: 70 }, props.defaultDisplayColumn), (_d = props.displayColumnDefOptions) === null || _d === void 0 ? void 0 : _d['mrt-row-actions']), { id: 'mrt-row-actions' }),
|
|
2418
2433
|
columnOrder.includes('mrt-row-expand') &&
|
|
2419
|
-
showExpandColumn(props, grouping) && Object.assign(Object.assign(Object.assign({ Cell: ({ row }) => (React.createElement(MRT_ExpandButton, { row: row, table: table })), Header: () => props.enableExpandAll ? (React.createElement(MRT_ExpandAllButton, { table: table })) : null, header: (_e = props.localization) === null || _e === void 0 ? void 0 : _e.expand, size: 60 },
|
|
2420
|
-
columnOrder.includes('mrt-row-select') && Object.assign(Object.assign(Object.assign({ Cell: ({ row }) => (React.createElement(MRT_SelectCheckbox, { row: row, table: table })), Header: () => props.enableSelectAll ? (React.createElement(MRT_SelectCheckbox, { selectAll: true, table: table })) : null, header: (_g = props.localization) === null || _g === void 0 ? void 0 : _g.select, size: 60 },
|
|
2421
|
-
columnOrder.includes('mrt-row-numbers') && Object.assign(Object.assign(Object.assign({ Cell: ({ row }) => row.index + 1, Header: () => { var _a; return (_a = props.localization) === null || _a === void 0 ? void 0 : _a.rowNumber; }, header: (_j = props.localization) === null || _j === void 0 ? void 0 : _j.rowNumbers, size: 60 },
|
|
2434
|
+
showExpandColumn(props, grouping) && Object.assign(Object.assign(Object.assign({ Cell: ({ row }) => (React.createElement(MRT_ExpandButton, { row: row, table: table })), Header: () => props.enableExpandAll ? (React.createElement(MRT_ExpandAllButton, { table: table })) : null, header: (_e = props.localization) === null || _e === void 0 ? void 0 : _e.expand, size: 60 }, props.defaultDisplayColumn), (_f = props.displayColumnDefOptions) === null || _f === void 0 ? void 0 : _f['mrt-row-expand']), { id: 'mrt-row-expand' }),
|
|
2435
|
+
columnOrder.includes('mrt-row-select') && Object.assign(Object.assign(Object.assign({ Cell: ({ row }) => (React.createElement(MRT_SelectCheckbox, { row: row, table: table })), Header: () => props.enableSelectAll ? (React.createElement(MRT_SelectCheckbox, { selectAll: true, table: table })) : null, header: (_g = props.localization) === null || _g === void 0 ? void 0 : _g.select, size: 60 }, props.defaultDisplayColumn), (_h = props.displayColumnDefOptions) === null || _h === void 0 ? void 0 : _h['mrt-row-select']), { id: 'mrt-row-select' }),
|
|
2436
|
+
columnOrder.includes('mrt-row-numbers') && Object.assign(Object.assign(Object.assign({ Cell: ({ row }) => row.index + 1, Header: () => { var _a; return (_a = props.localization) === null || _a === void 0 ? void 0 : _a.rowNumber; }, header: (_j = props.localization) === null || _j === void 0 ? void 0 : _j.rowNumbers, size: 60 }, props.defaultDisplayColumn), (_k = props.displayColumnDefOptions) === null || _k === void 0 ? void 0 : _k['mrt-row-numbers']), { id: 'mrt-row-numbers' }),
|
|
2422
2437
|
].filter(Boolean);
|
|
2423
2438
|
}, [
|
|
2424
2439
|
columnOrder,
|
|
@@ -2442,7 +2457,21 @@ const MRT_TableRoot = (props) => {
|
|
|
2442
2457
|
props.positionActionsColumn,
|
|
2443
2458
|
props.renderDetailPanel,
|
|
2444
2459
|
]);
|
|
2445
|
-
const columnDefs = useMemo(() =>
|
|
2460
|
+
const columnDefs = useMemo(() => {
|
|
2461
|
+
var _a, _b, _c;
|
|
2462
|
+
return prepareColumns({
|
|
2463
|
+
columnDefs: [...displayColumns, ...props.columns],
|
|
2464
|
+
columnFilterFns: (_b = (_a = props.state) === null || _a === void 0 ? void 0 : _a.columnFilterFns) !== null && _b !== void 0 ? _b : columnFilterFns,
|
|
2465
|
+
defaultDisplayColumn: (_c = props.defaultDisplayColumn) !== null && _c !== void 0 ? _c : {},
|
|
2466
|
+
filterFns: props.filterFns,
|
|
2467
|
+
sortingFns: props.sortingFns,
|
|
2468
|
+
});
|
|
2469
|
+
}, [
|
|
2470
|
+
columnFilterFns,
|
|
2471
|
+
displayColumns,
|
|
2472
|
+
props.columns,
|
|
2473
|
+
(_r = props.state) === null || _r === void 0 ? void 0 : _r.columnFilterFns,
|
|
2474
|
+
]);
|
|
2446
2475
|
const data = useMemo(() => {
|
|
2447
2476
|
var _a, _b, _c, _d, _e;
|
|
2448
2477
|
return (((_a = props.state) === null || _a === void 0 ? void 0 : _a.isLoading) || ((_b = props.state) === null || _b === void 0 ? void 0 : _b.showSkeletons)) &&
|
|
@@ -2458,11 +2487,11 @@ const MRT_TableRoot = (props) => {
|
|
|
2458
2487
|
});
|
|
2459
2488
|
})))
|
|
2460
2489
|
: props.data;
|
|
2461
|
-
}, [props.data, (
|
|
2490
|
+
}, [props.data, (_s = props.state) === null || _s === void 0 ? void 0 : _s.isLoading, (_t = props.state) === null || _t === void 0 ? void 0 : _t.showSkeletons]);
|
|
2462
2491
|
//@ts-ignore
|
|
2463
2492
|
const table = Object.assign(Object.assign({}, useReactTable(Object.assign(Object.assign({ getCoreRowModel: getCoreRowModel(), getExpandedRowModel: getExpandedRowModel(), getFacetedRowModel: getFacetedRowModel(), getFilteredRowModel: getFilteredRowModel(), getGroupedRowModel: getGroupedRowModel(), getPaginationRowModel: getPaginationRowModel(), getSortedRowModel: getSortedRowModel(), onColumnOrderChange: setColumnOrder, onGroupingChange: setGrouping, getSubRows: (row) => row === null || row === void 0 ? void 0 : row.subRows }, props), {
|
|
2464
2493
|
//@ts-ignore
|
|
2465
|
-
columns: columnDefs, data, globalFilterFn: (
|
|
2494
|
+
columns: columnDefs, data, globalFilterFn: (_v = (_u = props.filterFns) === null || _u === void 0 ? void 0 : _u[globalFilterFn]) !== null && _v !== void 0 ? _v : (_w = props.filterFns) === null || _w === void 0 ? void 0 : _w.fuzzy, initialState, state: Object.assign({ columnFilterFns,
|
|
2466
2495
|
columnOrder,
|
|
2467
2496
|
density,
|
|
2468
2497
|
draggingColumn,
|
|
@@ -2483,7 +2512,7 @@ const MRT_TableRoot = (props) => {
|
|
|
2483
2512
|
searchInputRef,
|
|
2484
2513
|
tableContainerRef,
|
|
2485
2514
|
topToolbarRef,
|
|
2486
|
-
}, setColumnFilterFns: (
|
|
2515
|
+
}, setColumnFilterFns: (_x = props.onFilterFnsChange) !== null && _x !== void 0 ? _x : setColumnFilterFns, setDensity: (_y = props.onDensityChange) !== null && _y !== void 0 ? _y : setDensity, setDraggingColumn: (_z = props.onDraggingColumnChange) !== null && _z !== void 0 ? _z : setDraggingColumn, setDraggingRow: (_0 = props.onDraggingRowChange) !== null && _0 !== void 0 ? _0 : setDraggingRow, setEditingCell: (_1 = props.onEditingCellChange) !== null && _1 !== void 0 ? _1 : setEditingCell, setEditingRow: (_2 = props.onEditingRowChange) !== null && _2 !== void 0 ? _2 : setEditingRow, setGlobalFilterFn: (_3 = props.onGlobalFilterFnChange) !== null && _3 !== void 0 ? _3 : setGlobalFilterFn, setHoveredColumn: (_4 = props.onHoveredColumnChange) !== null && _4 !== void 0 ? _4 : setHoveredColumn, setHoveredRow: (_5 = props.onHoveredRowChange) !== null && _5 !== void 0 ? _5 : setHoveredRow, setIsFullScreen: (_6 = props.onIsFullScreenChange) !== null && _6 !== void 0 ? _6 : setIsFullScreen, setShowAlertBanner: (_7 = props.onShowAlertBannerChange) !== null && _7 !== void 0 ? _7 : setShowAlertBanner, setShowFilters: (_8 = props.onShowFiltersChange) !== null && _8 !== void 0 ? _8 : setShowFilters, setShowGlobalFilter: (_9 = props.onShowGlobalFilterChange) !== null && _9 !== void 0 ? _9 : setShowGlobalFilter });
|
|
2487
2516
|
if (props.tableInstanceRef) {
|
|
2488
2517
|
props.tableInstanceRef.current = table;
|
|
2489
2518
|
}
|
|
@@ -2495,8 +2524,8 @@ const MRT_TableRoot = (props) => {
|
|
|
2495
2524
|
};
|
|
2496
2525
|
|
|
2497
2526
|
var MaterialReactTable = (_a) => {
|
|
2498
|
-
var { aggregationFns, autoResetExpanded = false, columnResizeMode = 'onEnd', defaultColumn = { minSize: 40, maxSize: 1000, size: 180 }, editingMode = 'modal', enableBottomToolbar = true, enableColumnActions = true, enableColumnFilters = true, enableColumnOrdering = false, enableColumnResizing = false, enableDensityToggle = true, enableExpandAll = true, enableFilters = true, enableFullScreenToggle = true, enableGlobalFilter = true, enableGlobalFilterRankedResults = true, enableGrouping = false, enableHiding = true, enableMultiRowSelection = true, enableMultiSort = true, enablePagination = true, enablePinning = false, enableRowSelection = false, enableSelectAll = true, enableSorting = true, enableStickyHeader = false, enableTableFooter = true, enableTableHead = true, enableToolbarInternalActions = true, enableTopToolbar = true, filterFns, icons, localization, positionActionsColumn = 'first', positionExpandColumn = 'first', positionGlobalFilter = 'right', positionPagination = 'bottom', positionToolbarAlertBanner = 'top', positionToolbarDropZone = 'top', rowNumberMode = 'original', selectAllMode = 'all', sortingFns } = _a, rest = __rest(_a, ["aggregationFns", "autoResetExpanded", "columnResizeMode", "defaultColumn", "editingMode", "enableBottomToolbar", "enableColumnActions", "enableColumnFilters", "enableColumnOrdering", "enableColumnResizing", "enableDensityToggle", "enableExpandAll", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGlobalFilterRankedResults", "enableGrouping", "enableHiding", "enableMultiRowSelection", "enableMultiSort", "enablePagination", "enablePinning", "enableRowSelection", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarInternalActions", "enableTopToolbar", "filterFns", "icons", "localization", "positionActionsColumn", "positionExpandColumn", "positionGlobalFilter", "positionPagination", "positionToolbarAlertBanner", "positionToolbarDropZone", "rowNumberMode", "selectAllMode", "sortingFns"]);
|
|
2499
|
-
return (React.createElement(MRT_TableRoot, Object.assign({ aggregationFns: Object.assign(Object.assign({}, MRT_AggregationFns), aggregationFns), autoResetExpanded: autoResetExpanded, columnResizeMode: columnResizeMode, defaultColumn: defaultColumn, editingMode: editingMode, enableBottomToolbar: enableBottomToolbar, enableColumnActions: enableColumnActions, enableColumnFilters: enableColumnFilters, enableColumnOrdering: enableColumnOrdering, enableColumnResizing: enableColumnResizing, enableDensityToggle: enableDensityToggle, enableExpandAll: enableExpandAll, enableFilters: enableFilters, enableFullScreenToggle: enableFullScreenToggle, enableGlobalFilter: enableGlobalFilter, enableGlobalFilterRankedResults: enableGlobalFilterRankedResults, enableGrouping: enableGrouping, enableHiding: enableHiding, enableMultiRowSelection: enableMultiRowSelection, enableMultiSort: enableMultiSort, enablePagination: enablePagination, enablePinning: enablePinning, enableRowSelection: enableRowSelection, enableSelectAll: enableSelectAll, enableSorting: enableSorting, enableStickyHeader: enableStickyHeader, enableTableFooter: enableTableFooter, enableTableHead: enableTableHead, enableToolbarInternalActions: enableToolbarInternalActions, enableTopToolbar: enableTopToolbar, filterFns: Object.assign(Object.assign({}, MRT_FilterFns), filterFns), icons: Object.assign(Object.assign({}, MRT_Default_Icons), icons), localization: Object.assign(Object.assign({}, MRT_DefaultLocalization_EN), localization), positionActionsColumn: positionActionsColumn, positionExpandColumn: positionExpandColumn, positionGlobalFilter: positionGlobalFilter, positionPagination: positionPagination, positionToolbarAlertBanner: positionToolbarAlertBanner, positionToolbarDropZone: positionToolbarDropZone, rowNumberMode: rowNumberMode, selectAllMode: selectAllMode, sortingFns: Object.assign(Object.assign({}, MRT_SortingFns), sortingFns) }, rest)));
|
|
2527
|
+
var { aggregationFns, autoResetExpanded = false, columnResizeMode = 'onEnd', defaultColumn = { minSize: 40, maxSize: 1000, size: 180 }, defaultDisplayColumn, editingMode = 'modal', enableBottomToolbar = true, enableColumnActions = true, enableColumnFilters = true, enableColumnOrdering = false, enableColumnResizing = false, enableDensityToggle = true, enableExpandAll = true, enableFilters = true, enableFullScreenToggle = true, enableGlobalFilter = true, enableGlobalFilterRankedResults = true, enableGrouping = false, enableHiding = true, enableMultiRowSelection = true, enableMultiSort = true, enablePagination = true, enablePinning = false, enableRowSelection = false, enableSelectAll = true, enableSorting = true, enableStickyHeader = false, enableTableFooter = true, enableTableHead = true, enableToolbarInternalActions = true, enableTopToolbar = true, filterFns, icons, localization, positionActionsColumn = 'first', positionExpandColumn = 'first', positionGlobalFilter = 'right', positionPagination = 'bottom', positionToolbarAlertBanner = 'top', positionToolbarDropZone = 'top', rowNumberMode = 'original', selectAllMode = 'all', sortingFns } = _a, rest = __rest(_a, ["aggregationFns", "autoResetExpanded", "columnResizeMode", "defaultColumn", "defaultDisplayColumn", "editingMode", "enableBottomToolbar", "enableColumnActions", "enableColumnFilters", "enableColumnOrdering", "enableColumnResizing", "enableDensityToggle", "enableExpandAll", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGlobalFilterRankedResults", "enableGrouping", "enableHiding", "enableMultiRowSelection", "enableMultiSort", "enablePagination", "enablePinning", "enableRowSelection", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarInternalActions", "enableTopToolbar", "filterFns", "icons", "localization", "positionActionsColumn", "positionExpandColumn", "positionGlobalFilter", "positionPagination", "positionToolbarAlertBanner", "positionToolbarDropZone", "rowNumberMode", "selectAllMode", "sortingFns"]);
|
|
2528
|
+
return (React.createElement(MRT_TableRoot, Object.assign({ aggregationFns: Object.assign(Object.assign({}, MRT_AggregationFns), aggregationFns), autoResetExpanded: autoResetExpanded, columnResizeMode: columnResizeMode, defaultColumn: defaultColumn, defaultDisplayColumn: Object.assign({ columnDefType: 'display', enableClickToCopy: false, enableColumnActions: false, enableColumnDragging: false, enableColumnFilter: false, enableColumnOrdering: false, enableEditing: false, enableGlobalFilter: false, enableGrouping: false, enableHiding: false, enableResizing: false, enableSorting: false }, defaultDisplayColumn), editingMode: editingMode, enableBottomToolbar: enableBottomToolbar, enableColumnActions: enableColumnActions, enableColumnFilters: enableColumnFilters, enableColumnOrdering: enableColumnOrdering, enableColumnResizing: enableColumnResizing, enableDensityToggle: enableDensityToggle, enableExpandAll: enableExpandAll, enableFilters: enableFilters, enableFullScreenToggle: enableFullScreenToggle, enableGlobalFilter: enableGlobalFilter, enableGlobalFilterRankedResults: enableGlobalFilterRankedResults, enableGrouping: enableGrouping, enableHiding: enableHiding, enableMultiRowSelection: enableMultiRowSelection, enableMultiSort: enableMultiSort, enablePagination: enablePagination, enablePinning: enablePinning, enableRowSelection: enableRowSelection, enableSelectAll: enableSelectAll, enableSorting: enableSorting, enableStickyHeader: enableStickyHeader, enableTableFooter: enableTableFooter, enableTableHead: enableTableHead, enableToolbarInternalActions: enableToolbarInternalActions, enableTopToolbar: enableTopToolbar, filterFns: Object.assign(Object.assign({}, MRT_FilterFns), filterFns), icons: Object.assign(Object.assign({}, MRT_Default_Icons), icons), localization: Object.assign(Object.assign({}, MRT_DefaultLocalization_EN), localization), positionActionsColumn: positionActionsColumn, positionExpandColumn: positionExpandColumn, positionGlobalFilter: positionGlobalFilter, positionPagination: positionPagination, positionToolbarAlertBanner: positionToolbarAlertBanner, positionToolbarDropZone: positionToolbarDropZone, rowNumberMode: rowNumberMode, selectAllMode: selectAllMode, sortingFns: Object.assign(Object.assign({}, MRT_SortingFns), sortingFns) }, rest)));
|
|
2500
2529
|
};
|
|
2501
2530
|
|
|
2502
2531
|
export { MRT_CopyButton, MRT_FullScreenToggleButton, MRT_GlobalFilterTextField, MRT_ShowHideColumnsButton, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleGlobalFilterButton, MaterialReactTable as default };
|