material-react-table 0.4.9 → 0.5.2

package/src/buttons/MRT_ToggleSearchButton.tsx

@@ -10,7 +10,7 @@ export const MRT_ToggleSearchButton: FC<Props> = ({ ...rest }) => {
     localization,
     muiSearchTextFieldProps,
     setShowSearch,
-    showSearch,
+    tableInstance: { state: { showSearch } },
   } = useMRT();
 
   const handleToggleSearch = () => {

package/src/footer/MRT_TableFooterCell.tsx

@@ -1,27 +1,20 @@
 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;
 }
 
 export const MRT_TableFooterCell: FC<Props> = ({ column }) => {
-  const { muiTableFooterCellProps, densePadding, enableColumnResizing } =
-    useMRT();
+  const {
+    muiTableFooterCellProps,
+    enableColumnResizing,
+    tableInstance: {
+      state: { densePadding },
+    },
+  } = useMRT();
 
   const isParentHeader = (column?.columns?.length ?? 0) > 0;
 
@@ -41,18 +34,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,
     },
   };
 

package/src/head/MRT_TableHeadCell.tsx

@@ -1,54 +1,27 @@
 import React, { FC } from 'react';
 import {
-  TableCell as MuiTableCell,
+  TableCell,
   TableSortLabel,
-  styled,
-  Divider as MuiDivider,
+  Divider,
   Collapse,
   Tooltip,
+  Box,
 } from '@mui/material';
 import { useMRT } from '../useMRT';
 import { MRT_FilterTextField } from '../inputs/MRT_FilterTextField';
 import { MRT_ToggleColumnActionMenuButton } from '../buttons/MRT_ToggleColumnActionMenuButton';
 import { MRT_HeaderGroup } from '..';
 
-export const MRT_StyledTableHeadCell = styled(MuiTableCell, {
-  shouldForwardProp: (prop) =>
-    prop !== 'densePadding' && prop !== 'enableColumnResizing',
-})<{ densePadding?: boolean; enableColumnResizing?: boolean }>(
-  ({ densePadding, enableColumnResizing }) => ({
-    fontWeight: 'bold',
-    height: '100%',
-    padding: densePadding ? '0.5rem' : '1rem',
-    paddingTop: densePadding ? '0.75rem' : '1.25rem',
-    transition: `all ${enableColumnResizing ? '10ms' : '0.2s'} ease-in-out`,
-    verticalAlign: 'text-top',
-  }),
-);
-
-const TableCellWrapper = styled('div')({
-  alignContent: 'space-between',
-  display: 'grid',
+export const commonTableHeadCellStyles = (
+  densePadding: boolean,
+  enableColumnResizing?: boolean,
+) => ({
+  fontWeight: 'bold',
   height: '100%',
-});
-
-const TableCellTopContents = styled('div')({
-  width: '100%',
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'flex-start',
-});
-
-const CellFlexItem = styled('span')({
-  alignItems: 'center',
-  display: 'flex',
-  flexWrap: 'nowrap',
-});
-
-const Divider = styled(MuiDivider)({
-  borderRightWidth: '2px',
-  borderRadius: '2px',
-  maxHeight: '2rem',
+  p: densePadding ? '0.5rem' : '1rem',
+  pt: densePadding ? '0.75rem' : '1.25rem',
+  transition: `all ${enableColumnResizing ? '10ms' : '0.2s'} ease-in-out`,
+  verticalAlign: 'text-top',
 });
 
 interface Props {
@@ -57,13 +30,11 @@ interface Props {
 
 export const MRT_TableHeadCell: FC<Props> = ({ column }) => {
   const {
-    densePadding,
     disableColumnActions,
     disableFilters,
     enableColumnResizing,
     localization,
     muiTableHeadCellProps,
-    showFilters,
     tableInstance,
   } = useMRT();
 
@@ -85,8 +56,8 @@ export const MRT_TableHeadCell: FC<Props> = ({ column }) => {
     ...column.getHeaderProps(),
     style: {
       ...column.getHeaderProps().style,
-      ...(mTableHeadCellProps?.style ?? {}),
-      ...(mcTableHeadCellProps?.style ?? {}),
+      ...mTableHeadCellProps?.style,
+      ...mcTableHeadCellProps?.style,
     },
   };
 
@@ -103,17 +74,33 @@ export const MRT_TableHeadCell: FC<Props> = ({ column }) => {
       );
 
   return (
-    <MRT_StyledTableHeadCell
+    <TableCell
       align={isParentHeader ? 'center' : 'left'}
-      densePadding={densePadding}
-      enableColumnResizing={enableColumnResizing}
       {...tableCellProps}
+      sx={{
+        ...commonTableHeadCellStyles(
+          tableInstance.state.densePadding,
+          enableColumnResizing,
+        ),
+        ...tableCellProps?.sx,
+      }}
     >
-      <TableCellWrapper>
-        <TableCellTopContents
-          style={{ justifyContent: isParentHeader ? 'center' : undefined }}
+      <Box
+        sx={{ alignContent: 'space-between', display: 'grid', height: '100%' }}
+      >
+        <Box
+          sx={{
+            alignItems: 'flex-start',
+            display: 'flex',
+            justifyContent: isParentHeader ? 'center' : 'space-between',
+            width: '100%',
+          }}
         >
-          <CellFlexItem {...column.getSortByToggleProps()} title={undefined}>
+          <Box
+            {...column.getSortByToggleProps()}
+            sx={{ alignItems: 'center', display: 'flex', flexWrap: 'nowrap' }}
+            title={undefined}
+          >
             {column.render('Header')}
             {!isParentHeader && column.canSort && (
               <Tooltip arrow title={sortTooltip}>
@@ -124,8 +111,10 @@ export const MRT_TableHeadCell: FC<Props> = ({ column }) => {
                 />
               </Tooltip>
             )}
-          </CellFlexItem>
-          <CellFlexItem>
+          </Box>
+          <Box
+            sx={{ alignItems: 'center', display: 'flex', flexWrap: 'nowrap' }}
+          >
             {!disableColumnActions && !isParentHeader && (
               <MRT_ToggleColumnActionMenuButton column={column} />
             )}
@@ -135,16 +124,21 @@ export const MRT_TableHeadCell: FC<Props> = ({ column }) => {
                 orientation="vertical"
                 onDoubleClick={() => tableInstance.resetResizing()}
                 {...column.getResizerProps()}
+                sx={{
+                  borderRightWidth: '2px',
+                  borderRadius: '2px',
+                  maxHeight: '2rem',
+                }}
               />
             )}
-          </CellFlexItem>
-        </TableCellTopContents>
+          </Box>
+        </Box>
         {!disableFilters && column.canFilter && (
-          <Collapse in={showFilters}>
+          <Collapse in={tableInstance.state.showFilters}>
             <MRT_FilterTextField column={column} />
           </Collapse>
         )}
-      </TableCellWrapper>
-    </MRT_StyledTableHeadCell>
+      </Box>
+    </TableCell>
   );
 };

package/src/head/MRT_TableHeadCellActions.tsx

@@ -1,18 +1,24 @@
 import React, { FC } from 'react';
+import { TableCell } from '@mui/material';
 import { useMRT } from '../useMRT';
-import { MRT_StyledTableHeadCell } from './MRT_TableHeadCell';
+import { commonTableHeadCellStyles } from './MRT_TableHeadCell';
 
 interface Props {}
 
 export const MRT_TableHeadCellActions: FC<Props> = () => {
-  const { densePadding, localization } = useMRT();
+  const {
+    localization,
+    tableInstance: {
+      state: { densePadding },
+    },
+  } = useMRT();
 
   return (
-    <MRT_StyledTableHeadCell
-      densePadding={densePadding}
+    <TableCell
       style={{ textAlign: 'center' }}
+      sx={{ ...commonTableHeadCellStyles(densePadding), textAlign: 'center' }}
     >
       {localization.actionsHeadColumnTitle}
-    </MRT_StyledTableHeadCell>
+    </TableCell>
   );
 };

package/src/head/MRT_TableHeadRow.tsx

@@ -1,7 +1,7 @@
 import React, { FC, useMemo } from 'react';
-import { TableRow } from '@mui/material';
+import { TableCell, TableRow } from '@mui/material';
 import {
-  MRT_StyledTableHeadCell,
+  commonTableHeadCellStyles,
   MRT_TableHeadCell,
 } from './MRT_TableHeadCell';
 import { useMRT } from '../useMRT';
@@ -44,7 +44,7 @@ export const MRT_TableHeadRow: FC<Props> = ({ headerGroup }) => {
     ...headerGroup.getHeaderGroupProps(),
     style: {
       ...headerGroup.getHeaderGroupProps().style,
-      ...(mTableHeadRowProps?.style ?? {}),
+      ...mTableHeadRowProps?.style,
     },
   };
 
@@ -54,7 +54,13 @@ export const MRT_TableHeadRow: FC<Props> = ({ headerGroup }) => {
         (isParentHeader ? (
           <MRT_TableSpacerCell />
         ) : (
-          <MRT_StyledTableHeadCell>#</MRT_StyledTableHeadCell>
+          <TableCell
+            sx={{
+              ...commonTableHeadCellStyles(tableInstance.state.densePadding),
+            }}
+          >
+            #
+          </TableCell>
         ))}
       {(enableRowActions || enableRowEditing) &&
         positionActionsColumn === 'first' &&

package/src/inputs/MRT_EditCellTextField.tsx

@@ -9,9 +9,11 @@ interface Props {
 
 export const MRT_EditCellTextField: FC<Props> = ({ cell }) => {
   const {
-    currentEditingRow,
     muiTableBodyCellEditTextFieldProps,
     setCurrentEditingRow,
+    tableInstance: {
+      state: { currentEditingRow },
+    },
   } = useMRT();
 
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {

package/src/inputs/MRT_SearchTextField.tsx

@@ -1,24 +1,13 @@
 import React, { ChangeEvent, FC, useState } from 'react';
-import {
-  Collapse,
-  IconButton,
-  InputAdornment,
-  styled,
-  TextField as MuiTextField,
-} from '@mui/material';
+import { Collapse, IconButton, InputAdornment, TextField } from '@mui/material';
 import { useMRT } from '../useMRT';
 import { useAsyncDebounce } from 'react-table';
 
-const TextField = styled(MuiTextField)({
-  justifySelf: 'end',
-});
-
 interface Props {}
 
 export const MRT_SearchTextField: FC<Props> = () => {
   const {
     icons: { SearchIcon, CloseIcon },
-    showSearch,
     localization,
     muiSearchTextFieldProps,
     onGlobalFilterChange,
@@ -41,7 +30,7 @@ export const MRT_SearchTextField: FC<Props> = () => {
   };
 
   return (
-    <Collapse in={showSearch} orientation="horizontal">
+    <Collapse in={tableInstance.state.showSearch} orientation="horizontal">
       <TextField
         id="global-search-text-field"
         placeholder={localization.searchTextFieldPlaceholder}
@@ -72,6 +61,7 @@ export const MRT_SearchTextField: FC<Props> = () => {
           ),
         }}
         {...muiSearchTextFieldProps}
+        sx={{ justifySelf: 'end', ...muiSearchTextFieldProps?.sx }}
       />
     </Collapse>
   );

package/src/inputs/MRT_SelectCheckbox.tsx

@@ -1,8 +1,8 @@
 import React, { ChangeEvent, FC } from 'react';
-import { Checkbox, Tooltip } from '@mui/material';
+import { Checkbox, TableCell, Tooltip } from '@mui/material';
 import { useMRT } from '../useMRT';
-import { MRT_TableButtonCell } from '../table/MRT_TableButtonCell';
 import { MRT_Row } from '..';
+import { commonTableBodyButtonCellStyles } from '../body/MRT_TableBodyCell';
 
 interface Props {
   row?: MRT_Row;
@@ -11,7 +11,6 @@ interface Props {
 
 export const MRT_SelectCheckbox: FC<Props> = ({ row, selectAll }) => {
   const {
-    densePadding,
     localization,
     onRowSelectChange,
     onSelectAllChange,
@@ -33,7 +32,7 @@ export const MRT_SelectCheckbox: FC<Props> = ({ row, selectAll }) => {
     : row?.getToggleRowSelectedProps();
 
   return (
-    <MRT_TableButtonCell densePadding={densePadding}>
+    <TableCell sx={commonTableBodyButtonCellStyles(tableInstance.state.densePadding)} >
       <Tooltip
         arrow
         enterDelay={1000}
@@ -55,6 +54,6 @@ export const MRT_SelectCheckbox: FC<Props> = ({ row, selectAll }) => {
           title={undefined}
         />
       </Tooltip>
-    </MRT_TableButtonCell>
+    </TableCell>
   );
 };

package/src/menus/MRT_ColumnActionMenu.tsx

@@ -1,12 +1,12 @@
 import React, { FC } from 'react';
-import { Divider, Menu, MenuItem as MuiMenuItem, styled } from '@mui/material';
+import { Divider, Menu, MenuItem } from '@mui/material';
 import { useMRT } from '../useMRT';
 import { MRT_HeaderGroup } from '..';
 
-const MenuItem = styled(MuiMenuItem)({
+const commonMenuItemStyles = {
   display: 'flex',
   gap: '0.75rem',
-});
+};
 
 interface Props {
   anchorEl: HTMLElement | null;
@@ -88,6 +88,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
             key={1}
             disabled={!column.isSorted}
             onClick={handleClearSort}
+            sx={commonMenuItemStyles}
           >
             <ClearAllIcon /> {localization.columnActionMenuItemClearSort}
           </MenuItem>,
@@ -95,6 +96,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
             key={2}
             disabled={column.isSorted && !column.isSortedDesc}
             onClick={handleSortAsc}
+            sx={commonMenuItemStyles}
           >
             <SortIcon />{' '}
             {localization.columnActionMenuItemSortAsc?.replace(
@@ -106,6 +108,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
             key={3}
             disabled={column.isSorted && column.isSortedDesc}
             onClick={handleSortDesc}
+            sx={commonMenuItemStyles}
           >
             <SortIcon style={{ transform: 'rotate(180deg) scaleX(-1)' }} />{' '}
             {localization.columnActionMenuItemSortDesc?.replace(
@@ -117,7 +120,11 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
       {!disableFilters &&
         column.canFilter && [
           <Divider key={0} />,
-          <MenuItem key={1} onClick={handleFilterByColumn}>
+          <MenuItem
+            key={1}
+            onClick={handleFilterByColumn}
+            sx={commonMenuItemStyles}
+          >
             <FilterListIcon />{' '}
             {localization.filterTextFieldPlaceholder?.replace(
               '{column}',
@@ -128,7 +135,11 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
       {enableColumnGrouping &&
         column.canGroupBy && [
           <Divider key={1} />,
-          <MenuItem key={2} onClick={handleGroupByColumn}>
+          <MenuItem
+            key={2}
+            onClick={handleGroupByColumn}
+            sx={commonMenuItemStyles}
+          >
             <DynamicFeedIcon />{' '}
             {localization[
               column.isGrouped
@@ -139,7 +150,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
         ]}
       {!disableColumnHiding && [
         <Divider key={0} />,
-        <MenuItem key={1} onClick={handleHideColumn}>
+        <MenuItem key={1} onClick={handleHideColumn} sx={commonMenuItemStyles}>
           <VisibilityOffIcon />{' '}
           {localization.columnActionMenuItemHideColumn?.replace(
             '{column}',

package/src/menus/MRT_RowActionMenu.tsx

@@ -1,13 +1,8 @@
 import React, { FC } from 'react';
-import { Menu, MenuItem as MuiMenuItem, styled } from '@mui/material';
+import { Menu, MenuItem } from '@mui/material';
 import { useMRT } from '../useMRT';
 import { MRT_Row } from '..';
 
-const MenuItem = styled(MuiMenuItem)({
-  display: 'flex',
-  gap: '0.75rem',
-});
-
 interface Props {
   anchorEl: HTMLElement | null;
   row: MRT_Row;
@@ -36,7 +31,7 @@ export const MRT_RowActionMenu: FC<Props> = ({
       onClose={() => setAnchorEl(null)}
     >
       {enableRowEditing && (
-        <MenuItem onClick={handleEdit}>
+        <MenuItem sx={{ display: 'flex', gap: '0.75rem' }} onClick={handleEdit}>
           <EditIcon /> {localization.rowActionMenuItemEdit}
         </MenuItem>
       )}

package/src/menus/MRT_ShowHideColumnsMenu.tsx

@@ -28,7 +28,7 @@ export const MRT_ShowHideColumnsMenu: FC<Props> = ({ column }) => {
 
   return (
     <>
-      <MenuItem style={{ paddingLeft: `${(column.depth + 0.5) * 2}rem` }}>
+      <MenuItem sx={{ pl: `${(column.depth + 0.5) * 2}rem` }}>
         <FormControlLabel
           checked={switchChecked}
           control={<Switch />}

package/src/table/MRT_Table.tsx

@@ -16,7 +16,7 @@ export const MRT_Table: FC<Props> = () => {
     ...tableInstance.getTableProps(),
     style: {
       ...tableInstance.getTableProps().style,
-      ...(muiTableProps?.style ?? {}),
+      ...muiTableProps?.style,
     },
   };
 

package/src/table/MRT_TableContainer.tsx

@@ -1,48 +1,14 @@
 import React, { FC, useEffect, useRef } from 'react';
-import {
-  CircularProgress,
-  LinearProgress,
-  Paper,
-  TableContainer as MuiTableContainer,
-  alpha,
-  styled,
-} from '@mui/material';
+import { LinearProgress, Paper, TableContainer, Collapse } from '@mui/material';
 import { useMRT } from '../useMRT';
 import { MRT_Table } from './MRT_Table';
 import { MRT_ToolbarTop } from '../toolbar/MRT_ToolbarTop';
 import { MRT_ToolbarBottom } from '../toolbar/MRT_ToolbarBottom';
 
-const TableContainer = styled(MuiTableContainer, {
-  shouldForwardProp: (prop) => prop !== 'fullScreen',
-})<{ fullScreen?: boolean; component: any }>(({ fullScreen }) => ({
-  bottom: fullScreen ? '0' : undefined,
-  height: fullScreen ? '100%' : undefined,
-  left: fullScreen ? '0' : undefined,
-  margin: fullScreen ? '0' : undefined,
-  position: fullScreen ? 'fixed' : undefined,
-  right: fullScreen ? '0' : undefined,
-  top: fullScreen ? '0' : undefined,
-  transition: 'all 0.2s ease-in-out',
-  width: fullScreen ? '100vw' : undefined,
-  zIndex: fullScreen ? 1200 : 1,
-}));
-
-const CircularProgressWrapper = styled('div')(({ theme }) => ({
-  alignItems: 'center',
-  backgroundColor: alpha(theme.palette.background.paper, 0.5),
-  display: 'grid',
-  height: '100%',
-  justifyContent: 'center',
-  margin: 'auto',
-  position: 'absolute',
-  width: 'calc(100% - 2rem)',
-}));
-
 interface Props {}
 
 export const MRT_TableContainer: FC<Props> = () => {
   const {
-    fullScreen,
     hideToolbarBottom,
     hideToolbarTop,
     isFetching,
@@ -50,6 +16,7 @@ export const MRT_TableContainer: FC<Props> = () => {
     muiTableContainerProps,
     tableInstance,
   } = useMRT();
+  const fullScreen = tableInstance.state.fullScreen;
   const originalBodyOverflowStyle = useRef<string | undefined>();
 
   useEffect(() => {
@@ -77,16 +44,25 @@ export const MRT_TableContainer: FC<Props> = () => {
   return (
     <TableContainer
       component={Paper}
-      fullScreen={fullScreen}
       {...tableContainerProps}
+      sx={{
+        bottom: fullScreen ? '0' : undefined,
+        height: fullScreen ? '100%' : undefined,
+        left: fullScreen ? '0' : undefined,
+        m: fullScreen ? '0' : undefined,
+        position: fullScreen ? 'fixed' : undefined,
+        right: fullScreen ? '0' : undefined,
+        top: fullScreen ? '0' : undefined,
+        transition: 'all 0.2s ease-in-out',
+        width: fullScreen ? '100vw' : undefined,
+        zIndex: fullScreen ? 1200 : 1,
+        ...tableContainerProps?.sx,
+      }}
     >
       {!hideToolbarTop && <MRT_ToolbarTop />}
-      {isFetching && <LinearProgress />}
-      {isLoading && (
-        <CircularProgressWrapper>
-          <CircularProgress aria-busy="true" aria-label="Loading data" />
-        </CircularProgressWrapper>
-      )}
+      <Collapse in={isFetching || isLoading} unmountOnExit>
+        <LinearProgress />
+      </Collapse>
       <MRT_Table />
       {!hideToolbarBottom && <MRT_ToolbarBottom />}
     </TableContainer>

package/src/table/MRT_TableSpacerCell.tsx

@@ -17,10 +17,11 @@ export const MRT_TableSpacerCell: FC<Props> = ({ width }) => {
   const tableCellProps = {
     ...mTableBodyCellrops,
     style: {
-      width,
-      ...(mTableBodyCellrops?.style ?? {}),
+      ...mTableBodyCellrops?.style,
     },
   };
 
-  return <TableCell {...tableCellProps} />;
+  return (
+    <TableCell {...tableCellProps} sx={{ width, ...tableCellProps?.sx }} />
+  );
 };

package/src/toolbar/MRT_TablePagination.tsx

@@ -32,8 +32,13 @@ export const MRT_TablePagination: FC<Props> = () => {
       showLastButton={
         tableInstance.rows.length / tableInstance.state.pageSize > 2
       }
-      style={{ padding: 0, position: 'relative', zIndex: 2 }}
       {...tablePaginationProps}
+      sx={{
+        p: 0,
+        position: 'relative',
+        zIndex: 2,
+        ...tablePaginationProps?.sx,
+      }}
     />
   );
 };