material-react-table 0.24.0 → 0.26.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +11 -9
- package/dist/MaterialReactTable.d.ts +18 -16
- package/dist/{utils.d.ts → column.utils.d.ts} +3 -3
- package/dist/filtersFns.d.ts +22 -54
- package/dist/localization.d.ts +3 -0
- package/dist/material-react-table.cjs.development.js +155 -99
- package/dist/material-react-table.cjs.development.js.map +1 -1
- package/dist/material-react-table.cjs.production.min.js +1 -1
- package/dist/material-react-table.cjs.production.min.js.map +1 -1
- package/dist/material-react-table.esm.js +155 -99
- package/dist/material-react-table.esm.js.map +1 -1
- package/dist/table/MRT_TableRoot.d.ts +1 -1
- package/package.json +3 -3
- package/src/MaterialReactTable.tsx +29 -24
- package/src/body/MRT_TableBodyCell.tsx +3 -1
- package/src/{utils.ts → column.utils.ts} +2 -1
- package/src/filtersFns.ts +47 -13
- package/src/head/MRT_TableHeadCell.tsx +29 -29
- package/src/head/MRT_TableHeadCellGrabHandle.tsx +1 -1
- package/src/inputs/MRT_FilterTextField.tsx +4 -3
- package/src/inputs/MRT_SelectCheckbox.tsx +13 -18
- package/src/localization.ts +6 -0
- package/src/menus/MRT_ColumnActionMenu.tsx +16 -15
- package/src/menus/MRT_FilterOptionMenu.tsx +105 -72
- package/src/menus/MRT_ShowHideColumnsMenu.tsx +1 -1
- package/src/menus/MRT_ShowHideColumnsMenuItems.tsx +1 -1
- package/src/table/MRT_TableRoot.tsx +57 -40
@@ -53,6 +53,7 @@ var MRT_DefaultLocalization_EN = {
|
|
53
53
|
expand: 'Expand',
|
54
54
|
expandAll: 'Expand all',
|
55
55
|
filterBetween: 'Between',
|
56
|
+
filterBetweenInclusive: 'Between Inclusive',
|
56
57
|
filterByColumn: 'Filter by {column}',
|
57
58
|
filterContains: 'Contains',
|
58
59
|
filterEmpty: 'Empty',
|
@@ -60,7 +61,9 @@ var MRT_DefaultLocalization_EN = {
|
|
60
61
|
filterEquals: 'Equals',
|
61
62
|
filterFuzzy: 'Fuzzy',
|
62
63
|
filterGreaterThan: 'Greater Than',
|
64
|
+
filterGreaterThanOrEqualTo: 'Greater Than Or Equal To',
|
63
65
|
filterLessThan: 'Less Than',
|
66
|
+
filterLessThanOrEqualTo: 'Less Than Or Equal To',
|
64
67
|
filterMode: 'Filter Mode: {filterType}',
|
65
68
|
filterNotEmpty: 'Not Empty',
|
66
69
|
filterNotEquals: 'Not Equals',
|
@@ -226,11 +229,6 @@ var MRT_ExpandButton = function MRT_ExpandButton(_ref) {
|
|
226
229
|
}))));
|
227
230
|
};
|
228
231
|
|
229
|
-
var commonMenuItemStyles = {
|
230
|
-
py: '6px',
|
231
|
-
my: 0,
|
232
|
-
alignItems: 'center'
|
233
|
-
};
|
234
232
|
var MRT_FilterOptionMenu = function MRT_FilterOptionMenu(_ref) {
|
235
233
|
var _columnDef$enabledCol;
|
236
234
|
|
@@ -262,46 +260,72 @@ var MRT_FilterOptionMenu = function MRT_FilterOptionMenu(_ref) {
|
|
262
260
|
var filterOptions = useMemo(function () {
|
263
261
|
return [{
|
264
262
|
option: 'fuzzy',
|
263
|
+
symbol: '≈',
|
265
264
|
label: localization.filterFuzzy,
|
266
265
|
divider: false
|
267
266
|
}, {
|
268
267
|
option: 'contains',
|
268
|
+
symbol: '[]',
|
269
269
|
label: localization.filterContains,
|
270
270
|
divider: false
|
271
271
|
}, {
|
272
272
|
option: 'startsWith',
|
273
|
+
symbol: 'a',
|
273
274
|
label: localization.filterStartsWith,
|
274
275
|
divider: false
|
275
276
|
}, {
|
276
277
|
option: 'endsWith',
|
278
|
+
symbol: 'z',
|
277
279
|
label: localization.filterEndsWith,
|
278
280
|
divider: true
|
279
281
|
}, {
|
280
282
|
option: 'equals',
|
283
|
+
symbol: '=',
|
281
284
|
label: localization.filterEquals,
|
282
285
|
divider: false
|
283
286
|
}, {
|
284
287
|
option: 'notEquals',
|
288
|
+
symbol: '≠',
|
285
289
|
label: localization.filterNotEquals,
|
286
290
|
divider: true
|
287
291
|
}, {
|
288
292
|
option: 'between',
|
293
|
+
symbol: '⇿',
|
289
294
|
label: localization.filterBetween,
|
290
295
|
divider: false
|
296
|
+
}, {
|
297
|
+
option: 'betweenInclusive',
|
298
|
+
symbol: '⬌',
|
299
|
+
label: localization.filterBetweenInclusive,
|
300
|
+
divider: true
|
291
301
|
}, {
|
292
302
|
option: 'greaterThan',
|
303
|
+
symbol: '>',
|
293
304
|
label: localization.filterGreaterThan,
|
294
305
|
divider: false
|
306
|
+
}, {
|
307
|
+
option: 'greaterThanOrEqualTo',
|
308
|
+
symbol: '≥',
|
309
|
+
label: localization.filterGreaterThanOrEqualTo,
|
310
|
+
divider: false
|
295
311
|
}, {
|
296
312
|
option: 'lessThan',
|
313
|
+
symbol: '<',
|
297
314
|
label: localization.filterLessThan,
|
315
|
+
divider: false
|
316
|
+
}, {
|
317
|
+
option: 'lessThanOrEqualTo',
|
318
|
+
symbol: '≤',
|
319
|
+
label: localization.filterLessThanOrEqualTo,
|
298
320
|
divider: true
|
299
321
|
}, {
|
300
322
|
option: 'empty',
|
323
|
+
symbol: '∅',
|
301
324
|
label: localization.filterEmpty,
|
302
325
|
divider: false
|
303
326
|
}, {
|
304
327
|
option: 'notEmpty',
|
328
|
+
symbol: '!∅',
|
305
329
|
label: localization.filterNotEmpty,
|
306
330
|
divider: false
|
307
331
|
}].filter(function (filterType) {
|
@@ -349,7 +373,8 @@ var MRT_FilterOptionMenu = function MRT_FilterOptionMenu(_ref) {
|
|
349
373
|
}, filterOptions.map(function (_ref4, index) {
|
350
374
|
var option = _ref4.option,
|
351
375
|
label = _ref4.label,
|
352
|
-
divider = _ref4.divider
|
376
|
+
divider = _ref4.divider,
|
377
|
+
symbol = _ref4.symbol;
|
353
378
|
return React.createElement(MenuItem, {
|
354
379
|
divider: divider,
|
355
380
|
key: index,
|
@@ -357,9 +382,20 @@ var MRT_FilterOptionMenu = function MRT_FilterOptionMenu(_ref) {
|
|
357
382
|
return handleSelectFilterType(option);
|
358
383
|
},
|
359
384
|
selected: option === filterOption,
|
360
|
-
sx:
|
385
|
+
sx: {
|
386
|
+
py: '6px',
|
387
|
+
my: 0,
|
388
|
+
alignItems: 'center',
|
389
|
+
display: 'flex',
|
390
|
+
gap: '2ch'
|
391
|
+
},
|
361
392
|
value: option
|
362
|
-
},
|
393
|
+
}, React.createElement(Box, {
|
394
|
+
sx: {
|
395
|
+
fontSize: '1.25rem',
|
396
|
+
width: '2ch'
|
397
|
+
}
|
398
|
+
}, symbol), label);
|
363
399
|
}));
|
364
400
|
};
|
365
401
|
|
@@ -505,21 +541,37 @@ notEquals.autoRemove = function (val) {
|
|
505
541
|
};
|
506
542
|
|
507
543
|
var greaterThan = function greaterThan(row, id, filterValue) {
|
508
|
-
return !isNaN(+filterValue) && !isNaN(+row.getValue(id)) ? +row.getValue(id)
|
544
|
+
return !isNaN(+filterValue) && !isNaN(+row.getValue(id)) ? +row.getValue(id) > +filterValue : row.getValue(id).toString().toLowerCase().trim() > filterValue.toString().toLowerCase().trim();
|
509
545
|
};
|
510
546
|
|
511
547
|
greaterThan.autoRemove = function (val) {
|
512
548
|
return !val;
|
513
549
|
};
|
514
550
|
|
551
|
+
var greaterThanOrEqualTo = function greaterThanOrEqualTo(row, id, filterValue) {
|
552
|
+
return equals(row, id, filterValue) || greaterThan(row, id, filterValue);
|
553
|
+
};
|
554
|
+
|
555
|
+
greaterThanOrEqualTo.autoRemove = function (val) {
|
556
|
+
return !val;
|
557
|
+
};
|
558
|
+
|
515
559
|
var lessThan = function lessThan(row, id, filterValue) {
|
516
|
-
return !isNaN(+filterValue) && !isNaN(+row.getValue(id)) ? +row.getValue(id)
|
560
|
+
return !isNaN(+filterValue) && !isNaN(+row.getValue(id)) ? +row.getValue(id) < +filterValue : row.getValue(id).toString().toLowerCase().trim() < filterValue.toString().toLowerCase().trim();
|
517
561
|
};
|
518
562
|
|
519
563
|
lessThan.autoRemove = function (val) {
|
520
564
|
return !val;
|
521
565
|
};
|
522
566
|
|
567
|
+
var lessThanOrEqualTo = function lessThanOrEqualTo(row, id, filterValue) {
|
568
|
+
return equals(row, id, filterValue) || lessThan(row, id, filterValue);
|
569
|
+
};
|
570
|
+
|
571
|
+
lessThanOrEqualTo.autoRemove = function (val) {
|
572
|
+
return !val;
|
573
|
+
};
|
574
|
+
|
523
575
|
var between = function between(row, id, filterValues) {
|
524
576
|
return (['', undefined].includes(filterValues[0]) || greaterThan(row, id, filterValues[0])) && (!isNaN(+filterValues[0]) && !isNaN(+filterValues[1]) && +filterValues[0] > +filterValues[1] || ['', undefined].includes(filterValues[1]) || lessThan(row, id, filterValues[1]));
|
525
577
|
};
|
@@ -528,6 +580,14 @@ between.autoRemove = function (val) {
|
|
528
580
|
return !val;
|
529
581
|
};
|
530
582
|
|
583
|
+
var betweenInclusive = function betweenInclusive(row, id, filterValues) {
|
584
|
+
return (['', undefined].includes(filterValues[0]) || greaterThanOrEqualTo(row, id, filterValues[0])) && (!isNaN(+filterValues[0]) && !isNaN(+filterValues[1]) && +filterValues[0] > +filterValues[1] || ['', undefined].includes(filterValues[1]) || lessThanOrEqualTo(row, id, filterValues[1]));
|
585
|
+
};
|
586
|
+
|
587
|
+
betweenInclusive.autoRemove = function (val) {
|
588
|
+
return !val;
|
589
|
+
};
|
590
|
+
|
531
591
|
var empty = function empty(row, id, _filterValue) {
|
532
592
|
return !row.getValue(id).toString().trim();
|
533
593
|
};
|
@@ -546,13 +606,16 @@ notEmpty.autoRemove = function (val) {
|
|
546
606
|
|
547
607
|
var MRT_FilterFns = /*#__PURE__*/_extends({}, filterFns, {
|
548
608
|
between: between,
|
609
|
+
betweenInclusive: betweenInclusive,
|
549
610
|
contains: contains,
|
550
611
|
empty: empty,
|
551
612
|
endsWith: endsWith,
|
552
613
|
equals: equals,
|
553
614
|
fuzzy: fuzzy,
|
554
615
|
greaterThan: greaterThan,
|
616
|
+
greaterThanOrEqualTo: greaterThanOrEqualTo,
|
555
617
|
lessThan: lessThan,
|
618
|
+
lessThanOrEqualTo: lessThanOrEqualTo,
|
556
619
|
notEmpty: notEmpty,
|
557
620
|
notEquals: notEquals,
|
558
621
|
startsWith: startsWith
|
@@ -904,7 +967,7 @@ var MRT_ShowHideColumnsMenu = function MRT_ShowHideColumnsMenu(_ref) {
|
|
904
967
|
}));
|
905
968
|
};
|
906
969
|
|
907
|
-
var commonMenuItemStyles
|
970
|
+
var commonMenuItemStyles = {
|
908
971
|
py: '6px',
|
909
972
|
my: 0,
|
910
973
|
justifyContent: 'space-between',
|
@@ -1048,14 +1111,14 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
|
|
1048
1111
|
disabled: !column.getIsSorted(),
|
1049
1112
|
key: 0,
|
1050
1113
|
onClick: handleClearSort,
|
1051
|
-
sx: commonMenuItemStyles
|
1114
|
+
sx: commonMenuItemStyles
|
1052
1115
|
}, React.createElement(Box, {
|
1053
1116
|
sx: commonListItemStyles
|
1054
1117
|
}, React.createElement(ListItemIcon, null, React.createElement(ClearAllIcon, null)), localization.clearSort)), React.createElement(MenuItem, {
|
1055
1118
|
disabled: column.getIsSorted() === 'asc',
|
1056
1119
|
key: 1,
|
1057
1120
|
onClick: handleSortAsc,
|
1058
|
-
sx: commonMenuItemStyles
|
1121
|
+
sx: commonMenuItemStyles
|
1059
1122
|
}, React.createElement(Box, {
|
1060
1123
|
sx: commonListItemStyles
|
1061
1124
|
}, React.createElement(ListItemIcon, null, React.createElement(SortIcon, null)), (_localization$sortByC = localization.sortByColumnAsc) == null ? void 0 : _localization$sortByC.replace('{column}', String(columnDef.header)))), React.createElement(MenuItem, {
|
@@ -1063,7 +1126,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
|
|
1063
1126
|
key: 2,
|
1064
1127
|
disabled: column.getIsSorted() === 'desc',
|
1065
1128
|
onClick: handleSortDesc,
|
1066
|
-
sx: commonMenuItemStyles
|
1129
|
+
sx: commonMenuItemStyles
|
1067
1130
|
}, React.createElement(Box, {
|
1068
1131
|
sx: commonListItemStyles
|
1069
1132
|
}, React.createElement(ListItemIcon, null, React.createElement(SortIcon, {
|
@@ -1074,14 +1137,14 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
|
|
1074
1137
|
disabled: !column.getFilterValue(),
|
1075
1138
|
key: 0,
|
1076
1139
|
onClick: handleClearFilter,
|
1077
|
-
sx: commonMenuItemStyles
|
1140
|
+
sx: commonMenuItemStyles
|
1078
1141
|
}, React.createElement(Box, {
|
1079
1142
|
sx: commonListItemStyles
|
1080
1143
|
}, React.createElement(ListItemIcon, null, React.createElement(FilterListOffIcon, null)), localization.clearFilter)), React.createElement(MenuItem, {
|
1081
1144
|
divider: enableGrouping || enableHiding,
|
1082
1145
|
key: 1,
|
1083
1146
|
onClick: handleFilterByColumn,
|
1084
|
-
sx: commonMenuItemStyles
|
1147
|
+
sx: commonMenuItemStyles
|
1085
1148
|
}, React.createElement(Box, {
|
1086
1149
|
sx: commonListItemStyles
|
1087
1150
|
}, React.createElement(ListItemIcon, null, React.createElement(FilterListIcon, null)), (_localization$filterB = localization.filterByColumn) == null ? void 0 : _localization$filterB.replace('{column}', String(columnDef.header))), showFilterModeSubMenu && React.createElement(IconButton, {
|
@@ -1102,7 +1165,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
|
|
1102
1165
|
divider: enablePinning,
|
1103
1166
|
key: 0,
|
1104
1167
|
onClick: handleGroupByColumn,
|
1105
|
-
sx: commonMenuItemStyles
|
1168
|
+
sx: commonMenuItemStyles
|
1106
1169
|
}, React.createElement(Box, {
|
1107
1170
|
sx: commonListItemStyles
|
1108
1171
|
}, React.createElement(ListItemIcon, null, React.createElement(DynamicFeedIcon, null)), (_localization = localization[column.getIsGrouped() ? 'ungroupByColumn' : 'groupByColumn']) == null ? void 0 : _localization.replace('{column}', String(columnDef.header))))], enablePinning && column.getCanPin() && [React.createElement(MenuItem, {
|
@@ -1111,7 +1174,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
|
|
1111
1174
|
onClick: function onClick() {
|
1112
1175
|
return handlePinColumn('left');
|
1113
1176
|
},
|
1114
|
-
sx: commonMenuItemStyles
|
1177
|
+
sx: commonMenuItemStyles
|
1115
1178
|
}, React.createElement(Box, {
|
1116
1179
|
sx: commonListItemStyles
|
1117
1180
|
}, React.createElement(ListItemIcon, null, React.createElement(PushPinIcon, {
|
@@ -1124,7 +1187,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
|
|
1124
1187
|
onClick: function onClick() {
|
1125
1188
|
return handlePinColumn('right');
|
1126
1189
|
},
|
1127
|
-
sx: commonMenuItemStyles
|
1190
|
+
sx: commonMenuItemStyles
|
1128
1191
|
}, React.createElement(Box, {
|
1129
1192
|
sx: commonListItemStyles
|
1130
1193
|
}, React.createElement(ListItemIcon, null, React.createElement(PushPinIcon, {
|
@@ -1138,21 +1201,21 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
|
|
1138
1201
|
onClick: function onClick() {
|
1139
1202
|
return handlePinColumn(false);
|
1140
1203
|
},
|
1141
|
-
sx: commonMenuItemStyles
|
1204
|
+
sx: commonMenuItemStyles
|
1142
1205
|
}, React.createElement(Box, {
|
1143
1206
|
sx: commonListItemStyles
|
1144
|
-
}, React.createElement(ListItemIcon, null, React.createElement(PushPinIcon, null)), localization.unpin))], enableColumnResizing && [React.createElement(MenuItem, {
|
1145
|
-
disabled: !
|
1207
|
+
}, React.createElement(ListItemIcon, null, React.createElement(PushPinIcon, null)), localization.unpin))], enableColumnResizing && column.getCanResize() && [React.createElement(MenuItem, {
|
1208
|
+
disabled: !columnSizing[column.id],
|
1146
1209
|
key: 0,
|
1147
1210
|
onClick: handleResetColumnSize,
|
1148
|
-
sx: commonMenuItemStyles
|
1211
|
+
sx: commonMenuItemStyles
|
1149
1212
|
}, React.createElement(Box, {
|
1150
1213
|
sx: commonListItemStyles
|
1151
1214
|
}, React.createElement(ListItemIcon, null, React.createElement(RestartAltIcon, null)), localization.resetColumnSize))], enableHiding && [React.createElement(MenuItem, {
|
1152
1215
|
disabled: columnDef.enableHiding === false,
|
1153
1216
|
key: 0,
|
1154
1217
|
onClick: handleHideColumn,
|
1155
|
-
sx: commonMenuItemStyles
|
1218
|
+
sx: commonMenuItemStyles
|
1156
1219
|
}, React.createElement(Box, {
|
1157
1220
|
sx: commonListItemStyles
|
1158
1221
|
}, React.createElement(ListItemIcon, null, React.createElement(VisibilityOffIcon, null)), (_localization$hideCol = localization.hideColumn) == null ? void 0 : _localization$hideCol.replace('{column}', String(columnDef.header)))), React.createElement(MenuItem, {
|
@@ -1161,7 +1224,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
|
|
1161
1224
|
}).length,
|
1162
1225
|
key: 1,
|
1163
1226
|
onClick: handleShowAllColumns,
|
1164
|
-
sx: commonMenuItemStyles
|
1227
|
+
sx: commonMenuItemStyles
|
1165
1228
|
}, React.createElement(Box, {
|
1166
1229
|
sx: commonListItemStyles
|
1167
1230
|
}, React.createElement(ListItemIcon, null, React.createElement(ViewColumnIcon, null)), (_localization$showAll = localization.showAllColumns) == null ? void 0 : _localization$showAll.replace('{column}', String(columnDef.header))), React.createElement(IconButton, {
|
@@ -1207,7 +1270,7 @@ var MRT_RowActionMenu = function MRT_RowActionMenu(_ref) {
|
|
1207
1270
|
}
|
1208
1271
|
}, enableEditing && React.createElement(MenuItem, {
|
1209
1272
|
onClick: handleEdit,
|
1210
|
-
sx: commonMenuItemStyles
|
1273
|
+
sx: commonMenuItemStyles
|
1211
1274
|
}, React.createElement(Box, {
|
1212
1275
|
sx: commonListItemStyles
|
1213
1276
|
}, React.createElement(ListItemIcon, null, React.createElement(EditIcon, null)), localization.edit)), renderRowActionMenuItems == null ? void 0 : renderRowActionMenuItems({
|
@@ -1358,19 +1421,7 @@ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
|
|
1358
1421
|
var _getState = getState(),
|
1359
1422
|
density = _getState.density;
|
1360
1423
|
|
1361
|
-
var
|
1362
|
-
if (selectAll) {
|
1363
|
-
if (selectAllMode === 'all') {
|
1364
|
-
table.getToggleAllRowsSelectedHandler()(event);
|
1365
|
-
} else if (selectAllMode === 'page') {
|
1366
|
-
table.getToggleAllPageRowsSelectedHandler()(event);
|
1367
|
-
}
|
1368
|
-
} else if (row) {
|
1369
|
-
row == null ? void 0 : row.getToggleSelectedHandler()(event);
|
1370
|
-
}
|
1371
|
-
};
|
1372
|
-
|
1373
|
-
var checkboxProps = selectAll ? muiSelectAllCheckboxProps instanceof Function ? muiSelectAllCheckboxProps({
|
1424
|
+
var checkboxProps = !row ? muiSelectAllCheckboxProps instanceof Function ? muiSelectAllCheckboxProps({
|
1374
1425
|
table: table
|
1375
1426
|
}) : muiSelectAllCheckboxProps : muiSelectCheckboxProps instanceof Function ? muiSelectCheckboxProps({
|
1376
1427
|
row: row,
|
@@ -1387,12 +1438,13 @@ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
|
|
1387
1438
|
inputProps: {
|
1388
1439
|
'aria-label': selectAll ? localization.toggleSelectAll : localization.toggleSelectRow
|
1389
1440
|
},
|
1390
|
-
onChange:
|
1441
|
+
onChange: !row ? selectAllMode === 'all' ? table.getToggleAllRowsSelectedHandler() : table.getToggleAllPageRowsSelectedHandler() : row.getToggleSelectedHandler(),
|
1391
1442
|
size: density === 'compact' ? 'small' : 'medium'
|
1392
1443
|
}, checkboxProps, {
|
1393
1444
|
sx: _extends({
|
1394
|
-
height: density === 'compact' ? '1.
|
1395
|
-
width: density === 'compact' ? '1.
|
1445
|
+
height: density === 'compact' ? '1.5rem' : '2rem',
|
1446
|
+
width: density === 'compact' ? '1.5rem' : '2rem',
|
1447
|
+
m: '-1re.m'
|
1396
1448
|
}, checkboxProps == null ? void 0 : checkboxProps.sx)
|
1397
1449
|
})));
|
1398
1450
|
};
|
@@ -2096,16 +2148,16 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
|
|
2096
2148
|
setFilterValue = _useState2[1];
|
2097
2149
|
|
2098
2150
|
var handleChangeDebounced = useCallback(debounce(function (event) {
|
2151
|
+
var value = textFieldProps.type === 'date' ? new Date(event.target.value) : event.target.value;
|
2152
|
+
|
2099
2153
|
if (inputIndex !== undefined) {
|
2100
2154
|
column.setFilterValue(function (old) {
|
2101
2155
|
var newFilterValues = old != null ? old : ['', ''];
|
2102
|
-
newFilterValues[inputIndex] =
|
2156
|
+
newFilterValues[inputIndex] = value;
|
2103
2157
|
return newFilterValues;
|
2104
2158
|
});
|
2105
2159
|
} else {
|
2106
|
-
|
2107
|
-
|
2108
|
-
column.setFilterValue((_event$target$value = event.target.value) != null ? _event$target$value : undefined);
|
2160
|
+
column.setFilterValue(value != null ? value : undefined);
|
2109
2161
|
}
|
2110
2162
|
}, 200), []);
|
2111
2163
|
|
@@ -2512,11 +2564,6 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
|
|
2512
2564
|
|
2513
2565
|
var tableCellProps = _extends({}, mTableHeadCellProps, mcTableHeadCellProps);
|
2514
2566
|
|
2515
|
-
var headerElement = (_ref2 = (columnDef == null ? void 0 : columnDef.Header) instanceof Function ? columnDef == null ? void 0 : columnDef.Header == null ? void 0 : columnDef.Header({
|
2516
|
-
header: header,
|
2517
|
-
table: table
|
2518
|
-
}) : columnDef == null ? void 0 : columnDef.Header) != null ? _ref2 : columnDef.header;
|
2519
|
-
|
2520
2567
|
var getIsLastLeftPinnedColumn = function getIsLastLeftPinnedColumn() {
|
2521
2568
|
return column.getIsPinned() === 'left' && table.getLeftLeafHeaders().length - 1 === column.getPinnedIndex();
|
2522
2569
|
};
|
@@ -2531,17 +2578,21 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
|
|
2531
2578
|
|
2532
2579
|
var handleDragEnter = function handleDragEnter(_e) {
|
2533
2580
|
if (enableColumnOrdering && currentDraggingColumn) {
|
2534
|
-
setCurrentHoveredColumn(
|
2581
|
+
setCurrentHoveredColumn(columnDef.enableColumnOrdering !== false ? column : null);
|
2535
2582
|
}
|
2536
2583
|
};
|
2537
2584
|
|
2538
|
-
var tableHeadCellRef = React.useRef(null);
|
2539
2585
|
var draggingBorder = (currentDraggingColumn == null ? void 0 : currentDraggingColumn.id) === column.id ? "1px dashed " + theme.palette.divider : (currentHoveredColumn == null ? void 0 : currentHoveredColumn.id) === column.id ? "2px dashed " + theme.palette.primary.main : undefined;
|
2540
2586
|
var draggingBorders = draggingBorder ? {
|
2541
2587
|
borderLeft: draggingBorder,
|
2542
2588
|
borderRight: draggingBorder,
|
2543
2589
|
borderTop: draggingBorder
|
2544
2590
|
} : undefined;
|
2591
|
+
var headerElement = (_ref2 = (columnDef == null ? void 0 : columnDef.Header) instanceof Function ? columnDef == null ? void 0 : columnDef.Header == null ? void 0 : columnDef.Header({
|
2592
|
+
header: header,
|
2593
|
+
table: table
|
2594
|
+
}) : columnDef == null ? void 0 : columnDef.Header) != null ? _ref2 : columnDef.header;
|
2595
|
+
var tableHeadCellRef = React.useRef(null);
|
2545
2596
|
return React.createElement(TableCell, Object.assign({
|
2546
2597
|
align: columnDefType === 'group' ? 'center' : 'left',
|
2547
2598
|
colSpan: header.colSpan,
|
@@ -2566,7 +2617,7 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
|
|
2566
2617
|
right: column.getIsPinned() === 'right' ? getTotalRight() + "px" : undefined,
|
2567
2618
|
transition: "all " + (enableColumnResizing ? 0 : '0.2s') + " ease-in-out",
|
2568
2619
|
userSelect: enableMultiSort && column.getCanSort() ? 'none' : undefined,
|
2569
|
-
verticalAlign: '
|
2620
|
+
verticalAlign: 'top',
|
2570
2621
|
zIndex: column.getIsResizing() || (currentDraggingColumn == null ? void 0 : currentDraggingColumn.id) === column.id ? 3 : column.getIsPinned() && columnDefType !== 'group' ? 2 : 1
|
2571
2622
|
}, tableCellProps == null ? void 0 : tableCellProps.sx, draggingBorders, {
|
2572
2623
|
maxWidth: "min(" + column.getSize() + "px, fit-content)",
|
@@ -2574,7 +2625,7 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
|
|
2574
2625
|
width: header.getSize()
|
2575
2626
|
});
|
2576
2627
|
}
|
2577
|
-
}), header.isPlaceholder ? null :
|
2628
|
+
}), header.isPlaceholder ? null : React.createElement(Box, {
|
2578
2629
|
sx: {
|
2579
2630
|
alignItems: 'flex-start',
|
2580
2631
|
display: 'flex',
|
@@ -2591,27 +2642,27 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
|
|
2591
2642
|
flexWrap: 'nowrap',
|
2592
2643
|
whiteSpace: ((_columnDef$header$len = (_columnDef$header = columnDef.header) == null ? void 0 : _columnDef$header.length) != null ? _columnDef$header$len : 0) < 24 ? 'nowrap' : 'normal'
|
2593
2644
|
}
|
2594
|
-
}, headerElement,
|
2645
|
+
}, headerElement, column.getCanSort() && React.createElement(MRT_TableHeadCellSortLabel, {
|
2595
2646
|
header: header,
|
2596
2647
|
table: table
|
2597
|
-
}),
|
2648
|
+
}), column.getCanFilter() && React.createElement(MRT_TableHeadCellFilterLabel, {
|
2598
2649
|
header: header,
|
2599
2650
|
table: table
|
2600
|
-
})), React.createElement(Box, {
|
2651
|
+
})), columnDefType !== 'group' && React.createElement(Box, {
|
2601
2652
|
sx: {
|
2602
2653
|
whiteSpace: 'nowrap'
|
2603
2654
|
}
|
2604
|
-
},
|
2655
|
+
}, (enableColumnDragging && columnDef.enableColumnDragging !== false || enableColumnOrdering && columnDef.enableColumnOrdering !== false || enableGrouping && columnDef.enableGrouping !== false) && React.createElement(MRT_TableHeadCellGrabHandle, {
|
2605
2656
|
column: column,
|
2606
2657
|
table: table,
|
2607
2658
|
tableHeadCellRef: tableHeadCellRef
|
2608
|
-
}), (enableColumnActions || columnDef.enableColumnActions) && columnDef.enableColumnActions !== false &&
|
2659
|
+
}), (enableColumnActions || columnDef.enableColumnActions) && columnDef.enableColumnActions !== false && React.createElement(MRT_TableHeadCellColumnActionsButton, {
|
2609
2660
|
header: header,
|
2610
2661
|
table: table
|
2611
2662
|
})), column.getCanResize() && React.createElement(MRT_TableHeadCellResizeHandle, {
|
2612
2663
|
header: header,
|
2613
2664
|
table: table
|
2614
|
-
})),
|
2665
|
+
})), column.getCanFilter() && React.createElement(MRT_TableHeadCellFilterContainer, {
|
2615
2666
|
header: header,
|
2616
2667
|
table: table
|
2617
2668
|
}));
|
@@ -2922,7 +2973,7 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
|
|
2922
2973
|
|
2923
2974
|
var handleDragEnter = function handleDragEnter(_e) {
|
2924
2975
|
if (enableColumnOrdering && currentDraggingColumn) {
|
2925
|
-
setCurrentHoveredColumn(
|
2976
|
+
setCurrentHoveredColumn(columnDef.enableColumnOrdering !== false ? column : null);
|
2926
2977
|
}
|
2927
2978
|
};
|
2928
2979
|
|
@@ -3380,8 +3431,23 @@ var MRT_TablePaper = function MRT_TablePaper(_ref) {
|
|
3380
3431
|
}));
|
3381
3432
|
};
|
3382
3433
|
|
3434
|
+
var defaultDisplayColumnDefOptions = {
|
3435
|
+
columnDefType: 'display',
|
3436
|
+
enableClickToCopy: false,
|
3437
|
+
enableColumnActions: false,
|
3438
|
+
enableColumnDragging: false,
|
3439
|
+
enableColumnFilter: false,
|
3440
|
+
enableColumnOrdering: false,
|
3441
|
+
enableEditing: false,
|
3442
|
+
enableGlobalFilter: false,
|
3443
|
+
enableGrouping: false,
|
3444
|
+
enableHiding: false,
|
3445
|
+
enablePinning: false,
|
3446
|
+
enableResizing: false,
|
3447
|
+
enableSorting: false
|
3448
|
+
};
|
3383
3449
|
var MRT_TableRoot = function MRT_TableRoot(props) {
|
3384
|
-
var _initialState$columnO, _initialState$current, _initialState$current2, _initialState$density, _initialState$isFullS, _props$initialState$s, _props$initialState2, _initialState$showCol, _initialState$showGlo, _props$state3, _props$state4, _MRT_FilterFns$curren, _props$onCurrentDragg, _props$onCurrentDragg2, _props$onCurrentEditi, _props$onCurrentEditi2, _props$onCurrentFilte, _props$onCurrentGloba, _props$onCurrentHover, _props$onCurrentHover2, _props$onDensityChang, _props$onIsFullScreen, _props$onShowAlertBan, _props$onShowFiltersC, _props$onShowGlobalFi;
|
3450
|
+
var _initialState$columnO, _initialState$current, _initialState$current2, _initialState$current3, _initialState$current4, _initialState$current5, _initialState$current6, _initialState$density, _initialState$isFullS, _props$initialState$s, _props$initialState2, _initialState$showCol, _initialState$showGlo, _props$state3, _props$state4, _MRT_FilterFns$curren, _props$onCurrentDragg, _props$onCurrentDragg2, _props$onCurrentEditi, _props$onCurrentEditi2, _props$onCurrentFilte, _props$onCurrentGloba, _props$onCurrentHover, _props$onCurrentHover2, _props$onDensityChang, _props$onIsFullScreen, _props$onShowAlertBan, _props$onShowFiltersC, _props$onShowGlobalFi;
|
3385
3451
|
|
3386
3452
|
var _useState = useState(props.tableId),
|
3387
3453
|
tableId = _useState[0],
|
@@ -3404,27 +3470,27 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
|
|
3404
3470
|
columnOrder = _useState2[0],
|
3405
3471
|
setColumnOrder = _useState2[1];
|
3406
3472
|
|
3407
|
-
var _useState3 = useState(null),
|
3473
|
+
var _useState3 = useState((_initialState$current = initialState.currentDraggingColumn) != null ? _initialState$current : null),
|
3408
3474
|
currentDraggingColumn = _useState3[0],
|
3409
3475
|
setCurrentDraggingColumn = _useState3[1];
|
3410
3476
|
|
3411
|
-
var _useState4 = useState(null),
|
3477
|
+
var _useState4 = useState((_initialState$current2 = initialState.currentDraggingRow) != null ? _initialState$current2 : null),
|
3412
3478
|
currentDraggingRow = _useState4[0],
|
3413
3479
|
setCurrentDraggingRow = _useState4[1];
|
3414
3480
|
|
3415
|
-
var _useState5 = useState((_initialState$
|
3481
|
+
var _useState5 = useState((_initialState$current3 = initialState.currentEditingCell) != null ? _initialState$current3 : null),
|
3416
3482
|
currentEditingCell = _useState5[0],
|
3417
3483
|
setCurrentEditingCell = _useState5[1];
|
3418
3484
|
|
3419
|
-
var _useState6 = useState((_initialState$
|
3485
|
+
var _useState6 = useState((_initialState$current4 = initialState.currentEditingRow) != null ? _initialState$current4 : null),
|
3420
3486
|
currentEditingRow = _useState6[0],
|
3421
3487
|
setCurrentEditingRow = _useState6[1];
|
3422
3488
|
|
3423
|
-
var _useState7 = useState(null),
|
3489
|
+
var _useState7 = useState((_initialState$current5 = initialState.currentHoveredColumn) != null ? _initialState$current5 : null),
|
3424
3490
|
currentHoveredColumn = _useState7[0],
|
3425
3491
|
setCurrentHoveredColumn = _useState7[1];
|
3426
3492
|
|
3427
|
-
var _useState8 = useState(null),
|
3493
|
+
var _useState8 = useState((_initialState$current6 = initialState.currentHoveredRow) != null ? _initialState$current6 : null),
|
3428
3494
|
currentHoveredRow = _useState8[0],
|
3429
3495
|
setCurrentHoveredRow = _useState8[1];
|
3430
3496
|
|
@@ -3450,9 +3516,9 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
|
|
3450
3516
|
|
3451
3517
|
var _useState14 = useState(function () {
|
3452
3518
|
return Object.assign.apply(Object, [{}].concat(getAllLeafColumnDefs(props.columns).map(function (col) {
|
3453
|
-
var _ref, _col$id$toString, _col$id, _col$accessorKey, _col$filterFn$name, _ref2, _col$filterFn, _initialState$
|
3519
|
+
var _ref, _col$id$toString, _col$id, _col$accessorKey, _col$filterFn$name, _ref2, _col$filterFn, _initialState$current7, _ref3, _col$id$toString2, _col$id2, _col$accessorKey2, _col$filterSelectOpti, _ref4;
|
3454
3520
|
|
3455
|
-
return _ref4 = {}, _ref4[(_ref = (_col$id$toString = (_col$id = col.id) == null ? void 0 : _col$id.toString()) != null ? _col$id$toString : (_col$accessorKey = col.accessorKey) == null ? void 0 : _col$accessorKey.toString()) != null ? _ref : ''] = col.filterFn instanceof Function ? (_col$filterFn$name = col.filterFn.name) != null ? _col$filterFn$name : 'custom' : (_ref2 = (_col$filterFn = col.filterFn) != null ? _col$filterFn : initialState == null ? void 0 : (_initialState$
|
3521
|
+
return _ref4 = {}, _ref4[(_ref = (_col$id$toString = (_col$id = col.id) == null ? void 0 : _col$id.toString()) != null ? _col$id$toString : (_col$accessorKey = col.accessorKey) == null ? void 0 : _col$accessorKey.toString()) != null ? _ref : ''] = col.filterFn instanceof Function ? (_col$filterFn$name = col.filterFn.name) != null ? _col$filterFn$name : 'custom' : (_ref2 = (_col$filterFn = col.filterFn) != null ? _col$filterFn : initialState == null ? void 0 : (_initialState$current7 = initialState.currentFilterFns) == null ? void 0 : _initialState$current7[(_ref3 = (_col$id$toString2 = (_col$id2 = col.id) == null ? void 0 : _col$id2.toString()) != null ? _col$id$toString2 : (_col$accessorKey2 = col.accessorKey) == null ? void 0 : _col$accessorKey2.toString()) != null ? _ref3 : '']) != null ? _ref2 : !!((_col$filterSelectOpti = col.filterSelectOptions) != null && _col$filterSelectOpti.length) ? 'equals' : 'fuzzy', _ref4;
|
3456
3522
|
})));
|
3457
3523
|
}),
|
3458
3524
|
currentFilterFns = _useState14[0],
|
@@ -3463,16 +3529,14 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
|
|
3463
3529
|
setCurrentGlobalFilterFn = _useState15[1];
|
3464
3530
|
|
3465
3531
|
var displayColumns = useMemo(function () {
|
3466
|
-
var _props$localization, _props$localization2, _props$localization3, _props$localization4, _props$localization6;
|
3532
|
+
var _props$localization, _props$displayColumnD, _props$localization2, _props$displayColumnD2, _props$localization3, _props$displayColumnD3, _props$localization4, _props$displayColumnD4, _props$localization6, _props$displayColumnD5;
|
3467
3533
|
|
3468
|
-
return [columnOrder.includes('mrt-row-drag') && {
|
3469
|
-
columnDefType: 'display',
|
3534
|
+
return [columnOrder.includes('mrt-row-drag') && _extends({
|
3470
3535
|
header: (_props$localization = props.localization) == null ? void 0 : _props$localization.move,
|
3471
|
-
id: 'mrt-row-drag',
|
3472
|
-
muiTableBodyCellProps: props.muiTableBodyCellProps,
|
3473
|
-
muiTableHeadCellProps: props.muiTableHeadCellProps,
|
3474
3536
|
size: 60
|
3475
|
-
},
|
3537
|
+
}, defaultDisplayColumnDefOptions, (_props$displayColumnD = props.displayColumnDefOptions) == null ? void 0 : _props$displayColumnD['mrt-row-drag'], {
|
3538
|
+
id: 'mrt-row-drag'
|
3539
|
+
}), columnOrder.includes('mrt-row-actions') && _extends({
|
3476
3540
|
Cell: function Cell(_ref5) {
|
3477
3541
|
var cell = _ref5.cell;
|
3478
3542
|
return React.createElement(MRT_ToggleRowActionMenuButton, {
|
@@ -3480,13 +3544,11 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
|
|
3480
3544
|
table: table
|
3481
3545
|
});
|
3482
3546
|
},
|
3483
|
-
columnDefType: 'display',
|
3484
3547
|
header: (_props$localization2 = props.localization) == null ? void 0 : _props$localization2.actions,
|
3485
|
-
id: 'mrt-row-actions',
|
3486
|
-
muiTableBodyCellProps: props.muiTableBodyCellProps,
|
3487
|
-
muiTableHeadCellProps: props.muiTableHeadCellProps,
|
3488
3548
|
size: 70
|
3489
|
-
},
|
3549
|
+
}, defaultDisplayColumnDefOptions, (_props$displayColumnD2 = props.displayColumnDefOptions) == null ? void 0 : _props$displayColumnD2['mrt-row-actions'], {
|
3550
|
+
id: 'mrt-row-actions'
|
3551
|
+
}), columnOrder.includes('mrt-row-expand') && _extends({
|
3490
3552
|
Cell: function Cell(_ref6) {
|
3491
3553
|
var cell = _ref6.cell;
|
3492
3554
|
return React.createElement(MRT_ExpandButton, {
|
@@ -3499,13 +3561,11 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
|
|
3499
3561
|
table: table
|
3500
3562
|
}) : null;
|
3501
3563
|
},
|
3502
|
-
columnDefType: 'display',
|
3503
3564
|
header: (_props$localization3 = props.localization) == null ? void 0 : _props$localization3.expand,
|
3504
|
-
id: 'mrt-row-expand',
|
3505
|
-
muiTableBodyCellProps: props.muiTableBodyCellProps,
|
3506
|
-
muiTableHeadCellProps: props.muiTableHeadCellProps,
|
3507
3565
|
size: 60
|
3508
|
-
},
|
3566
|
+
}, defaultDisplayColumnDefOptions, (_props$displayColumnD3 = props.displayColumnDefOptions) == null ? void 0 : _props$displayColumnD3['mrt-row-expand'], {
|
3567
|
+
id: 'mrt-row-expand'
|
3568
|
+
}), columnOrder.includes('mrt-row-select') && _extends({
|
3509
3569
|
Cell: function Cell(_ref7) {
|
3510
3570
|
var cell = _ref7.cell;
|
3511
3571
|
return React.createElement(MRT_SelectCheckbox, {
|
@@ -3519,13 +3579,11 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
|
|
3519
3579
|
table: table
|
3520
3580
|
}) : null;
|
3521
3581
|
},
|
3522
|
-
columnDefType: 'display',
|
3523
3582
|
header: (_props$localization4 = props.localization) == null ? void 0 : _props$localization4.select,
|
3524
|
-
id: 'mrt-row-select',
|
3525
|
-
muiTableBodyCellProps: props.muiTableBodyCellProps,
|
3526
|
-
muiTableHeadCellProps: props.muiTableHeadCellProps,
|
3527
3583
|
size: 60
|
3528
|
-
},
|
3584
|
+
}, defaultDisplayColumnDefOptions, (_props$displayColumnD4 = props.displayColumnDefOptions) == null ? void 0 : _props$displayColumnD4['mrt-row-select'], {
|
3585
|
+
id: 'mrt-row-select'
|
3586
|
+
}), columnOrder.includes('mrt-row-numbers') && _extends({
|
3529
3587
|
Cell: function Cell(_ref8) {
|
3530
3588
|
var cell = _ref8.cell;
|
3531
3589
|
return cell.row.index + 1;
|
@@ -3535,14 +3593,12 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
|
|
3535
3593
|
|
3536
3594
|
return (_props$localization5 = props.localization) == null ? void 0 : _props$localization5.rowNumber;
|
3537
3595
|
},
|
3538
|
-
columnDefType: 'display',
|
3539
3596
|
header: (_props$localization6 = props.localization) == null ? void 0 : _props$localization6.rowNumbers,
|
3540
|
-
id: 'mrt-row-numbers',
|
3541
|
-
muiTableBodyCellProps: props.muiTableBodyCellProps,
|
3542
|
-
muiTableHeadCellProps: props.muiTableHeadCellProps,
|
3543
3597
|
size: 60
|
3544
|
-
}
|
3545
|
-
|
3598
|
+
}, defaultDisplayColumnDefOptions, (_props$displayColumnD5 = props.displayColumnDefOptions) == null ? void 0 : _props$displayColumnD5['mrt-row-numbers'], {
|
3599
|
+
id: 'mrt-row-numbers'
|
3600
|
+
})].filter(Boolean);
|
3601
|
+
}, [columnOrder, props.displayColumnDefOptions, props.editingMode, props.enableColumnDragging, props.enableColumnOrdering, props.enableEditing, props.enableExpandAll, props.enableExpanding, props.enableGrouping, props.enableRowActions, props.enableRowDragging, props.enableRowNumbers, props.enableRowOrdering, props.enableRowSelection, props.enableSelectAll, props.localization, props.muiTableBodyCellProps, props.muiTableHeadCellProps, props.positionActionsColumn]);
|
3546
3602
|
var columnDefs = useMemo(function () {
|
3547
3603
|
return prepareColumns([].concat(displayColumns, props.columns), currentFilterFns);
|
3548
3604
|
}, [currentFilterFns, displayColumns, props.columns]);
|