material-react-table 2.11.1 → 2.11.2
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/index.d.ts +8 -6
- package/dist/index.esm.js +59 -43
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +59 -42
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/body/MRT_TableBody.tsx +1 -1
- package/src/components/inputs/MRT_SelectCheckbox.tsx +11 -20
- package/src/components/toolbar/MRT_ToolbarAlertBanner.tsx +4 -6
- package/src/hooks/useMRT_Rows.ts +1 -2
- package/src/utils/row.utils.ts +58 -24
package/dist/index.js
CHANGED
@@ -422,8 +422,8 @@ const MRT_SortingFns = Object.assign(Object.assign({}, reactTable.sortingFns), {
|
|
422
422
|
const rankGlobalFuzzy = (rowA, rowB) => Math.max(...Object.values(rowB.columnFiltersMeta).map((v) => v.rank)) -
|
423
423
|
Math.max(...Object.values(rowA.columnFiltersMeta).map((v) => v.rank));
|
424
424
|
|
425
|
-
const getMRT_Rows = (table,
|
426
|
-
const {
|
425
|
+
const getMRT_Rows = (table, all) => {
|
426
|
+
const { getCenterRows, getPrePaginationRowModel, getRowModel, getState, getTopRows, options: { createDisplayMode, enablePagination, enableRowPinning, manualPagination, positionCreatingRow, rowPinningDisplayMode, }, } = table;
|
427
427
|
const { creatingRow, pagination } = getState();
|
428
428
|
const isRankingRows = getIsRankingRows(table);
|
429
429
|
let rows = [];
|
@@ -436,19 +436,28 @@ const getMRT_Rows = (table, pinnedRowIds = [], all) => {
|
|
436
436
|
: getCenterRows();
|
437
437
|
}
|
438
438
|
else {
|
439
|
+
// fuzzy ranking adjustments
|
439
440
|
rows = getPrePaginationRowModel().rows.sort((a, b) => rankGlobalFuzzy(a, b));
|
440
441
|
if (enablePagination && !manualPagination && !all) {
|
441
442
|
const start = pagination.pageIndex * pagination.pageSize;
|
442
443
|
rows = rows.slice(start, start + pagination.pageSize);
|
443
444
|
}
|
445
|
+
if (enableRowPinning && !(rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky'))) {
|
446
|
+
// "re-center-ize" the rows (no top or bottom pinned rows unless sticky)
|
447
|
+
rows = rows.filter((row) => !row.getIsPinned());
|
448
|
+
}
|
444
449
|
}
|
450
|
+
// row pinning adjustments
|
445
451
|
if (enableRowPinning && (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky'))) {
|
452
|
+
const centerPinnedRowIds = rows
|
453
|
+
.filter((row) => row.getIsPinned())
|
454
|
+
.map((r) => r.id);
|
446
455
|
rows = [
|
447
|
-
...getTopRows().filter((row) => !
|
456
|
+
...getTopRows().filter((row) => !centerPinnedRowIds.includes(row.id)),
|
448
457
|
...rows,
|
449
|
-
...getBottomRows().filter((row) => !pinnedRowIds.includes(row.id)),
|
450
458
|
];
|
451
459
|
}
|
460
|
+
// blank inserted creating row adjustments
|
452
461
|
if (positionCreatingRow !== undefined &&
|
453
462
|
creatingRow &&
|
454
463
|
createDisplayMode === 'row') {
|
@@ -490,20 +499,21 @@ const getIsRowSelected = ({ row, table, }) => {
|
|
490
499
|
row.getCanSelectSubRows() &&
|
491
500
|
row.getIsAllSubRowsSelected()));
|
492
501
|
};
|
493
|
-
const getMRT_RowSelectionHandler = (
|
502
|
+
const getMRT_RowSelectionHandler = ({ row, staticRowIndex = 0, table, }) => (event, value) => {
|
494
503
|
var _a;
|
495
|
-
const { getState, options: { enableBatchRowSelection, enableRowPinning, manualPagination, rowPinningDisplayMode, }, refs: { lastSelectedRowId: lastSelectedRowId }, } = table;
|
504
|
+
const { getState, options: { enableBatchRowSelection, enableMultiRowSelection, enableRowPinning, manualPagination, rowPinningDisplayMode, }, refs: { lastSelectedRowId: lastSelectedRowId }, } = table;
|
496
505
|
const { pagination: { pageIndex, pageSize }, } = getState();
|
497
506
|
const paginationOffset = manualPagination ? 0 : pageSize * pageIndex;
|
498
|
-
const
|
499
|
-
const isStickySelection = enableRowPinning && (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('select'));
|
507
|
+
const wasCurrentRowChecked = getIsRowSelected({ row, table });
|
500
508
|
// toggle selection of this row
|
501
|
-
row.
|
509
|
+
row.toggleSelected(value !== null && value !== void 0 ? value : !wasCurrentRowChecked);
|
510
|
+
const changedRowIds = new Set([row.id]);
|
502
511
|
// if shift key is pressed, select all rows between last selected and this one
|
503
512
|
if (enableBatchRowSelection &&
|
513
|
+
enableMultiRowSelection &&
|
504
514
|
event.nativeEvent.shiftKey &&
|
505
515
|
lastSelectedRowId.current !== null) {
|
506
|
-
const rows = getMRT_Rows(table,
|
516
|
+
const rows = getMRT_Rows(table, true);
|
507
517
|
const lastIndex = rows.findIndex((r) => r.id === lastSelectedRowId.current);
|
508
518
|
if (lastIndex !== -1) {
|
509
519
|
const isLastIndexChecked = getIsRowSelected({
|
@@ -516,9 +526,10 @@ const getMRT_RowSelectionHandler = () => ({ event, row, staticRowIndex = 0, tabl
|
|
516
526
|
: [currentIndex, lastIndex];
|
517
527
|
// toggle selection of all rows between last selected and this one
|
518
528
|
// but only if the last selected row is not the same as the current one
|
519
|
-
if (
|
529
|
+
if (wasCurrentRowChecked !== isLastIndexChecked) {
|
520
530
|
for (let i = start; i <= end; i++) {
|
521
|
-
rows[i].toggleSelected(!
|
531
|
+
rows[i].toggleSelected(!wasCurrentRowChecked);
|
532
|
+
changedRowIds.add(rows[i].id);
|
522
533
|
}
|
523
534
|
}
|
524
535
|
}
|
@@ -529,14 +540,27 @@ const getMRT_RowSelectionHandler = () => ({ event, row, staticRowIndex = 0, tabl
|
|
529
540
|
if (row.getCanSelectSubRows() && row.getIsAllSubRowsSelected()) {
|
530
541
|
(_a = row.subRows) === null || _a === void 0 ? void 0 : _a.forEach((r) => r.toggleSelected(false));
|
531
542
|
}
|
532
|
-
if (
|
533
|
-
|
534
|
-
|
535
|
-
|
536
|
-
: '
|
537
|
-
|
543
|
+
if (enableRowPinning && (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('select'))) {
|
544
|
+
changedRowIds.forEach((rowId) => {
|
545
|
+
const rowToTogglePin = table.getRow(rowId);
|
546
|
+
rowToTogglePin.pin(!wasCurrentRowChecked //was not previously pinned or selected
|
547
|
+
? (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('bottom'))
|
548
|
+
? 'bottom'
|
549
|
+
: 'top'
|
550
|
+
: false);
|
551
|
+
});
|
538
552
|
}
|
539
553
|
};
|
554
|
+
const getMRT_SelectAllHandler = ({ table }) => (event, value) => {
|
555
|
+
const { options: { enableRowPinning, rowPinningDisplayMode, selectAllMode }, refs: { lastSelectedRowId }, } = table;
|
556
|
+
selectAllMode === 'all'
|
557
|
+
? table.toggleAllRowsSelected(value !== null && value !== void 0 ? value : event.target.checked)
|
558
|
+
: table.toggleAllPageRowsSelected(value !== null && value !== void 0 ? value : event.target.checked);
|
559
|
+
if (enableRowPinning && (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('select'))) {
|
560
|
+
table.setRowPinning({ bottom: [], top: [] });
|
561
|
+
}
|
562
|
+
lastSelectedRowId.current = null;
|
563
|
+
};
|
540
564
|
|
541
565
|
const MRT_AggregationFns = Object.assign({}, reactTable.aggregationFns);
|
542
566
|
|
@@ -1081,10 +1105,9 @@ const getMRT_RowPinningColumnDef = (tableOptions) => {
|
|
1081
1105
|
const MRT_SelectCheckbox = (_a) => {
|
1082
1106
|
var _b;
|
1083
1107
|
var { row, staticRowIndex, table } = _a, rest = __rest(_a, ["row", "staticRowIndex", "table"]);
|
1084
|
-
const { getState, options: { enableMultiRowSelection,
|
1108
|
+
const { getState, options: { enableMultiRowSelection, localization, muiSelectAllCheckboxProps, muiSelectCheckboxProps, selectAllMode, }, } = table;
|
1085
1109
|
const { density, isLoading } = getState();
|
1086
1110
|
const selectAll = !row;
|
1087
|
-
const isStickySelection = enableRowPinning && (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('select'));
|
1088
1111
|
const allRowsSelected = selectAll
|
1089
1112
|
? selectAllMode === 'page'
|
1090
1113
|
? table.getIsAllPageRowsSelected()
|
@@ -1099,16 +1122,14 @@ const MRT_SelectCheckbox = (_a) => {
|
|
1099
1122
|
row,
|
1100
1123
|
table,
|
1101
1124
|
}))), rest);
|
1102
|
-
const onSelectionChange =
|
1103
|
-
|
1104
|
-
|
1105
|
-
|
1106
|
-
|
1107
|
-
|
1108
|
-
|
1109
|
-
|
1110
|
-
lastSelectedRowId.current = null;
|
1111
|
-
};
|
1125
|
+
const onSelectionChange = row
|
1126
|
+
? getMRT_RowSelectionHandler({
|
1127
|
+
row,
|
1128
|
+
staticRowIndex,
|
1129
|
+
table,
|
1130
|
+
})
|
1131
|
+
: undefined;
|
1132
|
+
const onSelectAllChange = getMRT_SelectAllHandler({ table });
|
1112
1133
|
const commonProps = Object.assign(Object.assign({ 'aria-label': selectAll
|
1113
1134
|
? localization.toggleSelectAll
|
1114
1135
|
: localization.toggleSelectRow, checked: isChecked, disabled: isLoading || (row && !row.getCanSelect()) || (row === null || row === void 0 ? void 0 : row.id) === 'mrt-row-create', inputProps: {
|
@@ -1117,9 +1138,7 @@ const MRT_SelectCheckbox = (_a) => {
|
|
1117
1138
|
: localization.toggleSelectRow,
|
1118
1139
|
}, onChange: (event) => {
|
1119
1140
|
event.stopPropagation();
|
1120
|
-
row
|
1121
|
-
? onSelectionChange({ event, row, staticRowIndex, table })
|
1122
|
-
: onSelectAllChange(event);
|
1141
|
+
row ? onSelectionChange(event) : onSelectAllChange(event);
|
1123
1142
|
}, size: (density === 'compact' ? 'small' : 'medium') }, checkboxProps), { onClick: (e) => {
|
1124
1143
|
var _a;
|
1125
1144
|
e.stopPropagation();
|
@@ -1779,10 +1798,10 @@ const useMRT_RowVirtualizer = (table, rows) => {
|
|
1779
1798
|
return rowVirtualizer;
|
1780
1799
|
};
|
1781
1800
|
|
1782
|
-
const useMRT_Rows = (table
|
1801
|
+
const useMRT_Rows = (table) => {
|
1783
1802
|
const { getRowModel, getState, options: { data, enableGlobalFilterRankedResults, positionCreatingRow }, } = table;
|
1784
1803
|
const { creatingRow, expanded, globalFilter, pagination, rowPinning, sorting, } = getState();
|
1785
|
-
const rows = react.useMemo(() => getMRT_Rows(table
|
1804
|
+
const rows = react.useMemo(() => getMRT_Rows(table), [
|
1786
1805
|
creatingRow,
|
1787
1806
|
data,
|
1788
1807
|
enableGlobalFilterRankedResults,
|
@@ -2310,7 +2329,7 @@ const MRT_TableBody = (_a) => {
|
|
2310
2329
|
.rows.filter((row) => row.getIsPinned())
|
2311
2330
|
.map((r) => r.id);
|
2312
2331
|
}, [rowPinning, getRowModel().rows]);
|
2313
|
-
const rows = useMRT_Rows(table
|
2332
|
+
const rows = useMRT_Rows(table);
|
2314
2333
|
const rowVirtualizer = useMRT_RowVirtualizer(table, rows);
|
2315
2334
|
const { virtualRows } = rowVirtualizer !== null && rowVirtualizer !== void 0 ? rowVirtualizer : {};
|
2316
2335
|
const commonRowProps = {
|
@@ -3515,7 +3534,7 @@ const MRT_TableHeadRow = (_a) => {
|
|
3515
3534
|
const MRT_ToolbarAlertBanner = (_a) => {
|
3516
3535
|
var _b, _c, _d;
|
3517
3536
|
var { stackAlertBanner, table } = _a, rest = __rest(_a, ["stackAlertBanner", "table"]);
|
3518
|
-
const { getFilteredSelectedRowModel, getPrePaginationRowModel, getState, options: { enableRowSelection, enableSelectAll, localization, manualPagination, muiToolbarAlertBannerChipProps, muiToolbarAlertBannerProps, positionToolbarAlertBanner, renderToolbarAlertBannerContent, rowCount, }, refs: {
|
3537
|
+
const { getFilteredSelectedRowModel, getPrePaginationRowModel, getState, options: { enableRowSelection, enableSelectAll, localization, manualPagination, muiToolbarAlertBannerChipProps, muiToolbarAlertBannerProps, positionToolbarAlertBanner, renderToolbarAlertBannerContent, rowCount, }, refs: { tablePaperRef }, } = table;
|
3519
3538
|
const { density, grouping, rowSelection, showAlertBanner } = getState();
|
3520
3539
|
const alertProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiToolbarAlertBannerProps, {
|
3521
3540
|
table,
|
@@ -3523,14 +3542,11 @@ const MRT_ToolbarAlertBanner = (_a) => {
|
|
3523
3542
|
const chipProps = parseFromValuesOrFunc(muiToolbarAlertBannerChipProps, {
|
3524
3543
|
table,
|
3525
3544
|
});
|
3526
|
-
const totalRowCount = rowCount !== null && rowCount !== void 0 ? rowCount : getPrePaginationRowModel().
|
3545
|
+
const totalRowCount = rowCount !== null && rowCount !== void 0 ? rowCount : getPrePaginationRowModel().flatRows.length;
|
3527
3546
|
const selectedRowCount = react.useMemo(() => manualPagination
|
3528
3547
|
? Object.values(rowSelection).filter(Boolean).length
|
3529
3548
|
: getFilteredSelectedRowModel().rows.length, [rowSelection, totalRowCount, manualPagination]);
|
3530
|
-
const selectedAlert = selectedRowCount > 0 ? (jsxRuntime.jsxs(Stack__default["default"], { alignItems: "center", direction: "row", gap: "16px", children: [(_c = (_b = localization.selectedCountOfRowCountRowsSelected) === null || _b === void 0 ? void 0 : _b.replace('{selectedCount}', selectedRowCount.toLocaleString())) === null || _c === void 0 ? void 0 : _c.replace('{rowCount}', totalRowCount.toString()), jsxRuntime.jsx(Button__default["default"], { onClick: () => {
|
3531
|
-
table.toggleAllRowsSelected(false);
|
3532
|
-
lastSelectedRowId.current = null;
|
3533
|
-
}, size: "small", sx: { p: '2px' }, children: localization.clearSelection })] })) : null;
|
3549
|
+
const selectedAlert = selectedRowCount > 0 ? (jsxRuntime.jsxs(Stack__default["default"], { alignItems: "center", direction: "row", gap: "16px", children: [(_c = (_b = localization.selectedCountOfRowCountRowsSelected) === null || _b === void 0 ? void 0 : _b.replace('{selectedCount}', selectedRowCount.toLocaleString())) === null || _c === void 0 ? void 0 : _c.replace('{rowCount}', totalRowCount.toString()), jsxRuntime.jsx(Button__default["default"], { onClick: (event) => getMRT_SelectAllHandler({ table })(event, false), size: "small", sx: { p: '2px' }, children: localization.clearSelection })] })) : null;
|
3534
3550
|
const groupedAlert = grouping.length > 0 ? (jsxRuntime.jsxs("span", { children: [localization.groupedBy, ' ', grouping.map((columnId, index) => (jsxRuntime.jsxs(react.Fragment, { children: [index > 0 ? localization.thenBy : '', jsxRuntime.jsx(Chip__default["default"], Object.assign({ label: table.getColumn(columnId).columnDef.header, onDelete: () => table.getColumn(columnId).toggleGrouping() }, chipProps))] }, `${index}-${columnId}`)))] })) : null;
|
3535
3551
|
return (jsxRuntime.jsx(Collapse__default["default"], { in: showAlertBanner || !!selectedAlert || !!groupedAlert, timeout: stackAlertBanner ? 200 : 0, children: jsxRuntime.jsx(Alert__default["default"], Object.assign({ color: "info", icon: false }, alertProps, { sx: (theme) => {
|
3536
3552
|
var _a, _b;
|
@@ -4297,6 +4313,7 @@ exports.getIsRowSelected = getIsRowSelected;
|
|
4297
4313
|
exports.getLeadingDisplayColumnIds = getLeadingDisplayColumnIds;
|
4298
4314
|
exports.getMRT_RowSelectionHandler = getMRT_RowSelectionHandler;
|
4299
4315
|
exports.getMRT_Rows = getMRT_Rows;
|
4316
|
+
exports.getMRT_SelectAllHandler = getMRT_SelectAllHandler;
|
4300
4317
|
exports.getTotalRight = getTotalRight;
|
4301
4318
|
exports.getTrailingDisplayColumnIds = getTrailingDisplayColumnIds;
|
4302
4319
|
exports.isCellEditable = isCellEditable;
|