material-react-table 0.4.7 → 0.5.0

package/src/body/MRT_TableBodyRow.tsx

@@ -1,8 +1,7 @@
 import React, { FC, MouseEvent } from 'react';
-import { alpha, styled, TableRow as MuiTableRow } from '@mui/material';
-import { Row } from 'react-table';
+import { alpha, TableCell, TableRow } from '@mui/material';
 import {
-  MRT_StyledTableBodyCell,
+  commonTableBodyCellStyles,
   MRT_TableBodyCell,
 } from './MRT_TableBodyCell';
 import { useMRT } from '../useMRT';
@@ -10,22 +9,16 @@ import { MRT_TableDetailPanel } from './MRT_TableDetailPanel';
 import { MRT_ExpandButton } from '../buttons/MRT_ExpandButton';
 import { MRT_SelectCheckbox } from '../inputs/MRT_SelectCheckbox';
 import { MRT_ToggleRowActionMenuButton } from '../buttons/MRT_ToggleRowActionMenuButton';
-
-export const TableRow = styled(MuiTableRow, {
-  shouldForwardProp: (prop) => prop !== 'isSelected',
-})<{ isSelected?: boolean }>(({ isSelected, theme }) => ({
-  backgroundColor: isSelected
-    ? alpha(theme.palette.primary.light, 0.1)
-    : 'transparent',
-}));
+import { MRT_Cell, MRT_Row } from '..';
 
 interface Props {
-  row: Row;
+  row: MRT_Row;
 }
 
 export const MRT_TableBodyRow: FC<Props> = ({ row }) => {
   const {
     anyRowsCanExpand,
+    densePadding,
     enableRowActions,
     enableRowEditing,
     enableRowNumbers,
@@ -46,22 +39,30 @@ export const MRT_TableBodyRow: FC<Props> = ({ row }) => {
     ...row.getRowProps(),
     style: {
       ...row.getRowProps().style,
-      ...(mTableBodyRowProps?.style ?? {}),
+      ...mTableBodyRowProps?.style,
     },
   };
 
   return (
     <>
       <TableRow
-        isSelected={row.isSelected}
         hover
         onClick={(event: MouseEvent<HTMLTableRowElement>) =>
           onRowClick?.(event, row)
         }
         {...tableRowProps}
+        //@ts-ignore
+        sx={(theme) => ({
+          backgroundColor: row.isSelected
+            ? alpha(theme.palette.primary.light, 0.1)
+            : 'transparent',
+          ...tableRowProps?.sx,
+        })}
       >
         {enableRowNumbers && (
-          <MRT_StyledTableBodyCell>{row.index + 1}</MRT_StyledTableBodyCell>
+          <TableCell sx={{ ...commonTableBodyCellStyles(densePadding) }}>
+            {row.index + 1}
+          </TableCell>
         )}
         {(enableRowActions || enableRowEditing) &&
           positionActionsColumn === 'first' && (
@@ -71,7 +72,7 @@ export const MRT_TableBodyRow: FC<Props> = ({ row }) => {
           <MRT_ExpandButton row={row} />
         )}
         {enableSelection && <MRT_SelectCheckbox row={row} />}
-        {row.cells.map((cell) => (
+        {row.cells.map((cell: MRT_Cell) => (
           <MRT_TableBodyCell key={cell.getCellProps().key} cell={cell} />
         ))}
         {(enableRowActions || enableRowEditing) &&
@@ -79,7 +80,9 @@ export const MRT_TableBodyRow: FC<Props> = ({ row }) => {
             <MRT_ToggleRowActionMenuButton row={row} />
           )}
       </TableRow>
-      {renderDetailPanel && <MRT_TableDetailPanel row={row} />}
+      {renderDetailPanel && !row.isGrouped && (
+        <MRT_TableDetailPanel row={row} />
+      )}
     </>
   );
 };

package/src/body/MRT_TableDetailPanel.tsx

@@ -1,24 +1,10 @@
 import React, { FC, MouseEvent } from 'react';
-import {
-  Collapse,
-  styled,
-  TableCell as MuiTableCell,
-  TableRow,
-} from '@mui/material';
-import { Row } from 'react-table';
+import { Collapse, TableCell, TableRow } from '@mui/material';
 import { useMRT } from '../useMRT';
-
-const TableCell = styled(MuiTableCell, {
-  shouldForwardProp: (prop) => prop !== 'isExpanded',
-})<{ isExpanded?: boolean }>(({ isExpanded }) => ({
-  borderBottom: !isExpanded ? 'none' : undefined,
-  paddingBottom: isExpanded ? '1rem' : 0,
-  paddingTop: isExpanded ? '1rem' : 0,
-  transition: 'all 0.2s ease-in-out',
-}));
+import { MRT_Row } from '..';
 
 interface Props {
-  row: Row;
+  row: MRT_Row;
 }
 
 export const MRT_TableDetailPanel: FC<Props> = ({ row }) => {
@@ -30,34 +16,31 @@ export const MRT_TableDetailPanel: FC<Props> = ({ row }) => {
     tableInstance,
   } = useMRT();
 
-  const mTableBodyRowProps =
+  const tableRowProps =
     muiTableBodyRowProps instanceof Function
       ? muiTableBodyRowProps(row)
       : muiTableBodyRowProps;
 
-  const tableRowProps = {
-    ...mTableBodyRowProps,
-    ...row.getRowProps(),
-    style: {
-      ...row.getRowProps().style,
-      ...(mTableBodyRowProps?.style ?? {}),
-    },
-  };
-
   const tableCellProps =
     muiTableDetailPanelProps instanceof Function
       ? muiTableDetailPanelProps(row)
       : muiTableDetailPanelProps;
 
   return (
-    <TableRow hover {...tableRowProps}>
+    <TableRow {...tableRowProps}>
       <TableCell
         colSpan={tableInstance.visibleColumns.length + 10}
-        isExpanded={row.isExpanded}
         onClick={(event: MouseEvent<HTMLTableCellElement>) =>
           onDetailPanelClick?.(event, row)
         }
         {...tableCellProps}
+        sx={{
+          borderBottom: !row.isExpanded ? 'none' : undefined,
+          pb: row.isExpanded ? '1rem' : 0,
+          pt: row.isExpanded ? '1rem' : 0,
+          transition: 'all 0.2s ease-in-out',
+          ...tableCellProps?.sx,
+        }}
       >
         <Collapse in={row.isExpanded}>{renderDetailPanel?.(row)}</Collapse>
       </TableCell>

package/src/buttons/MRT_EditActionButtons.tsx

@@ -1,15 +1,10 @@
 import React, { FC } from 'react';
-import { IconButton, styled, Tooltip } from '@mui/material';
+import { Box, IconButton, Tooltip } from '@mui/material';
 import { useMRT } from '../useMRT';
-import { Row } from 'react-table';
-
-const EditActionButtonWrappers = styled('div')({
-  display: 'flex',
-  gap: '0.75rem',
-});
+import { MRT_Row } from '..';
 
 interface Props {
-  row: Row;
+  row: MRT_Row;
 }
 
 export const MRT_EditActionButtons: FC<Props> = ({ row }) => {
@@ -32,7 +27,7 @@ export const MRT_EditActionButtons: FC<Props> = ({ row }) => {
   };
 
   return (
-    <EditActionButtonWrappers>
+    <Box sx={{ display: 'flex', gap: '0.75rem' }}>
       <Tooltip arrow title={localization.rowActionButtonCancel}>
         <IconButton
           aria-label={localization.rowActionButtonCancel}
@@ -50,6 +45,6 @@ export const MRT_EditActionButtons: FC<Props> = ({ row }) => {
           <SaveIcon />
         </IconButton>
       </Tooltip>
-    </EditActionButtonWrappers>
+    </Box>
   );
 };

package/src/buttons/MRT_ExpandAllButton.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
-import { IconButton } from '@mui/material';
+import { IconButton, TableCell } from '@mui/material';
 import { useMRT } from '../useMRT';
-import { MRT_TableButtonCell } from '../table/MRT_TableButtonCell';
+import { commonTableBodyButtonCellStyles } from '../body/MRT_TableBodyCell';
 
 interface Props {}
 
@@ -15,10 +15,10 @@ export const MRT_ExpandAllButton: FC<Props> = () => {
   } = useMRT();
 
   return (
-    <MRT_TableButtonCell
+    <TableCell
       size="small"
-      densePadding={densePadding}
       {...tableInstance.getToggleAllRowsExpandedProps()}
+      sx={commonTableBodyButtonCellStyles(densePadding)}
     >
       <IconButton
         aria-label={localization.expandAllButtonTitle}
@@ -33,6 +33,6 @@ export const MRT_ExpandAllButton: FC<Props> = () => {
           }}
         />
       </IconButton>
-    </MRT_TableButtonCell>
+    </TableCell>
   );
 };

package/src/buttons/MRT_ExpandButton.tsx

@@ -1,18 +1,11 @@
 import React, { FC } from 'react';
-import { IconButton, styled } from '@mui/material';
-import { Row } from 'react-table';
+import { IconButton, TableCell } from '@mui/material';
 import { useMRT } from '../useMRT';
-import { MRT_TableButtonCell } from '../table/MRT_TableButtonCell';
-
-const TableCell = styled(MRT_TableButtonCell, {
-  shouldForwardProp: (prop) => prop !== 'depth',
-})<{ depth: number }>(({ depth }) => ({
-  paddingLeft: `${depth + 0.5}rem`,
-  textAlign: 'left',
-}));
+import { MRT_Row } from '..';
+import { commonTableBodyButtonCellStyles } from '../body/MRT_TableBodyCell';
 
 interface Props {
-  row: Row;
+  row: MRT_Row;
 }
 
 export const MRT_ExpandButton: FC<Props> = ({ row }) => {
@@ -24,7 +17,14 @@ export const MRT_ExpandButton: FC<Props> = ({ row }) => {
   } = useMRT();
 
   return (
-    <TableCell size="small" densePadding={densePadding} depth={row.depth}>
+    <TableCell
+      size="small"
+      sx={{
+        ...commonTableBodyButtonCellStyles(densePadding),
+        pl: `${row.depth + 0.5}rem`,
+        textAlign: 'left',
+      }}
+    >
       <IconButton
         aria-label={localization.expandButtonTitle}
         disabled={!row.canExpand && !renderDetailPanel}

package/src/buttons/MRT_ShowHideColumnsButton.tsx

@@ -4,18 +4,13 @@ import {
   IconButton,
   Menu,
   Tooltip,
-  styled,
   Divider,
   IconButtonProps,
+  Box,
 } from '@mui/material';
 import { useMRT } from '../useMRT';
 import { MRT_ShowHideColumnsMenu } from '../menus/MRT_ShowHideColumnsMenu';
-
-const MenuButtons = styled('div')({
-  display: 'flex',
-  justifyContent: 'space-between',
-  padding: '0 0.5rem 0.5rem 0.5rem',
-});
+import { MRT_ColumnInstance } from '..';
 
 interface Props extends IconButtonProps {}
 
@@ -49,7 +44,13 @@ export const MRT_ShowHideColumnsButton: FC<Props> = ({ ...rest }) => {
         open={!!anchorEl}
         onClose={() => setAnchorEl(null)}
       >
-        <MenuButtons>
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            p: '0 0.5rem 0.5rem 0.5rem',
+          }}
+        >
           <Button
             disabled={
               !tableInstance.getToggleHideAllColumnsProps().checked &&
@@ -65,9 +66,9 @@ export const MRT_ShowHideColumnsButton: FC<Props> = ({ ...rest }) => {
           >
             {localization.columnShowHideMenuShowAll}
           </Button>
-        </MenuButtons>
+        </Box>
         <Divider />
-        {tableInstance.columns.map((column, index) => (
+        {tableInstance.columns.map((column: MRT_ColumnInstance, index) => (
           <MRT_ShowHideColumnsMenu
             key={`${index}-${column.id}`}
             column={column}

package/src/buttons/MRT_ToggleColumnActionMenuButton.tsx

@@ -1,22 +1,11 @@
 import React, { FC, MouseEvent, useState } from 'react';
-import { IconButton as MuiIconButton, styled, Tooltip } from '@mui/material';
+import { IconButton, Tooltip } from '@mui/material';
 import { useMRT } from '../useMRT';
 import { MRT_ColumnActionMenu } from '../menus/MRT_ColumnActionMenu';
-import { HeaderGroup } from 'react-table';
-
-const IconButton = styled(MuiIconButton)({
-  opacity: 0.5,
-  transition: 'opacity 0.2s',
-  marginRight: '2px',
-  height: '1.6rem',
-  width: '1.6rem',
-  '&:hover': {
-    opacity: 1,
-  },
-});
+import { MRT_HeaderGroup } from '..';
 
 interface Props {
-  column: HeaderGroup;
+  column: MRT_HeaderGroup;
 }
 
 export const MRT_ToggleColumnActionMenuButton: FC<Props> = ({ column }) => {
@@ -45,6 +34,16 @@ export const MRT_ToggleColumnActionMenuButton: FC<Props> = ({ column }) => {
           aria-label={localization.columnActionMenuButtonTitle}
           onClick={handleClick}
           size="small"
+          sx={{
+            opacity: 0.5,
+            transition: 'opacity 0.2s',
+            marginRight: '2px',
+            height: '1.6rem',
+            width: '1.6rem',
+            '&:hover': {
+              opacity: 1,
+            },
+          }}
         >
           <MoreVertIcon />
         </IconButton>

package/src/buttons/MRT_ToggleRowActionMenuButton.tsx

@@ -1,12 +1,12 @@
 import React, { FC, MouseEvent, useState } from 'react';
-import { IconButton as MuiIconButton, styled, Tooltip } from '@mui/material';
+import { IconButton, TableCell, Tooltip } from '@mui/material';
 import { useMRT } from '../useMRT';
-import { Row } from 'react-table';
 import { MRT_RowActionMenu } from '../menus/MRT_RowActionMenu';
 import { MRT_EditActionButtons } from './MRT_EditActionButtons';
-import { MRT_TableButtonCell } from '../table/MRT_TableButtonCell';
+import { MRT_Row } from '..';
+import { commonTableBodyButtonCellStyles } from '../body/MRT_TableBodyCell';
 
-const IconButton = styled(MuiIconButton)({
+const commonIconButtonStyles = {
   opacity: 0.5,
   transition: 'opacity 0.2s',
   marginRight: '2px',
@@ -15,10 +15,10 @@ const IconButton = styled(MuiIconButton)({
   '&:hover': {
     opacity: 1,
   },
-});
+};
 
 interface Props {
-  row: Row;
+  row: MRT_Row;
 }
 
 export const MRT_ToggleRowActionMenuButton: FC<Props> = ({ row }) => {
@@ -48,7 +48,7 @@ export const MRT_ToggleRowActionMenuButton: FC<Props> = ({ row }) => {
   };
 
   return (
-    <MRT_TableButtonCell densePadding={densePadding}>
+    <TableCell sx={commonTableBodyButtonCellStyles(densePadding)}>
       {renderRowActions ? (
         <>{renderRowActions(row, tableInstance)}</>
       ) : row.id === currentEditingRow?.id ? (
@@ -59,7 +59,7 @@ export const MRT_ToggleRowActionMenuButton: FC<Props> = ({ row }) => {
           arrow
           title={localization.rowActionMenuItemEdit}
         >
-          <IconButton onClick={handleEdit}>
+          <IconButton sx={commonIconButtonStyles} onClick={handleEdit}>
             <EditIcon />
           </IconButton>
         </Tooltip>
@@ -67,9 +67,10 @@ export const MRT_ToggleRowActionMenuButton: FC<Props> = ({ row }) => {
         <>
           <IconButton
             aria-label={localization.rowActionMenuButtonTitle}
-            title={localization.rowActionMenuButtonTitle}
             onClick={handleOpenRowActionMenu}
             size="small"
+            sx={commonIconButtonStyles}
+            title={localization.rowActionMenuButtonTitle}
           >
             <MoreHorizIcon />
           </IconButton>
@@ -81,6 +82,6 @@ export const MRT_ToggleRowActionMenuButton: FC<Props> = ({ row }) => {
           />
         </>
       ) : null}
-    </MRT_TableButtonCell>
+    </TableCell>
   );
 };

package/src/footer/MRT_TableFooter.tsx

@@ -2,6 +2,7 @@ import React, { FC } from 'react';
 import { TableFooter } from '@mui/material';
 import { MRT_TableFooterRow } from './MRT_TableFooterRow';
 import { useMRT } from '../useMRT';
+import { MRT_HeaderGroup } from '..';
 
 interface Props {}
 
@@ -10,7 +11,7 @@ export const MRT_TableFooter: FC<Props> = () => {
 
   return (
     <TableFooter {...muiTableFooterProps}>
-      {tableInstance.footerGroups.map((footerGroup) => (
+      {tableInstance.footerGroups.map((footerGroup: MRT_HeaderGroup) => (
         <MRT_TableFooterRow
           key={footerGroup.getFooterGroupProps().key}
           footerGroup={footerGroup}

package/src/footer/MRT_TableFooterCell.tsx

@@ -1,22 +1,10 @@
 import React, { FC } from 'react';
-import { styled, TableCell as MuiTableCell } from '@mui/material';
-import { HeaderGroup } from 'react-table';
+import { TableCell } from '@mui/material';
 import { useMRT } from '../useMRT';
-
-const TableCell = styled(MuiTableCell, {
-  shouldForwardProp: (prop) =>
-    prop !== 'densePadding' && prop !== 'enableColumnResizing',
-})<{ densePadding?: boolean; enableColumnResizing?: boolean }>(
-  ({ densePadding, enableColumnResizing }) => ({
-    fontWeight: 'bold',
-    verticalAlign: 'text-top',
-    padding: densePadding ? '0.5rem' : '1rem',
-    transition: `all ${enableColumnResizing ? '10ms' : '0.2s'} ease-in-out`,
-  }),
-);
+import { MRT_HeaderGroup } from '..';
 
 interface Props {
-  column: HeaderGroup;
+  column: MRT_HeaderGroup;
 }
 
 export const MRT_TableFooterCell: FC<Props> = ({ column }) => {
@@ -41,18 +29,23 @@ export const MRT_TableFooterCell: FC<Props> = ({ column }) => {
     ...column.getFooterProps(),
     style: {
       ...column.getFooterProps().style,
-      ...(mTableFooterCellProps?.style ?? {}),
-      ...(mcTableFooterCellProps?.style ?? {}),
+      ...mTableFooterCellProps?.style,
+      ...mcTableFooterCellProps?.style,
     },
   };
 
   return (
     <TableCell
       align={isParentHeader ? 'center' : 'left'}
-      densePadding={densePadding}
-      enableColumnResizing={enableColumnResizing}
       variant="head"
       {...tableCellProps}
+      sx={{
+        fontWeight: 'bold',
+        verticalAlign: 'text-top',
+        p: densePadding ? '0.5rem' : '1rem',
+        transition: `all ${enableColumnResizing ? '10ms' : '0.2s'} ease-in-out`,
+        ...tableCellProps?.sx,
+      }}
     >
       {column.render('Footer')}
     </TableCell>

package/src/footer/MRT_TableFooterRow.tsx

@@ -1,12 +1,12 @@
 import React, { FC } from 'react';
 import { TableRow } from '@mui/material';
-import { HeaderGroup } from 'react-table';
 import { MRT_TableFooterCell } from './MRT_TableFooterCell';
 import { MRT_TableSpacerCell } from '../table/MRT_TableSpacerCell';
 import { useMRT } from '../useMRT';
+import { MRT_HeaderGroup } from '..';
 
 interface Props {
-  footerGroup: HeaderGroup;
+  footerGroup: MRT_HeaderGroup;
 }
 
 export const MRT_TableFooterRow: FC<Props> = ({ footerGroup }) => {
@@ -36,7 +36,7 @@ export const MRT_TableFooterRow: FC<Props> = ({ footerGroup }) => {
     ...footerGroup.getFooterGroupProps(),
     style: {
       ...footerGroup.getFooterGroupProps().style,
-      ...(mTableFooterRowProps?.style ?? {}),
+      ...mTableFooterRowProps?.style,
     },
   };
 
@@ -53,7 +53,7 @@ export const MRT_TableFooterRow: FC<Props> = ({ footerGroup }) => {
         />
       )}
       {enableSelection && <MRT_TableSpacerCell width="1rem" />}
-      {footerGroup.headers.map((column) => (
+      {footerGroup.headers.map((column: MRT_HeaderGroup) => (
         <MRT_TableFooterCell
           key={column.getFooterProps().key}
           column={column}

package/src/head/MRT_TableHead.tsx

@@ -2,6 +2,7 @@ import React, { FC } from 'react';
 import { TableHead } from '@mui/material';
 import { MRT_TableHeadRow } from './MRT_TableHeadRow';
 import { useMRT } from '../useMRT';
+import { MRT_HeaderGroup } from '..';
 
 interface Props {}
 
@@ -15,7 +16,7 @@ export const MRT_TableHead: FC<Props> = () => {
 
   return (
     <TableHead {...tableHeadProps}>
-      {tableInstance.headerGroups.map((headerGroup) => (
+      {tableInstance.headerGroups.map((headerGroup: MRT_HeaderGroup) => (
         <MRT_TableHeadRow
           key={headerGroup.getHeaderGroupProps().key}
           headerGroup={headerGroup}