material-react-table 1.14.0 → 1.15.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -2
- package/dist/cjs/index.js +18 -17
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/types/column.utils.d.ts +4 -4
- package/dist/cjs/types/sortingFns.d.ts +1 -418
- package/dist/cjs/types/types.d.ts +3 -3
- package/dist/esm/material-react-table.esm.js +18 -17
- package/dist/esm/material-react-table.esm.js.map +1 -1
- package/dist/esm/types/column.utils.d.ts +4 -4
- package/dist/esm/types/sortingFns.d.ts +1 -418
- package/dist/esm/types/types.d.ts +3 -3
- package/dist/index.d.ts +14 -14
- package/package.json +36 -36
- package/src/body/MRT_TableBodyRow.tsx +7 -5
- package/src/buttons/MRT_ExpandAllButton.tsx +2 -3
- package/src/buttons/MRT_ExpandButton.tsx +2 -3
- package/src/buttons/MRT_FullScreenToggleButton.tsx +1 -1
- package/src/footer/MRT_TableFooterRow.tsx +2 -2
- package/src/head/MRT_TableHeadCellSortLabel.tsx +8 -9
- package/src/head/MRT_TableHeadRow.tsx +2 -2
- package/src/sortingFns.ts +1 -5
- package/src/types.ts +375 -377
package/README.md
CHANGED
@@ -14,7 +14,7 @@ View [Documentation](https://www.material-react-table.com/)
|
|
14
14
|
<a href="https://star-history.com/#kevinvandy/material-react-table&Date" target="_blank">
|
15
15
|
<img alt="" src="https://badgen.net/github/stars/KevinVandy/material-react-table?color=blue" />
|
16
16
|
</a>
|
17
|
-
<a href="https://github.com/KevinVandy/material-react-table/blob/
|
17
|
+
<a href="https://github.com/KevinVandy/material-react-table/blob/v1/LICENSE" target="_blank">
|
18
18
|
<img alt="" src="https://badgen.net/github/license/KevinVandy/material-react-table?color=blue" />
|
19
19
|
</a>
|
20
20
|
<a href="http://makeapullrequest.com" target="_blank">
|
@@ -73,6 +73,7 @@ _**Fully Fleshed out [Docs](https://www.material-react-table.com/docs/guides#gui
|
|
73
73
|
- [x] Data Editing (4 different editing modes)
|
74
74
|
- [x] Density Toggle
|
75
75
|
- [x] Detail Panels (Expansion)
|
76
|
+
- [x] Faceted Value Generation for Filter Options
|
76
77
|
- [x] Filtering (supports client-side and server-side)
|
77
78
|
- [x] Filter Match Highlighting
|
78
79
|
- [x] Full Screen Mode
|
@@ -192,6 +193,6 @@ _Open in [Code Sandbox](https://codesandbox.io/s/simple-material-react-table-exa
|
|
192
193
|
|
193
194
|
PRs are Welcome, but please discuss in [GitHub Discussions](https://github.com/KevinVandy/material-react-table/discussions) or the [Discord Server](https://discord.gg/5wqyRx6fnm) first if it is a large change!
|
194
195
|
|
195
|
-
Read the [Contributing Guide](https://github.com/KevinVandy/material-react-table/blob/
|
196
|
+
Read the [Contributing Guide](https://github.com/KevinVandy/material-react-table/blob/v1/CONTRIBUTING.md) to learn how to run this project locally.
|
196
197
|
|
197
198
|
<!-- Use the FORCE, Luke! -->
|
package/dist/cjs/index.js
CHANGED
@@ -179,6 +179,10 @@ function __rest(s, e) {
|
|
179
179
|
}
|
180
180
|
return t;
|
181
181
|
}
|
182
|
+
typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
|
183
|
+
var e = new Error(message);
|
184
|
+
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
185
|
+
};
|
182
186
|
|
183
187
|
const MRT_AggregationFns = Object.assign({}, reactTable.aggregationFns);
|
184
188
|
|
@@ -616,9 +620,7 @@ const MRT_ExpandAllButton = ({ table }) => {
|
|
616
620
|
? muiExpandAllButtonProps({ table })
|
617
621
|
: muiExpandAllButtonProps;
|
618
622
|
const isAllRowsExpanded = getIsAllRowsExpanded();
|
619
|
-
return (jsxRuntime.jsx(Tooltip__default["default"], { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: (
|
620
|
-
? localization.collapseAll
|
621
|
-
: localization.expandAll, children: jsxRuntime.jsx("span", { children: jsxRuntime.jsx(IconButton__default["default"], Object.assign({ "aria-label": localization.expandAll, disabled: isLoading || (!renderDetailPanel && !getCanSomeRowsExpand()), onClick: () => toggleAllRowsExpanded(!isAllRowsExpanded) }, iconButtonProps, { sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.25rem', width: density === 'compact' ? '1.75rem' : '2.25rem', mt: density !== 'compact' ? '-0.25rem' : undefined }, ((iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx) instanceof Function
|
623
|
+
return (jsxRuntime.jsx(Tooltip__default["default"], { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : (isAllRowsExpanded ? localization.collapseAll : localization.expandAll), children: jsxRuntime.jsx("span", { children: jsxRuntime.jsx(IconButton__default["default"], Object.assign({ "aria-label": localization.expandAll, disabled: isLoading || (!renderDetailPanel && !getCanSomeRowsExpand()), onClick: () => toggleAllRowsExpanded(!isAllRowsExpanded) }, iconButtonProps, { sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.25rem', width: density === 'compact' ? '1.75rem' : '2.25rem', mt: density !== 'compact' ? '-0.25rem' : undefined }, ((iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx) instanceof Function
|
622
624
|
? iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx(theme)
|
623
625
|
: iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx))), title: undefined, children: (_b = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.children) !== null && _b !== void 0 ? _b : (jsxRuntime.jsx(KeyboardDoubleArrowDownIcon, { style: {
|
624
626
|
transform: `rotate(${isAllRowsExpanded ? -180 : getIsSomeRowsExpanded() ? -90 : 0}deg)`,
|
@@ -641,9 +643,7 @@ const MRT_ExpandButton = ({ row, table, }) => {
|
|
641
643
|
row.toggleExpanded();
|
642
644
|
(_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.onClick) === null || _a === void 0 ? void 0 : _a.call(iconButtonProps, event);
|
643
645
|
};
|
644
|
-
return (jsxRuntime.jsx(Tooltip__default["default"], { arrow: true, disableHoverListener: !canExpand && !renderDetailPanel, enterDelay: 1000, enterNextDelay: 1000, title: (
|
645
|
-
? localization.collapse
|
646
|
-
: localization.expand, children: jsxRuntime.jsx("span", { children: jsxRuntime.jsx(IconButton__default["default"], Object.assign({ "aria-label": localization.expand, disabled: !canExpand && !renderDetailPanel }, iconButtonProps, { onClick: handleToggleExpand, sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.25rem', width: density === 'compact' ? '1.75rem' : '2.25rem' }, ((iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx) instanceof Function
|
646
|
+
return (jsxRuntime.jsx(Tooltip__default["default"], { arrow: true, disableHoverListener: !canExpand && !renderDetailPanel, enterDelay: 1000, enterNextDelay: 1000, title: (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : (isExpanded ? localization.collapse : localization.expand), children: jsxRuntime.jsx("span", { children: jsxRuntime.jsx(IconButton__default["default"], Object.assign({ "aria-label": localization.expand, disabled: !canExpand && !renderDetailPanel }, iconButtonProps, { onClick: handleToggleExpand, sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.25rem', width: density === 'compact' ? '1.75rem' : '2.25rem' }, ((iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx) instanceof Function
|
647
647
|
? iconButtonProps.sx(theme)
|
648
648
|
: iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx))), title: undefined, children: (_b = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.children) !== null && _b !== void 0 ? _b : (jsxRuntime.jsx(ExpandMoreIcon, { style: {
|
649
649
|
transform: `rotate(${!canExpand && !renderDetailPanel ? -90 : isExpanded ? -180 : 0}deg)`,
|
@@ -1219,7 +1219,7 @@ const MRT_FullScreenToggleButton = (_a) => {
|
|
1219
1219
|
const handleToggleFullScreen = () => {
|
1220
1220
|
setIsFullScreen(!isFullScreen);
|
1221
1221
|
};
|
1222
|
-
return (jsxRuntime.jsx(Tooltip__default["default"], { arrow: true, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.toggleFullScreen, children: jsxRuntime.jsx(IconButton__default["default"], Object.assign({ "aria-label": localization.
|
1222
|
+
return (jsxRuntime.jsx(Tooltip__default["default"], { arrow: true, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.toggleFullScreen, children: jsxRuntime.jsx(IconButton__default["default"], Object.assign({ "aria-label": localization.toggleFullScreen, onClick: handleToggleFullScreen }, rest, { title: undefined, children: isFullScreen ? jsxRuntime.jsx(FullscreenExitIcon, {}) : jsxRuntime.jsx(FullscreenIcon, {}) })) }));
|
1223
1223
|
};
|
1224
1224
|
|
1225
1225
|
const MRT_ColumnPinningButtons = ({ column, table, }) => {
|
@@ -2019,14 +2019,15 @@ const MRT_TableHeadCellSortLabel = ({ header, table, tableCellProps, }) => {
|
|
2019
2019
|
const { column } = header;
|
2020
2020
|
const { columnDef } = column;
|
2021
2021
|
const { sorting } = getState();
|
2022
|
-
const
|
2023
|
-
|
2022
|
+
const sorted = column.getIsSorted();
|
2023
|
+
const sortTooltip = sorted
|
2024
|
+
? sorted === 'desc'
|
2024
2025
|
? localization.sortedByColumnDesc.replace('{column}', columnDef.header)
|
2025
2026
|
: localization.sortedByColumnAsc.replace('{column}', columnDef.header)
|
2026
|
-
:
|
2027
|
-
|
2028
|
-
|
2029
|
-
|
2027
|
+
: column.getNextSortingOrder() === 'desc'
|
2028
|
+
? localization.sortByColumnDesc.replace('{column}', columnDef.header)
|
2029
|
+
: localization.sortByColumnAsc.replace('{column}', columnDef.header);
|
2030
|
+
return (jsxRuntime.jsx(Tooltip__default["default"], { arrow: true, placement: "top", title: sortTooltip, children: jsxRuntime.jsx(Badge__default["default"], { badgeContent: sorting.length > 1 ? column.getSortIndex() + 1 : 0, overlap: "circular", children: jsxRuntime.jsx(TableSortLabel__default["default"], { "aria-label": sortTooltip, active: !!sorted, direction: sorted ? sorted : undefined, sx: {
|
2030
2031
|
flex: '0 0',
|
2031
2032
|
width: '2.4ch',
|
2032
2033
|
transform: (tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.align) !== 'right'
|
@@ -2176,7 +2177,7 @@ const MRT_TableHeadRow = ({ headerGroup, table, virtualColumns, virtualPaddingLe
|
|
2176
2177
|
const header = virtualColumns
|
2177
2178
|
? headerGroup.headers[headerOrVirtualHeader.index]
|
2178
2179
|
: headerOrVirtualHeader;
|
2179
|
-
return (jsxRuntime.jsx(MRT_TableHeadCell, { header: header, table: table }, header.id));
|
2180
|
+
return header ? (jsxRuntime.jsx(MRT_TableHeadCell, { header: header, table: table }, header.id)) : null;
|
2180
2181
|
}), virtualPaddingRight ? (jsxRuntime.jsx("th", { style: { display: 'flex', width: virtualPaddingRight } })) : null] })));
|
2181
2182
|
};
|
2182
2183
|
|
@@ -2607,12 +2608,12 @@ const MRT_TableBodyRow = ({ columnVirtualizer, measureElement, numRows, row, row
|
|
2607
2608
|
? cellOrVirtualCell
|
2608
2609
|
: undefined,
|
2609
2610
|
};
|
2610
|
-
return memoMode === 'cells' &&
|
2611
|
+
return cell ? (memoMode === 'cells' &&
|
2611
2612
|
cell.column.columnDef.columnDefType === 'data' &&
|
2612
2613
|
!draggingColumn &&
|
2613
2614
|
!draggingRow &&
|
2614
2615
|
(editingCell === null || editingCell === void 0 ? void 0 : editingCell.id) !== cell.id &&
|
2615
|
-
(editingRow === null || editingRow === void 0 ? void 0 : editingRow.id) !== row.id ? (jsxRuntime.jsx(Memo_MRT_TableBodyCell, Object.assign({}, props), cell.id)) : (jsxRuntime.jsx(MRT_TableBodyCell, Object.assign({}, props), cell.id));
|
2616
|
+
(editingRow === null || editingRow === void 0 ? void 0 : editingRow.id) !== row.id ? (jsxRuntime.jsx(Memo_MRT_TableBodyCell, Object.assign({}, props), cell.id)) : (jsxRuntime.jsx(MRT_TableBodyCell, Object.assign({}, props), cell.id))) : null;
|
2616
2617
|
}), virtualPaddingRight ? (jsxRuntime.jsx("td", { style: { display: 'flex', width: virtualPaddingRight } })) : null] })), renderDetailPanel && !row.getIsGrouped() && (jsxRuntime.jsx(MRT_TableDetailPanel, { parentRowRef: rowRef, row: row, rowIndex: rowIndex, table: table, virtualRow: virtualRow }))] }));
|
2617
2618
|
};
|
2618
2619
|
const Memo_MRT_TableBodyRow = react.memo(MRT_TableBodyRow, (prev, next) => prev.row === next.row && prev.rowIndex === next.rowIndex);
|
@@ -2769,7 +2770,7 @@ const MRT_TableFooterRow = ({ footerGroup, table, virtualColumns, virtualPadding
|
|
2769
2770
|
const footer = virtualColumns
|
2770
2771
|
? footerGroup.headers[footerOrVirtualFooter.index]
|
2771
2772
|
: footerOrVirtualFooter;
|
2772
|
-
return (jsxRuntime.jsx(MRT_TableFooterCell, { footer: footer, table: table }, footer.id));
|
2773
|
+
return footer ? (jsxRuntime.jsx(MRT_TableFooterCell, { footer: footer, table: table }, footer.id)) : null;
|
2773
2774
|
}), virtualPaddingRight ? (jsxRuntime.jsx("th", { style: { display: 'flex', width: virtualPaddingRight } })) : null] })));
|
2774
2775
|
};
|
2775
2776
|
|