material-react-table 1.15.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 +2 -2
- package/dist/cjs/index.js +15 -18
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/material-react-table.esm.js +15 -18
- package/dist/esm/material-react-table.esm.js.map +1 -1
- package/package.json +27 -27
- package/src/body/MRT_TableBodyCell.tsx +1 -1
- 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/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">
|
@@ -193,6 +193,6 @@ _Open in [Code Sandbox](https://codesandbox.io/s/simple-material-react-table-exa
|
|
193
193
|
|
194
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!
|
195
195
|
|
196
|
-
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.
|
197
197
|
|
198
198
|
<!-- Use the FORCE, Luke! -->
|
package/dist/cjs/index.js
CHANGED
@@ -620,9 +620,7 @@ const MRT_ExpandAllButton = ({ table }) => {
|
|
620
620
|
? muiExpandAllButtonProps({ table })
|
621
621
|
: muiExpandAllButtonProps;
|
622
622
|
const isAllRowsExpanded = getIsAllRowsExpanded();
|
623
|
-
return (jsxRuntime.jsx(Tooltip__default["default"], { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: (
|
624
|
-
? localization.collapseAll
|
625
|
-
: 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
|
626
624
|
? iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx(theme)
|
627
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: {
|
628
626
|
transform: `rotate(${isAllRowsExpanded ? -180 : getIsSomeRowsExpanded() ? -90 : 0}deg)`,
|
@@ -645,9 +643,7 @@ const MRT_ExpandButton = ({ row, table, }) => {
|
|
645
643
|
row.toggleExpanded();
|
646
644
|
(_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.onClick) === null || _a === void 0 ? void 0 : _a.call(iconButtonProps, event);
|
647
645
|
};
|
648
|
-
return (jsxRuntime.jsx(Tooltip__default["default"], { arrow: true, disableHoverListener: !canExpand && !renderDetailPanel, enterDelay: 1000, enterNextDelay: 1000, title: (
|
649
|
-
? localization.collapse
|
650
|
-
: 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
|
651
647
|
? iconButtonProps.sx(theme)
|
652
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: {
|
653
649
|
transform: `rotate(${!canExpand && !renderDetailPanel ? -90 : isExpanded ? -180 : 0}deg)`,
|
@@ -1223,7 +1219,7 @@ const MRT_FullScreenToggleButton = (_a) => {
|
|
1223
1219
|
const handleToggleFullScreen = () => {
|
1224
1220
|
setIsFullScreen(!isFullScreen);
|
1225
1221
|
};
|
1226
|
-
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, {}) })) }));
|
1227
1223
|
};
|
1228
1224
|
|
1229
1225
|
const MRT_ColumnPinningButtons = ({ column, table, }) => {
|
@@ -2023,14 +2019,15 @@ const MRT_TableHeadCellSortLabel = ({ header, table, tableCellProps, }) => {
|
|
2023
2019
|
const { column } = header;
|
2024
2020
|
const { columnDef } = column;
|
2025
2021
|
const { sorting } = getState();
|
2026
|
-
const
|
2027
|
-
|
2022
|
+
const sorted = column.getIsSorted();
|
2023
|
+
const sortTooltip = sorted
|
2024
|
+
? sorted === 'desc'
|
2028
2025
|
? localization.sortedByColumnDesc.replace('{column}', columnDef.header)
|
2029
2026
|
: localization.sortedByColumnAsc.replace('{column}', columnDef.header)
|
2030
|
-
:
|
2031
|
-
|
2032
|
-
|
2033
|
-
|
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: {
|
2034
2031
|
flex: '0 0',
|
2035
2032
|
width: '2.4ch',
|
2036
2033
|
transform: (tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.align) !== 'right'
|
@@ -2180,7 +2177,7 @@ const MRT_TableHeadRow = ({ headerGroup, table, virtualColumns, virtualPaddingLe
|
|
2180
2177
|
const header = virtualColumns
|
2181
2178
|
? headerGroup.headers[headerOrVirtualHeader.index]
|
2182
2179
|
: headerOrVirtualHeader;
|
2183
|
-
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;
|
2184
2181
|
}), virtualPaddingRight ? (jsxRuntime.jsx("th", { style: { display: 'flex', width: virtualPaddingRight } })) : null] })));
|
2185
2182
|
};
|
2186
2183
|
|
@@ -2521,7 +2518,7 @@ const MRT_TableBodyCell = ({ cell, measureElement, numRows, rowIndex, rowRef, ta
|
|
2521
2518
|
table,
|
2522
2519
|
theme,
|
2523
2520
|
tableCellProps,
|
2524
|
-
})), draggingBorders)), children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [cell.getIsPlaceholder() ? ((_b = (_a = columnDef.PlaceholderCell) === null || _a === void 0 ? void 0 : _a.call(columnDef, { cell, column, row, table })) !== null && _b !== void 0 ? _b : null) :
|
2521
|
+
})), draggingBorders)), children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [cell.getIsPlaceholder() ? ((_b = (_a = columnDef.PlaceholderCell) === null || _a === void 0 ? void 0 : _a.call(columnDef, { cell, column, row, table })) !== null && _b !== void 0 ? _b : null) : isLoading || showSkeletons ? (jsxRuntime.jsx(Skeleton__default["default"], Object.assign({ animation: "wave", height: 20, width: skeletonWidth }, skeletonProps))) : enableRowNumbers &&
|
2525
2522
|
rowNumberMode === 'static' &&
|
2526
2523
|
column.id === 'mrt-row-numbers' ? (rowIndex + 1) : column.id === 'mrt-row-drag' ? (jsxRuntime.jsx(MRT_TableBodyRowGrabHandle, { cell: cell, rowRef: rowRef, table: table })) : columnDefType === 'display' &&
|
2527
2524
|
(column.id === 'mrt-row-select' ||
|
@@ -2611,12 +2608,12 @@ const MRT_TableBodyRow = ({ columnVirtualizer, measureElement, numRows, row, row
|
|
2611
2608
|
? cellOrVirtualCell
|
2612
2609
|
: undefined,
|
2613
2610
|
};
|
2614
|
-
return memoMode === 'cells' &&
|
2611
|
+
return cell ? (memoMode === 'cells' &&
|
2615
2612
|
cell.column.columnDef.columnDefType === 'data' &&
|
2616
2613
|
!draggingColumn &&
|
2617
2614
|
!draggingRow &&
|
2618
2615
|
(editingCell === null || editingCell === void 0 ? void 0 : editingCell.id) !== cell.id &&
|
2619
|
-
(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;
|
2620
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 }))] }));
|
2621
2618
|
};
|
2622
2619
|
const Memo_MRT_TableBodyRow = react.memo(MRT_TableBodyRow, (prev, next) => prev.row === next.row && prev.rowIndex === next.rowIndex);
|
@@ -2773,7 +2770,7 @@ const MRT_TableFooterRow = ({ footerGroup, table, virtualColumns, virtualPadding
|
|
2773
2770
|
const footer = virtualColumns
|
2774
2771
|
? footerGroup.headers[footerOrVirtualFooter.index]
|
2775
2772
|
: footerOrVirtualFooter;
|
2776
|
-
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;
|
2777
2774
|
}), virtualPaddingRight ? (jsxRuntime.jsx("th", { style: { display: 'flex', width: virtualPaddingRight } })) : null] })));
|
2778
2775
|
};
|
2779
2776
|
|