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.
@@ -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 { MRT_GrabHandleButton } from '../buttons/MRT_GrabHandleButton';
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 { columnOrder, density, currentDraggingColumn, currentHoveredColumn } =
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(columnDefType === 'data' ? column : null);
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: 'text-top',
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 : columnDefType === 'display' ? (
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
- {columnDefType === 'data' && column.getCanSort() && (
198
+ {column.getCanSort() && (
218
199
  <MRT_TableHeadCellSortLabel header={header} table={table} />
219
200
  )}
220
- {columnDefType === 'data' && column.getCanFilter() && (
201
+ {column.getCanFilter() && (
221
202
  <MRT_TableHeadCellFilterLabel header={header} table={table} />
222
203
  )}
223
204
  </Box>
224
- <Box sx={{ whiteSpace: 'nowrap' }}>
225
- {columnDefType === 'data' &&
226
- ((enableColumnOrdering &&
227
- columnDef.enableColumnOrdering !== false) ||
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
- <MRT_GrabHandleButton
230
- handleDragStart={handleDragStart}
231
- handleDragEnd={handleDragEnd}
212
+ <MRT_TableHeadCellGrabHandle
213
+ column={column}
232
214
  table={table}
215
+ tableHeadCellRef={tableHeadCellRef}
233
216
  />
234
217
  )}
235
- {(enableColumnActions || columnDef.enableColumnActions) &&
236
- columnDef.enableColumnActions !== false &&
237
- columnDefType !== 'group' && (
238
- <MRT_TableHeadCellColumnActionsButton
239
- header={header}
240
- table={table}
241
- />
242
- )}
243
- </Box>
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
- {columnDefType === 'data' && column.getCanFilter() && (
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] = event.target.value;
80
+ newFilterValues[inputIndex] = value;
80
81
  return newFilterValues;
81
82
  });
82
83
  } else {
83
- column.setFilterValue(event.target.value ?? undefined);
84
+ column.setFilterValue(value ?? undefined);
84
85
  }
85
86
  }, 200),
86
87
  [],
@@ -1,4 +1,4 @@
1
- import React, { ChangeEvent, FC } from '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 handleSelectChange = (event: ChangeEvent<HTMLInputElement>) => {
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: row as MRT_Row, table })
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={handleSelectChange}
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.75rem' : '2.25rem',
69
- width: density === 'compact' ? '1.75rem' : '2.25rem',
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
  />
@@ -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
- <MenuItem
331
- disabled={!column.getCanResize() || !columnSizing[column.id]}
332
- key={0}
333
- onClick={handleResetColumnSize}
334
- sx={commonMenuItemStyles}
335
- >
336
- <Box sx={commonListItemStyles}>
337
- <ListItemIcon>
338
- <RestartAltIcon />
339
- </ListItemIcon>
340
- {localization.resetColumnSize}
341
- </Box>
342
- </MenuItem>,
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={enableColumnOrdering}
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
- handleDragEnd={handleDragEnd}
126
- handleDragStart={handleDragStart}
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?.currentEditingCell ?? null);
79
+ useState<MRT_Cell<TData> | null>(initialState.currentEditingCell ?? null);
58
80
  const [currentEditingRow, setCurrentEditingRow] =
59
- useState<MRT_Row<TData> | null>(initialState?.currentEditingRow ?? null);
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>(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
- movingColumn: MRT_Column<TData>,
65
- receivingColumn: MRT_Column<TData>,
65
+ draggedColumn: MRT_Column<TData>,
66
+ targetColumn: MRT_Column<TData>,
66
67
  columnOrder: ColumnOrderState,
67
68
  ): ColumnOrderState => {
68
- if (movingColumn.getCanPin()) {
69
- movingColumn.pin(receivingColumn.getIsPinned());
69
+ if (draggedColumn.getCanPin()) {
70
+ draggedColumn.pin(targetColumn.getIsPinned());
70
71
  }
71
72
  columnOrder.splice(
72
- columnOrder.indexOf(receivingColumn.id),
73
+ columnOrder.indexOf(targetColumn.id),
73
74
  0,
74
- columnOrder.splice(columnOrder.indexOf(movingColumn.id), 1)[0],
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 string[];
96
+ ].filter(Boolean) as MRT_DisplayColumnIds[];
95
97
 
96
98
  export const getTrailingDisplayColumnIds = <
97
99
  TData extends Record<string, any> = {},