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
@@ -60,6 +60,7 @@ var MRT_DefaultLocalization_EN = {
|
|
60
60
|
expand: 'Expand',
|
61
61
|
expandAll: 'Expand all',
|
62
62
|
filterBetween: 'Between',
|
63
|
+
filterBetweenInclusive: 'Between Inclusive',
|
63
64
|
filterByColumn: 'Filter by {column}',
|
64
65
|
filterContains: 'Contains',
|
65
66
|
filterEmpty: 'Empty',
|
@@ -67,7 +68,9 @@ var MRT_DefaultLocalization_EN = {
|
|
67
68
|
filterEquals: 'Equals',
|
68
69
|
filterFuzzy: 'Fuzzy',
|
69
70
|
filterGreaterThan: 'Greater Than',
|
71
|
+
filterGreaterThanOrEqualTo: 'Greater Than Or Equal To',
|
70
72
|
filterLessThan: 'Less Than',
|
73
|
+
filterLessThanOrEqualTo: 'Less Than Or Equal To',
|
71
74
|
filterMode: 'Filter Mode: {filterType}',
|
72
75
|
filterNotEmpty: 'Not Empty',
|
73
76
|
filterNotEquals: 'Not Equals',
|
@@ -233,11 +236,6 @@ var MRT_ExpandButton = function MRT_ExpandButton(_ref) {
|
|
233
236
|
}))));
|
234
237
|
};
|
235
238
|
|
236
|
-
var commonMenuItemStyles = {
|
237
|
-
py: '6px',
|
238
|
-
my: 0,
|
239
|
-
alignItems: 'center'
|
240
|
-
};
|
241
239
|
var MRT_FilterOptionMenu = function MRT_FilterOptionMenu(_ref) {
|
242
240
|
var _columnDef$enabledCol;
|
243
241
|
|
@@ -269,46 +267,72 @@ var MRT_FilterOptionMenu = function MRT_FilterOptionMenu(_ref) {
|
|
269
267
|
var filterOptions = React.useMemo(function () {
|
270
268
|
return [{
|
271
269
|
option: 'fuzzy',
|
270
|
+
symbol: '≈',
|
272
271
|
label: localization.filterFuzzy,
|
273
272
|
divider: false
|
274
273
|
}, {
|
275
274
|
option: 'contains',
|
275
|
+
symbol: '[]',
|
276
276
|
label: localization.filterContains,
|
277
277
|
divider: false
|
278
278
|
}, {
|
279
279
|
option: 'startsWith',
|
280
|
+
symbol: 'a',
|
280
281
|
label: localization.filterStartsWith,
|
281
282
|
divider: false
|
282
283
|
}, {
|
283
284
|
option: 'endsWith',
|
285
|
+
symbol: 'z',
|
284
286
|
label: localization.filterEndsWith,
|
285
287
|
divider: true
|
286
288
|
}, {
|
287
289
|
option: 'equals',
|
290
|
+
symbol: '=',
|
288
291
|
label: localization.filterEquals,
|
289
292
|
divider: false
|
290
293
|
}, {
|
291
294
|
option: 'notEquals',
|
295
|
+
symbol: '≠',
|
292
296
|
label: localization.filterNotEquals,
|
293
297
|
divider: true
|
294
298
|
}, {
|
295
299
|
option: 'between',
|
300
|
+
symbol: '⇿',
|
296
301
|
label: localization.filterBetween,
|
297
302
|
divider: false
|
303
|
+
}, {
|
304
|
+
option: 'betweenInclusive',
|
305
|
+
symbol: '⬌',
|
306
|
+
label: localization.filterBetweenInclusive,
|
307
|
+
divider: true
|
298
308
|
}, {
|
299
309
|
option: 'greaterThan',
|
310
|
+
symbol: '>',
|
300
311
|
label: localization.filterGreaterThan,
|
301
312
|
divider: false
|
313
|
+
}, {
|
314
|
+
option: 'greaterThanOrEqualTo',
|
315
|
+
symbol: '≥',
|
316
|
+
label: localization.filterGreaterThanOrEqualTo,
|
317
|
+
divider: false
|
302
318
|
}, {
|
303
319
|
option: 'lessThan',
|
320
|
+
symbol: '<',
|
304
321
|
label: localization.filterLessThan,
|
322
|
+
divider: false
|
323
|
+
}, {
|
324
|
+
option: 'lessThanOrEqualTo',
|
325
|
+
symbol: '≤',
|
326
|
+
label: localization.filterLessThanOrEqualTo,
|
305
327
|
divider: true
|
306
328
|
}, {
|
307
329
|
option: 'empty',
|
330
|
+
symbol: '∅',
|
308
331
|
label: localization.filterEmpty,
|
309
332
|
divider: false
|
310
333
|
}, {
|
311
334
|
option: 'notEmpty',
|
335
|
+
symbol: '!∅',
|
312
336
|
label: localization.filterNotEmpty,
|
313
337
|
divider: false
|
314
338
|
}].filter(function (filterType) {
|
@@ -356,7 +380,8 @@ var MRT_FilterOptionMenu = function MRT_FilterOptionMenu(_ref) {
|
|
356
380
|
}, filterOptions.map(function (_ref4, index) {
|
357
381
|
var option = _ref4.option,
|
358
382
|
label = _ref4.label,
|
359
|
-
divider = _ref4.divider
|
383
|
+
divider = _ref4.divider,
|
384
|
+
symbol = _ref4.symbol;
|
360
385
|
return React__default.createElement(material.MenuItem, {
|
361
386
|
divider: divider,
|
362
387
|
key: index,
|
@@ -364,9 +389,20 @@ var MRT_FilterOptionMenu = function MRT_FilterOptionMenu(_ref) {
|
|
364
389
|
return handleSelectFilterType(option);
|
365
390
|
},
|
366
391
|
selected: option === filterOption,
|
367
|
-
sx:
|
392
|
+
sx: {
|
393
|
+
py: '6px',
|
394
|
+
my: 0,
|
395
|
+
alignItems: 'center',
|
396
|
+
display: 'flex',
|
397
|
+
gap: '2ch'
|
398
|
+
},
|
368
399
|
value: option
|
369
|
-
},
|
400
|
+
}, React__default.createElement(material.Box, {
|
401
|
+
sx: {
|
402
|
+
fontSize: '1.25rem',
|
403
|
+
width: '2ch'
|
404
|
+
}
|
405
|
+
}, symbol), label);
|
370
406
|
}));
|
371
407
|
};
|
372
408
|
|
@@ -512,21 +548,37 @@ notEquals.autoRemove = function (val) {
|
|
512
548
|
};
|
513
549
|
|
514
550
|
var greaterThan = function greaterThan(row, id, filterValue) {
|
515
|
-
return !isNaN(+filterValue) && !isNaN(+row.getValue(id)) ? +row.getValue(id)
|
551
|
+
return !isNaN(+filterValue) && !isNaN(+row.getValue(id)) ? +row.getValue(id) > +filterValue : row.getValue(id).toString().toLowerCase().trim() > filterValue.toString().toLowerCase().trim();
|
516
552
|
};
|
517
553
|
|
518
554
|
greaterThan.autoRemove = function (val) {
|
519
555
|
return !val;
|
520
556
|
};
|
521
557
|
|
558
|
+
var greaterThanOrEqualTo = function greaterThanOrEqualTo(row, id, filterValue) {
|
559
|
+
return equals(row, id, filterValue) || greaterThan(row, id, filterValue);
|
560
|
+
};
|
561
|
+
|
562
|
+
greaterThanOrEqualTo.autoRemove = function (val) {
|
563
|
+
return !val;
|
564
|
+
};
|
565
|
+
|
522
566
|
var lessThan = function lessThan(row, id, filterValue) {
|
523
|
-
return !isNaN(+filterValue) && !isNaN(+row.getValue(id)) ? +row.getValue(id)
|
567
|
+
return !isNaN(+filterValue) && !isNaN(+row.getValue(id)) ? +row.getValue(id) < +filterValue : row.getValue(id).toString().toLowerCase().trim() < filterValue.toString().toLowerCase().trim();
|
524
568
|
};
|
525
569
|
|
526
570
|
lessThan.autoRemove = function (val) {
|
527
571
|
return !val;
|
528
572
|
};
|
529
573
|
|
574
|
+
var lessThanOrEqualTo = function lessThanOrEqualTo(row, id, filterValue) {
|
575
|
+
return equals(row, id, filterValue) || lessThan(row, id, filterValue);
|
576
|
+
};
|
577
|
+
|
578
|
+
lessThanOrEqualTo.autoRemove = function (val) {
|
579
|
+
return !val;
|
580
|
+
};
|
581
|
+
|
530
582
|
var between = function between(row, id, filterValues) {
|
531
583
|
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]));
|
532
584
|
};
|
@@ -535,6 +587,14 @@ between.autoRemove = function (val) {
|
|
535
587
|
return !val;
|
536
588
|
};
|
537
589
|
|
590
|
+
var betweenInclusive = function betweenInclusive(row, id, filterValues) {
|
591
|
+
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]));
|
592
|
+
};
|
593
|
+
|
594
|
+
betweenInclusive.autoRemove = function (val) {
|
595
|
+
return !val;
|
596
|
+
};
|
597
|
+
|
538
598
|
var empty = function empty(row, id, _filterValue) {
|
539
599
|
return !row.getValue(id).toString().trim();
|
540
600
|
};
|
@@ -553,13 +613,16 @@ notEmpty.autoRemove = function (val) {
|
|
553
613
|
|
554
614
|
var MRT_FilterFns = /*#__PURE__*/_extends({}, reactTable.filterFns, {
|
555
615
|
between: between,
|
616
|
+
betweenInclusive: betweenInclusive,
|
556
617
|
contains: contains,
|
557
618
|
empty: empty,
|
558
619
|
endsWith: endsWith,
|
559
620
|
equals: equals,
|
560
621
|
fuzzy: fuzzy,
|
561
622
|
greaterThan: greaterThan,
|
623
|
+
greaterThanOrEqualTo: greaterThanOrEqualTo,
|
562
624
|
lessThan: lessThan,
|
625
|
+
lessThanOrEqualTo: lessThanOrEqualTo,
|
563
626
|
notEmpty: notEmpty,
|
564
627
|
notEquals: notEquals,
|
565
628
|
startsWith: startsWith
|
@@ -911,7 +974,7 @@ var MRT_ShowHideColumnsMenu = function MRT_ShowHideColumnsMenu(_ref) {
|
|
911
974
|
}));
|
912
975
|
};
|
913
976
|
|
914
|
-
var commonMenuItemStyles
|
977
|
+
var commonMenuItemStyles = {
|
915
978
|
py: '6px',
|
916
979
|
my: 0,
|
917
980
|
justifyContent: 'space-between',
|
@@ -1055,14 +1118,14 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
|
|
1055
1118
|
disabled: !column.getIsSorted(),
|
1056
1119
|
key: 0,
|
1057
1120
|
onClick: handleClearSort,
|
1058
|
-
sx: commonMenuItemStyles
|
1121
|
+
sx: commonMenuItemStyles
|
1059
1122
|
}, React__default.createElement(material.Box, {
|
1060
1123
|
sx: commonListItemStyles
|
1061
1124
|
}, React__default.createElement(material.ListItemIcon, null, React__default.createElement(ClearAllIcon, null)), localization.clearSort)), React__default.createElement(material.MenuItem, {
|
1062
1125
|
disabled: column.getIsSorted() === 'asc',
|
1063
1126
|
key: 1,
|
1064
1127
|
onClick: handleSortAsc,
|
1065
|
-
sx: commonMenuItemStyles
|
1128
|
+
sx: commonMenuItemStyles
|
1066
1129
|
}, React__default.createElement(material.Box, {
|
1067
1130
|
sx: commonListItemStyles
|
1068
1131
|
}, React__default.createElement(material.ListItemIcon, null, React__default.createElement(SortIcon, null)), (_localization$sortByC = localization.sortByColumnAsc) == null ? void 0 : _localization$sortByC.replace('{column}', String(columnDef.header)))), React__default.createElement(material.MenuItem, {
|
@@ -1070,7 +1133,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
|
|
1070
1133
|
key: 2,
|
1071
1134
|
disabled: column.getIsSorted() === 'desc',
|
1072
1135
|
onClick: handleSortDesc,
|
1073
|
-
sx: commonMenuItemStyles
|
1136
|
+
sx: commonMenuItemStyles
|
1074
1137
|
}, React__default.createElement(material.Box, {
|
1075
1138
|
sx: commonListItemStyles
|
1076
1139
|
}, React__default.createElement(material.ListItemIcon, null, React__default.createElement(SortIcon, {
|
@@ -1081,14 +1144,14 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
|
|
1081
1144
|
disabled: !column.getFilterValue(),
|
1082
1145
|
key: 0,
|
1083
1146
|
onClick: handleClearFilter,
|
1084
|
-
sx: commonMenuItemStyles
|
1147
|
+
sx: commonMenuItemStyles
|
1085
1148
|
}, React__default.createElement(material.Box, {
|
1086
1149
|
sx: commonListItemStyles
|
1087
1150
|
}, React__default.createElement(material.ListItemIcon, null, React__default.createElement(FilterListOffIcon, null)), localization.clearFilter)), React__default.createElement(material.MenuItem, {
|
1088
1151
|
divider: enableGrouping || enableHiding,
|
1089
1152
|
key: 1,
|
1090
1153
|
onClick: handleFilterByColumn,
|
1091
|
-
sx: commonMenuItemStyles
|
1154
|
+
sx: commonMenuItemStyles
|
1092
1155
|
}, React__default.createElement(material.Box, {
|
1093
1156
|
sx: commonListItemStyles
|
1094
1157
|
}, React__default.createElement(material.ListItemIcon, null, React__default.createElement(FilterListIcon, null)), (_localization$filterB = localization.filterByColumn) == null ? void 0 : _localization$filterB.replace('{column}', String(columnDef.header))), showFilterModeSubMenu && React__default.createElement(material.IconButton, {
|
@@ -1109,7 +1172,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
|
|
1109
1172
|
divider: enablePinning,
|
1110
1173
|
key: 0,
|
1111
1174
|
onClick: handleGroupByColumn,
|
1112
|
-
sx: commonMenuItemStyles
|
1175
|
+
sx: commonMenuItemStyles
|
1113
1176
|
}, React__default.createElement(material.Box, {
|
1114
1177
|
sx: commonListItemStyles
|
1115
1178
|
}, React__default.createElement(material.ListItemIcon, null, React__default.createElement(DynamicFeedIcon, null)), (_localization = localization[column.getIsGrouped() ? 'ungroupByColumn' : 'groupByColumn']) == null ? void 0 : _localization.replace('{column}', String(columnDef.header))))], enablePinning && column.getCanPin() && [React__default.createElement(material.MenuItem, {
|
@@ -1118,7 +1181,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
|
|
1118
1181
|
onClick: function onClick() {
|
1119
1182
|
return handlePinColumn('left');
|
1120
1183
|
},
|
1121
|
-
sx: commonMenuItemStyles
|
1184
|
+
sx: commonMenuItemStyles
|
1122
1185
|
}, React__default.createElement(material.Box, {
|
1123
1186
|
sx: commonListItemStyles
|
1124
1187
|
}, React__default.createElement(material.ListItemIcon, null, React__default.createElement(PushPinIcon, {
|
@@ -1131,7 +1194,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
|
|
1131
1194
|
onClick: function onClick() {
|
1132
1195
|
return handlePinColumn('right');
|
1133
1196
|
},
|
1134
|
-
sx: commonMenuItemStyles
|
1197
|
+
sx: commonMenuItemStyles
|
1135
1198
|
}, React__default.createElement(material.Box, {
|
1136
1199
|
sx: commonListItemStyles
|
1137
1200
|
}, React__default.createElement(material.ListItemIcon, null, React__default.createElement(PushPinIcon, {
|
@@ -1145,21 +1208,21 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
|
|
1145
1208
|
onClick: function onClick() {
|
1146
1209
|
return handlePinColumn(false);
|
1147
1210
|
},
|
1148
|
-
sx: commonMenuItemStyles
|
1211
|
+
sx: commonMenuItemStyles
|
1149
1212
|
}, React__default.createElement(material.Box, {
|
1150
1213
|
sx: commonListItemStyles
|
1151
|
-
}, React__default.createElement(material.ListItemIcon, null, React__default.createElement(PushPinIcon, null)), localization.unpin))], enableColumnResizing && [React__default.createElement(material.MenuItem, {
|
1152
|
-
disabled: !
|
1214
|
+
}, React__default.createElement(material.ListItemIcon, null, React__default.createElement(PushPinIcon, null)), localization.unpin))], enableColumnResizing && column.getCanResize() && [React__default.createElement(material.MenuItem, {
|
1215
|
+
disabled: !columnSizing[column.id],
|
1153
1216
|
key: 0,
|
1154
1217
|
onClick: handleResetColumnSize,
|
1155
|
-
sx: commonMenuItemStyles
|
1218
|
+
sx: commonMenuItemStyles
|
1156
1219
|
}, React__default.createElement(material.Box, {
|
1157
1220
|
sx: commonListItemStyles
|
1158
1221
|
}, React__default.createElement(material.ListItemIcon, null, React__default.createElement(RestartAltIcon, null)), localization.resetColumnSize))], enableHiding && [React__default.createElement(material.MenuItem, {
|
1159
1222
|
disabled: columnDef.enableHiding === false,
|
1160
1223
|
key: 0,
|
1161
1224
|
onClick: handleHideColumn,
|
1162
|
-
sx: commonMenuItemStyles
|
1225
|
+
sx: commonMenuItemStyles
|
1163
1226
|
}, React__default.createElement(material.Box, {
|
1164
1227
|
sx: commonListItemStyles
|
1165
1228
|
}, React__default.createElement(material.ListItemIcon, null, React__default.createElement(VisibilityOffIcon, null)), (_localization$hideCol = localization.hideColumn) == null ? void 0 : _localization$hideCol.replace('{column}', String(columnDef.header)))), React__default.createElement(material.MenuItem, {
|
@@ -1168,7 +1231,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
|
|
1168
1231
|
}).length,
|
1169
1232
|
key: 1,
|
1170
1233
|
onClick: handleShowAllColumns,
|
1171
|
-
sx: commonMenuItemStyles
|
1234
|
+
sx: commonMenuItemStyles
|
1172
1235
|
}, React__default.createElement(material.Box, {
|
1173
1236
|
sx: commonListItemStyles
|
1174
1237
|
}, React__default.createElement(material.ListItemIcon, null, React__default.createElement(ViewColumnIcon, null)), (_localization$showAll = localization.showAllColumns) == null ? void 0 : _localization$showAll.replace('{column}', String(columnDef.header))), React__default.createElement(material.IconButton, {
|
@@ -1214,7 +1277,7 @@ var MRT_RowActionMenu = function MRT_RowActionMenu(_ref) {
|
|
1214
1277
|
}
|
1215
1278
|
}, enableEditing && React__default.createElement(material.MenuItem, {
|
1216
1279
|
onClick: handleEdit,
|
1217
|
-
sx: commonMenuItemStyles
|
1280
|
+
sx: commonMenuItemStyles
|
1218
1281
|
}, React__default.createElement(material.Box, {
|
1219
1282
|
sx: commonListItemStyles
|
1220
1283
|
}, React__default.createElement(material.ListItemIcon, null, React__default.createElement(EditIcon, null)), localization.edit)), renderRowActionMenuItems == null ? void 0 : renderRowActionMenuItems({
|
@@ -1365,19 +1428,7 @@ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
|
|
1365
1428
|
var _getState = getState(),
|
1366
1429
|
density = _getState.density;
|
1367
1430
|
|
1368
|
-
var
|
1369
|
-
if (selectAll) {
|
1370
|
-
if (selectAllMode === 'all') {
|
1371
|
-
table.getToggleAllRowsSelectedHandler()(event);
|
1372
|
-
} else if (selectAllMode === 'page') {
|
1373
|
-
table.getToggleAllPageRowsSelectedHandler()(event);
|
1374
|
-
}
|
1375
|
-
} else if (row) {
|
1376
|
-
row == null ? void 0 : row.getToggleSelectedHandler()(event);
|
1377
|
-
}
|
1378
|
-
};
|
1379
|
-
|
1380
|
-
var checkboxProps = selectAll ? muiSelectAllCheckboxProps instanceof Function ? muiSelectAllCheckboxProps({
|
1431
|
+
var checkboxProps = !row ? muiSelectAllCheckboxProps instanceof Function ? muiSelectAllCheckboxProps({
|
1381
1432
|
table: table
|
1382
1433
|
}) : muiSelectAllCheckboxProps : muiSelectCheckboxProps instanceof Function ? muiSelectCheckboxProps({
|
1383
1434
|
row: row,
|
@@ -1394,12 +1445,13 @@ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
|
|
1394
1445
|
inputProps: {
|
1395
1446
|
'aria-label': selectAll ? localization.toggleSelectAll : localization.toggleSelectRow
|
1396
1447
|
},
|
1397
|
-
onChange:
|
1448
|
+
onChange: !row ? selectAllMode === 'all' ? table.getToggleAllRowsSelectedHandler() : table.getToggleAllPageRowsSelectedHandler() : row.getToggleSelectedHandler(),
|
1398
1449
|
size: density === 'compact' ? 'small' : 'medium'
|
1399
1450
|
}, checkboxProps, {
|
1400
1451
|
sx: _extends({
|
1401
|
-
height: density === 'compact' ? '1.
|
1402
|
-
width: density === 'compact' ? '1.
|
1452
|
+
height: density === 'compact' ? '1.5rem' : '2rem',
|
1453
|
+
width: density === 'compact' ? '1.5rem' : '2rem',
|
1454
|
+
m: '-1re.m'
|
1403
1455
|
}, checkboxProps == null ? void 0 : checkboxProps.sx)
|
1404
1456
|
})));
|
1405
1457
|
};
|
@@ -2103,16 +2155,16 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
|
|
2103
2155
|
setFilterValue = _useState2[1];
|
2104
2156
|
|
2105
2157
|
var handleChangeDebounced = React.useCallback(material.debounce(function (event) {
|
2158
|
+
var value = textFieldProps.type === 'date' ? new Date(event.target.value) : event.target.value;
|
2159
|
+
|
2106
2160
|
if (inputIndex !== undefined) {
|
2107
2161
|
column.setFilterValue(function (old) {
|
2108
2162
|
var newFilterValues = old != null ? old : ['', ''];
|
2109
|
-
newFilterValues[inputIndex] =
|
2163
|
+
newFilterValues[inputIndex] = value;
|
2110
2164
|
return newFilterValues;
|
2111
2165
|
});
|
2112
2166
|
} else {
|
2113
|
-
|
2114
|
-
|
2115
|
-
column.setFilterValue((_event$target$value = event.target.value) != null ? _event$target$value : undefined);
|
2167
|
+
column.setFilterValue(value != null ? value : undefined);
|
2116
2168
|
}
|
2117
2169
|
}, 200), []);
|
2118
2170
|
|
@@ -2519,11 +2571,6 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
|
|
2519
2571
|
|
2520
2572
|
var tableCellProps = _extends({}, mTableHeadCellProps, mcTableHeadCellProps);
|
2521
2573
|
|
2522
|
-
var headerElement = (_ref2 = (columnDef == null ? void 0 : columnDef.Header) instanceof Function ? columnDef == null ? void 0 : columnDef.Header == null ? void 0 : columnDef.Header({
|
2523
|
-
header: header,
|
2524
|
-
table: table
|
2525
|
-
}) : columnDef == null ? void 0 : columnDef.Header) != null ? _ref2 : columnDef.header;
|
2526
|
-
|
2527
2574
|
var getIsLastLeftPinnedColumn = function getIsLastLeftPinnedColumn() {
|
2528
2575
|
return column.getIsPinned() === 'left' && table.getLeftLeafHeaders().length - 1 === column.getPinnedIndex();
|
2529
2576
|
};
|
@@ -2538,17 +2585,21 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
|
|
2538
2585
|
|
2539
2586
|
var handleDragEnter = function handleDragEnter(_e) {
|
2540
2587
|
if (enableColumnOrdering && currentDraggingColumn) {
|
2541
|
-
setCurrentHoveredColumn(
|
2588
|
+
setCurrentHoveredColumn(columnDef.enableColumnOrdering !== false ? column : null);
|
2542
2589
|
}
|
2543
2590
|
};
|
2544
2591
|
|
2545
|
-
var tableHeadCellRef = React__default.useRef(null);
|
2546
2592
|
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;
|
2547
2593
|
var draggingBorders = draggingBorder ? {
|
2548
2594
|
borderLeft: draggingBorder,
|
2549
2595
|
borderRight: draggingBorder,
|
2550
2596
|
borderTop: draggingBorder
|
2551
2597
|
} : undefined;
|
2598
|
+
var headerElement = (_ref2 = (columnDef == null ? void 0 : columnDef.Header) instanceof Function ? columnDef == null ? void 0 : columnDef.Header == null ? void 0 : columnDef.Header({
|
2599
|
+
header: header,
|
2600
|
+
table: table
|
2601
|
+
}) : columnDef == null ? void 0 : columnDef.Header) != null ? _ref2 : columnDef.header;
|
2602
|
+
var tableHeadCellRef = React__default.useRef(null);
|
2552
2603
|
return React__default.createElement(material.TableCell, Object.assign({
|
2553
2604
|
align: columnDefType === 'group' ? 'center' : 'left',
|
2554
2605
|
colSpan: header.colSpan,
|
@@ -2573,7 +2624,7 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
|
|
2573
2624
|
right: column.getIsPinned() === 'right' ? getTotalRight() + "px" : undefined,
|
2574
2625
|
transition: "all " + (enableColumnResizing ? 0 : '0.2s') + " ease-in-out",
|
2575
2626
|
userSelect: enableMultiSort && column.getCanSort() ? 'none' : undefined,
|
2576
|
-
verticalAlign: '
|
2627
|
+
verticalAlign: 'top',
|
2577
2628
|
zIndex: column.getIsResizing() || (currentDraggingColumn == null ? void 0 : currentDraggingColumn.id) === column.id ? 3 : column.getIsPinned() && columnDefType !== 'group' ? 2 : 1
|
2578
2629
|
}, tableCellProps == null ? void 0 : tableCellProps.sx, draggingBorders, {
|
2579
2630
|
maxWidth: "min(" + column.getSize() + "px, fit-content)",
|
@@ -2581,7 +2632,7 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
|
|
2581
2632
|
width: header.getSize()
|
2582
2633
|
});
|
2583
2634
|
}
|
2584
|
-
}), header.isPlaceholder ? null :
|
2635
|
+
}), header.isPlaceholder ? null : React__default.createElement(material.Box, {
|
2585
2636
|
sx: {
|
2586
2637
|
alignItems: 'flex-start',
|
2587
2638
|
display: 'flex',
|
@@ -2598,27 +2649,27 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
|
|
2598
2649
|
flexWrap: 'nowrap',
|
2599
2650
|
whiteSpace: ((_columnDef$header$len = (_columnDef$header = columnDef.header) == null ? void 0 : _columnDef$header.length) != null ? _columnDef$header$len : 0) < 24 ? 'nowrap' : 'normal'
|
2600
2651
|
}
|
2601
|
-
}, headerElement,
|
2652
|
+
}, headerElement, column.getCanSort() && React__default.createElement(MRT_TableHeadCellSortLabel, {
|
2602
2653
|
header: header,
|
2603
2654
|
table: table
|
2604
|
-
}),
|
2655
|
+
}), column.getCanFilter() && React__default.createElement(MRT_TableHeadCellFilterLabel, {
|
2605
2656
|
header: header,
|
2606
2657
|
table: table
|
2607
|
-
})), React__default.createElement(material.Box, {
|
2658
|
+
})), columnDefType !== 'group' && React__default.createElement(material.Box, {
|
2608
2659
|
sx: {
|
2609
2660
|
whiteSpace: 'nowrap'
|
2610
2661
|
}
|
2611
|
-
},
|
2662
|
+
}, (enableColumnDragging && columnDef.enableColumnDragging !== false || enableColumnOrdering && columnDef.enableColumnOrdering !== false || enableGrouping && columnDef.enableGrouping !== false) && React__default.createElement(MRT_TableHeadCellGrabHandle, {
|
2612
2663
|
column: column,
|
2613
2664
|
table: table,
|
2614
2665
|
tableHeadCellRef: tableHeadCellRef
|
2615
|
-
}), (enableColumnActions || columnDef.enableColumnActions) && columnDef.enableColumnActions !== false &&
|
2666
|
+
}), (enableColumnActions || columnDef.enableColumnActions) && columnDef.enableColumnActions !== false && React__default.createElement(MRT_TableHeadCellColumnActionsButton, {
|
2616
2667
|
header: header,
|
2617
2668
|
table: table
|
2618
2669
|
})), column.getCanResize() && React__default.createElement(MRT_TableHeadCellResizeHandle, {
|
2619
2670
|
header: header,
|
2620
2671
|
table: table
|
2621
|
-
})),
|
2672
|
+
})), column.getCanFilter() && React__default.createElement(MRT_TableHeadCellFilterContainer, {
|
2622
2673
|
header: header,
|
2623
2674
|
table: table
|
2624
2675
|
}));
|
@@ -2929,7 +2980,7 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
|
|
2929
2980
|
|
2930
2981
|
var handleDragEnter = function handleDragEnter(_e) {
|
2931
2982
|
if (enableColumnOrdering && currentDraggingColumn) {
|
2932
|
-
setCurrentHoveredColumn(
|
2983
|
+
setCurrentHoveredColumn(columnDef.enableColumnOrdering !== false ? column : null);
|
2933
2984
|
}
|
2934
2985
|
};
|
2935
2986
|
|
@@ -3387,8 +3438,23 @@ var MRT_TablePaper = function MRT_TablePaper(_ref) {
|
|
3387
3438
|
}));
|
3388
3439
|
};
|
3389
3440
|
|
3441
|
+
var defaultDisplayColumnDefOptions = {
|
3442
|
+
columnDefType: 'display',
|
3443
|
+
enableClickToCopy: false,
|
3444
|
+
enableColumnActions: false,
|
3445
|
+
enableColumnDragging: false,
|
3446
|
+
enableColumnFilter: false,
|
3447
|
+
enableColumnOrdering: false,
|
3448
|
+
enableEditing: false,
|
3449
|
+
enableGlobalFilter: false,
|
3450
|
+
enableGrouping: false,
|
3451
|
+
enableHiding: false,
|
3452
|
+
enablePinning: false,
|
3453
|
+
enableResizing: false,
|
3454
|
+
enableSorting: false
|
3455
|
+
};
|
3390
3456
|
var MRT_TableRoot = function MRT_TableRoot(props) {
|
3391
|
-
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;
|
3457
|
+
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;
|
3392
3458
|
|
3393
3459
|
var _useState = React.useState(props.tableId),
|
3394
3460
|
tableId = _useState[0],
|
@@ -3411,27 +3477,27 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
|
|
3411
3477
|
columnOrder = _useState2[0],
|
3412
3478
|
setColumnOrder = _useState2[1];
|
3413
3479
|
|
3414
|
-
var _useState3 = React.useState(null),
|
3480
|
+
var _useState3 = React.useState((_initialState$current = initialState.currentDraggingColumn) != null ? _initialState$current : null),
|
3415
3481
|
currentDraggingColumn = _useState3[0],
|
3416
3482
|
setCurrentDraggingColumn = _useState3[1];
|
3417
3483
|
|
3418
|
-
var _useState4 = React.useState(null),
|
3484
|
+
var _useState4 = React.useState((_initialState$current2 = initialState.currentDraggingRow) != null ? _initialState$current2 : null),
|
3419
3485
|
currentDraggingRow = _useState4[0],
|
3420
3486
|
setCurrentDraggingRow = _useState4[1];
|
3421
3487
|
|
3422
|
-
var _useState5 = React.useState((_initialState$
|
3488
|
+
var _useState5 = React.useState((_initialState$current3 = initialState.currentEditingCell) != null ? _initialState$current3 : null),
|
3423
3489
|
currentEditingCell = _useState5[0],
|
3424
3490
|
setCurrentEditingCell = _useState5[1];
|
3425
3491
|
|
3426
|
-
var _useState6 = React.useState((_initialState$
|
3492
|
+
var _useState6 = React.useState((_initialState$current4 = initialState.currentEditingRow) != null ? _initialState$current4 : null),
|
3427
3493
|
currentEditingRow = _useState6[0],
|
3428
3494
|
setCurrentEditingRow = _useState6[1];
|
3429
3495
|
|
3430
|
-
var _useState7 = React.useState(null),
|
3496
|
+
var _useState7 = React.useState((_initialState$current5 = initialState.currentHoveredColumn) != null ? _initialState$current5 : null),
|
3431
3497
|
currentHoveredColumn = _useState7[0],
|
3432
3498
|
setCurrentHoveredColumn = _useState7[1];
|
3433
3499
|
|
3434
|
-
var _useState8 = React.useState(null),
|
3500
|
+
var _useState8 = React.useState((_initialState$current6 = initialState.currentHoveredRow) != null ? _initialState$current6 : null),
|
3435
3501
|
currentHoveredRow = _useState8[0],
|
3436
3502
|
setCurrentHoveredRow = _useState8[1];
|
3437
3503
|
|
@@ -3457,9 +3523,9 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
|
|
3457
3523
|
|
3458
3524
|
var _useState14 = React.useState(function () {
|
3459
3525
|
return Object.assign.apply(Object, [{}].concat(getAllLeafColumnDefs(props.columns).map(function (col) {
|
3460
|
-
var _ref, _col$id$toString, _col$id, _col$accessorKey, _col$filterFn$name, _ref2, _col$filterFn, _initialState$
|
3526
|
+
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;
|
3461
3527
|
|
3462
|
-
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$
|
3528
|
+
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;
|
3463
3529
|
})));
|
3464
3530
|
}),
|
3465
3531
|
currentFilterFns = _useState14[0],
|
@@ -3470,16 +3536,14 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
|
|
3470
3536
|
setCurrentGlobalFilterFn = _useState15[1];
|
3471
3537
|
|
3472
3538
|
var displayColumns = React.useMemo(function () {
|
3473
|
-
var _props$localization, _props$localization2, _props$localization3, _props$localization4, _props$localization6;
|
3539
|
+
var _props$localization, _props$displayColumnD, _props$localization2, _props$displayColumnD2, _props$localization3, _props$displayColumnD3, _props$localization4, _props$displayColumnD4, _props$localization6, _props$displayColumnD5;
|
3474
3540
|
|
3475
|
-
return [columnOrder.includes('mrt-row-drag') && {
|
3476
|
-
columnDefType: 'display',
|
3541
|
+
return [columnOrder.includes('mrt-row-drag') && _extends({
|
3477
3542
|
header: (_props$localization = props.localization) == null ? void 0 : _props$localization.move,
|
3478
|
-
id: 'mrt-row-drag',
|
3479
|
-
muiTableBodyCellProps: props.muiTableBodyCellProps,
|
3480
|
-
muiTableHeadCellProps: props.muiTableHeadCellProps,
|
3481
3543
|
size: 60
|
3482
|
-
},
|
3544
|
+
}, defaultDisplayColumnDefOptions, (_props$displayColumnD = props.displayColumnDefOptions) == null ? void 0 : _props$displayColumnD['mrt-row-drag'], {
|
3545
|
+
id: 'mrt-row-drag'
|
3546
|
+
}), columnOrder.includes('mrt-row-actions') && _extends({
|
3483
3547
|
Cell: function Cell(_ref5) {
|
3484
3548
|
var cell = _ref5.cell;
|
3485
3549
|
return React__default.createElement(MRT_ToggleRowActionMenuButton, {
|
@@ -3487,13 +3551,11 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
|
|
3487
3551
|
table: table
|
3488
3552
|
});
|
3489
3553
|
},
|
3490
|
-
columnDefType: 'display',
|
3491
3554
|
header: (_props$localization2 = props.localization) == null ? void 0 : _props$localization2.actions,
|
3492
|
-
id: 'mrt-row-actions',
|
3493
|
-
muiTableBodyCellProps: props.muiTableBodyCellProps,
|
3494
|
-
muiTableHeadCellProps: props.muiTableHeadCellProps,
|
3495
3555
|
size: 70
|
3496
|
-
},
|
3556
|
+
}, defaultDisplayColumnDefOptions, (_props$displayColumnD2 = props.displayColumnDefOptions) == null ? void 0 : _props$displayColumnD2['mrt-row-actions'], {
|
3557
|
+
id: 'mrt-row-actions'
|
3558
|
+
}), columnOrder.includes('mrt-row-expand') && _extends({
|
3497
3559
|
Cell: function Cell(_ref6) {
|
3498
3560
|
var cell = _ref6.cell;
|
3499
3561
|
return React__default.createElement(MRT_ExpandButton, {
|
@@ -3506,13 +3568,11 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
|
|
3506
3568
|
table: table
|
3507
3569
|
}) : null;
|
3508
3570
|
},
|
3509
|
-
columnDefType: 'display',
|
3510
3571
|
header: (_props$localization3 = props.localization) == null ? void 0 : _props$localization3.expand,
|
3511
|
-
id: 'mrt-row-expand',
|
3512
|
-
muiTableBodyCellProps: props.muiTableBodyCellProps,
|
3513
|
-
muiTableHeadCellProps: props.muiTableHeadCellProps,
|
3514
3572
|
size: 60
|
3515
|
-
},
|
3573
|
+
}, defaultDisplayColumnDefOptions, (_props$displayColumnD3 = props.displayColumnDefOptions) == null ? void 0 : _props$displayColumnD3['mrt-row-expand'], {
|
3574
|
+
id: 'mrt-row-expand'
|
3575
|
+
}), columnOrder.includes('mrt-row-select') && _extends({
|
3516
3576
|
Cell: function Cell(_ref7) {
|
3517
3577
|
var cell = _ref7.cell;
|
3518
3578
|
return React__default.createElement(MRT_SelectCheckbox, {
|
@@ -3526,13 +3586,11 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
|
|
3526
3586
|
table: table
|
3527
3587
|
}) : null;
|
3528
3588
|
},
|
3529
|
-
columnDefType: 'display',
|
3530
3589
|
header: (_props$localization4 = props.localization) == null ? void 0 : _props$localization4.select,
|
3531
|
-
id: 'mrt-row-select',
|
3532
|
-
muiTableBodyCellProps: props.muiTableBodyCellProps,
|
3533
|
-
muiTableHeadCellProps: props.muiTableHeadCellProps,
|
3534
3590
|
size: 60
|
3535
|
-
},
|
3591
|
+
}, defaultDisplayColumnDefOptions, (_props$displayColumnD4 = props.displayColumnDefOptions) == null ? void 0 : _props$displayColumnD4['mrt-row-select'], {
|
3592
|
+
id: 'mrt-row-select'
|
3593
|
+
}), columnOrder.includes('mrt-row-numbers') && _extends({
|
3536
3594
|
Cell: function Cell(_ref8) {
|
3537
3595
|
var cell = _ref8.cell;
|
3538
3596
|
return cell.row.index + 1;
|
@@ -3542,14 +3600,12 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
|
|
3542
3600
|
|
3543
3601
|
return (_props$localization5 = props.localization) == null ? void 0 : _props$localization5.rowNumber;
|
3544
3602
|
},
|
3545
|
-
columnDefType: 'display',
|
3546
3603
|
header: (_props$localization6 = props.localization) == null ? void 0 : _props$localization6.rowNumbers,
|
3547
|
-
id: 'mrt-row-numbers',
|
3548
|
-
muiTableBodyCellProps: props.muiTableBodyCellProps,
|
3549
|
-
muiTableHeadCellProps: props.muiTableHeadCellProps,
|
3550
3604
|
size: 60
|
3551
|
-
}
|
3552
|
-
|
3605
|
+
}, defaultDisplayColumnDefOptions, (_props$displayColumnD5 = props.displayColumnDefOptions) == null ? void 0 : _props$displayColumnD5['mrt-row-numbers'], {
|
3606
|
+
id: 'mrt-row-numbers'
|
3607
|
+
})].filter(Boolean);
|
3608
|
+
}, [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]);
|
3553
3609
|
var columnDefs = React.useMemo(function () {
|
3554
3610
|
return prepareColumns([].concat(displayColumns, props.columns), currentFilterFns);
|
3555
3611
|
}, [currentFilterFns, displayColumns, props.columns]);
|