material-react-table 0.23.5 → 0.24.0
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/MaterialReactTable.d.ts +46 -15
- 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 +287 -167
- 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 +288 -168
- package/dist/material-react-table.esm.js.map +1 -1
- package/dist/utils.d.ts +1 -1
- package/package.json +1 -1
- package/src/MaterialReactTable.tsx +69 -14
- package/src/body/MRT_TableBodyCell.tsx +17 -3
- 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 +14 -31
- package/src/head/MRT_TableHeadCellGrabHandle.tsx +77 -0
- package/src/localization.ts +2 -0
- package/src/menus/MRT_ColumnActionMenu.tsx +1 -1
- package/src/menus/MRT_ShowHideColumnsMenuItems.tsx +3 -3
- package/src/table/MRT_TableRoot.tsx +25 -6
- package/src/utils.ts +9 -8
@@ -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
|
) : (
|
@@ -53,14 +53,18 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
|
|
53
53
|
const [columnOrder, setColumnOrder] = useState(
|
54
54
|
initialState.columnOrder ?? [],
|
55
55
|
);
|
56
|
+
const [currentDraggingColumn, setCurrentDraggingColumn] =
|
57
|
+
useState<MRT_Column<TData> | null>(null);
|
58
|
+
const [currentDraggingRow, setCurrentDraggingRow] =
|
59
|
+
useState<MRT_Row<TData> | null>(null);
|
56
60
|
const [currentEditingCell, setCurrentEditingCell] =
|
57
61
|
useState<MRT_Cell<TData> | null>(initialState?.currentEditingCell ?? null);
|
58
62
|
const [currentEditingRow, setCurrentEditingRow] =
|
59
63
|
useState<MRT_Row<TData> | null>(initialState?.currentEditingRow ?? null);
|
60
|
-
const [currentDraggingColumn, setCurrentDraggingColumn] =
|
61
|
-
useState<MRT_Column<TData> | null>(null);
|
62
64
|
const [currentHoveredColumn, setCurrentHoveredColumn] =
|
63
65
|
useState<MRT_Column<TData> | null>(null);
|
66
|
+
const [currentHoveredRow, setCurrentHoveredRow] =
|
67
|
+
useState<MRT_Row<TData> | null>(null);
|
64
68
|
const [density, setDensity] = useState(
|
65
69
|
initialState?.density ?? 'comfortable',
|
66
70
|
);
|
@@ -108,6 +112,14 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
|
|
108
112
|
() =>
|
109
113
|
(
|
110
114
|
[
|
115
|
+
columnOrder.includes('mrt-row-drag') && {
|
116
|
+
columnDefType: 'display',
|
117
|
+
header: props.localization?.move,
|
118
|
+
id: 'mrt-row-drag',
|
119
|
+
muiTableBodyCellProps: props.muiTableBodyCellProps,
|
120
|
+
muiTableHeadCellProps: props.muiTableHeadCellProps,
|
121
|
+
size: 60,
|
122
|
+
},
|
111
123
|
columnOrder.includes('mrt-row-actions') && {
|
112
124
|
Cell: ({ cell }) => (
|
113
125
|
<MRT_ToggleRowActionMenuButton
|
@@ -122,7 +134,7 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
|
|
122
134
|
muiTableHeadCellProps: props.muiTableHeadCellProps,
|
123
135
|
size: 70,
|
124
136
|
},
|
125
|
-
columnOrder.includes('mrt-expand') && {
|
137
|
+
columnOrder.includes('mrt-row-expand') && {
|
126
138
|
Cell: ({ cell }) => (
|
127
139
|
<MRT_ExpandButton row={cell.row as any} table={table} />
|
128
140
|
),
|
@@ -132,12 +144,12 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
|
|
132
144
|
) : null,
|
133
145
|
columnDefType: 'display',
|
134
146
|
header: props.localization?.expand,
|
135
|
-
id: 'mrt-expand',
|
147
|
+
id: 'mrt-row-expand',
|
136
148
|
muiTableBodyCellProps: props.muiTableBodyCellProps,
|
137
149
|
muiTableHeadCellProps: props.muiTableHeadCellProps,
|
138
150
|
size: 60,
|
139
151
|
},
|
140
|
-
columnOrder.includes('mrt-select') && {
|
152
|
+
columnOrder.includes('mrt-row-select') && {
|
141
153
|
Cell: ({ cell }) => (
|
142
154
|
<MRT_SelectCheckbox row={cell.row as any} table={table} />
|
143
155
|
),
|
@@ -147,7 +159,7 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
|
|
147
159
|
) : null,
|
148
160
|
columnDefType: 'display',
|
149
161
|
header: props.localization?.select,
|
150
|
-
id: 'mrt-select',
|
162
|
+
id: 'mrt-row-select',
|
151
163
|
muiTableBodyCellProps: props.muiTableBodyCellProps,
|
152
164
|
muiTableHeadCellProps: props.muiTableHeadCellProps,
|
153
165
|
size: 60,
|
@@ -173,6 +185,7 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
|
|
173
185
|
props.enableGrouping,
|
174
186
|
props.enableRowActions,
|
175
187
|
props.enableRowNumbers,
|
188
|
+
props.enableRowOrdering,
|
176
189
|
props.enableRowSelection,
|
177
190
|
props.enableSelectAll,
|
178
191
|
props.localization,
|
@@ -229,11 +242,13 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
|
|
229
242
|
state: {
|
230
243
|
columnOrder,
|
231
244
|
currentDraggingColumn,
|
245
|
+
currentDraggingRow,
|
232
246
|
currentEditingCell,
|
233
247
|
currentEditingRow,
|
234
248
|
currentFilterFns,
|
235
249
|
currentGlobalFilterFn,
|
236
250
|
currentHoveredColumn,
|
251
|
+
currentHoveredRow,
|
237
252
|
density,
|
238
253
|
isFullScreen,
|
239
254
|
showAlertBanner,
|
@@ -245,6 +260,8 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
|
|
245
260
|
}),
|
246
261
|
setCurrentDraggingColumn:
|
247
262
|
props.onCurrentDraggingColumnChange ?? setCurrentDraggingColumn,
|
263
|
+
setCurrentDraggingRow:
|
264
|
+
props.onCurrentDraggingRowChange ?? setCurrentDraggingRow,
|
248
265
|
setCurrentEditingCell:
|
249
266
|
props.onCurrentEditingCellChange ?? setCurrentEditingCell,
|
250
267
|
setCurrentEditingRow:
|
@@ -254,6 +271,8 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
|
|
254
271
|
props.onCurrentGlobalFilterFnChange ?? setCurrentGlobalFilterFn,
|
255
272
|
setCurrentHoveredColumn:
|
256
273
|
props.onCurrentHoveredColumnChange ?? setCurrentHoveredColumn,
|
274
|
+
setCurrentHoveredRow:
|
275
|
+
props.onCurrentHoveredRowChange ?? setCurrentHoveredRow,
|
257
276
|
setDensity: props.onDensityChange ?? setDensity,
|
258
277
|
setIsFullScreen: props.onIsFullScreenChange ?? setIsFullScreen,
|
259
278
|
setShowAlertBanner: props.onShowAlertBannerChange ?? setShowAlertBanner,
|
package/src/utils.ts
CHANGED
@@ -61,17 +61,17 @@ export const prepareColumns = <TData extends Record<string, any> = {}>(
|
|
61
61
|
}) as MRT_DefinedColumnDef<TData>[];
|
62
62
|
|
63
63
|
export const reorderColumn = <TData extends Record<string, any> = {}>(
|
64
|
-
|
65
|
-
|
64
|
+
draggedColumn: MRT_Column<TData>,
|
65
|
+
targetColumn: MRT_Column<TData>,
|
66
66
|
columnOrder: ColumnOrderState,
|
67
67
|
): ColumnOrderState => {
|
68
|
-
if (
|
69
|
-
|
68
|
+
if (draggedColumn.getCanPin()) {
|
69
|
+
draggedColumn.pin(targetColumn.getIsPinned());
|
70
70
|
}
|
71
71
|
columnOrder.splice(
|
72
|
-
columnOrder.indexOf(
|
72
|
+
columnOrder.indexOf(targetColumn.id),
|
73
73
|
0,
|
74
|
-
columnOrder.splice(columnOrder.indexOf(
|
74
|
+
columnOrder.splice(columnOrder.indexOf(draggedColumn.id), 1)[0],
|
75
75
|
);
|
76
76
|
return [...columnOrder];
|
77
77
|
};
|
@@ -82,14 +82,15 @@ export const getLeadingDisplayColumnIds = <
|
|
82
82
|
props: MaterialReactTableProps<TData>,
|
83
83
|
) =>
|
84
84
|
[
|
85
|
+
(props.enableRowDragging || props.enableRowOrdering) && 'mrt-row-drag',
|
85
86
|
((props.positionActionsColumn === 'first' && props.enableRowActions) ||
|
86
87
|
(props.enableEditing && props.editingMode === 'row')) &&
|
87
88
|
'mrt-row-actions',
|
88
89
|
(props.enableExpanding ||
|
89
90
|
props.enableGrouping ||
|
90
91
|
props.renderDetailPanel) &&
|
91
|
-
'mrt-expand',
|
92
|
-
props.enableRowSelection && 'mrt-select',
|
92
|
+
'mrt-row-expand',
|
93
|
+
props.enableRowSelection && 'mrt-row-select',
|
93
94
|
props.enableRowNumbers && 'mrt-row-numbers',
|
94
95
|
].filter(Boolean) as string[];
|
95
96
|
|