material-react-table 0.24.0 → 0.26.0
Sign up to get free protection for your applications and to get access to all the features.
- 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]);
|