material-react-table 0.24.1 → 0.25.0
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/MaterialReactTable.d.ts +18 -16
- package/dist/material-react-table.cjs.development.js +68 -75
- package/dist/material-react-table.cjs.development.js.map +1 -1
- package/dist/material-react-table.cjs.production.min.js +1 -1
- package/dist/material-react-table.cjs.production.min.js.map +1 -1
- package/dist/material-react-table.esm.js +68 -75
- package/dist/material-react-table.esm.js.map +1 -1
- package/dist/utils.d.ts +2 -2
- package/package.json +3 -3
- package/src/MaterialReactTable.tsx +29 -24
- package/src/body/MRT_TableBodyCell.tsx +3 -1
- package/src/head/MRT_TableHeadCell.tsx +29 -29
- package/src/inputs/MRT_FilterTextField.tsx +4 -3
- package/src/inputs/MRT_SelectCheckbox.tsx +13 -18
- package/src/menus/MRT_ColumnActionMenu.tsx +16 -15
- package/src/table/MRT_TableRoot.tsx +45 -28
- package/src/utils.ts +2 -1
package/dist/utils.d.ts
CHANGED
@@ -1,10 +1,10 @@
|
|
1
1
|
import { ColumnOrderState } from '@tanstack/react-table';
|
2
|
-
import { MaterialReactTableProps, MRT_Column, MRT_ColumnDef, MRT_DefinedColumnDef, MRT_FilterOption } from '.';
|
2
|
+
import { MaterialReactTableProps, MRT_Column, MRT_ColumnDef, MRT_DefinedColumnDef, MRT_DisplayColumnIds, MRT_FilterOption } from '.';
|
3
3
|
export declare const getAllLeafColumnDefs: <TData extends Record<string, any> = {}>(columns: MRT_ColumnDef<TData>[]) => MRT_ColumnDef<TData>[];
|
4
4
|
export declare const prepareColumns: <TData extends Record<string, any> = {}>(columnDefs: MRT_ColumnDef<TData>[], currentFilterFns: {
|
5
5
|
[key: string]: "between" | "contains" | "empty" | "endsWith" | "equals" | "fuzzy" | "greaterThan" | "lessThan" | "notEmpty" | "notEquals" | "startsWith" | "includesString" | "includesStringSensitive" | "equalsString" | "arrIncludes" | "arrIncludesAll" | "arrIncludesSome" | "weakEquals" | "inNumberRange";
|
6
6
|
}) => MRT_DefinedColumnDef<TData>[];
|
7
7
|
export declare const reorderColumn: <TData extends Record<string, any> = {}>(draggedColumn: MRT_Column<TData>, targetColumn: MRT_Column<TData>, columnOrder: ColumnOrderState) => ColumnOrderState;
|
8
|
-
export declare const getLeadingDisplayColumnIds: <TData extends Record<string, any> = {}>(props: MaterialReactTableProps<TData>) =>
|
8
|
+
export declare const getLeadingDisplayColumnIds: <TData extends Record<string, any> = {}>(props: MaterialReactTableProps<TData>) => MRT_DisplayColumnIds[];
|
9
9
|
export declare const getTrailingDisplayColumnIds: <TData extends Record<string, any> = {}>(props: MaterialReactTableProps<TData>) => (string | false | undefined)[];
|
10
10
|
export declare const getDefaultColumnOrderIds: <TData extends Record<string, any> = {}>(props: MaterialReactTableProps<TData>) => string[];
|
package/package.json
CHANGED
@@ -1,5 +1,5 @@
|
|
1
1
|
{
|
2
|
-
"version": "0.
|
2
|
+
"version": "0.25.0",
|
3
3
|
"license": "MIT",
|
4
4
|
"name": "material-react-table",
|
5
5
|
"description": "A fully featured Material UI implementation of TanStack React Table, inspired by material-table and the MUI X DataGrid, written from the ground up in TypeScript.",
|
@@ -31,7 +31,7 @@
|
|
31
31
|
},
|
32
32
|
"scripts": {
|
33
33
|
"analyze": "size-limit --why",
|
34
|
-
"build": "tsdx build && size-limit && rm -rf material-react-table-docs/node_modules/material-react-table/dist && cp -r dist material-react-table-docs/node_modules/material-react-table/
|
34
|
+
"build": "tsdx build && size-limit && rm -rf material-react-table-docs/node_modules/material-react-table/dist && cp -r dist material-react-table-docs/node_modules/material-react-table/",
|
35
35
|
"build-storybook": "build-storybook",
|
36
36
|
"format": "prettier -w .",
|
37
37
|
"lint": "eslint .",
|
@@ -75,7 +75,7 @@
|
|
75
75
|
"@types/react": "^18.0.15",
|
76
76
|
"@types/react-dom": "^18.0.6",
|
77
77
|
"babel-loader": "^8.2.5",
|
78
|
-
"eslint": "^8.
|
78
|
+
"eslint": "^8.20.0",
|
79
79
|
"eslint-plugin-react-hooks": "^4.6.0",
|
80
80
|
"husky": "^8.0.1",
|
81
81
|
"prettier": "^2.7.1",
|
@@ -49,19 +49,6 @@ import { MRT_SortingFns } from './sortingFns';
|
|
49
49
|
|
50
50
|
type LiteralUnion<T extends U, U = string> = T | (U & Record<never, never>);
|
51
51
|
|
52
|
-
export type MRT_TableOptions<TData extends Record<string, any> = {}> = Partial<
|
53
|
-
Omit<
|
54
|
-
TableOptions<TData>,
|
55
|
-
'columns' | 'data' | 'initialState' | 'state' | 'expandRowsFn'
|
56
|
-
>
|
57
|
-
> & {
|
58
|
-
columns: MRT_ColumnDef<TData>[];
|
59
|
-
data: TData[];
|
60
|
-
expandRowsFn?: (dataRow: TData) => TData[];
|
61
|
-
initialState?: Partial<MRT_TableState<TData>>;
|
62
|
-
state?: Partial<MRT_TableState<TData>>;
|
63
|
-
};
|
64
|
-
|
65
52
|
export interface MRT_RowModel<TData extends Record<string, any> = {}> {
|
66
53
|
flatRows: MRT_Row<TData>[];
|
67
54
|
rows: MRT_Row<TData>[];
|
@@ -218,7 +205,7 @@ export type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<
|
|
218
205
|
*
|
219
206
|
* @example accessorKey: 'username'
|
220
207
|
*/
|
221
|
-
accessorKey?:
|
208
|
+
accessorKey?: string & keyof TData;
|
222
209
|
/**
|
223
210
|
* Specify what type of column this is. Either `data`, `display`, or `group`. Defaults to `data`.
|
224
211
|
* Leave this blank if you are just creating a normal data column.
|
@@ -411,6 +398,13 @@ export type MRT_FilterFn<TData extends Record<string, any> = {}> =
|
|
411
398
|
| FilterFn<TData>
|
412
399
|
| MRT_FilterOption;
|
413
400
|
|
401
|
+
export type MRT_DisplayColumnIds =
|
402
|
+
| 'mrt-row-drag'
|
403
|
+
| 'mrt-row-actions'
|
404
|
+
| 'mrt-row-expand'
|
405
|
+
| 'mrt-row-select'
|
406
|
+
| 'mrt-row-numbers';
|
407
|
+
|
414
408
|
/**
|
415
409
|
* `columns` and `data` props are the only required props, but there are over 150 other optional props.
|
416
410
|
*
|
@@ -421,7 +415,15 @@ export type MRT_FilterFn<TData extends Record<string, any> = {}> =
|
|
421
415
|
* @link https://www.material-react-table.com/docs/api/props
|
422
416
|
*/
|
423
417
|
export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
|
424
|
-
|
418
|
+
Omit<
|
419
|
+
Partial<TableOptions<TData>>,
|
420
|
+
'columns' | 'data' | 'initialState' | 'state' | 'expandRowsFn'
|
421
|
+
> & {
|
422
|
+
displayColumnDefOptions?: Partial<{
|
423
|
+
[key in MRT_DisplayColumnIds]: Partial<MRT_ColumnDef>;
|
424
|
+
}>;
|
425
|
+
columns: MRT_ColumnDef<TData>[];
|
426
|
+
data: TData[];
|
425
427
|
editingMode?: 'table' | 'row' | 'cell';
|
426
428
|
enableClickToCopy?: boolean;
|
427
429
|
enableColumnActions?: boolean;
|
@@ -449,7 +451,9 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
|
|
449
451
|
enableToolbarTop?: boolean;
|
450
452
|
enabledColumnFilterOptions?: (MRT_FilterOption | string)[] | null;
|
451
453
|
enabledGlobalFilterOptions?: (MRT_FilterOption | string)[] | null;
|
454
|
+
expandRowsFn?: (dataRow: TData) => TData[];
|
452
455
|
icons?: Partial<MRT_Icons>;
|
456
|
+
initialState?: Partial<MRT_TableState<TData>>;
|
453
457
|
localization?: Partial<MRT_Localization>;
|
454
458
|
muiExpandAllButtonProps?:
|
455
459
|
| IconButtonProps
|
@@ -522,6 +526,9 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
|
|
522
526
|
table: MRT_TableInstance<TData>;
|
523
527
|
cell: MRT_Cell<TData>;
|
524
528
|
}) => SkeletonProps);
|
529
|
+
muiTableBodyProps?:
|
530
|
+
| TableBodyProps
|
531
|
+
| (({ table }: { table: MRT_TableInstance<TData> }) => TableBodyProps);
|
525
532
|
muiTableBodyRowDragHandleProps?:
|
526
533
|
| IconButtonProps
|
527
534
|
| (({
|
@@ -531,9 +538,6 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
|
|
531
538
|
table: MRT_TableInstance<TData>;
|
532
539
|
row: MRT_Row<TData>;
|
533
540
|
}) => IconButtonProps);
|
534
|
-
muiTableBodyProps?:
|
535
|
-
| TableBodyProps
|
536
|
-
| (({ table }: { table: MRT_TableInstance<TData> }) => TableBodyProps);
|
537
541
|
muiTableBodyRowProps?:
|
538
542
|
| TableRowProps
|
539
543
|
| (({
|
@@ -685,6 +689,7 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
|
|
685
689
|
onCurrentGlobalFilterFnChange?: OnChangeFn<MRT_FilterOption>;
|
686
690
|
onCurrentHoveredColumnChange?: OnChangeFn<MRT_Column<TData> | null>;
|
687
691
|
onCurrentHoveredRowChange?: OnChangeFn<MRT_Row<TData> | null>;
|
692
|
+
onDensityChange?: OnChangeFn<boolean>;
|
688
693
|
onEditRowSubmit?: ({
|
689
694
|
row,
|
690
695
|
table,
|
@@ -692,7 +697,6 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
|
|
692
697
|
row: MRT_Row<TData>;
|
693
698
|
table: MRT_TableInstance<TData>;
|
694
699
|
}) => Promise<void> | void;
|
695
|
-
onDensityChange?: OnChangeFn<boolean>;
|
696
700
|
onIsFullScreenChange?: OnChangeFn<boolean>;
|
697
701
|
onRowDrop?: ({
|
698
702
|
event,
|
@@ -738,11 +742,6 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
|
|
738
742
|
}: {
|
739
743
|
table: MRT_TableInstance<TData>;
|
740
744
|
}) => ReactNode;
|
741
|
-
renderToolbarTopCustomActions?: ({
|
742
|
-
table,
|
743
|
-
}: {
|
744
|
-
table: MRT_TableInstance<TData>;
|
745
|
-
}) => ReactNode;
|
746
745
|
renderToolbarInternalActions?: ({
|
747
746
|
table,
|
748
747
|
MRT_ToggleGlobalFilterButton,
|
@@ -768,9 +767,15 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
|
|
768
767
|
IconButtonProps & { table: MRT_TableInstance<TData> }
|
769
768
|
>;
|
770
769
|
}) => ReactNode;
|
770
|
+
renderToolbarTopCustomActions?: ({
|
771
|
+
table,
|
772
|
+
}: {
|
773
|
+
table: MRT_TableInstance<TData>;
|
774
|
+
}) => ReactNode;
|
771
775
|
rowCount?: number;
|
772
776
|
rowNumberMode?: 'original' | 'static';
|
773
777
|
selectAllMode?: 'all' | 'page';
|
778
|
+
state?: Partial<MRT_TableState<TData>>;
|
774
779
|
tableId?: string;
|
775
780
|
virtualizerProps?: Partial<VirtualizerOptions<HTMLDivElement>>;
|
776
781
|
};
|
@@ -129,7 +129,9 @@ export const MRT_TableBodyCell: FC<Props> = ({
|
|
129
129
|
|
130
130
|
const handleDragEnter = (_e: DragEvent) => {
|
131
131
|
if (enableColumnOrdering && currentDraggingColumn) {
|
132
|
-
setCurrentHoveredColumn(
|
132
|
+
setCurrentHoveredColumn(
|
133
|
+
columnDef.enableColumnOrdering !== false ? column : null,
|
134
|
+
);
|
133
135
|
}
|
134
136
|
};
|
135
137
|
|
@@ -48,13 +48,6 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
|
|
48
48
|
...mcTableHeadCellProps,
|
49
49
|
};
|
50
50
|
|
51
|
-
const headerElement = ((columnDef?.Header instanceof Function
|
52
|
-
? columnDef?.Header?.({
|
53
|
-
header,
|
54
|
-
table,
|
55
|
-
})
|
56
|
-
: columnDef?.Header) ?? columnDef.header) as ReactNode;
|
57
|
-
|
58
51
|
const getIsLastLeftPinnedColumn = () => {
|
59
52
|
return (
|
60
53
|
column.getIsPinned() === 'left' &&
|
@@ -74,12 +67,12 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
|
|
74
67
|
|
75
68
|
const handleDragEnter = (_e: DragEvent) => {
|
76
69
|
if (enableColumnOrdering && currentDraggingColumn) {
|
77
|
-
setCurrentHoveredColumn(
|
70
|
+
setCurrentHoveredColumn(
|
71
|
+
columnDef.enableColumnOrdering !== false ? column : null,
|
72
|
+
);
|
78
73
|
}
|
79
74
|
};
|
80
75
|
|
81
|
-
const tableHeadCellRef = React.useRef<HTMLTableCellElement>(null);
|
82
|
-
|
83
76
|
const draggingBorder =
|
84
77
|
currentDraggingColumn?.id === column.id
|
85
78
|
? `1px dashed ${theme.palette.divider}`
|
@@ -95,6 +88,15 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
|
|
95
88
|
}
|
96
89
|
: undefined;
|
97
90
|
|
91
|
+
const headerElement = ((columnDef?.Header instanceof Function
|
92
|
+
? columnDef?.Header?.({
|
93
|
+
header,
|
94
|
+
table,
|
95
|
+
})
|
96
|
+
: columnDef?.Header) ?? columnDef.header) as ReactNode;
|
97
|
+
|
98
|
+
const tableHeadCellRef = React.useRef<HTMLTableCellElement>(null);
|
99
|
+
|
98
100
|
return (
|
99
101
|
<TableCell
|
100
102
|
align={columnDefType === 'group' ? 'center' : 'left'}
|
@@ -153,7 +155,7 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
|
|
153
155
|
column.getIsPinned() === 'right' ? `${getTotalRight()}px` : undefined,
|
154
156
|
transition: `all ${enableColumnResizing ? 0 : '0.2s'} ease-in-out`,
|
155
157
|
userSelect: enableMultiSort && column.getCanSort() ? 'none' : undefined,
|
156
|
-
verticalAlign: '
|
158
|
+
verticalAlign: 'top',
|
157
159
|
zIndex:
|
158
160
|
column.getIsResizing() || currentDraggingColumn?.id === column.id
|
159
161
|
? 3
|
@@ -167,9 +169,7 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
|
|
167
169
|
width: header.getSize(),
|
168
170
|
})}
|
169
171
|
>
|
170
|
-
{header.isPlaceholder ? null :
|
171
|
-
headerElement
|
172
|
-
) : (
|
172
|
+
{header.isPlaceholder ? null : (
|
173
173
|
<Box
|
174
174
|
sx={{
|
175
175
|
alignItems: 'flex-start',
|
@@ -195,16 +195,16 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
|
|
195
195
|
}}
|
196
196
|
>
|
197
197
|
{headerElement}
|
198
|
-
{
|
198
|
+
{column.getCanSort() && (
|
199
199
|
<MRT_TableHeadCellSortLabel header={header} table={table} />
|
200
200
|
)}
|
201
|
-
{
|
201
|
+
{column.getCanFilter() && (
|
202
202
|
<MRT_TableHeadCellFilterLabel header={header} table={table} />
|
203
203
|
)}
|
204
204
|
</Box>
|
205
|
-
|
206
|
-
{
|
207
|
-
((enableColumnDragging &&
|
205
|
+
{columnDefType !== 'group' && (
|
206
|
+
<Box sx={{ whiteSpace: 'nowrap' }}>
|
207
|
+
{((enableColumnDragging &&
|
208
208
|
columnDef.enableColumnDragging !== false) ||
|
209
209
|
(enableColumnOrdering &&
|
210
210
|
columnDef.enableColumnOrdering !== false) ||
|
@@ -215,21 +215,21 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
|
|
215
215
|
tableHeadCellRef={tableHeadCellRef}
|
216
216
|
/>
|
217
217
|
)}
|
218
|
-
|
219
|
-
|
220
|
-
|
221
|
-
|
222
|
-
|
223
|
-
|
224
|
-
|
225
|
-
|
226
|
-
|
218
|
+
{(enableColumnActions || columnDef.enableColumnActions) &&
|
219
|
+
columnDef.enableColumnActions !== false && (
|
220
|
+
<MRT_TableHeadCellColumnActionsButton
|
221
|
+
header={header}
|
222
|
+
table={table}
|
223
|
+
/>
|
224
|
+
)}
|
225
|
+
</Box>
|
226
|
+
)}
|
227
227
|
{column.getCanResize() && (
|
228
228
|
<MRT_TableHeadCellResizeHandle header={header} table={table} />
|
229
229
|
)}
|
230
230
|
</Box>
|
231
231
|
)}
|
232
|
-
{
|
232
|
+
{column.getCanFilter() && (
|
233
233
|
<MRT_TableHeadCellFilterContainer header={header} table={table} />
|
234
234
|
)}
|
235
235
|
</TableCell>
|
@@ -73,14 +73,15 @@ export const MRT_FilterTextField: FC<Props> = ({
|
|
73
73
|
|
74
74
|
const handleChangeDebounced = useCallback(
|
75
75
|
debounce((event: ChangeEvent<HTMLInputElement>) => {
|
76
|
+
let value = textFieldProps.type === 'date' ? new Date(event.target.value) : event.target.value
|
76
77
|
if (inputIndex !== undefined) {
|
77
|
-
column.setFilterValue((old: [string, string]) => {
|
78
|
+
column.setFilterValue((old: [string, string | Date]) => {
|
78
79
|
const newFilterValues = old ?? ['', ''];
|
79
|
-
newFilterValues[inputIndex] =
|
80
|
+
newFilterValues[inputIndex] = value;
|
80
81
|
return newFilterValues;
|
81
82
|
});
|
82
83
|
} else {
|
83
|
-
column.setFilterValue(
|
84
|
+
column.setFilterValue(value ?? undefined);
|
84
85
|
}
|
85
86
|
}, 200),
|
86
87
|
[],
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import React, {
|
1
|
+
import React, { FC } from 'react';
|
2
2
|
import { Checkbox, Tooltip } from '@mui/material';
|
3
3
|
import type { MRT_Row, MRT_TableInstance } from '..';
|
4
4
|
|
@@ -20,24 +20,12 @@ export const MRT_SelectCheckbox: FC<Props> = ({ row, selectAll, table }) => {
|
|
20
20
|
} = table;
|
21
21
|
const { density } = getState();
|
22
22
|
|
23
|
-
const
|
24
|
-
if (selectAll) {
|
25
|
-
if (selectAllMode === 'all') {
|
26
|
-
table.getToggleAllRowsSelectedHandler()(event as any);
|
27
|
-
} else if (selectAllMode === 'page') {
|
28
|
-
table.getToggleAllPageRowsSelectedHandler()(event as any);
|
29
|
-
}
|
30
|
-
} else if (row) {
|
31
|
-
row?.getToggleSelectedHandler()(event as any);
|
32
|
-
}
|
33
|
-
};
|
34
|
-
|
35
|
-
const checkboxProps = selectAll
|
23
|
+
const checkboxProps = !row
|
36
24
|
? muiSelectAllCheckboxProps instanceof Function
|
37
25
|
? muiSelectAllCheckboxProps({ table })
|
38
26
|
: muiSelectAllCheckboxProps
|
39
27
|
: muiSelectCheckboxProps instanceof Function
|
40
|
-
? muiSelectCheckboxProps({ row
|
28
|
+
? muiSelectCheckboxProps({ row, table })
|
41
29
|
: muiSelectCheckboxProps;
|
42
30
|
|
43
31
|
return (
|
@@ -61,12 +49,19 @@ export const MRT_SelectCheckbox: FC<Props> = ({ row, selectAll, table }) => {
|
|
61
49
|
? localization.toggleSelectAll
|
62
50
|
: localization.toggleSelectRow,
|
63
51
|
}}
|
64
|
-
onChange={
|
52
|
+
onChange={
|
53
|
+
!row
|
54
|
+
? selectAllMode === 'all'
|
55
|
+
? table.getToggleAllRowsSelectedHandler()
|
56
|
+
: table.getToggleAllPageRowsSelectedHandler()
|
57
|
+
: row.getToggleSelectedHandler()
|
58
|
+
}
|
65
59
|
size={density === 'compact' ? 'small' : 'medium'}
|
66
60
|
{...checkboxProps}
|
67
61
|
sx={{
|
68
|
-
height: density === 'compact' ? '1.
|
69
|
-
width: density === 'compact' ? '1.
|
62
|
+
height: density === 'compact' ? '1.5rem' : '2rem',
|
63
|
+
width: density === 'compact' ? '1.5rem' : '2rem',
|
64
|
+
m: '-1re.m',
|
70
65
|
...checkboxProps?.sx,
|
71
66
|
}}
|
72
67
|
/>
|
@@ -326,21 +326,22 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
|
|
326
326
|
</Box>
|
327
327
|
</MenuItem>,
|
328
328
|
]}
|
329
|
-
{enableColumnResizing &&
|
330
|
-
|
331
|
-
|
332
|
-
|
333
|
-
|
334
|
-
|
335
|
-
|
336
|
-
|
337
|
-
<
|
338
|
-
<
|
339
|
-
|
340
|
-
|
341
|
-
|
342
|
-
|
343
|
-
|
329
|
+
{enableColumnResizing &&
|
330
|
+
column.getCanResize() && [
|
331
|
+
<MenuItem
|
332
|
+
disabled={!columnSizing[column.id]}
|
333
|
+
key={0}
|
334
|
+
onClick={handleResetColumnSize}
|
335
|
+
sx={commonMenuItemStyles}
|
336
|
+
>
|
337
|
+
<Box sx={commonListItemStyles}>
|
338
|
+
<ListItemIcon>
|
339
|
+
<RestartAltIcon />
|
340
|
+
</ListItemIcon>
|
341
|
+
{localization.resetColumnSize}
|
342
|
+
</Box>
|
343
|
+
</MenuItem>,
|
344
|
+
]}
|
344
345
|
{enableHiding && [
|
345
346
|
<MenuItem
|
346
347
|
disabled={columnDef.enableHiding === false}
|
@@ -33,6 +33,22 @@ import {
|
|
33
33
|
} from '../utils';
|
34
34
|
import { MRT_FilterFns } from '../filtersFns';
|
35
35
|
|
36
|
+
const defaultDisplayColumnDefOptions = {
|
37
|
+
columnDefType: 'display',
|
38
|
+
enableClickToCopy: false,
|
39
|
+
enableColumnActions: false,
|
40
|
+
enableColumnDragging: false,
|
41
|
+
enableColumnFilter: false,
|
42
|
+
enableColumnOrdering: false,
|
43
|
+
enableEditing: false,
|
44
|
+
enableGlobalFilter: false,
|
45
|
+
enableGrouping: false,
|
46
|
+
enableHiding: false,
|
47
|
+
enablePinning: false,
|
48
|
+
enableResizing: false,
|
49
|
+
enableSorting: false,
|
50
|
+
} as Partial<MRT_ColumnDef>;
|
51
|
+
|
36
52
|
export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
|
37
53
|
props: MaterialReactTableProps<TData>,
|
38
54
|
) => {
|
@@ -54,17 +70,21 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
|
|
54
70
|
initialState.columnOrder ?? [],
|
55
71
|
);
|
56
72
|
const [currentDraggingColumn, setCurrentDraggingColumn] =
|
57
|
-
useState<MRT_Column<TData> | null>(
|
73
|
+
useState<MRT_Column<TData> | null>(
|
74
|
+
initialState.currentDraggingColumn ?? null,
|
75
|
+
);
|
58
76
|
const [currentDraggingRow, setCurrentDraggingRow] =
|
59
|
-
useState<MRT_Row<TData> | null>(null);
|
77
|
+
useState<MRT_Row<TData> | null>(initialState.currentDraggingRow ?? null);
|
60
78
|
const [currentEditingCell, setCurrentEditingCell] =
|
61
|
-
useState<MRT_Cell<TData> | null>(initialState
|
79
|
+
useState<MRT_Cell<TData> | null>(initialState.currentEditingCell ?? null);
|
62
80
|
const [currentEditingRow, setCurrentEditingRow] =
|
63
|
-
useState<MRT_Row<TData> | null>(initialState
|
81
|
+
useState<MRT_Row<TData> | null>(initialState.currentEditingRow ?? null);
|
64
82
|
const [currentHoveredColumn, setCurrentHoveredColumn] =
|
65
|
-
useState<MRT_Column<TData> | null>(
|
83
|
+
useState<MRT_Column<TData> | null>(
|
84
|
+
initialState.currentHoveredColumn ?? null,
|
85
|
+
);
|
66
86
|
const [currentHoveredRow, setCurrentHoveredRow] =
|
67
|
-
useState<MRT_Row<TData> | null>(null);
|
87
|
+
useState<MRT_Row<TData> | null>(initialState.currentHoveredRow ?? null);
|
68
88
|
const [density, setDensity] = useState(
|
69
89
|
initialState?.density ?? 'comfortable',
|
70
90
|
);
|
@@ -80,7 +100,6 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
|
|
80
100
|
const [showGlobalFilter, setShowGlobalFilter] = useState(
|
81
101
|
initialState?.showGlobalFilter ?? false,
|
82
102
|
);
|
83
|
-
|
84
103
|
const [currentFilterFns, setCurrentFilterFns] = useState<{
|
85
104
|
[key: string]: MRT_FilterOption;
|
86
105
|
}>(() =>
|
@@ -100,7 +119,6 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
|
|
100
119
|
),
|
101
120
|
),
|
102
121
|
);
|
103
|
-
|
104
122
|
const [currentGlobalFilterFn, setCurrentGlobalFilterFn] =
|
105
123
|
useState<MRT_FilterOption>(
|
106
124
|
props.globalFilterFn instanceof String
|
@@ -113,12 +131,11 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
|
|
113
131
|
(
|
114
132
|
[
|
115
133
|
columnOrder.includes('mrt-row-drag') && {
|
116
|
-
columnDefType: 'display',
|
117
134
|
header: props.localization?.move,
|
118
|
-
id: 'mrt-row-drag',
|
119
|
-
muiTableBodyCellProps: props.muiTableBodyCellProps,
|
120
|
-
muiTableHeadCellProps: props.muiTableHeadCellProps,
|
121
135
|
size: 60,
|
136
|
+
...defaultDisplayColumnDefOptions,
|
137
|
+
...props.displayColumnDefOptions?.['mrt-row-drag'],
|
138
|
+
id: 'mrt-row-drag',
|
122
139
|
},
|
123
140
|
columnOrder.includes('mrt-row-actions') && {
|
124
141
|
Cell: ({ cell }) => (
|
@@ -127,12 +144,11 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
|
|
127
144
|
table={table}
|
128
145
|
/>
|
129
146
|
),
|
130
|
-
columnDefType: 'display',
|
131
147
|
header: props.localization?.actions,
|
132
|
-
id: 'mrt-row-actions',
|
133
|
-
muiTableBodyCellProps: props.muiTableBodyCellProps,
|
134
|
-
muiTableHeadCellProps: props.muiTableHeadCellProps,
|
135
148
|
size: 70,
|
149
|
+
...defaultDisplayColumnDefOptions,
|
150
|
+
...props.displayColumnDefOptions?.['mrt-row-actions'],
|
151
|
+
id: 'mrt-row-actions',
|
136
152
|
},
|
137
153
|
columnOrder.includes('mrt-row-expand') && {
|
138
154
|
Cell: ({ cell }) => (
|
@@ -142,12 +158,11 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
|
|
142
158
|
props.enableExpandAll ? (
|
143
159
|
<MRT_ExpandAllButton table={table} />
|
144
160
|
) : null,
|
145
|
-
columnDefType: 'display',
|
146
161
|
header: props.localization?.expand,
|
147
|
-
id: 'mrt-row-expand',
|
148
|
-
muiTableBodyCellProps: props.muiTableBodyCellProps,
|
149
|
-
muiTableHeadCellProps: props.muiTableHeadCellProps,
|
150
162
|
size: 60,
|
163
|
+
...defaultDisplayColumnDefOptions,
|
164
|
+
...props.displayColumnDefOptions?.['mrt-row-expand'],
|
165
|
+
id: 'mrt-row-expand',
|
151
166
|
},
|
152
167
|
columnOrder.includes('mrt-row-select') && {
|
153
168
|
Cell: ({ cell }) => (
|
@@ -157,33 +172,35 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
|
|
157
172
|
props.enableSelectAll ? (
|
158
173
|
<MRT_SelectCheckbox selectAll table={table} />
|
159
174
|
) : null,
|
160
|
-
columnDefType: 'display',
|
161
175
|
header: props.localization?.select,
|
162
|
-
id: 'mrt-row-select',
|
163
|
-
muiTableBodyCellProps: props.muiTableBodyCellProps,
|
164
|
-
muiTableHeadCellProps: props.muiTableHeadCellProps,
|
165
176
|
size: 60,
|
177
|
+
...defaultDisplayColumnDefOptions,
|
178
|
+
...props.displayColumnDefOptions?.['mrt-row-select'],
|
179
|
+
id: 'mrt-row-select',
|
166
180
|
},
|
167
181
|
columnOrder.includes('mrt-row-numbers') && {
|
168
182
|
Cell: ({ cell }) => cell.row.index + 1,
|
169
183
|
Header: () => props.localization?.rowNumber,
|
170
|
-
columnDefType: 'display',
|
171
184
|
header: props.localization?.rowNumbers,
|
172
|
-
id: 'mrt-row-numbers',
|
173
|
-
muiTableBodyCellProps: props.muiTableBodyCellProps,
|
174
|
-
muiTableHeadCellProps: props.muiTableHeadCellProps,
|
175
185
|
size: 60,
|
186
|
+
...defaultDisplayColumnDefOptions,
|
187
|
+
...props.displayColumnDefOptions?.['mrt-row-numbers'],
|
188
|
+
id: 'mrt-row-numbers',
|
176
189
|
},
|
177
190
|
] as MRT_ColumnDef<TData>[]
|
178
191
|
).filter(Boolean),
|
179
192
|
[
|
180
193
|
columnOrder,
|
194
|
+
props.displayColumnDefOptions,
|
181
195
|
props.editingMode,
|
196
|
+
props.enableColumnDragging,
|
197
|
+
props.enableColumnOrdering,
|
182
198
|
props.enableEditing,
|
183
199
|
props.enableExpandAll,
|
184
200
|
props.enableExpanding,
|
185
201
|
props.enableGrouping,
|
186
202
|
props.enableRowActions,
|
203
|
+
props.enableRowDragging,
|
187
204
|
props.enableRowNumbers,
|
188
205
|
props.enableRowOrdering,
|
189
206
|
props.enableRowSelection,
|
package/src/utils.ts
CHANGED
@@ -4,6 +4,7 @@ import {
|
|
4
4
|
MRT_Column,
|
5
5
|
MRT_ColumnDef,
|
6
6
|
MRT_DefinedColumnDef,
|
7
|
+
MRT_DisplayColumnIds,
|
7
8
|
MRT_FilterOption,
|
8
9
|
} from '.';
|
9
10
|
import { MRT_FilterFns } from './filtersFns';
|
@@ -92,7 +93,7 @@ export const getLeadingDisplayColumnIds = <
|
|
92
93
|
'mrt-row-expand',
|
93
94
|
props.enableRowSelection && 'mrt-row-select',
|
94
95
|
props.enableRowNumbers && 'mrt-row-numbers',
|
95
|
-
].filter(Boolean) as
|
96
|
+
].filter(Boolean) as MRT_DisplayColumnIds[];
|
96
97
|
|
97
98
|
export const getTrailingDisplayColumnIds = <
|
98
99
|
TData extends Record<string, any> = {},
|