material-react-table 1.2.0 → 1.2.2

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.2.0",
+  "version": "1.2.2",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript.",
@@ -93,7 +93,7 @@
     "@emotion/styled": ">=11",
     "@mui/icons-material": ">=5",
     "@mui/material": ">=5",
-    "react": ">=16.8"
+    "react": ">=17.0"
   },
   "dependencies": {
     "@tanstack/match-sorter-utils": "8.1.1",

package/src/body/MRT_TableDetailPanel.tsx

@@ -10,12 +10,14 @@ interface Props {
 export const MRT_TableDetailPanel: FC<Props> = ({ row, table }) => {
   const {
     getVisibleLeafColumns,
+    getState,
     options: {
       muiTableBodyRowProps,
       muiTableDetailPanelProps,
       renderDetailPanel,
     },
   } = table;
+  const { isLoading } = getState();
 
   const tableRowProps =
     muiTableBodyRowProps instanceof Function
@@ -44,8 +46,8 @@ export const MRT_TableDetailPanel: FC<Props> = ({ row, table }) => {
         })}
       >
         {renderDetailPanel && (
-          <Collapse in={row.getIsExpanded()}>
-            {renderDetailPanel({ row, table })}
+          <Collapse in={row.getIsExpanded()} mountOnEnter unmountOnExit>
+            {!isLoading && renderDetailPanel({ row, table })}
           </Collapse>
         )}
       </TableCell>

package/src/buttons/MRT_ExpandAllButton.tsx

@@ -20,7 +20,7 @@ export const MRT_ExpandAllButton: FC<Props> = ({ table }) => {
     },
     toggleAllRowsExpanded,
   } = table;
-  const { density } = getState();
+  const { density, isLoading } = getState();
 
   const iconButtonProps =
     muiExpandAllButtonProps instanceof Function
@@ -37,7 +37,9 @@ export const MRT_ExpandAllButton: FC<Props> = ({ table }) => {
       <span>
         <IconButton
           aria-label={localization.expandAll}
-          disabled={!getCanSomeRowsExpand() && !renderDetailPanel}
+          disabled={
+            isLoading || (!renderDetailPanel && !getCanSomeRowsExpand())
+          }
           onClick={() => toggleAllRowsExpanded(!getIsAllRowsExpanded())}
           {...iconButtonProps}
           sx={(theme) => ({

package/src/head/MRT_TableHeadCell.tsx

@@ -198,7 +198,7 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
               display: 'flex',
               flexDirection:
                 tableCellProps?.align === 'right' ? 'row-reverse' : 'row',
-              overflow: 'hidden',
+              overflow: columnDefType === 'data' ? 'hidden' : undefined,
               pl:
                 tableCellProps?.align === 'center'
                   ? `${headerPL}rem`
@@ -208,12 +208,12 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
             <Box
               className="Mui-TableHeadCell-Content-Wrapper"
               sx={{
-                overflow: 'hidden',
+                overflow: columnDefType === 'data' ? 'hidden' : undefined,
                 textOverflow: 'ellipsis',
                 whiteSpace:
                   (columnDef.header?.length ?? 0) < 20 ? 'nowrap' : 'normal',
               }}
-              title={columnDef.header}
+              title={columnDefType === 'data' ? columnDef.header : undefined}
             >
               {headerElement}
             </Box>

package/src/inputs/MRT_SelectCheckbox.tsx

@@ -19,7 +19,7 @@ export const MRT_SelectCheckbox: FC<Props> = ({ row, selectAll, table }) => {
       selectAllMode,
     },
   } = table;
-  const { density } = getState();
+  const { density, isLoading } = getState();
 
   const checkboxProps = !row
     ? muiSelectAllCheckboxProps instanceof Function
@@ -35,6 +35,7 @@ export const MRT_SelectCheckbox: FC<Props> = ({ row, selectAll, table }) => {
         ? table.getIsAllPageRowsSelected()
         : table.getIsAllRowsSelected()
       : row?.getIsSelected(),
+    disabled: isLoading,
     inputProps: {
       'aria-label': selectAll
         ? localization.toggleSelectAll