material-react-table 0.4.9 → 0.5.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.4.9",
+  "version": "0.5.0",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material-UI implementation of react-table, inspired by material-table and the mui DataGrid, written from the ground up in TypeScript.",
@@ -61,8 +61,8 @@
     "@emotion/styled": "^11.8.1",
     "@etchteam/storybook-addon-status": "^4.2.0",
     "@faker-js/faker": "^6.0.0-alpha.7",
-    "@mui/icons-material": "^5.4.2",
-    "@mui/material": "^5.4.3",
+    "@mui/icons-material": "^5.4.4",
+    "@mui/material": "^5.4.4",
     "@size-limit/preset-small-lib": "^7.0.8",
     "@storybook/addon-a11y": "^6.4.19",
     "@storybook/addon-actions": "^6.4.19",

package/src/body/MRT_TableBody.tsx

@@ -1,13 +1,9 @@
 import React, { FC } from 'react';
-import { styled, TableBody as MuiTableBody } from '@mui/material';
+import { TableBody } from '@mui/material';
 import { MRT_TableBodyRow } from './MRT_TableBodyRow';
 import { useMRT } from '../useMRT';
 import { MRT_Row } from '..';
 
-const TableBody = styled(MuiTableBody)({
-  overflowY: 'hidden',
-});
-
 interface Props {}
 
 export const MRT_TableBody: FC<Props> = () => {
@@ -20,12 +16,15 @@ export const MRT_TableBody: FC<Props> = () => {
     ...tableInstance.getTableBodyProps(),
     style: {
       ...tableInstance.getTableBodyProps().style,
-      ...(muiTableBodyProps?.style ?? {}),
+      ...muiTableBodyProps?.style,
     },
   };
 
   return (
-    <TableBody {...tableBodyProps}>
+    <TableBody
+      {...tableBodyProps}
+      sx={{ overflowY: 'hidden', ...tableBodyProps?.sx }}
+    >
       {rows.map((row: MRT_Row) => {
         tableInstance.prepareRow(row);
         return <MRT_TableBodyRow key={row.getRowProps().key} row={row} />;

package/src/body/MRT_TableBodyCell.tsx

@@ -1,16 +1,20 @@
 import React, { FC, MouseEvent } from 'react';
-import { styled, TableCell as MuiTableCell } from '@mui/material';
+import { TableCell, TableCellProps } from '@mui/material';
 import { useMRT } from '../useMRT';
 import { MRT_EditCellTextField } from '../inputs/MRT_EditCellTextField';
 import { MRT_Cell } from '..';
 
-export const MRT_StyledTableBodyCell = styled(MuiTableCell, {
-  shouldForwardProp: (prop) => prop !== 'densePadding',
-})<{ densePadding?: boolean }>(({ densePadding }) => ({
-  padding: densePadding ? '0.5rem' : '1rem',
+export const commonTableBodyCellStyles = (densePadding: boolean) => ({
+  p: densePadding ? '0.5rem' : '1rem',
   transition: 'all 0.2s ease-in-out',
   whiteSpace: densePadding ? 'nowrap' : 'normal',
-}));
+});
+
+export const commonTableBodyButtonCellStyles = (densePadding: boolean) => ({
+  p: densePadding ? '1px' : '0.6rem',
+  textAlign: 'center',
+  transition: 'all 0.2s ease-in-out',
+});
 
 interface Props {
   cell: MRT_Cell;
@@ -40,18 +44,23 @@ export const MRT_TableBodyCell: FC<Props> = ({ cell }) => {
     ...cell.getCellProps(),
     style: {
       ...cell.getCellProps().style,
-      ...(mTableCellBodyProps?.style ?? {}),
-      ...(mcTableCellBodyProps?.style ?? {}),
+      ...mTableCellBodyProps?.style,
+      ...mcTableCellBodyProps?.style,
     },
   };
 
   return (
-    <MRT_StyledTableBodyCell
-      densePadding={densePadding}
+    <TableCell
       onClick={(event: MouseEvent<HTMLTableCellElement>) =>
         onCellClick?.(event, cell)
       }
       {...tableCellProps}
+      sx={
+        {
+          ...commonTableBodyCellStyles(densePadding),
+          ...tableCellProps?.sx,
+        } as TableCellProps['sx']
+      }
     >
       {currentEditingRow?.id === cell.row.id ? (
         <MRT_EditCellTextField cell={cell} />
@@ -64,6 +73,6 @@ export const MRT_TableBodyCell: FC<Props> = ({ cell }) => {
       ) : (
         cell.render('Cell')
       )}
-    </MRT_StyledTableBodyCell>
+    </TableCell>
   );
 };

package/src/body/MRT_TableBodyRow.tsx

@@ -1,7 +1,7 @@
 import React, { FC, MouseEvent } from 'react';
-import { alpha, styled, TableRow as MuiTableRow } from '@mui/material';
+import { alpha, TableCell, TableRow } from '@mui/material';
 import {
-  MRT_StyledTableBodyCell,
+  commonTableBodyCellStyles,
   MRT_TableBodyCell,
 } from './MRT_TableBodyCell';
 import { useMRT } from '../useMRT';
@@ -11,14 +11,6 @@ import { MRT_SelectCheckbox } from '../inputs/MRT_SelectCheckbox';
 import { MRT_ToggleRowActionMenuButton } from '../buttons/MRT_ToggleRowActionMenuButton';
 import { MRT_Cell, MRT_Row } from '..';
 
-export const TableRow = styled(MuiTableRow, {
-  shouldForwardProp: (prop) => prop !== 'isSelected',
-})<{ isSelected?: boolean }>(({ isSelected, theme }) => ({
-  backgroundColor: isSelected
-    ? alpha(theme.palette.primary.light, 0.1)
-    : 'transparent',
-}));
-
 interface Props {
   row: MRT_Row;
 }
@@ -26,6 +18,7 @@ interface Props {
 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' && (

package/src/body/MRT_TableDetailPanel.tsx

@@ -1,22 +1,8 @@
 import React, { FC, MouseEvent } from 'react';
-import {
-  Collapse,
-  styled,
-  TableCell as MuiTableCell,
-  TableRow,
-} from '@mui/material';
+import { Collapse, TableCell, TableRow } from '@mui/material';
 import { useMRT } from '../useMRT';
 import { MRT_Row } from '..';
 
-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',
-}));
-
 interface Props {
   row: MRT_Row;
 }
@@ -30,20 +16,11 @@ 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)
@@ -53,11 +30,17 @@ export const MRT_TableDetailPanel: FC<Props> = ({ row }) => {
     <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,13 +1,8 @@
 import React, { FC } from 'react';
-import { IconButton, styled, Tooltip } from '@mui/material';
+import { Box, IconButton, Tooltip } from '@mui/material';
 import { useMRT } from '../useMRT';
 import { MRT_Row } from '..';
 
-const EditActionButtonWrappers = styled('div')({
-  display: 'flex',
-  gap: '0.75rem',
-});
-
 interface Props {
   row: MRT_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,15 +1,8 @@
 import React, { FC } from 'react';
-import { IconButton, styled } from '@mui/material';
+import { IconButton, TableCell } from '@mui/material';
 import { useMRT } from '../useMRT';
-import { MRT_TableButtonCell } from '../table/MRT_TableButtonCell';
 import { MRT_Row } from '..';
-
-const TableCell = styled(MRT_TableButtonCell, {
-  shouldForwardProp: (prop) => prop !== 'depth',
-})<{ depth: number }>(({ depth }) => ({
-  paddingLeft: `${depth + 0.5}rem`,
-  textAlign: 'left',
-}));
+import { commonTableBodyButtonCellStyles } from '../body/MRT_TableBodyCell';
 
 interface Props {
   row: MRT_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,20 +4,14 @@ import {
   IconButton,
   Menu,
   Tooltip,
-  styled,
   Divider,
   IconButtonProps,
+  Box,
 } from '@mui/material';
 import { useMRT } from '../useMRT';
 import { MRT_ShowHideColumnsMenu } from '../menus/MRT_ShowHideColumnsMenu';
 import { MRT_ColumnInstance } from '..';
 
-const MenuButtons = styled('div')({
-  display: 'flex',
-  justifyContent: 'space-between',
-  padding: '0 0.5rem 0.5rem 0.5rem',
-});
-
 interface Props extends IconButtonProps {}
 
 export const MRT_ShowHideColumnsButton: FC<Props> = ({ ...rest }) => {
@@ -50,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 &&
@@ -66,7 +66,7 @@ export const MRT_ShowHideColumnsButton: FC<Props> = ({ ...rest }) => {
           >
             {localization.columnShowHideMenuShowAll}
           </Button>
-        </MenuButtons>
+        </Box>
         <Divider />
         {tableInstance.columns.map((column: MRT_ColumnInstance, index) => (
           <MRT_ShowHideColumnsMenu

package/src/buttons/MRT_ToggleColumnActionMenuButton.tsx

@@ -1,20 +1,9 @@
 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 { MRT_HeaderGroup } from '..';
 
-const IconButton = styled(MuiIconButton)({
-  opacity: 0.5,
-  transition: 'opacity 0.2s',
-  marginRight: '2px',
-  height: '1.6rem',
-  width: '1.6rem',
-  '&:hover': {
-    opacity: 1,
-  },
-});
-
 interface Props {
   column: MRT_HeaderGroup;
 }
@@ -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 { 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,7 +15,7 @@ const IconButton = styled(MuiIconButton)({
   '&:hover': {
     opacity: 1,
   },
-});
+};
 
 interface Props {
   row: MRT_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_TableFooterCell.tsx

@@ -1,20 +1,8 @@
 import React, { FC } from 'react';
-import { styled, TableCell as MuiTableCell } from '@mui/material';
+import { TableCell } from '@mui/material';
 import { useMRT } from '../useMRT';
 import { MRT_HeaderGroup } from '..';
 
-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`,
-  }),
-);
-
 interface Props {
   column: MRT_HeaderGroup;
 }
@@ -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

@@ -36,7 +36,7 @@ export const MRT_TableFooterRow: FC<Props> = ({ footerGroup }) => {
     ...footerGroup.getFooterGroupProps(),
     style: {
       ...footerGroup.getFooterGroupProps().style,
-      ...(mTableFooterRowProps?.style ?? {}),
+      ...mTableFooterRowProps?.style,
     },
   };