material-react-table 2.9.2 → 2.10.0
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/index.d.ts +162 -111
- package/dist/index.esm.js +694 -606
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +708 -618
- package/dist/index.js.map +1 -1
- package/locales/ar/index.esm.js +1 -0
- package/locales/ar/index.js +1 -0
- package/locales/az/index.esm.js +1 -0
- package/locales/az/index.js +1 -0
- package/locales/bg/index.esm.js +1 -0
- package/locales/bg/index.js +1 -0
- package/locales/cs/index.esm.js +1 -0
- package/locales/cs/index.js +1 -0
- package/locales/da/index.esm.js +1 -0
- package/locales/da/index.js +1 -0
- package/locales/de/index.esm.js +1 -0
- package/locales/de/index.js +1 -0
- package/locales/en/index.esm.js +1 -0
- package/locales/en/index.js +1 -0
- package/locales/es/index.esm.js +1 -0
- package/locales/es/index.js +1 -0
- package/locales/et/index.esm.js +1 -0
- package/locales/et/index.js +1 -0
- package/locales/fa/index.esm.js +1 -0
- package/locales/fa/index.js +1 -0
- package/locales/fi/index.esm.js +1 -0
- package/locales/fi/index.js +1 -0
- package/locales/fr/index.esm.js +1 -0
- package/locales/fr/index.js +1 -0
- package/locales/he/index.esm.js +1 -0
- package/locales/he/index.js +1 -0
- package/locales/hu/index.esm.js +1 -0
- package/locales/hu/index.js +1 -0
- package/locales/hy/index.esm.js +1 -0
- package/locales/hy/index.js +1 -0
- package/locales/id/index.esm.js +1 -0
- package/locales/id/index.js +1 -0
- package/locales/it/index.esm.js +1 -0
- package/locales/it/index.js +1 -0
- package/locales/ja/index.esm.js +1 -0
- package/locales/ja/index.js +1 -0
- package/locales/ko/index.esm.js +1 -0
- package/locales/ko/index.js +1 -0
- package/locales/nl/index.esm.js +1 -0
- package/locales/nl/index.js +1 -0
- package/locales/no/index.esm.js +1 -0
- package/locales/no/index.js +1 -0
- package/locales/np/index.esm.js +1 -0
- package/locales/np/index.js +1 -0
- package/locales/pl/index.esm.js +1 -0
- package/locales/pl/index.js +1 -0
- package/locales/pt/index.esm.js +1 -0
- package/locales/pt/index.js +1 -0
- package/locales/pt-BR/index.esm.js +1 -0
- package/locales/pt-BR/index.js +1 -0
- package/locales/ro/index.esm.js +1 -0
- package/locales/ro/index.js +1 -0
- package/locales/ru/index.esm.js +1 -0
- package/locales/ru/index.js +1 -0
- package/locales/sk/index.esm.js +1 -0
- package/locales/sk/index.js +1 -0
- package/locales/sr-Cyrl-RS/index.esm.js +1 -0
- package/locales/sr-Cyrl-RS/index.js +1 -0
- package/locales/sr-Latn-RS/index.esm.js +1 -0
- package/locales/sr-Latn-RS/index.js +1 -0
- package/locales/sv/index.esm.js +1 -0
- package/locales/sv/index.js +1 -0
- package/locales/tr/index.esm.js +1 -0
- package/locales/tr/index.js +1 -0
- package/locales/uk/index.esm.js +1 -0
- package/locales/uk/index.js +1 -0
- package/locales/vi/index.esm.js +1 -0
- package/locales/vi/index.js +1 -0
- package/locales/zh-Hans/index.esm.js +1 -0
- package/locales/zh-Hans/index.js +1 -0
- package/locales/zh-Hant/index.esm.js +1 -0
- package/locales/zh-Hant/index.js +1 -0
- package/package.json +4 -4
- package/src/components/body/MRT_TableBodyCell.tsx +41 -32
- package/src/components/body/MRT_TableBodyRow.tsx +0 -4
- package/src/components/buttons/MRT_CopyButton.tsx +1 -0
- package/src/components/head/MRT_TableHeadCell.tsx +6 -0
- package/src/components/head/MRT_TableHeadCellFilterLabel.tsx +1 -0
- package/src/components/head/MRT_TableHeadRow.tsx +1 -0
- package/src/components/menus/MRT_ActionMenuItem.tsx +60 -0
- package/src/components/menus/MRT_CellActionMenu.tsx +108 -0
- package/src/components/menus/MRT_ColumnActionMenu.tsx +89 -170
- package/src/components/menus/MRT_FilterOptionMenu.tsx +6 -14
- package/src/components/menus/MRT_RowActionMenu.tsx +7 -15
- package/src/components/menus/MRT_ShowHideColumnsMenu.tsx +3 -1
- package/src/components/table/MRT_TableContainer.tsx +4 -0
- package/src/hooks/display-columns/getMRT_RowActionsColumnDef.tsx +1 -8
- package/src/hooks/display-columns/getMRT_RowDragColumnDef.tsx +1 -8
- package/src/hooks/display-columns/getMRT_RowExpandColumnDef.tsx +1 -8
- package/src/hooks/display-columns/getMRT_RowNumbersColumnDef.tsx +1 -8
- package/src/hooks/display-columns/getMRT_RowPinningColumnDef.tsx +1 -8
- package/src/hooks/display-columns/getMRT_RowSelectColumnDef.tsx +1 -8
- package/src/hooks/display-columns/getMRT_RowSpacerColumnDef.tsx +1 -8
- package/src/hooks/useMRT_Effects.ts +10 -0
- package/src/hooks/useMRT_TableInstance.ts +112 -59
- package/src/icons.ts +2 -0
- package/src/index.ts +2 -0
- package/src/locales/ar.ts +1 -0
- package/src/locales/az.ts +1 -0
- package/src/locales/bg.ts +1 -0
- package/src/locales/cs.ts +1 -0
- package/src/locales/da.ts +1 -0
- package/src/locales/de.ts +1 -0
- package/src/locales/en.ts +1 -0
- package/src/locales/es.ts +1 -0
- package/src/locales/et.ts +1 -0
- package/src/locales/fa.ts +1 -0
- package/src/locales/fi.ts +1 -0
- package/src/locales/fr.ts +1 -0
- package/src/locales/he.ts +1 -0
- package/src/locales/hu.ts +1 -0
- package/src/locales/hy.ts +1 -0
- package/src/locales/id.ts +1 -0
- package/src/locales/it.ts +1 -0
- package/src/locales/ja.ts +1 -0
- package/src/locales/ko.ts +1 -0
- package/src/locales/nl.ts +1 -0
- package/src/locales/no.ts +1 -0
- package/src/locales/np.ts +1 -0
- package/src/locales/pl.ts +1 -0
- package/src/locales/pt-BR.ts +1 -0
- package/src/locales/pt.ts +1 -0
- package/src/locales/ro.ts +1 -0
- package/src/locales/ru.ts +1 -0
- package/src/locales/sk.ts +1 -0
- package/src/locales/sr-Cyrl-RS.ts +1 -0
- package/src/locales/sr-Latn-RS.ts +1 -0
- package/src/locales/sv.ts +1 -0
- package/src/locales/tr.ts +1 -0
- package/src/locales/uk.ts +1 -0
- package/src/locales/vi.ts +1 -0
- package/src/locales/zh-Hans.ts +1 -0
- package/src/locales/zh-Hant.ts +1 -0
- package/src/types.ts +41 -9
- package/src/utils/cell.utils.ts +50 -0
- package/src/utils/displayColumn.utils.ts +38 -20
- package/src/hooks/display-columns/getMRT_DisplayColumns.tsx +0 -26
- package/src/locales/am.ts +0 -94
@@ -1,12 +1,8 @@
|
|
1
|
-
import { useState } from 'react';
|
2
|
-
import * as React from 'react';
|
3
|
-
import Box from '@mui/material/Box';
|
4
|
-
import IconButton from '@mui/material/IconButton';
|
5
|
-
import ListItemIcon from '@mui/material/ListItemIcon';
|
1
|
+
import { type MouseEvent, useState } from 'react';
|
6
2
|
import Menu, { type MenuProps } from '@mui/material/Menu';
|
7
|
-
import MenuItem from '@mui/material/MenuItem';
|
8
3
|
import { useTheme } from '@mui/material/styles';
|
9
4
|
import { MRT_FilterOptionMenu } from './MRT_FilterOptionMenu';
|
5
|
+
import { MRT_ActionMenuItem } from './MRT_ActionMenuItem';
|
10
6
|
import {
|
11
7
|
type MRT_Header,
|
12
8
|
type MRT_RowData,
|
@@ -14,18 +10,6 @@ import {
|
|
14
10
|
} from '../../types';
|
15
11
|
import { getMRTTheme } from '../../utils/style.utils';
|
16
12
|
|
17
|
-
export const commonMenuItemStyles = {
|
18
|
-
alignItems: 'center',
|
19
|
-
justifyContent: 'space-between',
|
20
|
-
my: 0,
|
21
|
-
py: '6px',
|
22
|
-
};
|
23
|
-
|
24
|
-
export const commonListItemStyles = {
|
25
|
-
alignItems: 'center',
|
26
|
-
display: 'flex',
|
27
|
-
};
|
28
|
-
|
29
13
|
interface Props<TData extends MRT_RowData> extends Partial<MenuProps> {
|
30
14
|
anchorEl: HTMLElement | null;
|
31
15
|
header: MRT_Header<TData>;
|
@@ -42,6 +26,7 @@ export const MRT_ColumnActionMenu = <TData extends MRT_RowData>({
|
|
42
26
|
}: Props<TData>) => {
|
43
27
|
const {
|
44
28
|
getState,
|
29
|
+
getAllLeafColumns,
|
45
30
|
options: {
|
46
31
|
columnFilterDisplayMode,
|
47
32
|
columnFilterModeOptions,
|
@@ -54,7 +39,6 @@ export const MRT_ColumnActionMenu = <TData extends MRT_RowData>({
|
|
54
39
|
enableSorting,
|
55
40
|
enableSortingRemoval,
|
56
41
|
icons: {
|
57
|
-
ArrowRightIcon,
|
58
42
|
ClearAllIcon,
|
59
43
|
DynamicFeedIcon,
|
60
44
|
FilterListIcon,
|
@@ -73,7 +57,6 @@ export const MRT_ColumnActionMenu = <TData extends MRT_RowData>({
|
|
73
57
|
setColumnOrder,
|
74
58
|
setColumnSizingInfo,
|
75
59
|
setShowColumnFilters,
|
76
|
-
toggleAllColumnsVisible,
|
77
60
|
} = table;
|
78
61
|
const { column } = header;
|
79
62
|
const { columnDef } = column;
|
@@ -139,11 +122,13 @@ export const MRT_ColumnActionMenu = <TData extends MRT_RowData>({
|
|
139
122
|
};
|
140
123
|
|
141
124
|
const handleShowAllColumns = () => {
|
142
|
-
|
125
|
+
getAllLeafColumns()
|
126
|
+
.filter((col) => col.columnDef.enableHiding !== false)
|
127
|
+
.forEach((col) => col.toggleVisibility(true));
|
143
128
|
setAnchorEl(null);
|
144
129
|
};
|
145
130
|
|
146
|
-
const handleOpenFilterModeMenu = (event:
|
131
|
+
const handleOpenFilterModeMenu = (event: MouseEvent<HTMLElement>) => {
|
147
132
|
event.stopPropagation();
|
148
133
|
setFilterMenuAnchorEl(event.currentTarget);
|
149
134
|
};
|
@@ -164,106 +149,75 @@ export const MRT_ColumnActionMenu = <TData extends MRT_RowData>({
|
|
164
149
|
...(enableSorting && column.getCanSort()
|
165
150
|
? [
|
166
151
|
enableSortingRemoval !== false && (
|
167
|
-
<
|
168
|
-
|
152
|
+
<MRT_ActionMenuItem
|
153
|
+
icon={<ClearAllIcon />}
|
169
154
|
key={0}
|
155
|
+
label={localization.clearSort}
|
170
156
|
onClick={handleClearSort}
|
171
|
-
|
172
|
-
|
173
|
-
<Box sx={commonListItemStyles}>
|
174
|
-
<ListItemIcon>
|
175
|
-
<ClearAllIcon />
|
176
|
-
</ListItemIcon>
|
177
|
-
{localization.clearSort}
|
178
|
-
</Box>
|
179
|
-
</MenuItem>
|
157
|
+
table={table}
|
158
|
+
/>
|
180
159
|
),
|
181
|
-
<
|
160
|
+
<MRT_ActionMenuItem
|
182
161
|
disabled={column.getIsSorted() === 'asc'}
|
162
|
+
icon={
|
163
|
+
<SortIcon style={{ transform: 'rotate(180deg) scaleX(-1)' }} />
|
164
|
+
}
|
183
165
|
key={1}
|
166
|
+
label={localization.sortByColumnAsc?.replace(
|
167
|
+
'{column}',
|
168
|
+
String(columnDef.header),
|
169
|
+
)}
|
184
170
|
onClick={handleSortAsc}
|
185
|
-
|
186
|
-
|
187
|
-
|
188
|
-
<ListItemIcon>
|
189
|
-
<SortIcon style={{ transform: 'rotate(180deg) scaleX(-1)' }} />
|
190
|
-
</ListItemIcon>
|
191
|
-
{localization.sortByColumnAsc?.replace(
|
192
|
-
'{column}',
|
193
|
-
String(columnDef.header),
|
194
|
-
)}
|
195
|
-
</Box>
|
196
|
-
</MenuItem>,
|
197
|
-
<MenuItem
|
171
|
+
table={table}
|
172
|
+
/>,
|
173
|
+
<MRT_ActionMenuItem
|
198
174
|
disabled={column.getIsSorted() === 'desc'}
|
199
175
|
divider={enableColumnFilters || enableGrouping || enableHiding}
|
176
|
+
icon={<SortIcon />}
|
200
177
|
key={2}
|
178
|
+
label={localization.sortByColumnDesc?.replace(
|
179
|
+
'{column}',
|
180
|
+
String(columnDef.header),
|
181
|
+
)}
|
201
182
|
onClick={handleSortDesc}
|
202
|
-
|
203
|
-
|
204
|
-
<Box sx={commonListItemStyles}>
|
205
|
-
<ListItemIcon>
|
206
|
-
<SortIcon />
|
207
|
-
</ListItemIcon>
|
208
|
-
{localization.sortByColumnDesc?.replace(
|
209
|
-
'{column}',
|
210
|
-
String(columnDef.header),
|
211
|
-
)}
|
212
|
-
</Box>
|
213
|
-
</MenuItem>,
|
183
|
+
table={table}
|
184
|
+
/>,
|
214
185
|
]
|
215
186
|
: []),
|
216
187
|
...(enableColumnFilters && column.getCanFilter()
|
217
188
|
? [
|
218
|
-
<
|
189
|
+
<MRT_ActionMenuItem
|
219
190
|
disabled={
|
220
191
|
!columnFilterValue ||
|
221
192
|
(Array.isArray(columnFilterValue) &&
|
222
193
|
!columnFilterValue.filter((value) => value).length)
|
223
194
|
}
|
195
|
+
icon={<FilterListOffIcon />}
|
224
196
|
key={3}
|
197
|
+
label={localization.clearFilter}
|
225
198
|
onClick={handleClearFilter}
|
226
|
-
|
227
|
-
|
228
|
-
<Box sx={commonListItemStyles}>
|
229
|
-
<ListItemIcon>
|
230
|
-
<FilterListOffIcon />
|
231
|
-
</ListItemIcon>
|
232
|
-
{localization.clearFilter}
|
233
|
-
</Box>
|
234
|
-
</MenuItem>,
|
199
|
+
table={table}
|
200
|
+
/>,
|
235
201
|
columnFilterDisplayMode === 'subheader' && (
|
236
|
-
<
|
202
|
+
<MRT_ActionMenuItem
|
237
203
|
disabled={showColumnFilters && !enableColumnFilterModes}
|
238
204
|
divider={enableGrouping || enableHiding}
|
205
|
+
icon={<FilterListIcon />}
|
239
206
|
key={4}
|
207
|
+
label={localization.filterByColumn?.replace(
|
208
|
+
'{column}',
|
209
|
+
String(columnDef.header),
|
210
|
+
)}
|
240
211
|
onClick={
|
241
212
|
showColumnFilters
|
242
213
|
? handleOpenFilterModeMenu
|
243
214
|
: handleFilterByColumn
|
244
215
|
}
|
245
|
-
|
246
|
-
|
247
|
-
|
248
|
-
|
249
|
-
|
250
|
-
</ListItemIcon>
|
251
|
-
{localization.filterByColumn?.replace(
|
252
|
-
'{column}',
|
253
|
-
String(columnDef.header),
|
254
|
-
)}
|
255
|
-
</Box>
|
256
|
-
{showFilterModeSubMenu && (
|
257
|
-
<IconButton
|
258
|
-
onClick={handleOpenFilterModeMenu}
|
259
|
-
onMouseEnter={handleOpenFilterModeMenu}
|
260
|
-
size="small"
|
261
|
-
sx={{ p: 0 }}
|
262
|
-
>
|
263
|
-
<ArrowRightIcon />
|
264
|
-
</IconButton>
|
265
|
-
)}
|
266
|
-
</MenuItem>
|
216
|
+
onOpenSubMenu={
|
217
|
+
showFilterModeSubMenu ? handleOpenFilterModeMenu : undefined
|
218
|
+
}
|
219
|
+
table={table}
|
220
|
+
/>
|
267
221
|
),
|
268
222
|
showFilterModeSubMenu && (
|
269
223
|
<MRT_FilterOptionMenu
|
@@ -279,121 +233,86 @@ export const MRT_ColumnActionMenu = <TData extends MRT_RowData>({
|
|
279
233
|
: []),
|
280
234
|
...(enableGrouping && column.getCanGroup()
|
281
235
|
? [
|
282
|
-
<
|
236
|
+
<MRT_ActionMenuItem
|
283
237
|
divider={enableColumnPinning}
|
238
|
+
icon={<DynamicFeedIcon />}
|
284
239
|
key={6}
|
240
|
+
label={localization[
|
241
|
+
column.getIsGrouped() ? 'ungroupByColumn' : 'groupByColumn'
|
242
|
+
]?.replace('{column}', String(columnDef.header))}
|
285
243
|
onClick={handleGroupByColumn}
|
286
|
-
|
287
|
-
|
288
|
-
<Box sx={commonListItemStyles}>
|
289
|
-
<ListItemIcon>
|
290
|
-
<DynamicFeedIcon />
|
291
|
-
</ListItemIcon>
|
292
|
-
{localization[
|
293
|
-
column.getIsGrouped() ? 'ungroupByColumn' : 'groupByColumn'
|
294
|
-
]?.replace('{column}', String(columnDef.header))}
|
295
|
-
</Box>
|
296
|
-
</MenuItem>,
|
244
|
+
table={table}
|
245
|
+
/>,
|
297
246
|
]
|
298
247
|
: []),
|
299
248
|
...(enableColumnPinning && column.getCanPin()
|
300
249
|
? [
|
301
|
-
<
|
250
|
+
<MRT_ActionMenuItem
|
302
251
|
disabled={column.getIsPinned() === 'left' || !column.getCanPin()}
|
252
|
+
icon={<PushPinIcon style={{ transform: 'rotate(90deg)' }} />}
|
303
253
|
key={7}
|
254
|
+
label={localization.pinToLeft}
|
304
255
|
onClick={() => handlePinColumn('left')}
|
305
|
-
|
306
|
-
|
307
|
-
|
308
|
-
<ListItemIcon>
|
309
|
-
<PushPinIcon style={{ transform: 'rotate(90deg)' }} />
|
310
|
-
</ListItemIcon>
|
311
|
-
{localization.pinToLeft}
|
312
|
-
</Box>
|
313
|
-
</MenuItem>,
|
314
|
-
<MenuItem
|
256
|
+
table={table}
|
257
|
+
/>,
|
258
|
+
<MRT_ActionMenuItem
|
315
259
|
disabled={column.getIsPinned() === 'right' || !column.getCanPin()}
|
260
|
+
icon={<PushPinIcon style={{ transform: 'rotate(-90deg)' }} />}
|
316
261
|
key={8}
|
262
|
+
label={localization.pinToRight}
|
317
263
|
onClick={() => handlePinColumn('right')}
|
318
|
-
|
319
|
-
|
320
|
-
|
321
|
-
<ListItemIcon>
|
322
|
-
<PushPinIcon style={{ transform: 'rotate(-90deg)' }} />
|
323
|
-
</ListItemIcon>
|
324
|
-
{localization.pinToRight}
|
325
|
-
</Box>
|
326
|
-
</MenuItem>,
|
327
|
-
<MenuItem
|
264
|
+
table={table}
|
265
|
+
/>,
|
266
|
+
<MRT_ActionMenuItem
|
328
267
|
disabled={!column.getIsPinned()}
|
329
268
|
divider={enableHiding}
|
269
|
+
icon={<PushPinIcon />}
|
330
270
|
key={9}
|
271
|
+
label={localization.unpin}
|
331
272
|
onClick={() => handlePinColumn(false)}
|
332
|
-
|
333
|
-
|
334
|
-
<Box sx={commonListItemStyles}>
|
335
|
-
<ListItemIcon>
|
336
|
-
<PushPinIcon />
|
337
|
-
</ListItemIcon>
|
338
|
-
{localization.unpin}
|
339
|
-
</Box>
|
340
|
-
</MenuItem>,
|
273
|
+
table={table}
|
274
|
+
/>,
|
341
275
|
]
|
342
276
|
: []),
|
343
277
|
...(enableColumnResizing && column.getCanResize()
|
344
278
|
? [
|
345
|
-
<
|
279
|
+
<MRT_ActionMenuItem
|
346
280
|
disabled={!columnSizing[column.id]}
|
281
|
+
icon={<RestartAltIcon />}
|
347
282
|
key={10}
|
283
|
+
label={localization.resetColumnSize}
|
348
284
|
onClick={handleResetColumnSize}
|
349
|
-
|
350
|
-
|
351
|
-
<Box sx={commonListItemStyles}>
|
352
|
-
<ListItemIcon>
|
353
|
-
<RestartAltIcon />
|
354
|
-
</ListItemIcon>
|
355
|
-
{localization.resetColumnSize}
|
356
|
-
</Box>
|
357
|
-
</MenuItem>,
|
285
|
+
table={table}
|
286
|
+
/>,
|
358
287
|
]
|
359
288
|
: []),
|
360
289
|
...(enableHiding
|
361
290
|
? [
|
362
|
-
<
|
291
|
+
<MRT_ActionMenuItem
|
363
292
|
disabled={!column.getCanHide()}
|
293
|
+
icon={<VisibilityOffIcon />}
|
364
294
|
key={11}
|
295
|
+
label={localization.hideColumn?.replace(
|
296
|
+
'{column}',
|
297
|
+
String(columnDef.header),
|
298
|
+
)}
|
365
299
|
onClick={handleHideColumn}
|
366
|
-
|
367
|
-
|
368
|
-
|
369
|
-
<ListItemIcon>
|
370
|
-
<VisibilityOffIcon />
|
371
|
-
</ListItemIcon>
|
372
|
-
{localization.hideColumn?.replace(
|
373
|
-
'{column}',
|
374
|
-
String(columnDef.header),
|
375
|
-
)}
|
376
|
-
</Box>
|
377
|
-
</MenuItem>,
|
378
|
-
<MenuItem
|
300
|
+
table={table}
|
301
|
+
/>,
|
302
|
+
<MRT_ActionMenuItem
|
379
303
|
disabled={
|
380
304
|
!Object.values(columnVisibility).filter((visible) => !visible)
|
381
305
|
.length
|
382
306
|
}
|
307
|
+
icon={<ViewColumnIcon />}
|
383
308
|
key={12}
|
309
|
+
label={localization.showAllColumns?.replace(
|
310
|
+
'{column}',
|
311
|
+
String(columnDef.header),
|
312
|
+
)}
|
384
313
|
onClick={handleShowAllColumns}
|
385
|
-
|
386
|
-
|
387
|
-
<Box sx={commonListItemStyles}>
|
388
|
-
<ListItemIcon>
|
389
|
-
<ViewColumnIcon />
|
390
|
-
</ListItemIcon>
|
391
|
-
{localization.showAllColumns?.replace(
|
392
|
-
'{column}',
|
393
|
-
String(columnDef.header),
|
394
|
-
)}
|
395
|
-
</Box>
|
396
|
-
</MenuItem>,
|
314
|
+
table={table}
|
315
|
+
/>,
|
397
316
|
]
|
398
317
|
: []),
|
399
318
|
].filter(Boolean);
|
@@ -1,8 +1,7 @@
|
|
1
1
|
import { useMemo } from 'react';
|
2
|
-
import Box from '@mui/material/Box';
|
3
2
|
import Menu, { type MenuProps } from '@mui/material/Menu';
|
4
|
-
import MenuItem from '@mui/material/MenuItem';
|
5
3
|
import { useTheme } from '@mui/material/styles';
|
4
|
+
import { MRT_ActionMenuItem } from './MRT_ActionMenuItem';
|
6
5
|
import {
|
7
6
|
type MRT_FilterOption,
|
8
7
|
type MRT_Header,
|
@@ -277,23 +276,16 @@ export const MRT_FilterOptionMenu = <TData extends MRT_RowData>({
|
|
277
276
|
})) ??
|
278
277
|
internalFilterOptions.map(
|
279
278
|
({ divider, label, option, symbol }, index) => (
|
280
|
-
<
|
279
|
+
<MRT_ActionMenuItem
|
281
280
|
divider={divider}
|
281
|
+
icon={symbol}
|
282
282
|
key={index}
|
283
|
+
label={label}
|
283
284
|
onClick={() => handleSelectFilterMode(option as MRT_FilterOption)}
|
284
285
|
selected={option === filterOption}
|
285
|
-
|
286
|
-
alignItems: 'center',
|
287
|
-
display: 'flex',
|
288
|
-
gap: '2ch',
|
289
|
-
my: 0,
|
290
|
-
py: '6px',
|
291
|
-
}}
|
286
|
+
table={table}
|
292
287
|
value={option}
|
293
|
-
|
294
|
-
<Box sx={{ fontSize: '1.25rem', width: '2ch' }}>{symbol}</Box>
|
295
|
-
{label}
|
296
|
-
</MenuItem>
|
288
|
+
/>
|
297
289
|
),
|
298
290
|
)}
|
299
291
|
</Menu>
|
@@ -1,13 +1,7 @@
|
|
1
1
|
import { type MouseEvent } from 'react';
|
2
|
-
import Box from '@mui/material/Box';
|
3
|
-
import ListItemIcon from '@mui/material/ListItemIcon';
|
4
2
|
import Menu, { type MenuProps } from '@mui/material/Menu';
|
5
|
-
import MenuItem from '@mui/material/MenuItem';
|
6
3
|
import { useTheme } from '@mui/material/styles';
|
7
|
-
import {
|
8
|
-
commonListItemStyles,
|
9
|
-
commonMenuItemStyles,
|
10
|
-
} from './MRT_ColumnActionMenu';
|
4
|
+
import { MRT_ActionMenuItem } from './MRT_ActionMenuItem';
|
11
5
|
import {
|
12
6
|
type MRT_Row,
|
13
7
|
type MRT_RowData,
|
@@ -66,14 +60,12 @@ export const MRT_RowActionMenu = <TData extends MRT_RowData>({
|
|
66
60
|
>
|
67
61
|
{parseFromValuesOrFunc(enableEditing, row) &&
|
68
62
|
['modal', 'row'].includes(editDisplayMode!) && (
|
69
|
-
<
|
70
|
-
<
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
</Box>
|
76
|
-
</MenuItem>
|
63
|
+
<MRT_ActionMenuItem
|
64
|
+
icon={<EditIcon />}
|
65
|
+
label={localization.edit}
|
66
|
+
onClick={handleEdit}
|
67
|
+
table={table}
|
68
|
+
/>
|
77
69
|
)}
|
78
70
|
{renderRowActionMenuItems?.({
|
79
71
|
closeMenu: () => setAnchorEl(null),
|
@@ -115,7 +115,9 @@ export const MRT_ShowHideColumnsMenu = <TData extends MRT_RowData>({
|
|
115
115
|
{enableColumnOrdering && (
|
116
116
|
<Button
|
117
117
|
onClick={() =>
|
118
|
-
table.setColumnOrder(
|
118
|
+
table.setColumnOrder(
|
119
|
+
getDefaultColumnOrderIds(table.options, true),
|
120
|
+
)
|
119
121
|
}
|
120
122
|
>
|
121
123
|
{localization.resetOrder}
|
@@ -6,6 +6,7 @@ import { MRT_Table } from './MRT_Table';
|
|
6
6
|
import { MRT_TableLoadingOverlay } from './MRT_TableLoadingOverlay';
|
7
7
|
import { type MRT_RowData, type MRT_TableInstance } from '../../types';
|
8
8
|
import { parseFromValuesOrFunc } from '../../utils/utils';
|
9
|
+
import { MRT_CellActionMenu } from '../menus/MRT_CellActionMenu';
|
9
10
|
import { MRT_EditRowModal } from '../modals/MRT_EditRowModal';
|
10
11
|
|
11
12
|
const useIsomorphicLayoutEffect =
|
@@ -24,12 +25,14 @@ export const MRT_TableContainer = <TData extends MRT_RowData>({
|
|
24
25
|
options: {
|
25
26
|
createDisplayMode,
|
26
27
|
editDisplayMode,
|
28
|
+
enableCellActions,
|
27
29
|
enableStickyHeader,
|
28
30
|
muiTableContainerProps,
|
29
31
|
},
|
30
32
|
refs: { bottomToolbarRef, tableContainerRef, topToolbarRef },
|
31
33
|
} = table;
|
32
34
|
const {
|
35
|
+
actionCell,
|
33
36
|
creatingRow,
|
34
37
|
editingRow,
|
35
38
|
isFullScreen,
|
@@ -101,6 +104,7 @@ export const MRT_TableContainer = <TData extends MRT_RowData>({
|
|
101
104
|
{(createModalOpen || editModalOpen) && (
|
102
105
|
<MRT_EditRowModal open table={table} />
|
103
106
|
)}
|
107
|
+
{enableCellActions && actionCell && <MRT_CellActionMenu table={table} />}
|
104
108
|
</TableContainer>
|
105
109
|
);
|
106
110
|
};
|
@@ -4,18 +4,11 @@ import {
|
|
4
4
|
type MRT_RowData,
|
5
5
|
type MRT_StatefulTableOptions,
|
6
6
|
} from '../../types';
|
7
|
-
import {
|
8
|
-
defaultDisplayColumnProps,
|
9
|
-
showRowActionsColumn,
|
10
|
-
} from '../../utils/displayColumn.utils';
|
7
|
+
import { defaultDisplayColumnProps } from '../../utils/displayColumn.utils';
|
11
8
|
|
12
9
|
export const getMRT_RowActionsColumnDef = <TData extends MRT_RowData>(
|
13
10
|
tableOptions: MRT_StatefulTableOptions<TData>,
|
14
11
|
): MRT_ColumnDef<TData> | null => {
|
15
|
-
if (!showRowActionsColumn(tableOptions)) {
|
16
|
-
return null;
|
17
|
-
}
|
18
|
-
|
19
12
|
return {
|
20
13
|
Cell: ({ cell, row, staticRowIndex, table }) => (
|
21
14
|
<MRT_ToggleRowActionMenuButton
|
@@ -5,18 +5,11 @@ import {
|
|
5
5
|
type MRT_RowData,
|
6
6
|
type MRT_StatefulTableOptions,
|
7
7
|
} from '../../types';
|
8
|
-
import {
|
9
|
-
defaultDisplayColumnProps,
|
10
|
-
showRowDragColumn,
|
11
|
-
} from '../../utils/displayColumn.utils';
|
8
|
+
import { defaultDisplayColumnProps } from '../../utils/displayColumn.utils';
|
12
9
|
|
13
10
|
export const getMRT_RowDragColumnDef = <TData extends MRT_RowData>(
|
14
11
|
tableOptions: MRT_StatefulTableOptions<TData>,
|
15
12
|
): MRT_ColumnDef<TData> | null => {
|
16
|
-
if (!showRowDragColumn(tableOptions)) {
|
17
|
-
return null;
|
18
|
-
}
|
19
|
-
|
20
13
|
return {
|
21
14
|
Cell: ({ row, rowRef, table }) => (
|
22
15
|
<MRT_TableBodyRowGrabHandle
|
@@ -8,19 +8,12 @@ import {
|
|
8
8
|
type MRT_RowData,
|
9
9
|
type MRT_StatefulTableOptions,
|
10
10
|
} from '../../types';
|
11
|
-
import {
|
12
|
-
defaultDisplayColumnProps,
|
13
|
-
showRowExpandColumn,
|
14
|
-
} from '../../utils/displayColumn.utils';
|
11
|
+
import { defaultDisplayColumnProps } from '../../utils/displayColumn.utils';
|
15
12
|
import { getCommonTooltipProps } from '../../utils/style.utils';
|
16
13
|
|
17
14
|
export const getMRT_RowExpandColumnDef = <TData extends MRT_RowData>(
|
18
15
|
tableOptions: MRT_StatefulTableOptions<TData>,
|
19
16
|
): MRT_ColumnDef<TData> | null => {
|
20
|
-
if (!showRowExpandColumn(tableOptions)) {
|
21
|
-
return null;
|
22
|
-
}
|
23
|
-
|
24
17
|
const {
|
25
18
|
defaultColumn,
|
26
19
|
enableExpandAll,
|
@@ -3,18 +3,11 @@ import {
|
|
3
3
|
type MRT_RowData,
|
4
4
|
type MRT_StatefulTableOptions,
|
5
5
|
} from '../../types';
|
6
|
-
import {
|
7
|
-
defaultDisplayColumnProps,
|
8
|
-
showRowNumbersColumn,
|
9
|
-
} from '../../utils/displayColumn.utils';
|
6
|
+
import { defaultDisplayColumnProps } from '../../utils/displayColumn.utils';
|
10
7
|
|
11
8
|
export const getMRT_RowNumbersColumnDef = <TData extends MRT_RowData>(
|
12
9
|
tableOptions: MRT_StatefulTableOptions<TData>,
|
13
10
|
): MRT_ColumnDef<TData> | null => {
|
14
|
-
if (!showRowNumbersColumn(tableOptions)) {
|
15
|
-
return null;
|
16
|
-
}
|
17
|
-
|
18
11
|
const { localization, rowNumberDisplayMode } = tableOptions;
|
19
12
|
const {
|
20
13
|
pagination: { pageIndex, pageSize },
|
@@ -4,18 +4,11 @@ import {
|
|
4
4
|
type MRT_RowData,
|
5
5
|
type MRT_StatefulTableOptions,
|
6
6
|
} from '../../types';
|
7
|
-
import {
|
8
|
-
defaultDisplayColumnProps,
|
9
|
-
showRowPinningColumn,
|
10
|
-
} from '../../utils/displayColumn.utils';
|
7
|
+
import { defaultDisplayColumnProps } from '../../utils/displayColumn.utils';
|
11
8
|
|
12
9
|
export const getMRT_RowPinningColumnDef = <TData extends MRT_RowData>(
|
13
10
|
tableOptions: MRT_StatefulTableOptions<TData>,
|
14
11
|
): MRT_ColumnDef<TData> | null => {
|
15
|
-
if (!showRowPinningColumn(tableOptions)) {
|
16
|
-
return null;
|
17
|
-
}
|
18
|
-
|
19
12
|
return {
|
20
13
|
Cell: ({ row, table }) => (
|
21
14
|
<MRT_TableBodyRowPinButton row={row} table={table} />
|
@@ -4,18 +4,11 @@ import {
|
|
4
4
|
type MRT_RowData,
|
5
5
|
type MRT_StatefulTableOptions,
|
6
6
|
} from '../../types';
|
7
|
-
import {
|
8
|
-
defaultDisplayColumnProps,
|
9
|
-
showRowSelectionColumn,
|
10
|
-
} from '../../utils/displayColumn.utils';
|
7
|
+
import { defaultDisplayColumnProps } from '../../utils/displayColumn.utils';
|
11
8
|
|
12
9
|
export const getMRT_RowSelectColumnDef = <TData extends MRT_RowData>(
|
13
10
|
tableOptions: MRT_StatefulTableOptions<TData>,
|
14
11
|
): MRT_ColumnDef<TData> | null => {
|
15
|
-
if (!showRowSelectionColumn(tableOptions)) {
|
16
|
-
return null;
|
17
|
-
}
|
18
|
-
|
19
12
|
const { enableMultiRowSelection, enableSelectAll } = tableOptions;
|
20
13
|
|
21
14
|
return {
|
@@ -4,10 +4,7 @@ import {
|
|
4
4
|
type MRT_RowData,
|
5
5
|
type MRT_StatefulTableOptions,
|
6
6
|
} from '../../types';
|
7
|
-
import {
|
8
|
-
defaultDisplayColumnProps,
|
9
|
-
showRowSpacerColumn,
|
10
|
-
} from '../../utils/displayColumn.utils';
|
7
|
+
import { defaultDisplayColumnProps } from '../../utils/displayColumn.utils';
|
11
8
|
|
12
9
|
const blankColProps = {
|
13
10
|
children: null,
|
@@ -21,10 +18,6 @@ const blankColProps = {
|
|
21
18
|
export const getMRT_RowSpacerColumnDef = <TData extends MRT_RowData>(
|
22
19
|
tableOptions: MRT_StatefulTableOptions<TData>,
|
23
20
|
): MRT_ColumnDef<TData> | null => {
|
24
|
-
if (!showRowSpacerColumn(tableOptions)) {
|
25
|
-
return null;
|
26
|
-
}
|
27
|
-
|
28
21
|
return {
|
29
22
|
...defaultDisplayColumnProps({
|
30
23
|
id: 'mrt-row-spacer',
|