material-react-table 1.2.10 → 1.3.0-beta.1
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/cjs/MaterialReactTable.d.ts +7 -3
- package/dist/cjs/column.utils.d.ts +29 -17
- package/dist/cjs/index.js +359 -422
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/table/MRT_TableRoot.d.ts +1 -1
- package/dist/esm/MaterialReactTable.d.ts +7 -3
- package/dist/esm/column.utils.d.ts +29 -17
- package/dist/esm/material-react-table.esm.js +17 -4
- package/dist/esm/material-react-table.esm.js.map +1 -1
- package/dist/esm/table/MRT_TableRoot.d.ts +1 -1
- package/dist/index.d.ts +19 -4
- package/locales/cs.js +0 -2
- package/locales/cs.js.map +1 -1
- package/locales/de.js +0 -2
- package/locales/de.js.map +1 -1
- package/locales/en.js +0 -2
- package/locales/en.js.map +1 -1
- package/locales/es.js +0 -2
- package/locales/es.js.map +1 -1
- package/locales/it.js +0 -2
- package/locales/it.js.map +1 -1
- package/locales/ja.js +0 -2
- package/locales/ja.js.map +1 -1
- package/locales/pl.js +0 -2
- package/locales/pl.js.map +1 -1
- package/locales/pt-BR.js +0 -2
- package/locales/pt-BR.js.map +1 -1
- package/locales/ru.js +0 -2
- package/locales/ru.js.map +1 -1
- package/package.json +15 -14
- package/src/MaterialReactTable.tsx +11 -1
- package/src/body/MRT_TableBodyCell.tsx +2 -1
- package/src/column.utils.ts +30 -1
- package/src/head/MRT_TableHeadCellColumnActionsButton.tsx +1 -1
- package/src/table/MRT_TableRoot.tsx +2 -1
package/dist/cjs/index.js
CHANGED
|
@@ -80,82 +80,6 @@ var DialogContent = require('@mui/material/DialogContent');
|
|
|
80
80
|
var DialogTitle = require('@mui/material/DialogTitle');
|
|
81
81
|
var Stack = require('@mui/material/Stack');
|
|
82
82
|
|
|
83
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
84
|
-
|
|
85
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
86
|
-
var ArrowDownwardIcon__default = /*#__PURE__*/_interopDefaultLegacy(ArrowDownwardIcon);
|
|
87
|
-
var ArrowRightIcon__default = /*#__PURE__*/_interopDefaultLegacy(ArrowRightIcon);
|
|
88
|
-
var CancelIcon__default = /*#__PURE__*/_interopDefaultLegacy(CancelIcon);
|
|
89
|
-
var CheckBoxIcon__default = /*#__PURE__*/_interopDefaultLegacy(CheckBoxIcon);
|
|
90
|
-
var ClearAllIcon__default = /*#__PURE__*/_interopDefaultLegacy(ClearAllIcon);
|
|
91
|
-
var CloseIcon__default = /*#__PURE__*/_interopDefaultLegacy(CloseIcon);
|
|
92
|
-
var DensityLargeIcon__default = /*#__PURE__*/_interopDefaultLegacy(DensityLargeIcon);
|
|
93
|
-
var DensityMediumIcon__default = /*#__PURE__*/_interopDefaultLegacy(DensityMediumIcon);
|
|
94
|
-
var DensitySmallIcon__default = /*#__PURE__*/_interopDefaultLegacy(DensitySmallIcon);
|
|
95
|
-
var DragHandleIcon__default = /*#__PURE__*/_interopDefaultLegacy(DragHandleIcon);
|
|
96
|
-
var DynamicFeedIcon__default = /*#__PURE__*/_interopDefaultLegacy(DynamicFeedIcon);
|
|
97
|
-
var EditIcon__default = /*#__PURE__*/_interopDefaultLegacy(EditIcon);
|
|
98
|
-
var ExpandLessIcon__default = /*#__PURE__*/_interopDefaultLegacy(ExpandLessIcon);
|
|
99
|
-
var ExpandMoreIcon__default = /*#__PURE__*/_interopDefaultLegacy(ExpandMoreIcon);
|
|
100
|
-
var FilterAltIcon__default = /*#__PURE__*/_interopDefaultLegacy(FilterAltIcon);
|
|
101
|
-
var FilterAltOffIcon__default = /*#__PURE__*/_interopDefaultLegacy(FilterAltOffIcon);
|
|
102
|
-
var FilterListIcon__default = /*#__PURE__*/_interopDefaultLegacy(FilterListIcon);
|
|
103
|
-
var FilterListOffIcon__default = /*#__PURE__*/_interopDefaultLegacy(FilterListOffIcon);
|
|
104
|
-
var FullscreenExitIcon__default = /*#__PURE__*/_interopDefaultLegacy(FullscreenExitIcon);
|
|
105
|
-
var FullscreenIcon__default = /*#__PURE__*/_interopDefaultLegacy(FullscreenIcon);
|
|
106
|
-
var KeyboardDoubleArrowDownIcon__default = /*#__PURE__*/_interopDefaultLegacy(KeyboardDoubleArrowDownIcon);
|
|
107
|
-
var MoreHorizIcon__default = /*#__PURE__*/_interopDefaultLegacy(MoreHorizIcon);
|
|
108
|
-
var MoreVertIcon__default = /*#__PURE__*/_interopDefaultLegacy(MoreVertIcon);
|
|
109
|
-
var PushPinIcon__default = /*#__PURE__*/_interopDefaultLegacy(PushPinIcon);
|
|
110
|
-
var RestartAltIcon__default = /*#__PURE__*/_interopDefaultLegacy(RestartAltIcon);
|
|
111
|
-
var SaveIcon__default = /*#__PURE__*/_interopDefaultLegacy(SaveIcon);
|
|
112
|
-
var SearchIcon__default = /*#__PURE__*/_interopDefaultLegacy(SearchIcon);
|
|
113
|
-
var SearchOffIcon__default = /*#__PURE__*/_interopDefaultLegacy(SearchOffIcon);
|
|
114
|
-
var SortIcon__default = /*#__PURE__*/_interopDefaultLegacy(SortIcon);
|
|
115
|
-
var ViewColumnIcon__default = /*#__PURE__*/_interopDefaultLegacy(ViewColumnIcon);
|
|
116
|
-
var VisibilityOffIcon__default = /*#__PURE__*/_interopDefaultLegacy(VisibilityOffIcon);
|
|
117
|
-
var Box__default = /*#__PURE__*/_interopDefaultLegacy(Box);
|
|
118
|
-
var Dialog__default = /*#__PURE__*/_interopDefaultLegacy(Dialog);
|
|
119
|
-
var Grow__default = /*#__PURE__*/_interopDefaultLegacy(Grow);
|
|
120
|
-
var IconButton__default = /*#__PURE__*/_interopDefaultLegacy(IconButton);
|
|
121
|
-
var Tooltip__default = /*#__PURE__*/_interopDefaultLegacy(Tooltip);
|
|
122
|
-
var ListItemIcon__default = /*#__PURE__*/_interopDefaultLegacy(ListItemIcon);
|
|
123
|
-
var Menu__default = /*#__PURE__*/_interopDefaultLegacy(Menu);
|
|
124
|
-
var MenuItem__default = /*#__PURE__*/_interopDefaultLegacy(MenuItem);
|
|
125
|
-
var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
|
|
126
|
-
var Divider__default = /*#__PURE__*/_interopDefaultLegacy(Divider);
|
|
127
|
-
var FormControlLabel__default = /*#__PURE__*/_interopDefaultLegacy(FormControlLabel);
|
|
128
|
-
var Switch__default = /*#__PURE__*/_interopDefaultLegacy(Switch);
|
|
129
|
-
var Typography__default = /*#__PURE__*/_interopDefaultLegacy(Typography);
|
|
130
|
-
var Checkbox__default = /*#__PURE__*/_interopDefaultLegacy(Checkbox);
|
|
131
|
-
var Radio__default = /*#__PURE__*/_interopDefaultLegacy(Radio);
|
|
132
|
-
var Paper__default = /*#__PURE__*/_interopDefaultLegacy(Paper);
|
|
133
|
-
var Toolbar__default = /*#__PURE__*/_interopDefaultLegacy(Toolbar);
|
|
134
|
-
var useMediaQuery__default = /*#__PURE__*/_interopDefaultLegacy(useMediaQuery);
|
|
135
|
-
var Collapse__default = /*#__PURE__*/_interopDefaultLegacy(Collapse);
|
|
136
|
-
var InputAdornment__default = /*#__PURE__*/_interopDefaultLegacy(InputAdornment);
|
|
137
|
-
var TextField__default = /*#__PURE__*/_interopDefaultLegacy(TextField);
|
|
138
|
-
var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
|
|
139
|
-
var LinearProgress__default = /*#__PURE__*/_interopDefaultLegacy(LinearProgress);
|
|
140
|
-
var TablePagination__default = /*#__PURE__*/_interopDefaultLegacy(TablePagination);
|
|
141
|
-
var Alert__default = /*#__PURE__*/_interopDefaultLegacy(Alert);
|
|
142
|
-
var AlertTitle__default = /*#__PURE__*/_interopDefaultLegacy(AlertTitle);
|
|
143
|
-
var Chip__default = /*#__PURE__*/_interopDefaultLegacy(Chip);
|
|
144
|
-
var Fade__default = /*#__PURE__*/_interopDefaultLegacy(Fade);
|
|
145
|
-
var TableContainer__default = /*#__PURE__*/_interopDefaultLegacy(TableContainer);
|
|
146
|
-
var Table__default = /*#__PURE__*/_interopDefaultLegacy(Table);
|
|
147
|
-
var TableHead__default = /*#__PURE__*/_interopDefaultLegacy(TableHead);
|
|
148
|
-
var TableRow__default = /*#__PURE__*/_interopDefaultLegacy(TableRow);
|
|
149
|
-
var TableCell__default = /*#__PURE__*/_interopDefaultLegacy(TableCell);
|
|
150
|
-
var TableSortLabel__default = /*#__PURE__*/_interopDefaultLegacy(TableSortLabel);
|
|
151
|
-
var TableBody__default = /*#__PURE__*/_interopDefaultLegacy(TableBody);
|
|
152
|
-
var Skeleton__default = /*#__PURE__*/_interopDefaultLegacy(Skeleton);
|
|
153
|
-
var TableFooter__default = /*#__PURE__*/_interopDefaultLegacy(TableFooter);
|
|
154
|
-
var DialogActions__default = /*#__PURE__*/_interopDefaultLegacy(DialogActions);
|
|
155
|
-
var DialogContent__default = /*#__PURE__*/_interopDefaultLegacy(DialogContent);
|
|
156
|
-
var DialogTitle__default = /*#__PURE__*/_interopDefaultLegacy(DialogTitle);
|
|
157
|
-
var Stack__default = /*#__PURE__*/_interopDefaultLegacy(Stack);
|
|
158
|
-
|
|
159
83
|
/******************************************************************************
|
|
160
84
|
Copyright (c) Microsoft Corporation.
|
|
161
85
|
|
|
@@ -201,18 +125,22 @@ const getAllLeafColumnDefs = (columns) => {
|
|
|
201
125
|
getLeafColumns(columns);
|
|
202
126
|
return allLeafColumnDefs;
|
|
203
127
|
};
|
|
204
|
-
const prepareColumns = ({ columnDefs, columnFilterFns, defaultDisplayColumn, filterFns, sortingFns, }) => columnDefs.map((columnDef) => {
|
|
128
|
+
const prepareColumns = ({ aggregationFns, columnDefs, columnFilterFns, defaultDisplayColumn, filterFns, sortingFns, }) => columnDefs.map((columnDef) => {
|
|
205
129
|
var _a, _b;
|
|
130
|
+
//assign columnId
|
|
206
131
|
if (!columnDef.id)
|
|
207
132
|
columnDef.id = getColumnId(columnDef);
|
|
208
133
|
if (process.env.NODE_ENV !== 'production' && !columnDef.id) {
|
|
209
134
|
console.error('Column definitions must have a valid `accessorKey` or `id` property');
|
|
210
135
|
}
|
|
136
|
+
//assign columnDefType
|
|
211
137
|
if (!columnDef.columnDefType)
|
|
212
138
|
columnDef.columnDefType = 'data';
|
|
213
139
|
if ((_a = columnDef.columns) === null || _a === void 0 ? void 0 : _a.length) {
|
|
214
140
|
columnDef.columnDefType = 'group';
|
|
141
|
+
//recursively prepare columns if this is a group column
|
|
215
142
|
columnDef.columns = prepareColumns({
|
|
143
|
+
aggregationFns,
|
|
216
144
|
columnDefs: columnDef.columns,
|
|
217
145
|
columnFilterFns,
|
|
218
146
|
defaultDisplayColumn,
|
|
@@ -221,12 +149,19 @@ const prepareColumns = ({ columnDefs, columnFilterFns, defaultDisplayColumn, fil
|
|
|
221
149
|
});
|
|
222
150
|
}
|
|
223
151
|
else if (columnDef.columnDefType === 'data') {
|
|
152
|
+
//assign aggregationFns if multiple aggregationFns are provided
|
|
153
|
+
if (Array.isArray(columnDef.aggregationFn)) {
|
|
154
|
+
const aggFns = columnDef.aggregationFn;
|
|
155
|
+
columnDef.aggregationFn = (columnId, leafRows, childRows) => aggFns.map((fn) => { var _a; return (_a = aggregationFns[fn]) === null || _a === void 0 ? void 0 : _a.call(aggregationFns, columnId, leafRows, childRows); });
|
|
156
|
+
}
|
|
157
|
+
//assign filterFns
|
|
224
158
|
if (Object.keys(filterFns).includes(columnFilterFns[columnDef.id])) {
|
|
225
159
|
columnDef.filterFn =
|
|
226
160
|
(_b = filterFns[columnFilterFns[columnDef.id]]) !== null && _b !== void 0 ? _b : filterFns.fuzzy;
|
|
227
161
|
columnDef._filterFn =
|
|
228
162
|
columnFilterFns[columnDef.id];
|
|
229
163
|
}
|
|
164
|
+
//assign sortingFns
|
|
230
165
|
if (Object.keys(sortingFns).includes(columnDef.sortingFn)) {
|
|
231
166
|
// @ts-ignore
|
|
232
167
|
columnDef.sortingFn = sortingFns[columnDef.sortingFn];
|
|
@@ -427,37 +362,37 @@ const MRT_FilterFns = Object.assign(Object.assign({}, reactTable.filterFns), { b
|
|
|
427
362
|
startsWith });
|
|
428
363
|
|
|
429
364
|
const MRT_Default_Icons = {
|
|
430
|
-
ArrowDownwardIcon
|
|
431
|
-
ArrowRightIcon
|
|
432
|
-
CancelIcon
|
|
433
|
-
CheckBoxIcon
|
|
434
|
-
ClearAllIcon
|
|
435
|
-
CloseIcon
|
|
436
|
-
DensityLargeIcon
|
|
437
|
-
DensityMediumIcon
|
|
438
|
-
DensitySmallIcon
|
|
439
|
-
DragHandleIcon
|
|
440
|
-
DynamicFeedIcon
|
|
441
|
-
EditIcon
|
|
442
|
-
ExpandLessIcon
|
|
443
|
-
ExpandMoreIcon
|
|
444
|
-
FilterAltIcon
|
|
445
|
-
FilterAltOffIcon
|
|
446
|
-
FilterListIcon
|
|
447
|
-
FilterListOffIcon
|
|
448
|
-
FullscreenExitIcon
|
|
449
|
-
FullscreenIcon
|
|
450
|
-
KeyboardDoubleArrowDownIcon
|
|
451
|
-
MoreHorizIcon
|
|
452
|
-
MoreVertIcon
|
|
453
|
-
PushPinIcon
|
|
454
|
-
RestartAltIcon
|
|
455
|
-
SaveIcon
|
|
456
|
-
SearchIcon
|
|
457
|
-
SearchOffIcon
|
|
458
|
-
SortIcon
|
|
459
|
-
ViewColumnIcon
|
|
460
|
-
VisibilityOffIcon
|
|
365
|
+
ArrowDownwardIcon,
|
|
366
|
+
ArrowRightIcon,
|
|
367
|
+
CancelIcon,
|
|
368
|
+
CheckBoxIcon,
|
|
369
|
+
ClearAllIcon,
|
|
370
|
+
CloseIcon,
|
|
371
|
+
DensityLargeIcon,
|
|
372
|
+
DensityMediumIcon,
|
|
373
|
+
DensitySmallIcon,
|
|
374
|
+
DragHandleIcon,
|
|
375
|
+
DynamicFeedIcon,
|
|
376
|
+
EditIcon,
|
|
377
|
+
ExpandLessIcon,
|
|
378
|
+
ExpandMoreIcon,
|
|
379
|
+
FilterAltIcon,
|
|
380
|
+
FilterAltOffIcon,
|
|
381
|
+
FilterListIcon,
|
|
382
|
+
FilterListOffIcon,
|
|
383
|
+
FullscreenExitIcon,
|
|
384
|
+
FullscreenIcon,
|
|
385
|
+
KeyboardDoubleArrowDownIcon,
|
|
386
|
+
MoreHorizIcon,
|
|
387
|
+
MoreVertIcon,
|
|
388
|
+
PushPinIcon,
|
|
389
|
+
RestartAltIcon,
|
|
390
|
+
SaveIcon,
|
|
391
|
+
SearchIcon,
|
|
392
|
+
SearchOffIcon,
|
|
393
|
+
SortIcon,
|
|
394
|
+
ViewColumnIcon,
|
|
395
|
+
VisibilityOffIcon,
|
|
461
396
|
};
|
|
462
397
|
|
|
463
398
|
const fuzzy = (rowA, rowB, columnId) => {
|
|
@@ -481,12 +416,12 @@ const MRT_ExpandAllButton = ({ table }) => {
|
|
|
481
416
|
const iconButtonProps = muiExpandAllButtonProps instanceof Function
|
|
482
417
|
? muiExpandAllButtonProps({ table })
|
|
483
418
|
: muiExpandAllButtonProps;
|
|
484
|
-
return (
|
|
485
|
-
|
|
486
|
-
|
|
419
|
+
return (React.createElement(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : localization.expandAll },
|
|
420
|
+
React.createElement("span", null,
|
|
421
|
+
React.createElement(IconButton, Object.assign({ "aria-label": localization.expandAll, disabled: isLoading || (!renderDetailPanel && !getCanSomeRowsExpand()), onClick: () => toggleAllRowsExpanded(!getIsAllRowsExpanded()) }, iconButtonProps, { sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.25rem', width: density === 'compact' ? '1.75rem' : '2.25rem', mt: density !== 'compact' ? '-0.25rem' : undefined }, ((iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx) instanceof Function
|
|
487
422
|
? iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx(theme)
|
|
488
423
|
: iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx))), title: undefined }),
|
|
489
|
-
|
|
424
|
+
React.createElement(KeyboardDoubleArrowDownIcon, { style: {
|
|
490
425
|
transform: `rotate(${getIsAllRowsExpanded()
|
|
491
426
|
? -180
|
|
492
427
|
: getIsSomeRowsExpanded()
|
|
@@ -509,12 +444,12 @@ const MRT_ExpandButton = ({ row, table }) => {
|
|
|
509
444
|
row.toggleExpanded();
|
|
510
445
|
(_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.onClick) === null || _a === void 0 ? void 0 : _a.call(iconButtonProps, event);
|
|
511
446
|
};
|
|
512
|
-
return (
|
|
513
|
-
|
|
514
|
-
|
|
447
|
+
return (React.createElement(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : localization.expand },
|
|
448
|
+
React.createElement("span", null,
|
|
449
|
+
React.createElement(IconButton, Object.assign({ "aria-label": localization.expand, disabled: !row.getCanExpand() && !renderDetailPanel }, iconButtonProps, { onClick: handleToggleExpand, sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.25rem', width: density === 'compact' ? '1.75rem' : '2.25rem' }, ((iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx) instanceof Function
|
|
515
450
|
? iconButtonProps.sx(theme)
|
|
516
451
|
: iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx))), title: undefined }),
|
|
517
|
-
|
|
452
|
+
React.createElement(ExpandMoreIcon, { style: {
|
|
518
453
|
transform: `rotate(${!row.getCanExpand() && !renderDetailPanel
|
|
519
454
|
? -90
|
|
520
455
|
: row.getIsExpanded()
|
|
@@ -651,7 +586,7 @@ const MRT_FilterOptionMenu = ({ anchorEl, header, onSelect, setAnchorEl, setFilt
|
|
|
651
586
|
onSelect === null || onSelect === void 0 ? void 0 : onSelect();
|
|
652
587
|
};
|
|
653
588
|
const filterOption = !!header && columnDef ? columnDef._filterFn : globalFilterFn;
|
|
654
|
-
return (
|
|
589
|
+
return (React.createElement(Menu, { anchorEl: anchorEl, anchorOrigin: { vertical: 'center', horizontal: 'right' }, onClose: () => setAnchorEl(null), open: !!anchorEl, MenuListProps: {
|
|
655
590
|
dense: density === 'compact',
|
|
656
591
|
} }, (_d = (header && column && columnDef
|
|
657
592
|
? (_c = (_b = columnDef.renderColumnFilterModeMenuItems) === null || _b === void 0 ? void 0 : _b.call(columnDef, {
|
|
@@ -669,14 +604,14 @@ const MRT_FilterOptionMenu = ({ anchorEl, header, onSelect, setAnchorEl, setFilt
|
|
|
669
604
|
internalFilterOptions,
|
|
670
605
|
onSelectFilterMode: handleSelectFilterMode,
|
|
671
606
|
table,
|
|
672
|
-
}))) !== null && _d !== void 0 ? _d : internalFilterOptions.map(({ option, label, divider, symbol }, index) => (
|
|
607
|
+
}))) !== null && _d !== void 0 ? _d : internalFilterOptions.map(({ option, label, divider, symbol }, index) => (React.createElement(MenuItem, { divider: divider, key: index, onClick: () => handleSelectFilterMode(option), selected: option === filterOption, sx: {
|
|
673
608
|
alignItems: 'center',
|
|
674
609
|
display: 'flex',
|
|
675
610
|
gap: '2ch',
|
|
676
611
|
my: 0,
|
|
677
612
|
py: '6px',
|
|
678
613
|
}, value: option },
|
|
679
|
-
|
|
614
|
+
React.createElement(Box, { sx: { fontSize: '1.25rem', width: '2ch' } }, symbol),
|
|
680
615
|
label)))));
|
|
681
616
|
};
|
|
682
617
|
|
|
@@ -685,17 +620,17 @@ const MRT_ColumnPinningButtons = ({ column, table, }) => {
|
|
|
685
620
|
const handlePinColumn = (pinDirection) => {
|
|
686
621
|
column.pin(pinDirection);
|
|
687
622
|
};
|
|
688
|
-
return (
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
623
|
+
return (React.createElement(Box, { sx: { minWidth: '70px', textAlign: 'center' } }, column.getIsPinned() ? (React.createElement(Tooltip, { arrow: true, title: localization.unpin },
|
|
624
|
+
React.createElement(IconButton, { onClick: () => handlePinColumn(false), size: "small" },
|
|
625
|
+
React.createElement(PushPinIcon, null)))) : (React.createElement(React.Fragment, null,
|
|
626
|
+
React.createElement(Tooltip, { arrow: true, title: localization.pinToLeft },
|
|
627
|
+
React.createElement(IconButton, { onClick: () => handlePinColumn('left'), size: "small" },
|
|
628
|
+
React.createElement(PushPinIcon, { style: {
|
|
694
629
|
transform: 'rotate(90deg)',
|
|
695
630
|
} }))),
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
631
|
+
React.createElement(Tooltip, { arrow: true, title: localization.pinToRight },
|
|
632
|
+
React.createElement(IconButton, { onClick: () => handlePinColumn('right'), size: "small" },
|
|
633
|
+
React.createElement(PushPinIcon, { style: {
|
|
699
634
|
transform: 'rotate(-90deg)',
|
|
700
635
|
} })))))));
|
|
701
636
|
};
|
|
@@ -703,8 +638,8 @@ const MRT_ColumnPinningButtons = ({ column, table, }) => {
|
|
|
703
638
|
const MRT_GrabHandleButton = ({ iconButtonProps, onDragEnd, onDragStart, table, }) => {
|
|
704
639
|
var _a;
|
|
705
640
|
const { options: { icons: { DragHandleIcon }, localization, }, } = table;
|
|
706
|
-
return (
|
|
707
|
-
|
|
641
|
+
return (React.createElement(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : localization.move },
|
|
642
|
+
React.createElement(IconButton, Object.assign({ disableRipple: true, draggable: "true", size: "small" }, iconButtonProps, { onClick: (e) => {
|
|
708
643
|
var _a;
|
|
709
644
|
e.stopPropagation();
|
|
710
645
|
(_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.onClick) === null || _a === void 0 ? void 0 : _a.call(iconButtonProps, e);
|
|
@@ -716,7 +651,7 @@ const MRT_GrabHandleButton = ({ iconButtonProps, onDragEnd, onDragStart, table,
|
|
|
716
651
|
} }, ((iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx) instanceof Function
|
|
717
652
|
? iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx(theme)
|
|
718
653
|
: iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx))), title: undefined }),
|
|
719
|
-
|
|
654
|
+
React.createElement(DragHandleIcon, null))));
|
|
720
655
|
};
|
|
721
656
|
|
|
722
657
|
const MRT_ShowHideColumnsMenuItems = ({ allColumns, hoveredColumn, setHoveredColumn, column, isSubMenu, table, }) => {
|
|
@@ -757,8 +692,8 @@ const MRT_ShowHideColumnsMenuItems = ({ allColumns, hoveredColumn, setHoveredCol
|
|
|
757
692
|
setHoveredColumn(column);
|
|
758
693
|
}
|
|
759
694
|
};
|
|
760
|
-
return (
|
|
761
|
-
|
|
695
|
+
return (React.createElement(React.Fragment, null,
|
|
696
|
+
React.createElement(MenuItem, { disableRipple: true, ref: menuItemRef, onDragEnter: handleDragEnter, sx: (theme) => ({
|
|
762
697
|
alignItems: 'center',
|
|
763
698
|
justifyContent: 'flex-start',
|
|
764
699
|
my: 0,
|
|
@@ -771,7 +706,7 @@ const MRT_ShowHideColumnsMenuItems = ({ allColumns, hoveredColumn, setHoveredCol
|
|
|
771
706
|
pl: `${(column.depth + 0.5) * 2}rem`,
|
|
772
707
|
py: '6px',
|
|
773
708
|
}) },
|
|
774
|
-
|
|
709
|
+
React.createElement(Box, { sx: {
|
|
775
710
|
display: 'flex',
|
|
776
711
|
flexWrap: 'nowrap',
|
|
777
712
|
gap: '8px',
|
|
@@ -780,22 +715,22 @@ const MRT_ShowHideColumnsMenuItems = ({ allColumns, hoveredColumn, setHoveredCol
|
|
|
780
715
|
columnDefType !== 'group' &&
|
|
781
716
|
enableColumnOrdering &&
|
|
782
717
|
!allColumns.some((col) => col.columnDef.columnDefType === 'group') &&
|
|
783
|
-
(columnDef.enableColumnOrdering !== false ? (
|
|
718
|
+
(columnDef.enableColumnOrdering !== false ? (React.createElement(MRT_GrabHandleButton, { onDragEnd: handleDragEnd, onDragStart: handleDragStart, table: table })) : (React.createElement(Box, { sx: { width: '28px' } }))),
|
|
784
719
|
!isSubMenu &&
|
|
785
720
|
enablePinning &&
|
|
786
|
-
(column.getCanPin() ? (
|
|
787
|
-
enableHiding ? (
|
|
721
|
+
(column.getCanPin() ? (React.createElement(MRT_ColumnPinningButtons, { column: column, table: table })) : (React.createElement(Box, { sx: { width: '70px' } }))),
|
|
722
|
+
enableHiding ? (React.createElement(FormControlLabel, { componentsProps: {
|
|
788
723
|
typography: {
|
|
789
724
|
sx: {
|
|
790
725
|
mb: 0,
|
|
791
726
|
opacity: columnDefType !== 'display' ? 1 : 0.5,
|
|
792
727
|
},
|
|
793
728
|
},
|
|
794
|
-
}, checked: switchChecked, control:
|
|
795
|
-
|
|
729
|
+
}, checked: switchChecked, control: React.createElement(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: localization.toggleVisibility },
|
|
730
|
+
React.createElement(Switch, null)), disabled: (isSubMenu && switchChecked) ||
|
|
796
731
|
!column.getCanHide() ||
|
|
797
|
-
column.getIsGrouped(), label: columnDef.header, onChange: () => handleToggleColumnHidden(column) })) : (
|
|
798
|
-
_a.map((c, i) => (
|
|
732
|
+
column.getIsGrouped(), label: columnDef.header, onChange: () => handleToggleColumnHidden(column) })) : (React.createElement(Typography, { sx: { alignSelf: 'center' } }, columnDef.header)))), (_a = column.columns) === null || _a === void 0 ? void 0 :
|
|
733
|
+
_a.map((c, i) => (React.createElement(MRT_ShowHideColumnsMenuItems, { allColumns: allColumns, column: c, hoveredColumn: hoveredColumn, isSubMenu: isSubMenu, key: `${i}-${c.id}`, setHoveredColumn: setHoveredColumn, table: table })))));
|
|
799
734
|
};
|
|
800
735
|
|
|
801
736
|
const MRT_ShowHideColumnsMenu = ({ anchorEl, isSubMenu, setAnchorEl, table, }) => {
|
|
@@ -826,21 +761,21 @@ const MRT_ShowHideColumnsMenu = ({ anchorEl, isSubMenu, setAnchorEl, table, }) =
|
|
|
826
761
|
getRightLeafColumns(),
|
|
827
762
|
]);
|
|
828
763
|
const [hoveredColumn, setHoveredColumn] = React.useState(null);
|
|
829
|
-
return (
|
|
764
|
+
return (React.createElement(Menu, { anchorEl: anchorEl, open: !!anchorEl, onClose: () => setAnchorEl(null), MenuListProps: {
|
|
830
765
|
dense: density === 'compact',
|
|
831
766
|
} },
|
|
832
|
-
|
|
767
|
+
React.createElement(Box, { sx: {
|
|
833
768
|
display: 'flex',
|
|
834
769
|
justifyContent: isSubMenu ? 'center' : 'space-between',
|
|
835
770
|
p: '0.5rem',
|
|
836
771
|
pt: 0,
|
|
837
772
|
} },
|
|
838
|
-
!isSubMenu && (
|
|
839
|
-
!isSubMenu && enableColumnOrdering && (
|
|
840
|
-
!isSubMenu && enablePinning && (
|
|
841
|
-
|
|
842
|
-
|
|
843
|
-
allColumns.map((column, index) => (
|
|
773
|
+
!isSubMenu && (React.createElement(Button, { disabled: !getIsSomeColumnsVisible(), onClick: hideAllColumns }, localization.hideAll)),
|
|
774
|
+
!isSubMenu && enableColumnOrdering && (React.createElement(Button, { onClick: () => table.setColumnOrder(getDefaultColumnOrderIds(table.options)) }, localization.resetOrder)),
|
|
775
|
+
!isSubMenu && enablePinning && (React.createElement(Button, { disabled: !getIsSomeColumnsPinned(), onClick: () => table.resetColumnPinning(true) }, localization.unpinAll)),
|
|
776
|
+
React.createElement(Button, { disabled: getIsAllColumnsVisible(), onClick: () => toggleAllColumnsVisible(true) }, localization.showAll)),
|
|
777
|
+
React.createElement(Divider, null),
|
|
778
|
+
allColumns.map((column, index) => (React.createElement(MRT_ShowHideColumnsMenuItems, { allColumns: allColumns, column: column, hoveredColumn: hoveredColumn, isSubMenu: isSubMenu, key: `${index}-${column.id}`, setHoveredColumn: setHoveredColumn, table: table })))));
|
|
844
779
|
};
|
|
845
780
|
|
|
846
781
|
const commonMenuItemStyles = {
|
|
@@ -918,7 +853,7 @@ const MRT_ColumnActionMenu = ({ anchorEl, header, setAnchorEl, table, }) => {
|
|
|
918
853
|
!isSelectFilter &&
|
|
919
854
|
(allowedColumnFilterOptions === undefined ||
|
|
920
855
|
!!(allowedColumnFilterOptions === null || allowedColumnFilterOptions === void 0 ? void 0 : allowedColumnFilterOptions.length));
|
|
921
|
-
return (
|
|
856
|
+
return (React.createElement(Menu, { anchorEl: anchorEl, open: !!anchorEl, onClose: () => setAnchorEl(null), MenuListProps: {
|
|
922
857
|
dense: density === 'compact',
|
|
923
858
|
} }, (_d = (_c = (_b = columnDef.renderColumnActionsMenuItems) === null || _b === void 0 ? void 0 : _b.call(columnDef, {
|
|
924
859
|
closeMenu: () => setAnchorEl(null),
|
|
@@ -930,101 +865,101 @@ const MRT_ColumnActionMenu = ({ anchorEl, header, setAnchorEl, table, }) => {
|
|
|
930
865
|
table,
|
|
931
866
|
})) !== null && _d !== void 0 ? _d : (enableSorting &&
|
|
932
867
|
column.getCanSort() && [
|
|
933
|
-
|
|
934
|
-
|
|
935
|
-
|
|
936
|
-
|
|
868
|
+
React.createElement(MenuItem, { disabled: !column.getIsSorted(), key: 0, onClick: handleClearSort, sx: commonMenuItemStyles },
|
|
869
|
+
React.createElement(Box, { sx: commonListItemStyles },
|
|
870
|
+
React.createElement(ListItemIcon, null,
|
|
871
|
+
React.createElement(ClearAllIcon, null)),
|
|
937
872
|
localization.clearSort)),
|
|
938
|
-
|
|
939
|
-
|
|
940
|
-
|
|
941
|
-
|
|
873
|
+
React.createElement(MenuItem, { disabled: column.getIsSorted() === 'asc', key: 1, onClick: handleSortAsc, sx: commonMenuItemStyles },
|
|
874
|
+
React.createElement(Box, { sx: commonListItemStyles },
|
|
875
|
+
React.createElement(ListItemIcon, null,
|
|
876
|
+
React.createElement(SortIcon, { style: { transform: 'rotate(180deg) scaleX(-1)' } })), (_e = localization.sortByColumnAsc) === null || _e === void 0 ? void 0 :
|
|
942
877
|
_e.replace('{column}', String(columnDef.header)))),
|
|
943
|
-
|
|
944
|
-
|
|
945
|
-
|
|
946
|
-
|
|
878
|
+
React.createElement(MenuItem, { divider: enableColumnFilters || enableGrouping || enableHiding, key: 2, disabled: column.getIsSorted() === 'desc', onClick: handleSortDesc, sx: commonMenuItemStyles },
|
|
879
|
+
React.createElement(Box, { sx: commonListItemStyles },
|
|
880
|
+
React.createElement(ListItemIcon, null,
|
|
881
|
+
React.createElement(SortIcon, null)), (_f = localization.sortByColumnDesc) === null || _f === void 0 ? void 0 :
|
|
947
882
|
_f.replace('{column}', String(columnDef.header)))),
|
|
948
883
|
]),
|
|
949
884
|
enableColumnFilters &&
|
|
950
885
|
column.getCanFilter() &&
|
|
951
886
|
[
|
|
952
|
-
|
|
953
|
-
|
|
954
|
-
|
|
955
|
-
|
|
887
|
+
React.createElement(MenuItem, { disabled: !column.getFilterValue(), key: 0, onClick: handleClearFilter, sx: commonMenuItemStyles },
|
|
888
|
+
React.createElement(Box, { sx: commonListItemStyles },
|
|
889
|
+
React.createElement(ListItemIcon, null,
|
|
890
|
+
React.createElement(FilterListOffIcon, null)),
|
|
956
891
|
localization.clearFilter)),
|
|
957
|
-
|
|
958
|
-
|
|
959
|
-
|
|
960
|
-
|
|
892
|
+
React.createElement(MenuItem, { divider: enableGrouping || enableHiding, key: 1, onClick: handleFilterByColumn, sx: commonMenuItemStyles },
|
|
893
|
+
React.createElement(Box, { sx: commonListItemStyles },
|
|
894
|
+
React.createElement(ListItemIcon, null,
|
|
895
|
+
React.createElement(FilterListIcon, null)), (_g = localization.filterByColumn) === null || _g === void 0 ? void 0 :
|
|
961
896
|
_g.replace('{column}', String(columnDef.header))),
|
|
962
|
-
showFilterModeSubMenu && (
|
|
963
|
-
|
|
964
|
-
showFilterModeSubMenu && (
|
|
897
|
+
showFilterModeSubMenu && (React.createElement(IconButton, { onClick: handleOpenFilterModeMenu, onMouseEnter: handleOpenFilterModeMenu, size: "small", sx: { p: 0 } },
|
|
898
|
+
React.createElement(ArrowRightIcon, null)))),
|
|
899
|
+
showFilterModeSubMenu && (React.createElement(MRT_FilterOptionMenu, { anchorEl: filterMenuAnchorEl, header: header, key: 2, onSelect: handleFilterByColumn, setAnchorEl: setFilterMenuAnchorEl, table: table })),
|
|
965
900
|
].filter(Boolean),
|
|
966
901
|
enableGrouping &&
|
|
967
902
|
column.getCanGroup() && [
|
|
968
|
-
|
|
969
|
-
|
|
970
|
-
|
|
971
|
-
|
|
903
|
+
React.createElement(MenuItem, { divider: enablePinning, key: 0, onClick: handleGroupByColumn, sx: commonMenuItemStyles },
|
|
904
|
+
React.createElement(Box, { sx: commonListItemStyles },
|
|
905
|
+
React.createElement(ListItemIcon, null,
|
|
906
|
+
React.createElement(DynamicFeedIcon, null)), (_h = localization[column.getIsGrouped() ? 'ungroupByColumn' : 'groupByColumn']) === null || _h === void 0 ? void 0 :
|
|
972
907
|
_h.replace('{column}', String(columnDef.header)))),
|
|
973
908
|
],
|
|
974
909
|
enablePinning &&
|
|
975
910
|
column.getCanPin() && [
|
|
976
|
-
|
|
977
|
-
|
|
978
|
-
|
|
979
|
-
|
|
911
|
+
React.createElement(MenuItem, { disabled: column.getIsPinned() === 'left' || !column.getCanPin(), key: 0, onClick: () => handlePinColumn('left'), sx: commonMenuItemStyles },
|
|
912
|
+
React.createElement(Box, { sx: commonListItemStyles },
|
|
913
|
+
React.createElement(ListItemIcon, null,
|
|
914
|
+
React.createElement(PushPinIcon, { style: { transform: 'rotate(90deg)' } })),
|
|
980
915
|
localization.pinToLeft)),
|
|
981
|
-
|
|
982
|
-
|
|
983
|
-
|
|
984
|
-
|
|
916
|
+
React.createElement(MenuItem, { disabled: column.getIsPinned() === 'right' || !column.getCanPin(), key: 1, onClick: () => handlePinColumn('right'), sx: commonMenuItemStyles },
|
|
917
|
+
React.createElement(Box, { sx: commonListItemStyles },
|
|
918
|
+
React.createElement(ListItemIcon, null,
|
|
919
|
+
React.createElement(PushPinIcon, { style: { transform: 'rotate(-90deg)' } })),
|
|
985
920
|
localization.pinToRight)),
|
|
986
|
-
|
|
987
|
-
|
|
988
|
-
|
|
989
|
-
|
|
921
|
+
React.createElement(MenuItem, { disabled: !column.getIsPinned(), divider: enableHiding, key: 2, onClick: () => handlePinColumn(false), sx: commonMenuItemStyles },
|
|
922
|
+
React.createElement(Box, { sx: commonListItemStyles },
|
|
923
|
+
React.createElement(ListItemIcon, null,
|
|
924
|
+
React.createElement(PushPinIcon, null)),
|
|
990
925
|
localization.unpin)),
|
|
991
926
|
],
|
|
992
927
|
enableColumnResizing &&
|
|
993
928
|
column.getCanResize() && [
|
|
994
|
-
|
|
995
|
-
|
|
996
|
-
|
|
997
|
-
|
|
929
|
+
React.createElement(MenuItem, { disabled: !columnSizing[column.id], key: 0, onClick: handleResetColumnSize, sx: commonMenuItemStyles },
|
|
930
|
+
React.createElement(Box, { sx: commonListItemStyles },
|
|
931
|
+
React.createElement(ListItemIcon, null,
|
|
932
|
+
React.createElement(RestartAltIcon, null)),
|
|
998
933
|
localization.resetColumnSize)),
|
|
999
934
|
],
|
|
1000
935
|
enableHiding && [
|
|
1001
|
-
|
|
1002
|
-
|
|
1003
|
-
|
|
1004
|
-
|
|
936
|
+
React.createElement(MenuItem, { disabled: columnDef.enableHiding === false, key: 0, onClick: handleHideColumn, sx: commonMenuItemStyles },
|
|
937
|
+
React.createElement(Box, { sx: commonListItemStyles },
|
|
938
|
+
React.createElement(ListItemIcon, null,
|
|
939
|
+
React.createElement(VisibilityOffIcon, null)), (_j = localization.hideColumn) === null || _j === void 0 ? void 0 :
|
|
1005
940
|
_j.replace('{column}', String(columnDef.header)))),
|
|
1006
|
-
|
|
941
|
+
React.createElement(MenuItem, { disabled: !Object.values(columnVisibility).filter((visible) => !visible)
|
|
1007
942
|
.length, key: 1, onClick: handleShowAllColumns, sx: commonMenuItemStyles },
|
|
1008
|
-
|
|
1009
|
-
|
|
1010
|
-
|
|
943
|
+
React.createElement(Box, { sx: commonListItemStyles },
|
|
944
|
+
React.createElement(ListItemIcon, null,
|
|
945
|
+
React.createElement(ViewColumnIcon, null)), (_k = localization.showAllColumns) === null || _k === void 0 ? void 0 :
|
|
1011
946
|
_k.replace('{column}', String(columnDef.header))),
|
|
1012
|
-
|
|
1013
|
-
|
|
1014
|
-
|
|
947
|
+
React.createElement(IconButton, { onClick: handleOpenShowHideColumnsMenu, onMouseEnter: handleOpenShowHideColumnsMenu, size: "small", sx: { p: 0 } },
|
|
948
|
+
React.createElement(ArrowRightIcon, null))),
|
|
949
|
+
React.createElement(MRT_ShowHideColumnsMenu, { anchorEl: showHideColumnsMenuAnchorEl, isSubMenu: true, key: 2, setAnchorEl: setShowHideColumnsMenuAnchorEl, table: table }),
|
|
1015
950
|
]));
|
|
1016
951
|
};
|
|
1017
952
|
|
|
1018
953
|
const MRT_RowActionMenu = ({ anchorEl, handleEdit, row, setAnchorEl, table, }) => {
|
|
1019
954
|
const { getState, options: { icons: { EditIcon }, enableEditing, localization, renderRowActionMenuItems, }, } = table;
|
|
1020
955
|
const { density } = getState();
|
|
1021
|
-
return (
|
|
956
|
+
return (React.createElement(Menu, { anchorEl: anchorEl, open: !!anchorEl, onClose: () => setAnchorEl(null), MenuListProps: {
|
|
1022
957
|
dense: density === 'compact',
|
|
1023
958
|
} },
|
|
1024
|
-
enableEditing && (
|
|
1025
|
-
|
|
1026
|
-
|
|
1027
|
-
|
|
959
|
+
enableEditing && (React.createElement(MenuItem, { onClick: handleEdit, sx: commonMenuItemStyles },
|
|
960
|
+
React.createElement(Box, { sx: commonListItemStyles },
|
|
961
|
+
React.createElement(ListItemIcon, null,
|
|
962
|
+
React.createElement(EditIcon, null)),
|
|
1028
963
|
localization.edit))), renderRowActionMenuItems === null || renderRowActionMenuItems === void 0 ? void 0 :
|
|
1029
964
|
renderRowActionMenuItems({
|
|
1030
965
|
row,
|
|
@@ -1054,15 +989,15 @@ const MRT_EditActionButtons = ({ row, table, variant = 'icon', }) => {
|
|
|
1054
989
|
values: (_b = editingRow === null || editingRow === void 0 ? void 0 : editingRow._valuesCache) !== null && _b !== void 0 ? _b : Object.assign({}, row.original),
|
|
1055
990
|
});
|
|
1056
991
|
};
|
|
1057
|
-
return (
|
|
1058
|
-
|
|
1059
|
-
|
|
1060
|
-
|
|
1061
|
-
|
|
1062
|
-
|
|
1063
|
-
|
|
1064
|
-
|
|
1065
|
-
|
|
992
|
+
return (React.createElement(Box, { onClick: (e) => e.stopPropagation(), sx: { display: 'flex', gap: '0.75rem' } }, variant === 'icon' ? (React.createElement(React.Fragment, null,
|
|
993
|
+
React.createElement(Tooltip, { arrow: true, title: localization.cancel },
|
|
994
|
+
React.createElement(IconButton, { "aria-label": localization.cancel, onClick: handleCancel },
|
|
995
|
+
React.createElement(CancelIcon, null))),
|
|
996
|
+
React.createElement(Tooltip, { arrow: true, title: localization.save },
|
|
997
|
+
React.createElement(IconButton, { "aria-label": localization.save, color: "info", onClick: handleSave },
|
|
998
|
+
React.createElement(SaveIcon, null))))) : (React.createElement(React.Fragment, null,
|
|
999
|
+
React.createElement(Button, { onClick: handleCancel }, localization.cancel),
|
|
1000
|
+
React.createElement(Button, { onClick: handleSave, variant: "contained" }, localization.save)))));
|
|
1066
1001
|
};
|
|
1067
1002
|
|
|
1068
1003
|
const commonIconButtonStyles = {
|
|
@@ -1089,13 +1024,13 @@ const MRT_ToggleRowActionMenuButton = ({ cell, row, table, }) => {
|
|
|
1089
1024
|
setEditingRow(Object.assign({}, row));
|
|
1090
1025
|
setAnchorEl(null);
|
|
1091
1026
|
};
|
|
1092
|
-
return (
|
|
1093
|
-
|
|
1094
|
-
|
|
1095
|
-
|
|
1096
|
-
|
|
1097
|
-
|
|
1098
|
-
|
|
1027
|
+
return (React.createElement(React.Fragment, null, renderRowActions ? (React.createElement(React.Fragment, null, renderRowActions({ cell, row, table }))) : row.id === (editingRow === null || editingRow === void 0 ? void 0 : editingRow.id) && editingMode === 'row' ? (React.createElement(MRT_EditActionButtons, { row: row, table: table })) : !renderRowActionMenuItems && enableEditing ? (React.createElement(Tooltip, { placement: "right", arrow: true, title: localization.edit },
|
|
1028
|
+
React.createElement(IconButton, { "aria-label": localization.edit, sx: commonIconButtonStyles, onClick: handleStartEditMode },
|
|
1029
|
+
React.createElement(EditIcon, null)))) : renderRowActionMenuItems ? (React.createElement(React.Fragment, null,
|
|
1030
|
+
React.createElement(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: localization.rowActions },
|
|
1031
|
+
React.createElement(IconButton, { "aria-label": localization.rowActions, onClick: handleOpenRowActionMenu, size: "small", sx: commonIconButtonStyles },
|
|
1032
|
+
React.createElement(MoreHorizIcon, null))),
|
|
1033
|
+
React.createElement(MRT_RowActionMenu, { anchorEl: anchorEl, handleEdit: handleStartEditMode, row: row, setAnchorEl: setAnchorEl, table: table }))) : null));
|
|
1099
1034
|
};
|
|
1100
1035
|
|
|
1101
1036
|
const MRT_SelectCheckbox = ({ row, selectAll, table }) => {
|
|
@@ -1128,9 +1063,9 @@ const MRT_SelectCheckbox = ({ row, selectAll, table }) => {
|
|
|
1128
1063
|
}, sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.5rem', width: density === 'compact' ? '1.75rem' : '2.5rem', m: density !== 'compact' ? '-0.4rem' : undefined }, ((checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.sx) instanceof Function
|
|
1129
1064
|
? checkboxProps.sx(theme)
|
|
1130
1065
|
: checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.sx))), title: undefined });
|
|
1131
|
-
return (
|
|
1066
|
+
return (React.createElement(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: (_a = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.title) !== null && _a !== void 0 ? _a : (selectAll
|
|
1132
1067
|
? localization.toggleSelectAll
|
|
1133
|
-
: localization.toggleSelectRow) }, enableMultiRowSelection === false ? (
|
|
1068
|
+
: localization.toggleSelectRow) }, enableMultiRowSelection === false ? (React.createElement(Radio, Object.assign({}, commonProps))) : (React.createElement(Checkbox, Object.assign({ indeterminate: selectAll
|
|
1134
1069
|
? table.getIsSomeRowsSelected() &&
|
|
1135
1070
|
!(selectAllMode === 'page'
|
|
1136
1071
|
? table.getIsAllPageRowsSelected()
|
|
@@ -1147,7 +1082,7 @@ const MRT_GlobalFilterTextField = ({ table, }) => {
|
|
|
1147
1082
|
: muiSearchTextFieldProps;
|
|
1148
1083
|
const [anchorEl, setAnchorEl] = React.useState(null);
|
|
1149
1084
|
const [searchValue, setSearchValue] = React.useState(globalFilter !== null && globalFilter !== void 0 ? globalFilter : '');
|
|
1150
|
-
const handleChangeDebounced = React.useCallback(
|
|
1085
|
+
const handleChangeDebounced = React.useCallback(debounce((event) => {
|
|
1151
1086
|
var _a;
|
|
1152
1087
|
setGlobalFilter((_a = event.target.value) !== null && _a !== void 0 ? _a : undefined);
|
|
1153
1088
|
}, manualFiltering ? 500 : 250), []);
|
|
@@ -1167,24 +1102,24 @@ const MRT_GlobalFilterTextField = ({ table, }) => {
|
|
|
1167
1102
|
handleClear();
|
|
1168
1103
|
}
|
|
1169
1104
|
}, [globalFilter]);
|
|
1170
|
-
return (
|
|
1171
|
-
|
|
1172
|
-
startAdornment: enableGlobalFilterModes ? (
|
|
1173
|
-
|
|
1174
|
-
|
|
1175
|
-
|
|
1176
|
-
endAdornment: (
|
|
1177
|
-
|
|
1178
|
-
|
|
1179
|
-
|
|
1180
|
-
|
|
1105
|
+
return (React.createElement(Collapse, { in: showGlobalFilter, orientation: "horizontal", unmountOnExit: true, mountOnEnter: true },
|
|
1106
|
+
React.createElement(TextField, Object.assign({ placeholder: localization.search, onChange: handleChange, value: searchValue !== null && searchValue !== void 0 ? searchValue : '', variant: "standard", InputProps: {
|
|
1107
|
+
startAdornment: enableGlobalFilterModes ? (React.createElement(InputAdornment, { position: "start" },
|
|
1108
|
+
React.createElement(Tooltip, { arrow: true, title: localization.changeSearchMode },
|
|
1109
|
+
React.createElement(IconButton, { "aria-label": localization.changeSearchMode, onClick: handleGlobalFilterMenuOpen, size: "small", sx: { height: '1.75rem', width: '1.75rem' } },
|
|
1110
|
+
React.createElement(SearchIcon, null))))) : (React.createElement(SearchIcon, { style: { marginRight: '4px' } })),
|
|
1111
|
+
endAdornment: (React.createElement(InputAdornment, { position: "end" },
|
|
1112
|
+
React.createElement(Tooltip, { arrow: true, title: (_a = localization.clearSearch) !== null && _a !== void 0 ? _a : '' },
|
|
1113
|
+
React.createElement("span", null,
|
|
1114
|
+
React.createElement(IconButton, { "aria-label": localization.clearSearch, disabled: !(searchValue === null || searchValue === void 0 ? void 0 : searchValue.length), onClick: handleClear, size: "small" },
|
|
1115
|
+
React.createElement(CloseIcon, null)))))),
|
|
1181
1116
|
} }, textFieldProps, { inputRef: (inputRef) => {
|
|
1182
1117
|
searchInputRef.current = inputRef;
|
|
1183
1118
|
if (textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.inputRef) {
|
|
1184
1119
|
textFieldProps.inputRef = inputRef;
|
|
1185
1120
|
}
|
|
1186
1121
|
} })),
|
|
1187
|
-
|
|
1122
|
+
React.createElement(MRT_FilterOptionMenu, { anchorEl: anchorEl, setAnchorEl: setAnchorEl, table: table, onSelect: handleClear })));
|
|
1188
1123
|
};
|
|
1189
1124
|
|
|
1190
1125
|
const MRT_LinearProgressBar = ({ isTopToolbar, table }) => {
|
|
@@ -1193,13 +1128,13 @@ const MRT_LinearProgressBar = ({ isTopToolbar, table }) => {
|
|
|
1193
1128
|
const linearProgressProps = muiLinearProgressProps instanceof Function
|
|
1194
1129
|
? muiLinearProgressProps({ isTopToolbar, table })
|
|
1195
1130
|
: muiLinearProgressProps;
|
|
1196
|
-
return (
|
|
1131
|
+
return (React.createElement(Collapse, { in: isLoading || showProgressBars, mountOnEnter: true, unmountOnExit: true, sx: {
|
|
1197
1132
|
bottom: isTopToolbar ? 0 : undefined,
|
|
1198
1133
|
position: 'absolute',
|
|
1199
1134
|
top: !isTopToolbar ? 0 : undefined,
|
|
1200
1135
|
width: '100%',
|
|
1201
1136
|
} },
|
|
1202
|
-
|
|
1137
|
+
React.createElement(LinearProgress, Object.assign({ "aria-label": "Loading", "aria-busy": "true", sx: { position: 'relative' } }, linearProgressProps))));
|
|
1203
1138
|
};
|
|
1204
1139
|
|
|
1205
1140
|
const MRT_TablePagination = ({ table, position, }) => {
|
|
@@ -1213,7 +1148,7 @@ const MRT_TablePagination = ({ table, position, }) => {
|
|
|
1213
1148
|
const handleChangeRowsPerPage = (event) => {
|
|
1214
1149
|
setPageSize(+event.target.value);
|
|
1215
1150
|
};
|
|
1216
|
-
return (
|
|
1151
|
+
return (React.createElement(TablePagination, Object.assign({ component: "div", count: totalRowCount, getItemAriaLabel: (type) => type === 'first'
|
|
1217
1152
|
? localization.goToFirstPage
|
|
1218
1153
|
: type === 'last'
|
|
1219
1154
|
? localization.goToLastPage
|
|
@@ -1254,26 +1189,26 @@ const MRT_ToolbarAlertBanner = ({ stackAlertBanner, table, }) => {
|
|
|
1254
1189
|
const selectMessage = getSelectedRowModel().rows.length > 0
|
|
1255
1190
|
? (_b = (_a = localization.selectedCountOfRowCountRowsSelected) === null || _a === void 0 ? void 0 : _a.replace('{selectedCount}', getSelectedRowModel().rows.length.toString())) === null || _b === void 0 ? void 0 : _b.replace('{rowCount}', (rowCount !== null && rowCount !== void 0 ? rowCount : getPrePaginationRowModel().rows.length).toString())
|
|
1256
1191
|
: null;
|
|
1257
|
-
const groupedByMessage = grouping.length > 0 ? (
|
|
1192
|
+
const groupedByMessage = grouping.length > 0 ? (React.createElement("span", null,
|
|
1258
1193
|
localization.groupedBy,
|
|
1259
1194
|
' ',
|
|
1260
|
-
grouping.map((columnId, index) => (
|
|
1195
|
+
grouping.map((columnId, index) => (React.createElement(React.Fragment, { key: `${index}-${columnId}` },
|
|
1261
1196
|
index > 0 ? localization.thenBy : '',
|
|
1262
|
-
|
|
1263
|
-
return (
|
|
1264
|
-
|
|
1197
|
+
React.createElement(Chip, Object.assign({ label: table.getColumn(columnId).columnDef.header, onDelete: () => table.getColumn(columnId).toggleGrouping() }, chipProps))))))) : null;
|
|
1198
|
+
return (React.createElement(Collapse, { in: showAlertBanner || !!selectMessage || !!groupedByMessage, timeout: stackAlertBanner ? 200 : 0 },
|
|
1199
|
+
React.createElement(Alert, Object.assign({ color: "info", icon: false }, alertProps, { sx: (theme) => (Object.assign({ borderRadius: 0, fontSize: '1rem', left: 0, p: 0, position: 'relative', mb: stackAlertBanner
|
|
1265
1200
|
? 0
|
|
1266
1201
|
: positionToolbarAlertBanner === 'bottom'
|
|
1267
1202
|
? '-1rem'
|
|
1268
1203
|
: undefined, right: 0, top: 0, width: '100%', zIndex: 2 }, ((alertProps === null || alertProps === void 0 ? void 0 : alertProps.sx) instanceof Function
|
|
1269
1204
|
? alertProps.sx(theme)
|
|
1270
1205
|
: alertProps === null || alertProps === void 0 ? void 0 : alertProps.sx))) }),
|
|
1271
|
-
(alertProps === null || alertProps === void 0 ? void 0 : alertProps.title) &&
|
|
1272
|
-
|
|
1206
|
+
(alertProps === null || alertProps === void 0 ? void 0 : alertProps.title) && React.createElement(AlertTitle, null, alertProps.title),
|
|
1207
|
+
React.createElement(Box, { sx: { p: '0.5rem 1rem' } }, alertProps === null || alertProps === void 0 ? void 0 :
|
|
1273
1208
|
alertProps.children,
|
|
1274
|
-
(alertProps === null || alertProps === void 0 ? void 0 : alertProps.children) && (selectMessage || groupedByMessage) && (
|
|
1209
|
+
(alertProps === null || alertProps === void 0 ? void 0 : alertProps.children) && (selectMessage || groupedByMessage) && (React.createElement("br", null)),
|
|
1275
1210
|
selectMessage,
|
|
1276
|
-
selectMessage && groupedByMessage &&
|
|
1211
|
+
selectMessage && groupedByMessage && React.createElement("br", null),
|
|
1277
1212
|
groupedByMessage))));
|
|
1278
1213
|
};
|
|
1279
1214
|
|
|
@@ -1285,8 +1220,8 @@ const MRT_FullScreenToggleButton = (_a) => {
|
|
|
1285
1220
|
const handleToggleFullScreen = () => {
|
|
1286
1221
|
setIsFullScreen(!isFullScreen);
|
|
1287
1222
|
};
|
|
1288
|
-
return (
|
|
1289
|
-
|
|
1223
|
+
return (React.createElement(Tooltip, { arrow: true, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.toggleFullScreen },
|
|
1224
|
+
React.createElement(IconButton, Object.assign({ "aria-label": localization.showHideFilters, onClick: handleToggleFullScreen }, rest, { title: undefined }), isFullScreen ? React.createElement(FullscreenExitIcon, null) : React.createElement(FullscreenIcon, null))));
|
|
1290
1225
|
};
|
|
1291
1226
|
|
|
1292
1227
|
const MRT_ShowHideColumnsButton = (_a) => {
|
|
@@ -1297,11 +1232,11 @@ const MRT_ShowHideColumnsButton = (_a) => {
|
|
|
1297
1232
|
const handleClick = (event) => {
|
|
1298
1233
|
setAnchorEl(event.currentTarget);
|
|
1299
1234
|
};
|
|
1300
|
-
return (
|
|
1301
|
-
|
|
1302
|
-
|
|
1303
|
-
|
|
1304
|
-
|
|
1235
|
+
return (React.createElement(React.Fragment, null,
|
|
1236
|
+
React.createElement(Tooltip, { arrow: true, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.showHideColumns },
|
|
1237
|
+
React.createElement(IconButton, Object.assign({ "aria-label": localization.showHideColumns, onClick: handleClick }, rest, { title: undefined }),
|
|
1238
|
+
React.createElement(ViewColumnIcon, null))),
|
|
1239
|
+
React.createElement(MRT_ShowHideColumnsMenu, { anchorEl: anchorEl, setAnchorEl: setAnchorEl, table: table })));
|
|
1305
1240
|
};
|
|
1306
1241
|
|
|
1307
1242
|
const MRT_ToggleDensePaddingButton = (_a) => {
|
|
@@ -1317,8 +1252,8 @@ const MRT_ToggleDensePaddingButton = (_a) => {
|
|
|
1317
1252
|
: 'comfortable';
|
|
1318
1253
|
setDensity(nextDensity);
|
|
1319
1254
|
};
|
|
1320
|
-
return (
|
|
1321
|
-
|
|
1255
|
+
return (React.createElement(Tooltip, { arrow: true, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.toggleDensity },
|
|
1256
|
+
React.createElement(IconButton, Object.assign({ "aria-label": localization.toggleDensity, onClick: handleToggleDensePadding }, rest, { title: undefined }), density === 'compact' ? (React.createElement(DensitySmallIcon, null)) : density === 'comfortable' ? (React.createElement(DensityMediumIcon, null)) : (React.createElement(DensityLargeIcon, null)))));
|
|
1322
1257
|
};
|
|
1323
1258
|
|
|
1324
1259
|
const MRT_ToggleFiltersButton = (_a) => {
|
|
@@ -1329,8 +1264,8 @@ const MRT_ToggleFiltersButton = (_a) => {
|
|
|
1329
1264
|
const handleToggleShowFilters = () => {
|
|
1330
1265
|
setShowFilters(!showColumnFilters);
|
|
1331
1266
|
};
|
|
1332
|
-
return (
|
|
1333
|
-
|
|
1267
|
+
return (React.createElement(Tooltip, { arrow: true, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.showHideFilters },
|
|
1268
|
+
React.createElement(IconButton, Object.assign({ "aria-label": localization.showHideFilters, onClick: handleToggleShowFilters }, rest, { title: undefined }), showColumnFilters ? React.createElement(FilterListOffIcon, null) : React.createElement(FilterListIcon, null))));
|
|
1334
1269
|
};
|
|
1335
1270
|
|
|
1336
1271
|
const MRT_ToggleGlobalFilterButton = (_a) => {
|
|
@@ -1342,27 +1277,27 @@ const MRT_ToggleGlobalFilterButton = (_a) => {
|
|
|
1342
1277
|
setShowGlobalFilter(!showGlobalFilter);
|
|
1343
1278
|
queueMicrotask(() => { var _a; return (_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); });
|
|
1344
1279
|
};
|
|
1345
|
-
return (
|
|
1346
|
-
|
|
1280
|
+
return (React.createElement(Tooltip, { arrow: true, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.showHideSearch },
|
|
1281
|
+
React.createElement(IconButton, Object.assign({ disabled: !!globalFilter, onClick: handleToggleSearch }, rest, { title: undefined }), showGlobalFilter ? React.createElement(SearchOffIcon, null) : React.createElement(SearchIcon, null))));
|
|
1347
1282
|
};
|
|
1348
1283
|
|
|
1349
1284
|
const MRT_ToolbarInternalButtons = ({ table, }) => {
|
|
1350
1285
|
var _a;
|
|
1351
1286
|
const { options: { enableColumnFilters, enableColumnOrdering, enableDensityToggle, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableHiding, enablePinning, initialState, renderToolbarInternalActions, }, } = table;
|
|
1352
|
-
return (
|
|
1287
|
+
return (React.createElement(Box, { sx: {
|
|
1353
1288
|
alignItems: 'center',
|
|
1354
1289
|
display: 'flex',
|
|
1355
1290
|
zIndex: 3,
|
|
1356
1291
|
} }, (_a = renderToolbarInternalActions === null || renderToolbarInternalActions === void 0 ? void 0 : renderToolbarInternalActions({
|
|
1357
1292
|
table,
|
|
1358
|
-
})) !== null && _a !== void 0 ? _a : (
|
|
1293
|
+
})) !== null && _a !== void 0 ? _a : (React.createElement(React.Fragment, null,
|
|
1359
1294
|
enableFilters &&
|
|
1360
1295
|
enableGlobalFilter &&
|
|
1361
|
-
!(initialState === null || initialState === void 0 ? void 0 : initialState.showGlobalFilter) && (
|
|
1362
|
-
enableFilters && enableColumnFilters && (
|
|
1363
|
-
(enableHiding || enableColumnOrdering || enablePinning) && (
|
|
1364
|
-
enableDensityToggle && (
|
|
1365
|
-
enableFullScreenToggle && (
|
|
1296
|
+
!(initialState === null || initialState === void 0 ? void 0 : initialState.showGlobalFilter) && (React.createElement(MRT_ToggleGlobalFilterButton, { table: table })),
|
|
1297
|
+
enableFilters && enableColumnFilters && (React.createElement(MRT_ToggleFiltersButton, { table: table })),
|
|
1298
|
+
(enableHiding || enableColumnOrdering || enablePinning) && (React.createElement(MRT_ShowHideColumnsButton, { table: table })),
|
|
1299
|
+
enableDensityToggle && (React.createElement(MRT_ToggleDensePaddingButton, { table: table })),
|
|
1300
|
+
enableFullScreenToggle && (React.createElement(MRT_FullScreenToggleButton, { table: table }))))));
|
|
1366
1301
|
};
|
|
1367
1302
|
|
|
1368
1303
|
const MRT_ToolbarDropZone = ({ table }) => {
|
|
@@ -1372,10 +1307,10 @@ const MRT_ToolbarDropZone = ({ table }) => {
|
|
|
1372
1307
|
const handleDragEnter = (_event) => {
|
|
1373
1308
|
setHoveredColumn({ id: 'drop-zone' });
|
|
1374
1309
|
};
|
|
1375
|
-
return (
|
|
1310
|
+
return (React.createElement(Fade, { unmountOnExit: true, mountOnEnter: true, in: !!enableGrouping &&
|
|
1376
1311
|
!!draggingColumn &&
|
|
1377
1312
|
!grouping.includes(draggingColumn.id) },
|
|
1378
|
-
|
|
1313
|
+
React.createElement(Box, { sx: (theme) => ({
|
|
1379
1314
|
alignItems: 'center',
|
|
1380
1315
|
backgroundColor: styles.alpha(theme.palette.info.main, (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === 'drop-zone' ? 0.2 : 0.1),
|
|
1381
1316
|
border: `dashed ${theme.palette.info.main} 2px`,
|
|
@@ -1386,7 +1321,7 @@ const MRT_ToolbarDropZone = ({ table }) => {
|
|
|
1386
1321
|
width: 'calc(100% - 4px)',
|
|
1387
1322
|
zIndex: 2,
|
|
1388
1323
|
}), onDragEnter: handleDragEnter },
|
|
1389
|
-
|
|
1324
|
+
React.createElement(Typography, null, localization.dropToGroupBy.replace('{column}', (_b = (_a = draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.columnDef) === null || _a === void 0 ? void 0 : _a.header) !== null && _b !== void 0 ? _b : '')))));
|
|
1390
1325
|
};
|
|
1391
1326
|
|
|
1392
1327
|
const commonToolbarStyles = ({ theme }) => ({
|
|
@@ -1405,12 +1340,12 @@ const MRT_TopToolbar = ({ table }) => {
|
|
|
1405
1340
|
var _a;
|
|
1406
1341
|
const { getState, options: { enableGlobalFilter, enablePagination, enableToolbarInternalActions, muiTopToolbarProps, positionGlobalFilter, positionPagination, positionToolbarAlertBanner, positionToolbarDropZone, renderTopToolbarCustomActions, }, refs: { topToolbarRef }, } = table;
|
|
1407
1342
|
const { isFullScreen, showGlobalFilter } = getState();
|
|
1408
|
-
const isMobile =
|
|
1343
|
+
const isMobile = useMediaQuery('(max-width:720px)');
|
|
1409
1344
|
const toolbarProps = muiTopToolbarProps instanceof Function
|
|
1410
1345
|
? muiTopToolbarProps({ table })
|
|
1411
1346
|
: muiTopToolbarProps;
|
|
1412
1347
|
const stackAlertBanner = isMobile || !!renderTopToolbarCustomActions || showGlobalFilter;
|
|
1413
|
-
return (
|
|
1348
|
+
return (React.createElement(Toolbar, Object.assign({ variant: "dense" }, toolbarProps, { ref: (ref) => {
|
|
1414
1349
|
topToolbarRef.current = ref;
|
|
1415
1350
|
if (toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.ref) {
|
|
1416
1351
|
// @ts-ignore
|
|
@@ -1419,9 +1354,9 @@ const MRT_TopToolbar = ({ table }) => {
|
|
|
1419
1354
|
}, sx: (theme) => (Object.assign(Object.assign({ position: isFullScreen ? 'sticky' : undefined, top: isFullScreen ? '0' : undefined }, commonToolbarStyles({ theme })), ((toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.sx) instanceof Function
|
|
1420
1355
|
? toolbarProps.sx(theme)
|
|
1421
1356
|
: toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.sx))) }),
|
|
1422
|
-
positionToolbarAlertBanner === 'top' && (
|
|
1423
|
-
['both', 'top'].includes(positionToolbarDropZone !== null && positionToolbarDropZone !== void 0 ? positionToolbarDropZone : '') && (
|
|
1424
|
-
|
|
1357
|
+
positionToolbarAlertBanner === 'top' && (React.createElement(MRT_ToolbarAlertBanner, { stackAlertBanner: stackAlertBanner, table: table })),
|
|
1358
|
+
['both', 'top'].includes(positionToolbarDropZone !== null && positionToolbarDropZone !== void 0 ? positionToolbarDropZone : '') && (React.createElement(MRT_ToolbarDropZone, { table: table })),
|
|
1359
|
+
React.createElement(Box, { sx: {
|
|
1425
1360
|
alignItems: 'flex-start',
|
|
1426
1361
|
boxSizing: 'border-box',
|
|
1427
1362
|
display: 'flex',
|
|
@@ -1432,29 +1367,29 @@ const MRT_TopToolbar = ({ table }) => {
|
|
|
1432
1367
|
top: 0,
|
|
1433
1368
|
width: '100%',
|
|
1434
1369
|
} },
|
|
1435
|
-
enableGlobalFilter && positionGlobalFilter === 'left' && (
|
|
1436
|
-
enableToolbarInternalActions ? (
|
|
1370
|
+
enableGlobalFilter && positionGlobalFilter === 'left' && (React.createElement(MRT_GlobalFilterTextField, { table: table })), (_a = renderTopToolbarCustomActions === null || renderTopToolbarCustomActions === void 0 ? void 0 : renderTopToolbarCustomActions({ table })) !== null && _a !== void 0 ? _a : React.createElement("span", null),
|
|
1371
|
+
enableToolbarInternalActions ? (React.createElement(Box, { sx: {
|
|
1437
1372
|
display: 'flex',
|
|
1438
1373
|
flexWrap: 'wrap-reverse',
|
|
1439
1374
|
justifyContent: 'flex-end',
|
|
1440
1375
|
} },
|
|
1441
|
-
enableGlobalFilter && positionGlobalFilter === 'right' && (
|
|
1442
|
-
|
|
1443
|
-
positionGlobalFilter === 'right' && (
|
|
1376
|
+
enableGlobalFilter && positionGlobalFilter === 'right' && (React.createElement(MRT_GlobalFilterTextField, { table: table })),
|
|
1377
|
+
React.createElement(MRT_ToolbarInternalButtons, { table: table }))) : (enableGlobalFilter &&
|
|
1378
|
+
positionGlobalFilter === 'right' && (React.createElement(MRT_GlobalFilterTextField, { table: table })))),
|
|
1444
1379
|
enablePagination &&
|
|
1445
|
-
['top', 'both'].includes(positionPagination !== null && positionPagination !== void 0 ? positionPagination : '') && (
|
|
1446
|
-
|
|
1380
|
+
['top', 'both'].includes(positionPagination !== null && positionPagination !== void 0 ? positionPagination : '') && (React.createElement(MRT_TablePagination, { table: table, position: "top" })),
|
|
1381
|
+
React.createElement(MRT_LinearProgressBar, { isTopToolbar: true, table: table })));
|
|
1447
1382
|
};
|
|
1448
1383
|
|
|
1449
1384
|
const MRT_BottomToolbar = ({ table }) => {
|
|
1450
1385
|
const { getState, options: { enablePagination, muiBottomToolbarProps, positionPagination, positionToolbarAlertBanner, positionToolbarDropZone, renderBottomToolbarCustomActions, }, refs: { bottomToolbarRef }, } = table;
|
|
1451
1386
|
const { isFullScreen } = getState();
|
|
1452
|
-
const isMobile =
|
|
1387
|
+
const isMobile = useMediaQuery('(max-width:720px)');
|
|
1453
1388
|
const toolbarProps = muiBottomToolbarProps instanceof Function
|
|
1454
1389
|
? muiBottomToolbarProps({ table })
|
|
1455
1390
|
: muiBottomToolbarProps;
|
|
1456
1391
|
const stackAlertBanner = isMobile || !!renderBottomToolbarCustomActions;
|
|
1457
|
-
return (
|
|
1392
|
+
return (React.createElement(Toolbar, Object.assign({ variant: "dense" }, toolbarProps, { ref: (ref) => {
|
|
1458
1393
|
bottomToolbarRef.current = ref;
|
|
1459
1394
|
if (toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.ref) {
|
|
1460
1395
|
// @ts-ignore
|
|
@@ -1463,10 +1398,10 @@ const MRT_BottomToolbar = ({ table }) => {
|
|
|
1463
1398
|
}, sx: (theme) => (Object.assign(Object.assign(Object.assign({}, commonToolbarStyles({ theme })), { bottom: isFullScreen ? '0' : undefined, boxShadow: `0 1px 2px -1px ${styles.alpha(theme.palette.common.black, 0.1)} inset`, left: 0, position: isFullScreen ? 'fixed' : 'relative', right: 0 }), ((toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.sx) instanceof Function
|
|
1464
1399
|
? toolbarProps.sx(theme)
|
|
1465
1400
|
: toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.sx))) }),
|
|
1466
|
-
|
|
1467
|
-
positionToolbarAlertBanner === 'bottom' && (
|
|
1468
|
-
['both', 'bottom'].includes(positionToolbarDropZone !== null && positionToolbarDropZone !== void 0 ? positionToolbarDropZone : '') && (
|
|
1469
|
-
|
|
1401
|
+
React.createElement(MRT_LinearProgressBar, { isTopToolbar: false, table: table }),
|
|
1402
|
+
positionToolbarAlertBanner === 'bottom' && (React.createElement(MRT_ToolbarAlertBanner, { stackAlertBanner: stackAlertBanner, table: table })),
|
|
1403
|
+
['both', 'bottom'].includes(positionToolbarDropZone !== null && positionToolbarDropZone !== void 0 ? positionToolbarDropZone : '') && (React.createElement(MRT_ToolbarDropZone, { table: table })),
|
|
1404
|
+
React.createElement(Box, { sx: {
|
|
1470
1405
|
alignItems: 'center',
|
|
1471
1406
|
boxSizing: 'border-box',
|
|
1472
1407
|
display: 'flex',
|
|
@@ -1474,15 +1409,15 @@ const MRT_BottomToolbar = ({ table }) => {
|
|
|
1474
1409
|
p: '0.5rem',
|
|
1475
1410
|
width: '100%',
|
|
1476
1411
|
} },
|
|
1477
|
-
renderBottomToolbarCustomActions ? (renderBottomToolbarCustomActions({ table })) : (
|
|
1478
|
-
|
|
1412
|
+
renderBottomToolbarCustomActions ? (renderBottomToolbarCustomActions({ table })) : (React.createElement("span", null)),
|
|
1413
|
+
React.createElement(Box, { sx: {
|
|
1479
1414
|
display: 'flex',
|
|
1480
1415
|
justifyContent: 'flex-end',
|
|
1481
1416
|
position: stackAlertBanner ? 'relative' : 'absolute',
|
|
1482
1417
|
right: 0,
|
|
1483
1418
|
top: 0,
|
|
1484
1419
|
} }, enablePagination &&
|
|
1485
|
-
['bottom', 'both'].includes(positionPagination !== null && positionPagination !== void 0 ? positionPagination : '') && (
|
|
1420
|
+
['bottom', 'both'].includes(positionPagination !== null && positionPagination !== void 0 ? positionPagination : '') && (React.createElement(MRT_TablePagination, { table: table, position: "bottom" }))))));
|
|
1486
1421
|
};
|
|
1487
1422
|
|
|
1488
1423
|
const MRT_TableHeadCellColumnActionsButton = ({ header, table, }) => {
|
|
@@ -1506,15 +1441,15 @@ const MRT_TableHeadCellColumnActionsButton = ({ header, table, }) => {
|
|
|
1506
1441
|
})
|
|
1507
1442
|
: columnDef.muiTableHeadCellColumnActionsButtonProps;
|
|
1508
1443
|
const iconButtonProps = Object.assign(Object.assign({}, mTableHeadCellColumnActionsButtonProps), mcTableHeadCellColumnActionsButtonProps);
|
|
1509
|
-
return (
|
|
1510
|
-
|
|
1511
|
-
|
|
1444
|
+
return (React.createElement(React.Fragment, null,
|
|
1445
|
+
React.createElement(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : localization.columnActions },
|
|
1446
|
+
React.createElement(IconButton, Object.assign({ "aria-label": localization.columnActions, onClick: handleClick, size: "small" }, iconButtonProps, { sx: (theme) => (Object.assign({ height: '2rem', m: '-8px -4px', opacity: 0.5, transform: 'scale(0.85)', transition: 'opacity 150ms', width: '2rem', '&:hover': {
|
|
1512
1447
|
opacity: 1,
|
|
1513
1448
|
} }, ((iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx) instanceof Function
|
|
1514
1449
|
? iconButtonProps.sx(theme)
|
|
1515
1450
|
: iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx))), title: undefined }),
|
|
1516
|
-
|
|
1517
|
-
anchorEl && (
|
|
1451
|
+
React.createElement(MoreVertIcon, null))),
|
|
1452
|
+
anchorEl && (React.createElement(MRT_ColumnActionMenu, { anchorEl: anchorEl, header: header, setAnchorEl: setAnchorEl, table: table }))));
|
|
1518
1453
|
};
|
|
1519
1454
|
|
|
1520
1455
|
const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
|
|
@@ -1570,7 +1505,7 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
|
|
|
1570
1505
|
? ((_a = column.getFilterValue()) === null || _a === void 0 ? void 0 : _a[rangeFilterIndex]) || []
|
|
1571
1506
|
: (_b = column.getFilterValue()) !== null && _b !== void 0 ? _b : '';
|
|
1572
1507
|
});
|
|
1573
|
-
const handleChangeDebounced = React.useCallback(
|
|
1508
|
+
const handleChangeDebounced = React.useCallback(debounce((event) => {
|
|
1574
1509
|
const value = textFieldProps.type === 'date'
|
|
1575
1510
|
? event.target.valueAsDate
|
|
1576
1511
|
: textFieldProps.type === 'number'
|
|
@@ -1623,17 +1558,17 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
|
|
|
1623
1558
|
}
|
|
1624
1559
|
}, [column.getFilterValue()]);
|
|
1625
1560
|
if (columnDef.Filter) {
|
|
1626
|
-
return (
|
|
1561
|
+
return (React.createElement(React.Fragment, null, (_e = columnDef.Filter) === null || _e === void 0 ? void 0 : _e.call(columnDef, { column, header, rangeFilterIndex, table })));
|
|
1627
1562
|
}
|
|
1628
|
-
return (
|
|
1629
|
-
|
|
1563
|
+
return (React.createElement(React.Fragment, null,
|
|
1564
|
+
React.createElement(TextField, Object.assign({ fullWidth: true, inputProps: {
|
|
1630
1565
|
disabled: !!filterChipLabel,
|
|
1631
1566
|
sx: {
|
|
1632
1567
|
textOverflow: 'ellipsis',
|
|
1633
1568
|
width: filterChipLabel ? 0 : undefined,
|
|
1634
1569
|
},
|
|
1635
1570
|
title: filterPlaceholder,
|
|
1636
|
-
}, helperText: showChangeModeButton ? (
|
|
1571
|
+
}, helperText: showChangeModeButton ? (React.createElement("label", null, localization.filterMode.replace('{filterType}',
|
|
1637
1572
|
// @ts-ignore
|
|
1638
1573
|
localization[`filter${((_f = currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.charAt(0)) === null || _f === void 0 ? void 0 : _f.toUpperCase()) +
|
|
1639
1574
|
(currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.slice(1))}`]))) : null, FormHelperTextProps: {
|
|
@@ -1645,30 +1580,30 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
|
|
|
1645
1580
|
}, margin: "none", placeholder: filterChipLabel || isSelectFilter || isMultiSelectFilter
|
|
1646
1581
|
? undefined
|
|
1647
1582
|
: filterPlaceholder, onChange: handleChange, onClick: (e) => e.stopPropagation(), select: isSelectFilter || isMultiSelectFilter, value: filterValue, variant: "standard", InputProps: {
|
|
1648
|
-
startAdornment: showChangeModeButton ? (
|
|
1649
|
-
|
|
1650
|
-
|
|
1651
|
-
|
|
1652
|
-
|
|
1653
|
-
filterChipLabel && (
|
|
1654
|
-
endAdornment: !filterChipLabel && (
|
|
1655
|
-
|
|
1656
|
-
|
|
1657
|
-
|
|
1583
|
+
startAdornment: showChangeModeButton ? (React.createElement(InputAdornment, { position: "start" },
|
|
1584
|
+
React.createElement(Tooltip, { arrow: true, title: localization.changeFilterMode },
|
|
1585
|
+
React.createElement("span", null,
|
|
1586
|
+
React.createElement(IconButton, { "aria-label": localization.changeFilterMode, onClick: handleFilterMenuOpen, size: "small", sx: { height: '1.75rem', width: '1.75rem' } },
|
|
1587
|
+
React.createElement(FilterListIcon, null)))),
|
|
1588
|
+
filterChipLabel && (React.createElement(Chip, { onDelete: handleClearEmptyFilterChip, label: filterChipLabel })))) : null,
|
|
1589
|
+
endAdornment: !filterChipLabel && (React.createElement(InputAdornment, { position: "end" },
|
|
1590
|
+
React.createElement(Tooltip, { arrow: true, placement: "right", title: (_g = localization.clearFilter) !== null && _g !== void 0 ? _g : '' },
|
|
1591
|
+
React.createElement("span", null,
|
|
1592
|
+
React.createElement(IconButton, { "aria-label": localization.clearFilter, disabled: !(filterValue === null || filterValue === void 0 ? void 0 : filterValue.length), onClick: handleClear, size: "small", sx: {
|
|
1658
1593
|
height: '1.75rem',
|
|
1659
1594
|
width: '1.75rem',
|
|
1660
1595
|
} },
|
|
1661
|
-
|
|
1596
|
+
React.createElement(CloseIcon, null)))))),
|
|
1662
1597
|
}, SelectProps: {
|
|
1663
1598
|
displayEmpty: true,
|
|
1664
1599
|
multiple: isMultiSelectFilter,
|
|
1665
1600
|
renderValue: isMultiSelectFilter
|
|
1666
|
-
? (selected) => !(selected === null || selected === void 0 ? void 0 : selected.length) ? (
|
|
1601
|
+
? (selected) => !(selected === null || selected === void 0 ? void 0 : selected.length) ? (React.createElement(Box, { sx: { opacity: 0.5 } }, filterPlaceholder)) : (React.createElement(Box, { sx: { display: 'flex', flexWrap: 'wrap', gap: '2px' } }, selected === null || selected === void 0 ? void 0 : selected.map((value) => {
|
|
1667
1602
|
var _a;
|
|
1668
1603
|
const selectedValue = (_a = columnDef.filterSelectOptions) === null || _a === void 0 ? void 0 : _a.find((option) => option instanceof Object
|
|
1669
1604
|
? option.value === value
|
|
1670
1605
|
: option === value);
|
|
1671
|
-
return (
|
|
1606
|
+
return (React.createElement(Chip, { key: value, label: selectedValue instanceof Object
|
|
1672
1607
|
? selectedValue.text
|
|
1673
1608
|
: selectedValue }));
|
|
1674
1609
|
})))
|
|
@@ -1688,8 +1623,8 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
|
|
|
1688
1623
|
} }, ((textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.sx) instanceof Function
|
|
1689
1624
|
? textFieldProps.sx(theme)
|
|
1690
1625
|
: textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.sx))) }),
|
|
1691
|
-
(isSelectFilter || isMultiSelectFilter) && (
|
|
1692
|
-
|
|
1626
|
+
(isSelectFilter || isMultiSelectFilter) && (React.createElement(MenuItem, { divider: true, disabled: true, hidden: true, value: "" },
|
|
1627
|
+
React.createElement(Box, { sx: { opacity: 0.5 } }, filterPlaceholder))), (_h = columnDef === null || columnDef === void 0 ? void 0 : columnDef.filterSelectOptions) === null || _h === void 0 ? void 0 :
|
|
1693
1628
|
_h.map((option) => {
|
|
1694
1629
|
var _a;
|
|
1695
1630
|
let value;
|
|
@@ -1702,22 +1637,22 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
|
|
|
1702
1637
|
value = option.value;
|
|
1703
1638
|
text = option.text;
|
|
1704
1639
|
}
|
|
1705
|
-
return (
|
|
1640
|
+
return (React.createElement(MenuItem, { key: value, sx: {
|
|
1706
1641
|
display: 'flex',
|
|
1707
1642
|
m: 0,
|
|
1708
1643
|
alignItems: 'center',
|
|
1709
1644
|
gap: '0.5rem',
|
|
1710
1645
|
}, value: value },
|
|
1711
|
-
isMultiSelectFilter && (
|
|
1646
|
+
isMultiSelectFilter && (React.createElement(Checkbox, { checked: ((_a = column.getFilterValue()) !== null && _a !== void 0 ? _a : []).includes(value), sx: { mr: '0.5rem' } })),
|
|
1712
1647
|
text));
|
|
1713
1648
|
})),
|
|
1714
|
-
|
|
1649
|
+
React.createElement(MRT_FilterOptionMenu, { anchorEl: anchorEl, header: header, setAnchorEl: setAnchorEl, table: table, setFilterValue: setFilterValue })));
|
|
1715
1650
|
};
|
|
1716
1651
|
|
|
1717
1652
|
const MRT_FilterRangeFields = ({ header, table }) => {
|
|
1718
|
-
return (
|
|
1719
|
-
|
|
1720
|
-
|
|
1653
|
+
return (React.createElement(Box, { sx: { display: 'grid', gridTemplateColumns: '6fr 6fr', gap: '1rem' } },
|
|
1654
|
+
React.createElement(MRT_FilterTextField, { header: header, rangeFilterIndex: 0, table: table }),
|
|
1655
|
+
React.createElement(MRT_FilterTextField, { header: header, rangeFilterIndex: 1, table: table })));
|
|
1721
1656
|
};
|
|
1722
1657
|
|
|
1723
1658
|
const MRT_FilterCheckbox = ({ column, table }) => {
|
|
@@ -1739,8 +1674,8 @@ const MRT_FilterCheckbox = ({ column, table }) => {
|
|
|
1739
1674
|
: columnDef.muiTableHeadCellFilterCheckboxProps;
|
|
1740
1675
|
const checkboxProps = Object.assign(Object.assign({}, mTableHeadCellFilterCheckboxProps), mcTableHeadCellFilterCheckboxProps);
|
|
1741
1676
|
const filterLabel = (_a = localization.filterByColumn) === null || _a === void 0 ? void 0 : _a.replace('{column}', columnDef.header);
|
|
1742
|
-
return (
|
|
1743
|
-
|
|
1677
|
+
return (React.createElement(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: (_b = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.title) !== null && _b !== void 0 ? _b : filterLabel },
|
|
1678
|
+
React.createElement(FormControlLabel, { control: React.createElement(Checkbox, Object.assign({ checked: column.getFilterValue() === 'true', indeterminate: column.getFilterValue() === undefined, color: column.getFilterValue() === undefined ? 'default' : 'primary', size: density === 'compact' ? 'small' : 'medium' }, checkboxProps, { onClick: (e) => {
|
|
1744
1679
|
var _a;
|
|
1745
1680
|
e.stopPropagation();
|
|
1746
1681
|
(_a = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.onClick) === null || _a === void 0 ? void 0 : _a.call(checkboxProps, e);
|
|
@@ -1762,8 +1697,8 @@ const MRT_TableHeadCellFilterContainer = ({ header, table, }) => {
|
|
|
1762
1697
|
const { showColumnFilters } = getState();
|
|
1763
1698
|
const { column } = header;
|
|
1764
1699
|
const { columnDef } = column;
|
|
1765
|
-
return (
|
|
1766
|
-
['between', 'betweenInclusive', 'inNumberRange'].includes(columnDef._filterFn) ? (
|
|
1700
|
+
return (React.createElement(Collapse, { in: showColumnFilters, mountOnEnter: true, unmountOnExit: true }, columnDef.filterVariant === 'checkbox' ? (React.createElement(MRT_FilterCheckbox, { column: column, table: table })) : columnDef.filterVariant === 'range' ||
|
|
1701
|
+
['between', 'betweenInclusive', 'inNumberRange'].includes(columnDef._filterFn) ? (React.createElement(MRT_FilterRangeFields, { header: header, table: table })) : (React.createElement(MRT_FilterTextField, { header: header, table: table }))));
|
|
1767
1702
|
};
|
|
1768
1703
|
|
|
1769
1704
|
const MRT_TableHeadCellFilterLabel = ({ header, table }) => {
|
|
@@ -1784,12 +1719,12 @@ const MRT_TableHeadCellFilterLabel = ({ header, table }) => {
|
|
|
1784
1719
|
? column.getFilterValue().join(`" ${isRangeFilter ? localization.and : localization.or} "`)
|
|
1785
1720
|
: column.getFilterValue()}"`)
|
|
1786
1721
|
.replace('" "', '');
|
|
1787
|
-
return (
|
|
1722
|
+
return (React.createElement(Grow, { unmountOnExit: true, in: (!!column.getFilterValue() && !isRangeFilter) ||
|
|
1788
1723
|
(isRangeFilter && // @ts-ignore
|
|
1789
1724
|
(!!((_b = column.getFilterValue()) === null || _b === void 0 ? void 0 : _b[0]) || !!((_c = column.getFilterValue()) === null || _c === void 0 ? void 0 : _c[1]))) },
|
|
1790
|
-
|
|
1791
|
-
|
|
1792
|
-
|
|
1725
|
+
React.createElement(Box, { component: "span", sx: { flex: '0 0' } },
|
|
1726
|
+
React.createElement(Tooltip, { arrow: true, placement: "top", title: filterTooltip },
|
|
1727
|
+
React.createElement(IconButton, { disableRipple: true, onClick: (event) => {
|
|
1793
1728
|
event.stopPropagation();
|
|
1794
1729
|
}, size: "small", sx: {
|
|
1795
1730
|
height: '12px',
|
|
@@ -1799,7 +1734,7 @@ const MRT_TableHeadCellFilterLabel = ({ header, table }) => {
|
|
|
1799
1734
|
transform: 'scale(0.66)',
|
|
1800
1735
|
width: '12px',
|
|
1801
1736
|
} },
|
|
1802
|
-
|
|
1737
|
+
React.createElement(FilterAltIcon, null))))));
|
|
1803
1738
|
};
|
|
1804
1739
|
|
|
1805
1740
|
const MRT_TableHeadCellGrabHandle = ({ column, table, tableHeadCellRef, }) => {
|
|
@@ -1833,7 +1768,7 @@ const MRT_TableHeadCellGrabHandle = ({ column, table, tableHeadCellRef, }) => {
|
|
|
1833
1768
|
setDraggingColumn(null);
|
|
1834
1769
|
setHoveredColumn(null);
|
|
1835
1770
|
};
|
|
1836
|
-
return (
|
|
1771
|
+
return (React.createElement(MRT_GrabHandleButton, { iconButtonProps: iconButtonProps, onDragStart: handleDragStart, onDragEnd: handleDragEnd, table: table }));
|
|
1837
1772
|
};
|
|
1838
1773
|
|
|
1839
1774
|
const MRT_TableHeadCellResizeHandle = ({ header, table }) => {
|
|
@@ -1843,7 +1778,7 @@ const MRT_TableHeadCellResizeHandle = ({ header, table }) => {
|
|
|
1843
1778
|
const { column } = header;
|
|
1844
1779
|
const { columnDef } = column;
|
|
1845
1780
|
const { columnDefType } = columnDef;
|
|
1846
|
-
return (
|
|
1781
|
+
return (React.createElement(Box, { onDoubleClick: () => column.resetSize(), onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), sx: (theme) => ({
|
|
1847
1782
|
cursor: 'col-resize',
|
|
1848
1783
|
mr: density === 'compact' ? '-0.5rem' : '-1rem',
|
|
1849
1784
|
position: 'absolute',
|
|
@@ -1859,7 +1794,7 @@ const MRT_TableHeadCellResizeHandle = ({ header, table }) => {
|
|
|
1859
1794
|
(columnResizeMode === 'onChange' ? 16 : 1)}px)`
|
|
1860
1795
|
: undefined,
|
|
1861
1796
|
} },
|
|
1862
|
-
|
|
1797
|
+
React.createElement(Divider, { flexItem: true, orientation: "vertical", sx: {
|
|
1863
1798
|
borderRadius: '2px',
|
|
1864
1799
|
borderWidth: '2px',
|
|
1865
1800
|
height: showColumnFilters && columnDefType === 'data' ? '3.5rem' : '1.5rem',
|
|
@@ -1881,8 +1816,8 @@ const MRT_TableHeadCellSortLabel = ({ header, table, tableCellProps, }) => {
|
|
|
1881
1816
|
? localization.sortedByColumnDesc.replace('{column}', columnDef.header)
|
|
1882
1817
|
: localization.sortedByColumnAsc.replace('{column}', columnDef.header)
|
|
1883
1818
|
: localization.unsorted;
|
|
1884
|
-
return (
|
|
1885
|
-
|
|
1819
|
+
return (React.createElement(Tooltip, { arrow: true, placement: "top", title: sortTooltip },
|
|
1820
|
+
React.createElement(TableSortLabel, { "aria-label": sortTooltip, active: !!column.getIsSorted(), direction: column.getIsSorted()
|
|
1886
1821
|
? column.getIsSorted()
|
|
1887
1822
|
: undefined, sx: {
|
|
1888
1823
|
flex: '0 0',
|
|
@@ -1954,7 +1889,7 @@ const MRT_TableHeadCell = ({ header, table }) => {
|
|
|
1954
1889
|
table,
|
|
1955
1890
|
})
|
|
1956
1891
|
: (_b = columnDef === null || columnDef === void 0 ? void 0 : columnDef.Header) !== null && _b !== void 0 ? _b : columnDef.header;
|
|
1957
|
-
return (
|
|
1892
|
+
return (React.createElement(TableCell, Object.assign({ align: columnDefType === 'group' ? 'center' : 'left', colSpan: header.colSpan, onDragEnter: handleDragEnter, ref: (node) => {
|
|
1958
1893
|
if (node) {
|
|
1959
1894
|
tableHeadCellRefs.current[column.id] = node;
|
|
1960
1895
|
}
|
|
@@ -1985,7 +1920,7 @@ const MRT_TableHeadCell = ({ header, table }) => {
|
|
|
1985
1920
|
tableCellProps,
|
|
1986
1921
|
theme,
|
|
1987
1922
|
})), draggingBorders)) }),
|
|
1988
|
-
header.isPlaceholder ? null : (
|
|
1923
|
+
header.isPlaceholder ? null : (React.createElement(Box, { className: "Mui-TableHeadCell-Content", sx: {
|
|
1989
1924
|
alignItems: 'flex-start',
|
|
1990
1925
|
display: 'flex',
|
|
1991
1926
|
flexDirection: (tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.align) === 'right' ? 'row-reverse' : 'row',
|
|
@@ -1997,7 +1932,7 @@ const MRT_TableHeadCell = ({ header, table }) => {
|
|
|
1997
1932
|
position: 'relative',
|
|
1998
1933
|
width: '100%',
|
|
1999
1934
|
} },
|
|
2000
|
-
|
|
1935
|
+
React.createElement(Box, { className: "Mui-TableHeadCell-Content-Labels", onClick: column.getToggleSortingHandler(), sx: {
|
|
2001
1936
|
alignItems: 'center',
|
|
2002
1937
|
cursor: column.getCanSort() && columnDefType !== 'group'
|
|
2003
1938
|
? 'pointer'
|
|
@@ -2009,20 +1944,20 @@ const MRT_TableHeadCell = ({ header, table }) => {
|
|
|
2009
1944
|
? `${headerPL}rem`
|
|
2010
1945
|
: undefined,
|
|
2011
1946
|
} },
|
|
2012
|
-
|
|
1947
|
+
React.createElement(Box, { className: "Mui-TableHeadCell-Content-Wrapper", sx: {
|
|
2013
1948
|
overflow: columnDefType === 'data' ? 'hidden' : undefined,
|
|
2014
1949
|
textOverflow: 'ellipsis',
|
|
2015
1950
|
whiteSpace: ((_d = (_c = columnDef.header) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0) < 20 ? 'nowrap' : 'normal',
|
|
2016
1951
|
}, title: columnDefType === 'data' ? columnDef.header : undefined }, headerElement),
|
|
2017
|
-
column.getCanSort() && (
|
|
2018
|
-
column.getCanFilter() && (
|
|
2019
|
-
columnDefType !== 'group' && (
|
|
2020
|
-
showDragHandle && (
|
|
1952
|
+
column.getCanSort() && (React.createElement(MRT_TableHeadCellSortLabel, { header: header, table: table, tableCellProps: tableCellProps })),
|
|
1953
|
+
column.getCanFilter() && (React.createElement(MRT_TableHeadCellFilterLabel, { header: header, table: table }))),
|
|
1954
|
+
columnDefType !== 'group' && (React.createElement(Box, { className: "Mui-TableHeadCell-Content-Actions", sx: { whiteSpace: 'nowrap' } },
|
|
1955
|
+
showDragHandle && (React.createElement(MRT_TableHeadCellGrabHandle, { column: column, table: table, tableHeadCellRef: {
|
|
2021
1956
|
current: tableHeadCellRefs.current[column.id],
|
|
2022
1957
|
} })),
|
|
2023
|
-
showColumnActions && (
|
|
2024
|
-
column.getCanResize() && (
|
|
2025
|
-
column.getCanFilter() && (
|
|
1958
|
+
showColumnActions && (React.createElement(MRT_TableHeadCellColumnActionsButton, { header: header, table: table })))),
|
|
1959
|
+
column.getCanResize() && (React.createElement(MRT_TableHeadCellResizeHandle, { header: header, table: table })))),
|
|
1960
|
+
column.getCanFilter() && (React.createElement(MRT_TableHeadCellFilterContainer, { header: header, table: table }))));
|
|
2026
1961
|
};
|
|
2027
1962
|
|
|
2028
1963
|
const MRT_TableHeadRow = ({ headerGroup, table }) => {
|
|
@@ -2030,9 +1965,9 @@ const MRT_TableHeadRow = ({ headerGroup, table }) => {
|
|
|
2030
1965
|
const tableRowProps = muiTableHeadRowProps instanceof Function
|
|
2031
1966
|
? muiTableHeadRowProps({ headerGroup, table })
|
|
2032
1967
|
: muiTableHeadRowProps;
|
|
2033
|
-
return (
|
|
1968
|
+
return (React.createElement(TableRow, Object.assign({}, tableRowProps, { sx: (theme) => (Object.assign({ boxShadow: `4px 0 8px ${styles.alpha(theme.palette.common.black, 0.1)}`, backgroundColor: styles.lighten(theme.palette.background.default, 0.04) }, ((tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx) instanceof Function
|
|
2034
1969
|
? tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx(theme)
|
|
2035
|
-
: tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx))) }), headerGroup.headers.map((header, index) => (
|
|
1970
|
+
: tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx))) }), headerGroup.headers.map((header, index) => (React.createElement(MRT_TableHeadCell, { header: header, key: header.id || index, table: table })))));
|
|
2036
1971
|
};
|
|
2037
1972
|
|
|
2038
1973
|
const MRT_TableHead = ({ table }) => {
|
|
@@ -2042,9 +1977,9 @@ const MRT_TableHead = ({ table }) => {
|
|
|
2042
1977
|
? muiTableHeadProps({ table })
|
|
2043
1978
|
: muiTableHeadProps;
|
|
2044
1979
|
const stickyHeader = enableStickyHeader || enableRowVirtualization || isFullScreen;
|
|
2045
|
-
return (
|
|
1980
|
+
return (React.createElement(TableHead, Object.assign({}, tableHeadProps, { sx: (theme) => (Object.assign({ opacity: 0.97, position: stickyHeader ? 'sticky' : undefined, zIndex: stickyHeader ? 2 : undefined }, ((tableHeadProps === null || tableHeadProps === void 0 ? void 0 : tableHeadProps.sx) instanceof Function
|
|
2046
1981
|
? tableHeadProps === null || tableHeadProps === void 0 ? void 0 : tableHeadProps.sx(theme)
|
|
2047
|
-
: tableHeadProps === null || tableHeadProps === void 0 ? void 0 : tableHeadProps.sx))) }), getHeaderGroups().map((headerGroup) => (
|
|
1982
|
+
: tableHeadProps === null || tableHeadProps === void 0 ? void 0 : tableHeadProps.sx))) }), getHeaderGroups().map((headerGroup) => (React.createElement(MRT_TableHeadRow, { headerGroup: headerGroup, key: headerGroup.id, table: table })))));
|
|
2048
1983
|
};
|
|
2049
1984
|
|
|
2050
1985
|
const MRT_EditCellTextField = ({ cell, showLabel, table, }) => {
|
|
@@ -2093,9 +2028,9 @@ const MRT_EditCellTextField = ({ cell, showLabel, table, }) => {
|
|
|
2093
2028
|
}
|
|
2094
2029
|
};
|
|
2095
2030
|
if (columnDef.Edit) {
|
|
2096
|
-
return
|
|
2031
|
+
return React.createElement(React.Fragment, null, (_a = columnDef.Edit) === null || _a === void 0 ? void 0 : _a.call(columnDef, { cell, column, row, table }));
|
|
2097
2032
|
}
|
|
2098
|
-
return (
|
|
2033
|
+
return (React.createElement(TextField, Object.assign({ disabled: columnDef.enableEditing === false, fullWidth: true, inputRef: (inputRef) => {
|
|
2099
2034
|
if (inputRef) {
|
|
2100
2035
|
editInputRefs.current[column.id] = inputRef;
|
|
2101
2036
|
if (textFieldProps.inputRef) {
|
|
@@ -2133,8 +2068,8 @@ const MRT_CopyButton = ({ cell, children, table, }) => {
|
|
|
2133
2068
|
})
|
|
2134
2069
|
: columnDef.muiTableBodyCellCopyButtonProps;
|
|
2135
2070
|
const buttonProps = Object.assign(Object.assign({}, mTableBodyCellCopyButtonProps), mcTableBodyCellCopyButtonProps);
|
|
2136
|
-
return (
|
|
2137
|
-
|
|
2071
|
+
return (React.createElement(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: (_a = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.title) !== null && _a !== void 0 ? _a : (copied ? localization.copiedToClipboard : localization.clickToCopy) },
|
|
2072
|
+
React.createElement(Button, Object.assign({ onClick: (e) => handleCopy(e, cell.getValue()), size: "small", type: "button", variant: "text" }, buttonProps, { sx: (theme) => (Object.assign({ backgroundColor: 'transparent', border: 'none', color: 'inherit', cursor: 'copy', fontFamily: 'inherit', fontSize: 'inherit', letterSpacing: 'inherit', m: '-0.25rem', minWidth: 'unset', textAlign: 'inherit', textTransform: 'inherit' }, ((buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.sx) instanceof Function
|
|
2138
2073
|
? buttonProps.sx(theme)
|
|
2139
2074
|
: buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.sx))), title: undefined }), children)));
|
|
2140
2075
|
};
|
|
@@ -2157,14 +2092,14 @@ const MRT_TableBodyRowGrabHandle = ({ cell, rowRef, table, }) => {
|
|
|
2157
2092
|
table.setDraggingRow(null);
|
|
2158
2093
|
table.setHoveredRow(null);
|
|
2159
2094
|
};
|
|
2160
|
-
return (
|
|
2095
|
+
return (React.createElement(MRT_GrabHandleButton, { iconButtonProps: iconButtonProps, onDragStart: handleDragStart, onDragEnd: handleDragEnd, table: table }));
|
|
2161
2096
|
};
|
|
2162
2097
|
|
|
2163
2098
|
const MRT_TableBodyCellValue = ({ cell, table }) => {
|
|
2164
2099
|
var _a, _b;
|
|
2165
2100
|
const { column, row } = cell;
|
|
2166
2101
|
const { columnDef } = column;
|
|
2167
|
-
return (
|
|
2102
|
+
return (React.createElement(React.Fragment, null, cell.getIsAggregated() && columnDef.AggregatedCell
|
|
2168
2103
|
? columnDef.AggregatedCell({
|
|
2169
2104
|
cell,
|
|
2170
2105
|
column,
|
|
@@ -2226,7 +2161,8 @@ const MRT_TableBodyCell = ({ cell, enableHover, numRows, rowIndex, rowRef, table
|
|
|
2226
2161
|
editingMode !== 'modal' &&
|
|
2227
2162
|
(editingMode === 'table' ||
|
|
2228
2163
|
(editingRow === null || editingRow === void 0 ? void 0 : editingRow.id) === row.id ||
|
|
2229
|
-
(editingCell === null || editingCell === void 0 ? void 0 : editingCell.id) === cell.id)
|
|
2164
|
+
(editingCell === null || editingCell === void 0 ? void 0 : editingCell.id) === cell.id) &&
|
|
2165
|
+
!row.getIsGrouped();
|
|
2230
2166
|
const handleDoubleClick = (event) => {
|
|
2231
2167
|
var _a;
|
|
2232
2168
|
(_a = tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.onDoubleClick) === null || _a === void 0 ? void 0 : _a.call(tableCellProps, event);
|
|
@@ -2253,7 +2189,7 @@ const MRT_TableBodyCell = ({ cell, enableHover, numRows, rowIndex, rowRef, table
|
|
|
2253
2189
|
setHoveredColumn(columnDef.enableColumnOrdering !== false ? column : null);
|
|
2254
2190
|
}
|
|
2255
2191
|
};
|
|
2256
|
-
return (
|
|
2192
|
+
return (React.createElement(TableCell, Object.assign({}, tableCellProps, { onDragEnter: handleDragEnter, onDoubleClick: handleDoubleClick, sx: (theme) => (Object.assign(Object.assign({ cursor: isEditable && editingMode === 'cell' ? 'pointer' : 'inherit', overflow: 'hidden', p: density === 'compact'
|
|
2257
2193
|
? columnDefType === 'display'
|
|
2258
2194
|
? '0 0.5rem'
|
|
2259
2195
|
: '0.5rem'
|
|
@@ -2280,15 +2216,15 @@ const MRT_TableBodyCell = ({ cell, enableHover, numRows, rowIndex, rowRef, table
|
|
|
2280
2216
|
: `${styles.darken(theme.palette.background.default, 0.1)} !important`
|
|
2281
2217
|
: undefined,
|
|
2282
2218
|
} }, getCommonCellStyles({ column, table, theme, tableCellProps })), draggingBorders)) }),
|
|
2283
|
-
|
|
2219
|
+
React.createElement(React.Fragment, null, cell.getIsPlaceholder() ? null : isLoading || showSkeletons ? (React.createElement(Skeleton, Object.assign({ animation: "wave", height: 20, width: skeletonWidth }, skeletonProps))) : enableRowNumbers &&
|
|
2284
2220
|
rowNumberMode === 'static' &&
|
|
2285
|
-
column.id === 'mrt-row-numbers' ? (rowIndex + 1) : column.id === 'mrt-row-drag' ? (
|
|
2221
|
+
column.id === 'mrt-row-numbers' ? (rowIndex + 1) : column.id === 'mrt-row-drag' ? (React.createElement(MRT_TableBodyRowGrabHandle, { cell: cell, rowRef: rowRef, table: table })) : columnDefType === 'display' &&
|
|
2286
2222
|
(column.id === 'mrt-row-select' ||
|
|
2287
2223
|
column.id === 'mrt-row-expand' ||
|
|
2288
|
-
!row.getIsGrouped()) ? ((_a = columnDef.Cell) === null || _a === void 0 ? void 0 : _a.call(columnDef, { cell, column, row, table })) : isEditing ? (
|
|
2289
|
-
columnDef.enableClickToCopy !== false ? (
|
|
2290
|
-
|
|
2291
|
-
cell.getIsGrouped() && !columnDef.GroupedCell && (
|
|
2224
|
+
!row.getIsGrouped()) ? ((_a = columnDef.Cell) === null || _a === void 0 ? void 0 : _a.call(columnDef, { cell, column, row, table })) : isEditing ? (React.createElement(MRT_EditCellTextField, { cell: cell, table: table })) : (enableClickToCopy || columnDef.enableClickToCopy) &&
|
|
2225
|
+
columnDef.enableClickToCopy !== false ? (React.createElement(MRT_CopyButton, { cell: cell, table: table },
|
|
2226
|
+
React.createElement(MRT_TableBodyCellValue, { cell: cell, table: table }))) : (React.createElement(MRT_TableBodyCellValue, { cell: cell, table: table }))),
|
|
2227
|
+
cell.getIsGrouped() && !columnDef.GroupedCell && (React.createElement(React.Fragment, null,
|
|
2292
2228
|
" (", (_b = row.subRows) === null || _b === void 0 ? void 0 :
|
|
2293
2229
|
_b.length,
|
|
2294
2230
|
")"))));
|
|
@@ -2304,10 +2240,10 @@ const MRT_TableDetailPanel = ({ row, table }) => {
|
|
|
2304
2240
|
const tableCellProps = muiTableDetailPanelProps instanceof Function
|
|
2305
2241
|
? muiTableDetailPanelProps({ row, table })
|
|
2306
2242
|
: muiTableDetailPanelProps;
|
|
2307
|
-
return (
|
|
2308
|
-
|
|
2243
|
+
return (React.createElement(TableRow, Object.assign({}, tableRowProps),
|
|
2244
|
+
React.createElement(TableCell, Object.assign({ colSpan: getVisibleLeafColumns().length }, tableCellProps, { sx: (theme) => (Object.assign({ borderBottom: !row.getIsExpanded() ? 'none' : undefined, pb: row.getIsExpanded() ? '1rem' : 0, pt: row.getIsExpanded() ? '1rem' : 0, transition: 'all 150ms ease-in-out', width: `${table.getTotalSize()}px` }, ((tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx) instanceof Function
|
|
2309
2245
|
? tableCellProps.sx(theme)
|
|
2310
|
-
: tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx))) }), renderDetailPanel && (
|
|
2246
|
+
: tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx))) }), renderDetailPanel && (React.createElement(Collapse, { in: row.getIsExpanded(), mountOnEnter: true, unmountOnExit: true }, !isLoading && renderDetailPanel({ row, table }))))));
|
|
2311
2247
|
};
|
|
2312
2248
|
|
|
2313
2249
|
const MRT_TableBodyRow = ({ numRows, row, rowIndex, table, virtualRow, }) => {
|
|
@@ -2333,8 +2269,8 @@ const MRT_TableBodyRow = ({ numRows, row, rowIndex, table, virtualRow, }) => {
|
|
|
2333
2269
|
border: draggingBorder,
|
|
2334
2270
|
}
|
|
2335
2271
|
: undefined;
|
|
2336
|
-
return (
|
|
2337
|
-
|
|
2272
|
+
return (React.createElement(React.Fragment, null,
|
|
2273
|
+
React.createElement(TableRow, Object.assign({ onDragEnter: handleDragEnter, hover: true, selected: row.getIsSelected(), ref: (node) => {
|
|
2338
2274
|
rowRef.current = node;
|
|
2339
2275
|
if (virtualRow === null || virtualRow === void 0 ? void 0 : virtualRow.measureRef) {
|
|
2340
2276
|
virtualRow.measureRef = node;
|
|
@@ -2362,9 +2298,9 @@ const MRT_TableBodyRow = ({ numRows, row, rowIndex, table, virtualRow, }) => {
|
|
|
2362
2298
|
!draggingColumn &&
|
|
2363
2299
|
!draggingRow &&
|
|
2364
2300
|
(editingCell === null || editingCell === void 0 ? void 0 : editingCell.id) !== cell.id &&
|
|
2365
|
-
(editingRow === null || editingRow === void 0 ? void 0 : editingRow.id) !== row.id ? (
|
|
2301
|
+
(editingRow === null || editingRow === void 0 ? void 0 : editingRow.id) !== row.id ? (React.createElement(Memo_MRT_TableBodyCell, Object.assign({}, props))) : (React.createElement(MRT_TableBodyCell, Object.assign({}, props)));
|
|
2366
2302
|
})),
|
|
2367
|
-
renderDetailPanel && !row.getIsGrouped() && (
|
|
2303
|
+
renderDetailPanel && !row.getIsGrouped() && (React.createElement(MRT_TableDetailPanel, { row: row, table: table }))));
|
|
2368
2304
|
};
|
|
2369
2305
|
const Memo_MRT_TableBodyRow = React.memo(MRT_TableBodyRow, (prev, next) => prev.row === next.row);
|
|
2370
2306
|
|
|
@@ -2436,9 +2372,9 @@ const MRT_TableBody = ({ table }) => {
|
|
|
2436
2372
|
// ? virtualizer.getTotalSize() - virtualRows[virtualRows.length - 1].end
|
|
2437
2373
|
// : 0;
|
|
2438
2374
|
// }
|
|
2439
|
-
return (
|
|
2440
|
-
|
|
2441
|
-
|
|
2375
|
+
return (React.createElement(TableBody, Object.assign({}, tableBodyProps), !rows.length ? (React.createElement("tr", null,
|
|
2376
|
+
React.createElement("td", { colSpan: table.getVisibleLeafColumns().length },
|
|
2377
|
+
React.createElement(Typography, { sx: {
|
|
2442
2378
|
color: 'text.secondary',
|
|
2443
2379
|
fontStyle: 'italic',
|
|
2444
2380
|
maxWidth: `min(100vw, ${(_a = tablePaperRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth}px)`,
|
|
@@ -2447,9 +2383,9 @@ const MRT_TableBody = ({ table }) => {
|
|
|
2447
2383
|
width: '100%',
|
|
2448
2384
|
} }, globalFilter || columnFilters.length
|
|
2449
2385
|
? localization.noResultsFound
|
|
2450
|
-
: localization.noRecordsToDisplay)))) : (
|
|
2451
|
-
enableRowVirtualization && paddingTop > 0 && (
|
|
2452
|
-
|
|
2386
|
+
: localization.noRecordsToDisplay)))) : (React.createElement(React.Fragment, null,
|
|
2387
|
+
enableRowVirtualization && paddingTop > 0 && (React.createElement("tr", null,
|
|
2388
|
+
React.createElement("td", { style: { height: `${paddingTop}px` } }))),
|
|
2453
2389
|
(enableRowVirtualization ? virtualRows : rows).map((rowOrVirtualRow, rowIndex) => {
|
|
2454
2390
|
const row = enableRowVirtualization
|
|
2455
2391
|
? rows[rowOrVirtualRow.index]
|
|
@@ -2464,10 +2400,10 @@ const MRT_TableBody = ({ table }) => {
|
|
|
2464
2400
|
table,
|
|
2465
2401
|
virtualRow: enableRowVirtualization ? rowOrVirtualRow : null,
|
|
2466
2402
|
};
|
|
2467
|
-
return memoMode === 'rows' ? (
|
|
2403
|
+
return memoMode === 'rows' ? (React.createElement(Memo_MRT_TableBodyRow, Object.assign({}, props))) : (React.createElement(MRT_TableBodyRow, Object.assign({}, props)));
|
|
2468
2404
|
}),
|
|
2469
|
-
enableRowVirtualization && paddingBottom > 0 && (
|
|
2470
|
-
|
|
2405
|
+
enableRowVirtualization && paddingBottom > 0 && (React.createElement("tr", null,
|
|
2406
|
+
React.createElement("td", { style: { height: `${paddingBottom}px` } })))))));
|
|
2471
2407
|
};
|
|
2472
2408
|
const Memo_MRT_TableBody = React.memo(MRT_TableBody, (prev, next) => prev.table.options.data === next.table.options.data);
|
|
2473
2409
|
|
|
@@ -2485,12 +2421,12 @@ const MRT_TableFooterCell = ({ footer, table }) => {
|
|
|
2485
2421
|
? columnDef.muiTableFooterCellProps({ column, table })
|
|
2486
2422
|
: columnDef.muiTableFooterCellProps;
|
|
2487
2423
|
const tableCellProps = Object.assign(Object.assign({}, mTableFooterCellProps), mcTableFooterCellProps);
|
|
2488
|
-
return (
|
|
2424
|
+
return (React.createElement(TableCell, Object.assign({ align: columnDefType === 'group' ? 'center' : 'left', colSpan: footer.colSpan, variant: "head" }, tableCellProps, { sx: (theme) => (Object.assign({ fontWeight: 'bold', p: density === 'compact'
|
|
2489
2425
|
? '0.5rem'
|
|
2490
2426
|
: density === 'comfortable'
|
|
2491
2427
|
? '1rem'
|
|
2492
2428
|
: '1.5rem', verticalAlign: 'top', zIndex: column.getIsPinned() && columnDefType !== 'group' ? 2 : 1 }, getCommonCellStyles({ column, table, theme, tableCellProps }))) }),
|
|
2493
|
-
|
|
2429
|
+
React.createElement(React.Fragment, null, footer.isPlaceholder
|
|
2494
2430
|
? null
|
|
2495
2431
|
: (_c = (_b = (columnDef.Footer instanceof Function
|
|
2496
2432
|
? (_a = columnDef.Footer) === null || _a === void 0 ? void 0 : _a.call(columnDef, {
|
|
@@ -2512,7 +2448,7 @@ const MRT_TableFooterRow = ({ footerGroup, table }) => {
|
|
|
2512
2448
|
const tableRowProps = muiTableFooterRowProps instanceof Function
|
|
2513
2449
|
? muiTableFooterRowProps({ footerGroup, table })
|
|
2514
2450
|
: muiTableFooterRowProps;
|
|
2515
|
-
return (
|
|
2451
|
+
return (React.createElement(TableRow, Object.assign({}, tableRowProps), footerGroup.headers.map((footer) => (React.createElement(MRT_TableFooterCell, { footer: footer, key: footer.id, table: table })))));
|
|
2516
2452
|
};
|
|
2517
2453
|
|
|
2518
2454
|
const MRT_TableFooter = ({ table }) => {
|
|
@@ -2522,13 +2458,13 @@ const MRT_TableFooter = ({ table }) => {
|
|
|
2522
2458
|
? muiTableFooterProps({ table })
|
|
2523
2459
|
: muiTableFooterProps;
|
|
2524
2460
|
const stickFooter = (isFullScreen || enableStickyFooter) && enableStickyFooter !== false;
|
|
2525
|
-
return (
|
|
2461
|
+
return (React.createElement(TableFooter, Object.assign({}, tableFooterProps, { sx: (theme) => (Object.assign({ backgroundColor: styles.lighten(theme.palette.background.default, 0.06), bottom: stickFooter ? 0 : undefined, opacity: stickFooter ? 0.97 : undefined, outline: stickFooter
|
|
2526
2462
|
? theme.palette.mode === 'light'
|
|
2527
2463
|
? `1px solid ${theme.palette.grey[300]}`
|
|
2528
2464
|
: `1px solid ${theme.palette.grey[700]}`
|
|
2529
2465
|
: undefined, position: stickFooter ? 'sticky' : undefined }, ((tableFooterProps === null || tableFooterProps === void 0 ? void 0 : tableFooterProps.sx) instanceof Function
|
|
2530
2466
|
? tableFooterProps === null || tableFooterProps === void 0 ? void 0 : tableFooterProps.sx(theme)
|
|
2531
|
-
: tableFooterProps === null || tableFooterProps === void 0 ? void 0 : tableFooterProps.sx))) }), getFooterGroups().map((footerGroup) => (
|
|
2467
|
+
: tableFooterProps === null || tableFooterProps === void 0 ? void 0 : tableFooterProps.sx))) }), getFooterGroups().map((footerGroup) => (React.createElement(MRT_TableFooterRow, { footerGroup: footerGroup, key: footerGroup.id, table: table })))));
|
|
2532
2468
|
};
|
|
2533
2469
|
|
|
2534
2470
|
const MRT_Table = ({ table }) => {
|
|
@@ -2537,12 +2473,12 @@ const MRT_Table = ({ table }) => {
|
|
|
2537
2473
|
const tableProps = muiTableProps instanceof Function
|
|
2538
2474
|
? muiTableProps({ table })
|
|
2539
2475
|
: muiTableProps;
|
|
2540
|
-
return (
|
|
2476
|
+
return (React.createElement(Table, Object.assign({ stickyHeader: enableStickyHeader || enableRowVirtualization || isFullScreen }, tableProps, { sx: (theme) => (Object.assign({ tableLayout: enableColumnResizing || enableRowVirtualization ? 'fixed' : 'auto' }, ((tableProps === null || tableProps === void 0 ? void 0 : tableProps.sx) instanceof Function
|
|
2541
2477
|
? tableProps.sx(theme)
|
|
2542
2478
|
: tableProps === null || tableProps === void 0 ? void 0 : tableProps.sx))) }),
|
|
2543
|
-
enableTableHead &&
|
|
2544
|
-
memoMode === 'table-body' ? (
|
|
2545
|
-
enableTableFooter &&
|
|
2479
|
+
enableTableHead && React.createElement(MRT_TableHead, { table: table }),
|
|
2480
|
+
memoMode === 'table-body' ? (React.createElement(Memo_MRT_TableBody, { table: table })) : (React.createElement(MRT_TableBody, { table: table })),
|
|
2481
|
+
enableTableFooter && React.createElement(MRT_TableFooter, { table: table })));
|
|
2546
2482
|
};
|
|
2547
2483
|
|
|
2548
2484
|
const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
|
|
@@ -2563,7 +2499,7 @@ const MRT_TableContainer = ({ table }) => {
|
|
|
2563
2499
|
: 0;
|
|
2564
2500
|
setTotalToolbarHeight(topToolbarHeight + bottomToolbarHeight);
|
|
2565
2501
|
});
|
|
2566
|
-
return (
|
|
2502
|
+
return (React.createElement(TableContainer, Object.assign({}, tableContainerProps, { ref: (ref) => {
|
|
2567
2503
|
tableContainerRef.current = ref;
|
|
2568
2504
|
if (tableContainerProps === null || tableContainerProps === void 0 ? void 0 : tableContainerProps.ref) {
|
|
2569
2505
|
//@ts-ignore
|
|
@@ -2576,7 +2512,7 @@ const MRT_TableContainer = ({ table }) => {
|
|
|
2576
2512
|
: tableContainerProps === null || tableContainerProps === void 0 ? void 0 : tableContainerProps.sx))), style: Object.assign({ maxHeight: isFullScreen
|
|
2577
2513
|
? `calc(100vh - ${totalToolbarHeight}px)`
|
|
2578
2514
|
: undefined }, tableContainerProps === null || tableContainerProps === void 0 ? void 0 : tableContainerProps.style) }),
|
|
2579
|
-
|
|
2515
|
+
React.createElement(MRT_Table, { table: table })));
|
|
2580
2516
|
};
|
|
2581
2517
|
|
|
2582
2518
|
const MRT_TablePaper = ({ table }) => {
|
|
@@ -2585,7 +2521,7 @@ const MRT_TablePaper = ({ table }) => {
|
|
|
2585
2521
|
const tablePaperProps = muiTablePaperProps instanceof Function
|
|
2586
2522
|
? muiTablePaperProps({ table })
|
|
2587
2523
|
: muiTablePaperProps;
|
|
2588
|
-
return (
|
|
2524
|
+
return (React.createElement(Paper, Object.assign({ elevation: 2 }, tablePaperProps, { ref: (ref) => {
|
|
2589
2525
|
tablePaperRef.current = ref;
|
|
2590
2526
|
if (tablePaperProps === null || tablePaperProps === void 0 ? void 0 : tablePaperProps.ref) {
|
|
2591
2527
|
//@ts-ignore
|
|
@@ -2606,21 +2542,21 @@ const MRT_TablePaper = ({ table }) => {
|
|
|
2606
2542
|
enableTopToolbar &&
|
|
2607
2543
|
(renderTopToolbar instanceof Function
|
|
2608
2544
|
? renderTopToolbar({ table })
|
|
2609
|
-
: renderTopToolbar !== null && renderTopToolbar !== void 0 ? renderTopToolbar :
|
|
2610
|
-
|
|
2545
|
+
: renderTopToolbar !== null && renderTopToolbar !== void 0 ? renderTopToolbar : React.createElement(MRT_TopToolbar, { table: table })),
|
|
2546
|
+
React.createElement(MRT_TableContainer, { table: table }),
|
|
2611
2547
|
enableBottomToolbar &&
|
|
2612
2548
|
(renderBottomToolbar instanceof Function
|
|
2613
2549
|
? renderBottomToolbar({ table })
|
|
2614
|
-
: renderBottomToolbar !== null && renderBottomToolbar !== void 0 ? renderBottomToolbar :
|
|
2550
|
+
: renderBottomToolbar !== null && renderBottomToolbar !== void 0 ? renderBottomToolbar : React.createElement(MRT_BottomToolbar, { table: table }))));
|
|
2615
2551
|
};
|
|
2616
2552
|
|
|
2617
2553
|
const MRT_EditRowModal = ({ open, row, table, }) => {
|
|
2618
2554
|
const { options: { localization }, } = table;
|
|
2619
|
-
return (
|
|
2620
|
-
|
|
2621
|
-
|
|
2622
|
-
|
|
2623
|
-
|
|
2555
|
+
return (React.createElement(Dialog, { open: open },
|
|
2556
|
+
React.createElement(DialogTitle, { textAlign: "center" }, localization.edit),
|
|
2557
|
+
React.createElement(DialogContent, null,
|
|
2558
|
+
React.createElement("form", { onSubmit: (e) => e.preventDefault() },
|
|
2559
|
+
React.createElement(Stack, { sx: {
|
|
2624
2560
|
gap: '1.5rem',
|
|
2625
2561
|
minWidth: { xs: '300px', sm: '360px', md: '400px' },
|
|
2626
2562
|
pt: '1rem',
|
|
@@ -2628,9 +2564,9 @@ const MRT_EditRowModal = ({ open, row, table, }) => {
|
|
|
2628
2564
|
} }, row
|
|
2629
2565
|
.getAllCells()
|
|
2630
2566
|
.filter((cell) => cell.column.columnDef.columnDefType === 'data')
|
|
2631
|
-
.map((cell) => (
|
|
2632
|
-
|
|
2633
|
-
|
|
2567
|
+
.map((cell) => (React.createElement(MRT_EditCellTextField, { cell: cell, key: cell.id, showLabel: true, table: table })))))),
|
|
2568
|
+
React.createElement(DialogActions, { sx: { p: '1.25rem' } },
|
|
2569
|
+
React.createElement(MRT_EditActionButtons, { row: row, table: table, variant: "text" }))));
|
|
2634
2570
|
};
|
|
2635
2571
|
|
|
2636
2572
|
const MRT_TableRoot = (props) => {
|
|
@@ -2677,13 +2613,13 @@ const MRT_TableRoot = (props) => {
|
|
|
2677
2613
|
var _a, _b, _c, _d, _e;
|
|
2678
2614
|
return [
|
|
2679
2615
|
columnOrder.includes('mrt-row-drag') && Object.assign(Object.assign(Object.assign({ header: props.localization.move, size: 60 }, props.defaultDisplayColumn), (_a = props.displayColumnDefOptions) === null || _a === void 0 ? void 0 : _a['mrt-row-drag']), { id: 'mrt-row-drag' }),
|
|
2680
|
-
columnOrder.includes('mrt-row-actions') && Object.assign(Object.assign(Object.assign({ Cell: ({ cell, row }) => (
|
|
2616
|
+
columnOrder.includes('mrt-row-actions') && Object.assign(Object.assign(Object.assign({ Cell: ({ cell, row }) => (React.createElement(MRT_ToggleRowActionMenuButton, { cell: cell, row: row, table: table })), header: props.localization.actions, size: 70 }, props.defaultDisplayColumn), (_b = props.displayColumnDefOptions) === null || _b === void 0 ? void 0 : _b['mrt-row-actions']), { id: 'mrt-row-actions' }),
|
|
2681
2617
|
columnOrder.includes('mrt-row-expand') &&
|
|
2682
|
-
showExpandColumn(props, grouping) && Object.assign(Object.assign(Object.assign({ Cell: ({ row }) => (
|
|
2683
|
-
? () =>
|
|
2618
|
+
showExpandColumn(props, grouping) && Object.assign(Object.assign(Object.assign({ Cell: ({ row }) => (React.createElement(MRT_ExpandButton, { row: row, table: table })), Header: props.enableExpandAll
|
|
2619
|
+
? () => React.createElement(MRT_ExpandAllButton, { table: table })
|
|
2684
2620
|
: null, header: props.localization.expand, size: 60 }, props.defaultDisplayColumn), (_c = props.displayColumnDefOptions) === null || _c === void 0 ? void 0 : _c['mrt-row-expand']), { id: 'mrt-row-expand' }),
|
|
2685
|
-
columnOrder.includes('mrt-row-select') && Object.assign(Object.assign(Object.assign({ Cell: ({ row }) => (
|
|
2686
|
-
? () =>
|
|
2621
|
+
columnOrder.includes('mrt-row-select') && Object.assign(Object.assign(Object.assign({ Cell: ({ row }) => (React.createElement(MRT_SelectCheckbox, { row: row, table: table })), Header: props.enableSelectAll && props.enableMultiRowSelection
|
|
2622
|
+
? () => React.createElement(MRT_SelectCheckbox, { selectAll: true, table: table })
|
|
2687
2623
|
: null, header: props.localization.select, size: 60 }, props.defaultDisplayColumn), (_d = props.displayColumnDefOptions) === null || _d === void 0 ? void 0 : _d['mrt-row-select']), { id: 'mrt-row-select' }),
|
|
2688
2624
|
columnOrder.includes('mrt-row-numbers') && Object.assign(Object.assign(Object.assign({ Cell: ({ row }) => row.index + 1, Header: () => props.localization.rowNumber, header: props.localization.rowNumbers, size: 60 }, props.defaultDisplayColumn), (_e = props.displayColumnDefOptions) === null || _e === void 0 ? void 0 : _e['mrt-row-numbers']), { id: 'mrt-row-numbers' }),
|
|
2689
2625
|
].filter(Boolean);
|
|
@@ -2712,6 +2648,7 @@ const MRT_TableRoot = (props) => {
|
|
|
2712
2648
|
const columnDefs = React.useMemo(() => {
|
|
2713
2649
|
var _a, _b, _c;
|
|
2714
2650
|
return prepareColumns({
|
|
2651
|
+
aggregationFns: props.aggregationFns,
|
|
2715
2652
|
columnDefs: [...displayColumns, ...props.columns],
|
|
2716
2653
|
columnFilterFns: (_b = (_a = props.state) === null || _a === void 0 ? void 0 : _a.columnFilterFns) !== null && _b !== void 0 ? _b : columnFilterFns,
|
|
2717
2654
|
defaultDisplayColumn: (_c = props.defaultDisplayColumn) !== null && _c !== void 0 ? _c : {},
|
|
@@ -2766,7 +2703,7 @@ const MRT_TableRoot = (props) => {
|
|
|
2766
2703
|
tableHeadCellRefs,
|
|
2767
2704
|
tablePaperRef,
|
|
2768
2705
|
topToolbarRef,
|
|
2769
|
-
}, setColumnFilterFns: (_x = props.
|
|
2706
|
+
}, setColumnFilterFns: (_x = props.onColumnFilterFnsChange) !== null && _x !== void 0 ? _x : setColumnFilterFns, setDensity: (_y = props.onDensityChange) !== null && _y !== void 0 ? _y : setDensity, setDraggingColumn: (_z = props.onDraggingColumnChange) !== null && _z !== void 0 ? _z : setDraggingColumn, setDraggingRow: (_0 = props.onDraggingRowChange) !== null && _0 !== void 0 ? _0 : setDraggingRow, setEditingCell: (_1 = props.onEditingCellChange) !== null && _1 !== void 0 ? _1 : setEditingCell, setEditingRow: (_2 = props.onEditingRowChange) !== null && _2 !== void 0 ? _2 : setEditingRow, setGlobalFilterFn: (_3 = props.onGlobalFilterFnChange) !== null && _3 !== void 0 ? _3 : setGlobalFilterFn, setHoveredColumn: (_4 = props.onHoveredColumnChange) !== null && _4 !== void 0 ? _4 : setHoveredColumn, setHoveredRow: (_5 = props.onHoveredRowChange) !== null && _5 !== void 0 ? _5 : setHoveredRow, setIsFullScreen: (_6 = props.onIsFullScreenChange) !== null && _6 !== void 0 ? _6 : setIsFullScreen, setShowAlertBanner: (_7 = props.onShowAlertBannerChange) !== null && _7 !== void 0 ? _7 : setShowAlertBanner, setShowFilters: (_8 = props.onShowFiltersChange) !== null && _8 !== void 0 ? _8 : setShowFilters, setShowGlobalFilter: (_9 = props.onShowGlobalFilterChange) !== null && _9 !== void 0 ? _9 : setShowGlobalFilter });
|
|
2770
2707
|
if (props.tableInstanceRef) {
|
|
2771
2708
|
props.tableInstanceRef.current = table;
|
|
2772
2709
|
}
|
|
@@ -2786,11 +2723,11 @@ const MRT_TableRoot = (props) => {
|
|
|
2786
2723
|
}
|
|
2787
2724
|
}
|
|
2788
2725
|
}, [table.getState().isFullScreen]);
|
|
2789
|
-
return (
|
|
2790
|
-
|
|
2791
|
-
|
|
2792
|
-
!table.getState().isFullScreen && (
|
|
2793
|
-
editingRow && props.editingMode === 'modal' && (
|
|
2726
|
+
return (React.createElement(React.Fragment, null,
|
|
2727
|
+
React.createElement(Dialog, { PaperComponent: Box, TransitionComponent: Grow, disablePortal: true, fullScreen: true, keepMounted: false, onClose: () => table.setIsFullScreen(false), open: table.getState().isFullScreen, transitionDuration: 400 },
|
|
2728
|
+
React.createElement(MRT_TablePaper, { table: table })),
|
|
2729
|
+
!table.getState().isFullScreen && (React.createElement(MRT_TablePaper, { table: table })),
|
|
2730
|
+
editingRow && props.editingMode === 'modal' && (React.createElement(MRT_EditRowModal, { row: editingRow, table: table, open: true }))));
|
|
2794
2731
|
};
|
|
2795
2732
|
|
|
2796
2733
|
const MRT_Localization_EN = {
|
|
@@ -2892,7 +2829,7 @@ const MaterialReactTable = (_a) => {
|
|
|
2892
2829
|
const _sortingFns = React.useMemo(() => (Object.assign(Object.assign({}, MRT_SortingFns), sortingFns)), []);
|
|
2893
2830
|
const _defaultColumn = React.useMemo(() => (Object.assign(Object.assign({}, MRT_DefaultColumn), defaultColumn)), []);
|
|
2894
2831
|
const _defaultDisplayColumn = React.useMemo(() => (Object.assign(Object.assign({}, MRT_DefaultDisplayColumn), defaultDisplayColumn)), []);
|
|
2895
|
-
return (
|
|
2832
|
+
return (React.createElement(MRT_TableRoot, Object.assign({ aggregationFns: _aggregationFns, autoResetExpanded: autoResetExpanded, columnResizeMode: columnResizeMode, defaultColumn: _defaultColumn, defaultDisplayColumn: _defaultDisplayColumn, editingMode: editingMode, enableBottomToolbar: enableBottomToolbar, enableColumnActions: enableColumnActions, enableColumnFilters: enableColumnFilters, enableColumnOrdering: enableColumnOrdering, enableColumnResizing: enableColumnResizing, enableDensityToggle: enableDensityToggle, enableExpandAll: enableExpandAll, enableFilters: enableFilters, enableFullScreenToggle: enableFullScreenToggle, enableGlobalFilter: enableGlobalFilter, enableGlobalFilterRankedResults: enableGlobalFilterRankedResults, enableGrouping: enableGrouping, enableHiding: enableHiding, enableMultiRowSelection: enableMultiRowSelection, enableMultiSort: enableMultiSort, enablePagination: enablePagination, enablePinning: enablePinning, enableRowSelection: enableRowSelection, enableSelectAll: enableSelectAll, enableSorting: enableSorting, enableStickyHeader: enableStickyHeader, enableTableFooter: enableTableFooter, enableTableHead: enableTableHead, enableToolbarInternalActions: enableToolbarInternalActions, enableTopToolbar: enableTopToolbar, filterFns: _filterFns, icons: _icons, localization: _localization, positionActionsColumn: positionActionsColumn, positionExpandColumn: positionExpandColumn, positionGlobalFilter: positionGlobalFilter, positionPagination: positionPagination, positionToolbarAlertBanner: positionToolbarAlertBanner, positionToolbarDropZone: positionToolbarDropZone, rowNumberMode: rowNumberMode, selectAllMode: selectAllMode, sortingFns: _sortingFns }, rest)));
|
|
2896
2833
|
};
|
|
2897
2834
|
|
|
2898
2835
|
exports.MRT_CopyButton = MRT_CopyButton;
|
|
@@ -2905,5 +2842,5 @@ exports.MRT_ToggleDensePaddingButton = MRT_ToggleDensePaddingButton;
|
|
|
2905
2842
|
exports.MRT_ToggleFiltersButton = MRT_ToggleFiltersButton;
|
|
2906
2843
|
exports.MRT_ToggleGlobalFilterButton = MRT_ToggleGlobalFilterButton;
|
|
2907
2844
|
exports.MRT_ToolbarInternalButtons = MRT_ToolbarInternalButtons;
|
|
2908
|
-
exports
|
|
2845
|
+
exports.default = MaterialReactTable;
|
|
2909
2846
|
//# sourceMappingURL=index.js.map
|