material-react-table 1.2.0 → 1.2.2

package/dist/cjs/index.js

@@ -333,13 +333,13 @@ const rankGlobalFuzzy = (rowA, rowB) => Math.max(...Object.values(rowB.columnFil
 const MRT_ExpandAllButton = ({ table }) => {
     var _a;
     const { getIsAllRowsExpanded, getIsSomeRowsExpanded, getCanSomeRowsExpand, getState, options: { icons: { KeyboardDoubleArrowDownIcon }, localization, muiExpandAllButtonProps, renderDetailPanel, }, toggleAllRowsExpanded, } = table;
-    const { density } = getState();
+    const { density, isLoading } = getState();
     const iconButtonProps = muiExpandAllButtonProps instanceof Function
         ? muiExpandAllButtonProps({ table })
         : muiExpandAllButtonProps;
     return (React__default["default"].createElement(material.Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : localization.expandAll },
         React__default["default"].createElement("span", null,
-            React__default["default"].createElement(material.IconButton, Object.assign({ "aria-label": localization.expandAll, disabled: !getCanSomeRowsExpand() && !renderDetailPanel, onClick: () => toggleAllRowsExpanded(!getIsAllRowsExpanded()) }, 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
+            React__default["default"].createElement(material.IconButton, Object.assign({ "aria-label": localization.expandAll, disabled: isLoading || (!renderDetailPanel && !getCanSomeRowsExpand()), onClick: () => toggleAllRowsExpanded(!getIsAllRowsExpanded()) }, 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
                     ? iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx(theme)
                     : iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx))), title: undefined }),
                 React__default["default"].createElement(KeyboardDoubleArrowDownIcon, { style: {
@@ -957,7 +957,7 @@ const MRT_ToggleRowActionMenuButton = ({ cell, row, table, }) => {
 const MRT_SelectCheckbox = ({ row, selectAll, table }) => {
     var _a;
     const { getState, options: { localization, enableMultiRowSelection, muiSelectCheckboxProps, muiSelectAllCheckboxProps, selectAllMode, }, } = table;
-    const { density } = getState();
+    const { density, isLoading } = getState();
     const checkboxProps = !row
         ? muiSelectAllCheckboxProps instanceof Function
             ? muiSelectAllCheckboxProps({ table })
@@ -969,7 +969,7 @@ const MRT_SelectCheckbox = ({ row, selectAll, table }) => {
             ? selectAllMode === 'page'
                 ? table.getIsAllPageRowsSelected()
                 : table.getIsAllRowsSelected()
-            : row === null || row === void 0 ? void 0 : row.getIsSelected(), inputProps: {
+            : row === null || row === void 0 ? void 0 : row.getIsSelected(), disabled: isLoading, inputProps: {
             'aria-label': selectAll
                 ? localization.toggleSelectAll
                 : localization.toggleSelectRow,
@@ -1859,16 +1859,16 @@ const MRT_TableHeadCell = ({ header, table }) => {
                         : undefined,
                     display: 'flex',
                     flexDirection: (tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.align) === 'right' ? 'row-reverse' : 'row',
-                    overflow: 'hidden',
+                    overflow: columnDefType === 'data' ? 'hidden' : undefined,
                     pl: (tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.align) === 'center'
                         ? `${headerPL}rem`
                         : undefined,
                 } },
                 React__default["default"].createElement(material.Box, { className: "Mui-TableHeadCell-Content-Wrapper", sx: {
-                        overflow: 'hidden',
+                        overflow: columnDefType === 'data' ? 'hidden' : undefined,
                         textOverflow: 'ellipsis',
                         whiteSpace: ((_d = (_c = columnDef.header) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0) < 20 ? 'nowrap' : 'normal',
-                    }, title: columnDef.header }, headerElement),
+                    }, title: columnDefType === 'data' ? columnDef.header : undefined }, headerElement),
                 column.getCanSort() && (React__default["default"].createElement(MRT_TableHeadCellSortLabel, { header: header, table: table, tableCellProps: tableCellProps })),
                 column.getCanFilter() && (React__default["default"].createElement(MRT_TableHeadCellFilterLabel, { header: header, table: table }))),
             columnDefType !== 'group' && (React__default["default"].createElement(material.Box, { className: "Mui-TableHeadCell-Content-Actions", sx: { whiteSpace: 'nowrap' } },
@@ -2151,7 +2151,8 @@ const MRT_TableBodyCell = ({ cell, enableHover, numRows, rowIndex, rowRef, table
 const Memo_MRT_TableBodyCell = React.memo(MRT_TableBodyCell, (prev, next) => next.cell === prev.cell);
 
 const MRT_TableDetailPanel = ({ row, table }) => {
-    const { getVisibleLeafColumns, options: { muiTableBodyRowProps, muiTableDetailPanelProps, renderDetailPanel, }, } = table;
+    const { getVisibleLeafColumns, getState, options: { muiTableBodyRowProps, muiTableDetailPanelProps, renderDetailPanel, }, } = table;
+    const { isLoading } = getState();
     const tableRowProps = muiTableBodyRowProps instanceof Function
         ? muiTableBodyRowProps({ row, table })
         : muiTableBodyRowProps;
@@ -2161,7 +2162,7 @@ const MRT_TableDetailPanel = ({ row, table }) => {
     return (React__default["default"].createElement(material.TableRow, Object.assign({}, tableRowProps),
         React__default["default"].createElement(material.TableCell, Object.assign({ colSpan: getVisibleLeafColumns().length }, tableCellProps, { sx: (theme) => (Object.assign({ borderBottom: !row.getIsExpanded() ? 'none' : undefined, pb: row.getIsExpanded() ? '1rem' : 0, pt: row.getIsExpanded() ? '1rem' : 0, transition: 'all 150ms ease-in-out', width: `${table.getTotalSize()}px` }, ((tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx) instanceof Function
                 ? tableCellProps.sx(theme)
-                : tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx))) }), renderDetailPanel && (React__default["default"].createElement(material.Collapse, { in: row.getIsExpanded() }, renderDetailPanel({ row, table }))))));
+                : tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx))) }), renderDetailPanel && (React__default["default"].createElement(material.Collapse, { in: row.getIsExpanded(), mountOnEnter: true, unmountOnExit: true }, !isLoading && renderDetailPanel({ row, table }))))));
 };
 
 const MRT_TableBodyRow = ({ numRows, row, rowIndex, table, virtualRow, }) => {