material-react-table 0.23.5 → 0.25.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/MaterialReactTable.d.ts +61 -28
- package/dist/body/MRT_TableBodyCell.d.ts +2 -1
- package/dist/body/MRT_TableBodyRowGrabHandle.d.ts +9 -0
- package/dist/buttons/MRT_GrabHandleButton.d.ts +4 -2
- package/dist/head/MRT_TableHeadCellGrabHandle.d.ts +9 -0
- package/dist/localization.d.ts +1 -0
- package/dist/material-react-table.cjs.development.js +334 -221
- 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 +335 -222
- package/dist/material-react-table.esm.js.map +1 -1
- package/dist/utils.d.ts +3 -3
- package/package.json +3 -3
- package/src/MaterialReactTable.tsx +95 -35
- package/src/body/MRT_TableBodyCell.tsx +20 -4
- package/src/body/MRT_TableBodyRow.tsx +37 -3
- package/src/body/MRT_TableBodyRowGrabHandle.tsx +48 -0
- package/src/buttons/MRT_GrabHandleButton.tsx +12 -8
- package/src/head/MRT_TableHeadCell.tsx +40 -57
- package/src/head/MRT_TableHeadCellGrabHandle.tsx +77 -0
- package/src/inputs/MRT_FilterTextField.tsx +4 -3
- package/src/inputs/MRT_SelectCheckbox.tsx +13 -18
- package/src/localization.ts +2 -0
- package/src/menus/MRT_ColumnActionMenu.tsx +17 -16
- package/src/menus/MRT_ShowHideColumnsMenuItems.tsx +3 -3
- package/src/table/MRT_TableRoot.tsx +61 -25
- package/src/utils.ts +11 -9
@@ -1,12 +1,11 @@
|
|
1
1
|
import React, { DragEvent, FC, ReactNode } from 'react';
|
2
2
|
import { Box, TableCell, Theme, alpha, lighten, useTheme } from '@mui/material';
|
3
|
+
import { MRT_TableHeadCellColumnActionsButton } from './MRT_TableHeadCellColumnActionsButton';
|
3
4
|
import { MRT_TableHeadCellFilterContainer } from './MRT_TableHeadCellFilterContainer';
|
4
5
|
import { MRT_TableHeadCellFilterLabel } from './MRT_TableHeadCellFilterLabel';
|
5
|
-
import {
|
6
|
+
import { MRT_TableHeadCellGrabHandle } from './MRT_TableHeadCellGrabHandle';
|
6
7
|
import { MRT_TableHeadCellResizeHandle } from './MRT_TableHeadCellResizeHandle';
|
7
8
|
import { MRT_TableHeadCellSortLabel } from './MRT_TableHeadCellSortLabel';
|
8
|
-
import { MRT_TableHeadCellColumnActionsButton } from './MRT_TableHeadCellColumnActionsButton';
|
9
|
-
import { reorderColumn } from '../utils';
|
10
9
|
import type { MRT_Header, MRT_TableInstance } from '..';
|
11
10
|
|
12
11
|
interface Props {
|
@@ -20,18 +19,16 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
|
|
20
19
|
getState,
|
21
20
|
options: {
|
22
21
|
enableColumnActions,
|
22
|
+
enableColumnDragging,
|
23
23
|
enableColumnOrdering,
|
24
24
|
enableColumnResizing,
|
25
25
|
enableGrouping,
|
26
26
|
enableMultiSort,
|
27
27
|
muiTableHeadCellProps,
|
28
28
|
},
|
29
|
-
setColumnOrder,
|
30
|
-
setCurrentDraggingColumn,
|
31
29
|
setCurrentHoveredColumn,
|
32
30
|
} = table;
|
33
|
-
const {
|
34
|
-
getState();
|
31
|
+
const { density, currentDraggingColumn, currentHoveredColumn } = getState();
|
35
32
|
const { column } = header;
|
36
33
|
const { columnDef } = column;
|
37
34
|
const { columnDefType } = columnDef;
|
@@ -51,13 +48,6 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
|
|
51
48
|
...mcTableHeadCellProps,
|
52
49
|
};
|
53
50
|
|
54
|
-
const headerElement = ((columnDef?.Header instanceof Function
|
55
|
-
? columnDef?.Header?.({
|
56
|
-
header,
|
57
|
-
table,
|
58
|
-
})
|
59
|
-
: columnDef?.Header) ?? columnDef.header) as ReactNode;
|
60
|
-
|
61
51
|
const getIsLastLeftPinnedColumn = () => {
|
62
52
|
return (
|
63
53
|
column.getIsPinned() === 'left' &&
|
@@ -75,27 +65,11 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
|
|
75
65
|
);
|
76
66
|
};
|
77
67
|
|
78
|
-
const tableHeadCellRef = React.useRef<HTMLElement>(null);
|
79
|
-
|
80
|
-
const handleDragStart = (e: DragEvent<HTMLButtonElement>) => {
|
81
|
-
setCurrentDraggingColumn(column);
|
82
|
-
e.dataTransfer.setDragImage(tableHeadCellRef.current as HTMLElement, 0, 0);
|
83
|
-
};
|
84
|
-
|
85
|
-
const handleDragEnd = (_e: DragEvent<HTMLButtonElement>) => {
|
86
|
-
setCurrentDraggingColumn(null);
|
87
|
-
setCurrentHoveredColumn(null);
|
88
|
-
if (
|
89
|
-
currentHoveredColumn &&
|
90
|
-
currentHoveredColumn?.id !== currentDraggingColumn?.id
|
91
|
-
) {
|
92
|
-
setColumnOrder(reorderColumn(column, currentHoveredColumn, columnOrder));
|
93
|
-
}
|
94
|
-
};
|
95
|
-
|
96
68
|
const handleDragEnter = (_e: DragEvent) => {
|
97
|
-
if (currentDraggingColumn) {
|
98
|
-
setCurrentHoveredColumn(
|
69
|
+
if (enableColumnOrdering && currentDraggingColumn) {
|
70
|
+
setCurrentHoveredColumn(
|
71
|
+
columnDef.enableColumnOrdering !== false ? column : null,
|
72
|
+
);
|
99
73
|
}
|
100
74
|
};
|
101
75
|
|
@@ -114,6 +88,15 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
|
|
114
88
|
}
|
115
89
|
: undefined;
|
116
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
|
+
|
117
100
|
return (
|
118
101
|
<TableCell
|
119
102
|
align={columnDefType === 'group' ? 'center' : 'left'}
|
@@ -172,7 +155,7 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
|
|
172
155
|
column.getIsPinned() === 'right' ? `${getTotalRight()}px` : undefined,
|
173
156
|
transition: `all ${enableColumnResizing ? 0 : '0.2s'} ease-in-out`,
|
174
157
|
userSelect: enableMultiSort && column.getCanSort() ? 'none' : undefined,
|
175
|
-
verticalAlign: '
|
158
|
+
verticalAlign: 'top',
|
176
159
|
zIndex:
|
177
160
|
column.getIsResizing() || currentDraggingColumn?.id === column.id
|
178
161
|
? 3
|
@@ -186,9 +169,7 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
|
|
186
169
|
width: header.getSize(),
|
187
170
|
})}
|
188
171
|
>
|
189
|
-
{header.isPlaceholder ? null :
|
190
|
-
headerElement
|
191
|
-
) : (
|
172
|
+
{header.isPlaceholder ? null : (
|
192
173
|
<Box
|
193
174
|
sx={{
|
194
175
|
alignItems: 'flex-start',
|
@@ -214,39 +195,41 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
|
|
214
195
|
}}
|
215
196
|
>
|
216
197
|
{headerElement}
|
217
|
-
{
|
198
|
+
{column.getCanSort() && (
|
218
199
|
<MRT_TableHeadCellSortLabel header={header} table={table} />
|
219
200
|
)}
|
220
|
-
{
|
201
|
+
{column.getCanFilter() && (
|
221
202
|
<MRT_TableHeadCellFilterLabel header={header} table={table} />
|
222
203
|
)}
|
223
204
|
</Box>
|
224
|
-
|
225
|
-
{
|
226
|
-
((
|
227
|
-
columnDef.
|
205
|
+
{columnDefType !== 'group' && (
|
206
|
+
<Box sx={{ whiteSpace: 'nowrap' }}>
|
207
|
+
{((enableColumnDragging &&
|
208
|
+
columnDef.enableColumnDragging !== false) ||
|
209
|
+
(enableColumnOrdering &&
|
210
|
+
columnDef.enableColumnOrdering !== false) ||
|
228
211
|
(enableGrouping && columnDef.enableGrouping !== false)) && (
|
229
|
-
<
|
230
|
-
|
231
|
-
handleDragEnd={handleDragEnd}
|
212
|
+
<MRT_TableHeadCellGrabHandle
|
213
|
+
column={column}
|
232
214
|
table={table}
|
215
|
+
tableHeadCellRef={tableHeadCellRef}
|
233
216
|
/>
|
234
217
|
)}
|
235
|
-
|
236
|
-
|
237
|
-
|
238
|
-
|
239
|
-
|
240
|
-
|
241
|
-
|
242
|
-
|
243
|
-
|
218
|
+
{(enableColumnActions || columnDef.enableColumnActions) &&
|
219
|
+
columnDef.enableColumnActions !== false && (
|
220
|
+
<MRT_TableHeadCellColumnActionsButton
|
221
|
+
header={header}
|
222
|
+
table={table}
|
223
|
+
/>
|
224
|
+
)}
|
225
|
+
</Box>
|
226
|
+
)}
|
244
227
|
{column.getCanResize() && (
|
245
228
|
<MRT_TableHeadCellResizeHandle header={header} table={table} />
|
246
229
|
)}
|
247
230
|
</Box>
|
248
231
|
)}
|
249
|
-
{
|
232
|
+
{column.getCanFilter() && (
|
250
233
|
<MRT_TableHeadCellFilterContainer header={header} table={table} />
|
251
234
|
)}
|
252
235
|
</TableCell>
|
@@ -0,0 +1,77 @@
|
|
1
|
+
import React, { DragEvent, FC, RefObject } from 'react';
|
2
|
+
import { MRT_GrabHandleButton } from '../buttons/MRT_GrabHandleButton';
|
3
|
+
import { reorderColumn } from '../utils';
|
4
|
+
import type { MRT_Column, MRT_TableInstance } from '..';
|
5
|
+
|
6
|
+
interface Props {
|
7
|
+
column: MRT_Column;
|
8
|
+
table: MRT_TableInstance;
|
9
|
+
tableHeadCellRef: RefObject<HTMLTableCellElement>;
|
10
|
+
}
|
11
|
+
|
12
|
+
export const MRT_TableHeadCellGrabHandle: FC<Props> = ({
|
13
|
+
column,
|
14
|
+
table,
|
15
|
+
tableHeadCellRef,
|
16
|
+
}) => {
|
17
|
+
const {
|
18
|
+
getState,
|
19
|
+
options: {
|
20
|
+
enableColumnOrdering,
|
21
|
+
muiTableHeadCellDragHandleProps,
|
22
|
+
onColumnDrop,
|
23
|
+
},
|
24
|
+
setColumnOrder,
|
25
|
+
setCurrentDraggingColumn,
|
26
|
+
setCurrentHoveredColumn,
|
27
|
+
} = table;
|
28
|
+
const { columnDef } = column;
|
29
|
+
const { currentHoveredColumn, currentDraggingColumn, columnOrder } =
|
30
|
+
getState();
|
31
|
+
|
32
|
+
const mIconButtonProps =
|
33
|
+
muiTableHeadCellDragHandleProps instanceof Function
|
34
|
+
? muiTableHeadCellDragHandleProps({ column, table })
|
35
|
+
: muiTableHeadCellDragHandleProps;
|
36
|
+
|
37
|
+
const mcIconButtonProps =
|
38
|
+
columnDef.muiTableHeadCellDragHandleProps instanceof Function
|
39
|
+
? columnDef.muiTableHeadCellDragHandleProps({ column, table })
|
40
|
+
: columnDef.muiTableHeadCellDragHandleProps;
|
41
|
+
|
42
|
+
const iconButtonProps = {
|
43
|
+
...mIconButtonProps,
|
44
|
+
...mcIconButtonProps,
|
45
|
+
};
|
46
|
+
|
47
|
+
const handleDragStart = (e: DragEvent<HTMLButtonElement>) => {
|
48
|
+
setCurrentDraggingColumn(column);
|
49
|
+
e.dataTransfer.setDragImage(tableHeadCellRef.current as HTMLElement, 0, 0);
|
50
|
+
};
|
51
|
+
|
52
|
+
const handleDragEnd = (event: DragEvent<HTMLButtonElement>) => {
|
53
|
+
onColumnDrop?.({
|
54
|
+
event,
|
55
|
+
draggedColumn: column,
|
56
|
+
targetColumn: currentHoveredColumn,
|
57
|
+
});
|
58
|
+
if (
|
59
|
+
enableColumnOrdering &&
|
60
|
+
currentHoveredColumn &&
|
61
|
+
currentHoveredColumn?.id !== currentDraggingColumn?.id
|
62
|
+
) {
|
63
|
+
setColumnOrder(reorderColumn(column, currentHoveredColumn, columnOrder));
|
64
|
+
}
|
65
|
+
setCurrentDraggingColumn(null);
|
66
|
+
setCurrentHoveredColumn(null);
|
67
|
+
};
|
68
|
+
|
69
|
+
return (
|
70
|
+
<MRT_GrabHandleButton
|
71
|
+
iconButtonProps={iconButtonProps}
|
72
|
+
onDragStart={handleDragStart}
|
73
|
+
onDragEnd={handleDragEnd}
|
74
|
+
table={table}
|
75
|
+
/>
|
76
|
+
);
|
77
|
+
};
|
@@ -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
|
/>
|
package/src/localization.ts
CHANGED
@@ -34,6 +34,7 @@ export interface MRT_Localization {
|
|
34
34
|
hideColumn: string;
|
35
35
|
max: string;
|
36
36
|
min: string;
|
37
|
+
move: string;
|
37
38
|
pinToLeft: string;
|
38
39
|
pinToRight: string;
|
39
40
|
resetColumnSize: string;
|
@@ -102,6 +103,7 @@ export const MRT_DefaultLocalization_EN: MRT_Localization = {
|
|
102
103
|
hideColumn: 'Hide {column} column',
|
103
104
|
max: 'Max',
|
104
105
|
min: 'Min',
|
106
|
+
move: 'Move',
|
105
107
|
pinToLeft: 'Pin to left',
|
106
108
|
pinToRight: 'Pin to right',
|
107
109
|
resetColumnSize: 'Reset column size',
|
@@ -100,7 +100,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
|
|
100
100
|
|
101
101
|
const handleGroupByColumn = () => {
|
102
102
|
column.toggleGrouping();
|
103
|
-
setColumnOrder((old) => ['mrt-expand', ...old]);
|
103
|
+
setColumnOrder((old) => ['mrt-row-expand', ...old]);
|
104
104
|
setAnchorEl(null);
|
105
105
|
};
|
106
106
|
|
@@ -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}
|
@@ -90,7 +90,7 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
|
|
90
90
|
return (
|
91
91
|
<>
|
92
92
|
<MenuItem
|
93
|
-
disableRipple
|
93
|
+
disableRipple
|
94
94
|
ref={menuItemRef as any}
|
95
95
|
onDragEnter={handleDragEnter}
|
96
96
|
sx={(theme) => ({
|
@@ -122,8 +122,8 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
|
|
122
122
|
) &&
|
123
123
|
(columnDef.enableColumnOrdering !== false ? (
|
124
124
|
<MRT_GrabHandleButton
|
125
|
-
|
126
|
-
|
125
|
+
onDragEnd={handleDragEnd}
|
126
|
+
onDragStart={handleDragStart}
|
127
127
|
table={table}
|
128
128
|
/>
|
129
129
|
) : (
|
@@ -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
|
) => {
|
@@ -53,14 +69,22 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
|
|
53
69
|
const [columnOrder, setColumnOrder] = useState(
|
54
70
|
initialState.columnOrder ?? [],
|
55
71
|
);
|
72
|
+
const [currentDraggingColumn, setCurrentDraggingColumn] =
|
73
|
+
useState<MRT_Column<TData> | null>(
|
74
|
+
initialState.currentDraggingColumn ?? null,
|
75
|
+
);
|
76
|
+
const [currentDraggingRow, setCurrentDraggingRow] =
|
77
|
+
useState<MRT_Row<TData> | null>(initialState.currentDraggingRow ?? null);
|
56
78
|
const [currentEditingCell, setCurrentEditingCell] =
|
57
|
-
useState<MRT_Cell<TData> | null>(initialState
|
79
|
+
useState<MRT_Cell<TData> | null>(initialState.currentEditingCell ?? null);
|
58
80
|
const [currentEditingRow, setCurrentEditingRow] =
|
59
|
-
useState<MRT_Row<TData> | null>(initialState
|
60
|
-
const [currentDraggingColumn, setCurrentDraggingColumn] =
|
61
|
-
useState<MRT_Column<TData> | null>(null);
|
81
|
+
useState<MRT_Row<TData> | null>(initialState.currentEditingRow ?? null);
|
62
82
|
const [currentHoveredColumn, setCurrentHoveredColumn] =
|
63
|
-
useState<MRT_Column<TData> | null>(
|
83
|
+
useState<MRT_Column<TData> | null>(
|
84
|
+
initialState.currentHoveredColumn ?? null,
|
85
|
+
);
|
86
|
+
const [currentHoveredRow, setCurrentHoveredRow] =
|
87
|
+
useState<MRT_Row<TData> | null>(initialState.currentHoveredRow ?? null);
|
64
88
|
const [density, setDensity] = useState(
|
65
89
|
initialState?.density ?? 'comfortable',
|
66
90
|
);
|
@@ -76,7 +100,6 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
|
|
76
100
|
const [showGlobalFilter, setShowGlobalFilter] = useState(
|
77
101
|
initialState?.showGlobalFilter ?? false,
|
78
102
|
);
|
79
|
-
|
80
103
|
const [currentFilterFns, setCurrentFilterFns] = useState<{
|
81
104
|
[key: string]: MRT_FilterOption;
|
82
105
|
}>(() =>
|
@@ -96,7 +119,6 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
|
|
96
119
|
),
|
97
120
|
),
|
98
121
|
);
|
99
|
-
|
100
122
|
const [currentGlobalFilterFn, setCurrentGlobalFilterFn] =
|
101
123
|
useState<MRT_FilterOption>(
|
102
124
|
props.globalFilterFn instanceof String
|
@@ -108,6 +130,13 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
|
|
108
130
|
() =>
|
109
131
|
(
|
110
132
|
[
|
133
|
+
columnOrder.includes('mrt-row-drag') && {
|
134
|
+
header: props.localization?.move,
|
135
|
+
size: 60,
|
136
|
+
...defaultDisplayColumnDefOptions,
|
137
|
+
...props.displayColumnDefOptions?.['mrt-row-drag'],
|
138
|
+
id: 'mrt-row-drag',
|
139
|
+
},
|
111
140
|
columnOrder.includes('mrt-row-actions') && {
|
112
141
|
Cell: ({ cell }) => (
|
113
142
|
<MRT_ToggleRowActionMenuButton
|
@@ -115,14 +144,13 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
|
|
115
144
|
table={table}
|
116
145
|
/>
|
117
146
|
),
|
118
|
-
columnDefType: 'display',
|
119
147
|
header: props.localization?.actions,
|
120
|
-
id: 'mrt-row-actions',
|
121
|
-
muiTableBodyCellProps: props.muiTableBodyCellProps,
|
122
|
-
muiTableHeadCellProps: props.muiTableHeadCellProps,
|
123
148
|
size: 70,
|
149
|
+
...defaultDisplayColumnDefOptions,
|
150
|
+
...props.displayColumnDefOptions?.['mrt-row-actions'],
|
151
|
+
id: 'mrt-row-actions',
|
124
152
|
},
|
125
|
-
columnOrder.includes('mrt-expand') && {
|
153
|
+
columnOrder.includes('mrt-row-expand') && {
|
126
154
|
Cell: ({ cell }) => (
|
127
155
|
<MRT_ExpandButton row={cell.row as any} table={table} />
|
128
156
|
),
|
@@ -130,14 +158,13 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
|
|
130
158
|
props.enableExpandAll ? (
|
131
159
|
<MRT_ExpandAllButton table={table} />
|
132
160
|
) : null,
|
133
|
-
columnDefType: 'display',
|
134
161
|
header: props.localization?.expand,
|
135
|
-
id: 'mrt-expand',
|
136
|
-
muiTableBodyCellProps: props.muiTableBodyCellProps,
|
137
|
-
muiTableHeadCellProps: props.muiTableHeadCellProps,
|
138
162
|
size: 60,
|
163
|
+
...defaultDisplayColumnDefOptions,
|
164
|
+
...props.displayColumnDefOptions?.['mrt-row-expand'],
|
165
|
+
id: 'mrt-row-expand',
|
139
166
|
},
|
140
|
-
columnOrder.includes('mrt-select') && {
|
167
|
+
columnOrder.includes('mrt-row-select') && {
|
141
168
|
Cell: ({ cell }) => (
|
142
169
|
<MRT_SelectCheckbox row={cell.row as any} table={table} />
|
143
170
|
),
|
@@ -145,34 +172,37 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
|
|
145
172
|
props.enableSelectAll ? (
|
146
173
|
<MRT_SelectCheckbox selectAll table={table} />
|
147
174
|
) : null,
|
148
|
-
columnDefType: 'display',
|
149
175
|
header: props.localization?.select,
|
150
|
-
id: 'mrt-select',
|
151
|
-
muiTableBodyCellProps: props.muiTableBodyCellProps,
|
152
|
-
muiTableHeadCellProps: props.muiTableHeadCellProps,
|
153
176
|
size: 60,
|
177
|
+
...defaultDisplayColumnDefOptions,
|
178
|
+
...props.displayColumnDefOptions?.['mrt-row-select'],
|
179
|
+
id: 'mrt-row-select',
|
154
180
|
},
|
155
181
|
columnOrder.includes('mrt-row-numbers') && {
|
156
182
|
Cell: ({ cell }) => cell.row.index + 1,
|
157
183
|
Header: () => props.localization?.rowNumber,
|
158
|
-
columnDefType: 'display',
|
159
184
|
header: props.localization?.rowNumbers,
|
160
|
-
id: 'mrt-row-numbers',
|
161
|
-
muiTableBodyCellProps: props.muiTableBodyCellProps,
|
162
|
-
muiTableHeadCellProps: props.muiTableHeadCellProps,
|
163
185
|
size: 60,
|
186
|
+
...defaultDisplayColumnDefOptions,
|
187
|
+
...props.displayColumnDefOptions?.['mrt-row-numbers'],
|
188
|
+
id: 'mrt-row-numbers',
|
164
189
|
},
|
165
190
|
] as MRT_ColumnDef<TData>[]
|
166
191
|
).filter(Boolean),
|
167
192
|
[
|
168
193
|
columnOrder,
|
194
|
+
props.displayColumnDefOptions,
|
169
195
|
props.editingMode,
|
196
|
+
props.enableColumnDragging,
|
197
|
+
props.enableColumnOrdering,
|
170
198
|
props.enableEditing,
|
171
199
|
props.enableExpandAll,
|
172
200
|
props.enableExpanding,
|
173
201
|
props.enableGrouping,
|
174
202
|
props.enableRowActions,
|
203
|
+
props.enableRowDragging,
|
175
204
|
props.enableRowNumbers,
|
205
|
+
props.enableRowOrdering,
|
176
206
|
props.enableRowSelection,
|
177
207
|
props.enableSelectAll,
|
178
208
|
props.localization,
|
@@ -229,11 +259,13 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
|
|
229
259
|
state: {
|
230
260
|
columnOrder,
|
231
261
|
currentDraggingColumn,
|
262
|
+
currentDraggingRow,
|
232
263
|
currentEditingCell,
|
233
264
|
currentEditingRow,
|
234
265
|
currentFilterFns,
|
235
266
|
currentGlobalFilterFn,
|
236
267
|
currentHoveredColumn,
|
268
|
+
currentHoveredRow,
|
237
269
|
density,
|
238
270
|
isFullScreen,
|
239
271
|
showAlertBanner,
|
@@ -245,6 +277,8 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
|
|
245
277
|
}),
|
246
278
|
setCurrentDraggingColumn:
|
247
279
|
props.onCurrentDraggingColumnChange ?? setCurrentDraggingColumn,
|
280
|
+
setCurrentDraggingRow:
|
281
|
+
props.onCurrentDraggingRowChange ?? setCurrentDraggingRow,
|
248
282
|
setCurrentEditingCell:
|
249
283
|
props.onCurrentEditingCellChange ?? setCurrentEditingCell,
|
250
284
|
setCurrentEditingRow:
|
@@ -254,6 +288,8 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
|
|
254
288
|
props.onCurrentGlobalFilterFnChange ?? setCurrentGlobalFilterFn,
|
255
289
|
setCurrentHoveredColumn:
|
256
290
|
props.onCurrentHoveredColumnChange ?? setCurrentHoveredColumn,
|
291
|
+
setCurrentHoveredRow:
|
292
|
+
props.onCurrentHoveredRowChange ?? setCurrentHoveredRow,
|
257
293
|
setDensity: props.onDensityChange ?? setDensity,
|
258
294
|
setIsFullScreen: props.onIsFullScreenChange ?? setIsFullScreen,
|
259
295
|
setShowAlertBanner: props.onShowAlertBannerChange ?? setShowAlertBanner,
|
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';
|
@@ -61,17 +62,17 @@ export const prepareColumns = <TData extends Record<string, any> = {}>(
|
|
61
62
|
}) as MRT_DefinedColumnDef<TData>[];
|
62
63
|
|
63
64
|
export const reorderColumn = <TData extends Record<string, any> = {}>(
|
64
|
-
|
65
|
-
|
65
|
+
draggedColumn: MRT_Column<TData>,
|
66
|
+
targetColumn: MRT_Column<TData>,
|
66
67
|
columnOrder: ColumnOrderState,
|
67
68
|
): ColumnOrderState => {
|
68
|
-
if (
|
69
|
-
|
69
|
+
if (draggedColumn.getCanPin()) {
|
70
|
+
draggedColumn.pin(targetColumn.getIsPinned());
|
70
71
|
}
|
71
72
|
columnOrder.splice(
|
72
|
-
columnOrder.indexOf(
|
73
|
+
columnOrder.indexOf(targetColumn.id),
|
73
74
|
0,
|
74
|
-
columnOrder.splice(columnOrder.indexOf(
|
75
|
+
columnOrder.splice(columnOrder.indexOf(draggedColumn.id), 1)[0],
|
75
76
|
);
|
76
77
|
return [...columnOrder];
|
77
78
|
};
|
@@ -82,16 +83,17 @@ export const getLeadingDisplayColumnIds = <
|
|
82
83
|
props: MaterialReactTableProps<TData>,
|
83
84
|
) =>
|
84
85
|
[
|
86
|
+
(props.enableRowDragging || props.enableRowOrdering) && 'mrt-row-drag',
|
85
87
|
((props.positionActionsColumn === 'first' && props.enableRowActions) ||
|
86
88
|
(props.enableEditing && props.editingMode === 'row')) &&
|
87
89
|
'mrt-row-actions',
|
88
90
|
(props.enableExpanding ||
|
89
91
|
props.enableGrouping ||
|
90
92
|
props.renderDetailPanel) &&
|
91
|
-
'mrt-expand',
|
92
|
-
props.enableRowSelection && 'mrt-select',
|
93
|
+
'mrt-row-expand',
|
94
|
+
props.enableRowSelection && 'mrt-row-select',
|
93
95
|
props.enableRowNumbers && 'mrt-row-numbers',
|
94
|
-
].filter(Boolean) as
|
96
|
+
].filter(Boolean) as MRT_DisplayColumnIds[];
|
95
97
|
|
96
98
|
export const getTrailingDisplayColumnIds = <
|
97
99
|
TData extends Record<string, any> = {},
|