material-react-table 0.5.0 → 0.5.3

package/dist/useMRT.d.ts

@@ -6,9 +6,6 @@ import { MaterialReactTableProps } from './MaterialReactTable';
 export declare type UseMRT<D extends {} = {}> = MaterialReactTableProps<D> & {
     anyRowsCanExpand: boolean;
     anyRowsExpanded: boolean;
-    currentEditingRow: MRT_Row<D> | null;
-    densePadding: boolean;
-    fullScreen: boolean;
     icons: MRT_Icons;
     localization: MRT_Localization;
     setCurrentEditingRow: (currentRowEditingId: MRT_Row<D> | null) => void;
@@ -16,8 +13,6 @@ export declare type UseMRT<D extends {} = {}> = MaterialReactTableProps<D> & {
     setFullScreen: (fullScreen: boolean) => void;
     setShowFilters: (showFilters: boolean) => void;
     setShowSearch: (showSearch: boolean) => void;
-    showFilters: boolean;
-    showSearch: boolean;
     tableInstance: MRT_TableInstance<D>;
 };
 export declare const MaterialReactTableProvider: <D extends {}>(props: React.PropsWithChildren<MaterialReactTableProps<D>>) => JSX.Element;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.5.0",
+  "version": "0.5.3",
   "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.",
@@ -89,7 +89,7 @@
     "storybook-dark-mode": "^1.0.9",
     "tsdx": "^0.14.1",
     "tslib": "^2.3.1",
-    "typescript": "^4.5.5"
+    "typescript": "^4.6.2"
   },
   "peerDependencies": {
     "@emotion/react": ">=11",

package/src/@types/react-table-config.d.ts

@@ -14,8 +14,6 @@ import {
 } from '..';
 
 declare module 'react-table' {
-  // take this file as-is, or comment out the sections that don't apply to your plugin configuration
-
   export interface TableOptions<D extends Record<string, unknown>>
     extends MRT_TableOptions<D> {}
 
@@ -28,7 +26,9 @@ declare module 'react-table' {
 
   export interface TableInstance<
     D extends Record<string, unknown> = Record<string, unknown>,
-  > extends MRT_TableInstance<D> {}
+  > extends MRT_TableInstance<D> {
+    rows: MRT_Row<D>[];
+  }
 
   export interface TableState<
     D extends Record<string, unknown> = Record<string, unknown>,

package/src/MaterialReactTable.tsx

@@ -192,10 +192,11 @@ export type MRT_TableState<D extends {} = {}> = TableState<D> &
   UseRowSelectState<D> &
   UseRowStateState<D> &
   UseSortByState<D> & {
-    densePadding?: boolean;
-    fullScreen?: boolean;
-    showFilters?: boolean;
-    showSearchTextField?: boolean;
+    currentEditingRow: MRT_Row<D> | null;
+    densePadding: boolean;
+    fullScreen: boolean;
+    showFilters: boolean;
+    showSearch: boolean;
   };
 
 export type MaterialReactTableProps<D extends {} = {}> = UseTableOptions<D> &
@@ -238,18 +239,22 @@ export type MaterialReactTableProps<D extends {} = {}> = UseTableOptions<D> &
     muiTableBodyCellProps?:
       | TableCellProps
       | ((cell?: MRT_Cell<D>) => TableCellProps);
-    muiTableBodyProps?: TableBodyProps;
+    muiTableBodyProps?:
+      | TableBodyProps
+      | ((tableInstance: MRT_TableInstance<D>) => TableBodyProps);
     muiTableBodyRowProps?: TableRowProps | ((row: Row<D>) => TableRowProps);
     muiTableContainerProps?:
       | TableContainerProps
-      | ((table: MRT_TableInstance<D>) => TableContainerProps);
+      | ((tableInstance: MRT_TableInstance<D>) => TableContainerProps);
     muiTableDetailPanelProps?:
       | TableCellProps
       | ((row: Row<D>) => TableCellProps);
     muiTableFooterCellProps?:
       | TableCellProps
       | ((column: Column<D>) => TableCellProps);
-    muiTableFooterProps?: TableFooterProps;
+    muiTableFooterProps?:
+      | TableFooterProps
+      | ((tableInstance: MRT_TableInstance<D>) => TableFooterProps);
     muiTableFooterRowProps?:
       | TableRowProps
       | ((footerGroup: MRT_HeaderGroup<D>) => TableRowProps);
@@ -259,7 +264,9 @@ export type MaterialReactTableProps<D extends {} = {}> = UseTableOptions<D> &
     muiTableHeadCellProps?:
       | TableCellProps
       | ((column: Column<D>) => TableCellProps);
-    muiTableHeadProps?: TableHeadProps;
+    muiTableHeadProps?:
+      | TableHeadProps
+      | ((tableInstance: MRT_TableInstance<D>) => TableHeadProps);
     muiTableHeadRowProps?:
       | TableRowProps
       | ((row: MRT_HeaderGroup<D>) => TableRowProps);
@@ -268,7 +275,7 @@ export type MaterialReactTableProps<D extends {} = {}> = UseTableOptions<D> &
       | ((
           tableInstance: MRT_TableInstance<D>,
         ) => Partial<TablePaginationProps>);
-    muiTableProps?: TableProps;
+    muiTableProps?: TableProps | ((tableInstance: MRT_TableInstance<D>) => TableProps);
     muiTableToolbarAlertBannerProps?:
       | AlertProps
       | ((tableInstance: MRT_TableInstance<D>) => AlertProps);

package/src/body/MRT_TableBody.tsx

@@ -11,12 +11,17 @@ export const MRT_TableBody: FC<Props> = () => {
 
   const rows = manualPagination ? tableInstance.rows : tableInstance.page;
 
+  const mTableBodyProps =
+    muiTableBodyProps instanceof Function
+      ? muiTableBodyProps(tableInstance)
+      : muiTableBodyProps;
+
   const tableBodyProps = {
-    ...muiTableBodyProps,
+    ...mTableBodyProps,
     ...tableInstance.getTableBodyProps(),
     style: {
       ...tableInstance.getTableBodyProps().style,
-      ...muiTableBodyProps?.style,
+      ...mTableBodyProps?.style,
     },
   };
 

package/src/body/MRT_TableBodyCell.tsx

@@ -24,8 +24,9 @@ export const MRT_TableBodyCell: FC<Props> = ({ cell }) => {
   const {
     onCellClick,
     muiTableBodyCellProps,
-    densePadding,
-    currentEditingRow,
+    tableInstance: {
+      state: { currentEditingRow, densePadding },
+    },
   } = useMRT();
 
   const mTableCellBodyProps =

package/src/body/MRT_TableBodyRow.tsx

@@ -18,7 +18,6 @@ interface Props {
 export const MRT_TableBodyRow: FC<Props> = ({ row }) => {
   const {
     anyRowsCanExpand,
-    densePadding,
     enableRowActions,
     enableRowEditing,
     enableRowNumbers,
@@ -27,6 +26,9 @@ export const MRT_TableBodyRow: FC<Props> = ({ row }) => {
     onRowClick,
     positionActionsColumn,
     renderDetailPanel,
+    tableInstance: {
+      state: { densePadding },
+    },
   } = useMRT();
 
   const mTableBodyRowProps =
@@ -51,13 +53,14 @@ export const MRT_TableBodyRow: FC<Props> = ({ row }) => {
           onRowClick?.(event, row)
         }
         {...tableRowProps}
-        //@ts-ignore
-        sx={(theme) => ({
-          backgroundColor: row.isSelected
-            ? alpha(theme.palette.primary.light, 0.1)
-            : 'transparent',
-          ...tableRowProps?.sx,
-        })}
+        sx={(theme) =>
+          ({
+            backgroundColor: row.isSelected
+              ? alpha(theme.palette.primary.light, 0.1)
+              : 'transparent',
+            ...tableRowProps?.sx,
+          } as any)
+        }
       >
         {enableRowNumbers && (
           <TableCell sx={{ ...commonTableBodyCellStyles(densePadding) }}>

package/src/buttons/MRT_EditActionButtons.tsx

@@ -11,9 +11,9 @@ export const MRT_EditActionButtons: FC<Props> = ({ row }) => {
   const {
     icons: { CancelIcon, SaveIcon },
     localization,
-    setCurrentEditingRow,
     onRowEditSubmit,
-    currentEditingRow,
+    setCurrentEditingRow,
+    tableInstance: { state: { currentEditingRow } },
   } = useMRT();
 
   const handleCancel = () => {

package/src/buttons/MRT_ExpandAllButton.tsx

@@ -7,18 +7,17 @@ interface Props {}
 
 export const MRT_ExpandAllButton: FC<Props> = () => {
   const {
-    tableInstance,
-    localization,
     anyRowsExpanded,
-    densePadding,
     icons: { DoubleArrowDownIcon },
+    localization,
+    tableInstance,
   } = useMRT();
 
   return (
     <TableCell
       size="small"
       {...tableInstance.getToggleAllRowsExpandedProps()}
-      sx={commonTableBodyButtonCellStyles(densePadding)}
+      sx={commonTableBodyButtonCellStyles(tableInstance.state.densePadding)}
     >
       <IconButton
         aria-label={localization.expandAllButtonTitle}

package/src/buttons/MRT_ExpandButton.tsx

@@ -10,10 +10,12 @@ interface Props {
 
 export const MRT_ExpandButton: FC<Props> = ({ row }) => {
   const {
-    densePadding,
     icons: { ExpandMoreIcon },
     localization,
     renderDetailPanel,
+    tableInstance: {
+      state: { densePadding },
+    },
   } = useMRT();
 
   return (

package/src/buttons/MRT_FullScreenToggleButton.tsx

@@ -6,10 +6,12 @@ interface Props extends IconButtonProps {}
 
 export const MRT_FullScreenToggleButton: FC<Props> = ({ ...rest }) => {
   const {
-    fullScreen,
     icons: { FullscreenExitIcon, FullscreenIcon },
     localization,
     setFullScreen,
+    tableInstance: {
+      state: { fullScreen },
+    },
   } = useMRT();
 
   return (

package/src/buttons/MRT_ToggleDensePaddingButton.tsx

@@ -6,10 +6,12 @@ interface Props extends IconButtonProps {}
 
 export const MRT_ToggleDensePaddingButton: FC<Props> = ({ ...rest }) => {
   const {
-    densePadding,
     setDensePadding,
     localization,
     icons: { DensityMediumIcon, DensitySmallIcon },
+    tableInstance: {
+      state: { densePadding },
+    },
   } = useMRT();
 
   return (

package/src/buttons/MRT_ToggleFiltersButton.tsx

@@ -6,10 +6,10 @@ interface Props extends IconButtonProps {}
 
 export const MRT_ToggleFiltersButton: FC<Props> = ({ ...rest }) => {
   const {
+    icons: { FilterListIcon, FilterListOffIcon },
     localization,
     setShowFilters,
-    showFilters,
-    icons: { FilterListIcon, FilterListOffIcon },
+    tableInstance: { state: { showFilters } },
   } = useMRT();
 
   return (

package/src/buttons/MRT_ToggleRowActionMenuButton.tsx

@@ -23,8 +23,6 @@ interface Props {
 
 export const MRT_ToggleRowActionMenuButton: FC<Props> = ({ row }) => {
   const {
-    currentEditingRow,
-    densePadding,
     enableRowEditing,
     icons: { EditIcon, MoreHorizIcon },
     localization,
@@ -48,10 +46,12 @@ export const MRT_ToggleRowActionMenuButton: FC<Props> = ({ row }) => {
   };
 
   return (
-    <TableCell sx={commonTableBodyButtonCellStyles(densePadding)}>
+    <TableCell
+      sx={commonTableBodyButtonCellStyles(tableInstance.state.densePadding)}
+    >
       {renderRowActions ? (
         <>{renderRowActions(row, tableInstance)}</>
-      ) : row.id === currentEditingRow?.id ? (
+      ) : row.id === tableInstance.state.currentEditingRow?.id ? (
         <MRT_EditActionButtons row={row} />
       ) : !renderRowActionMenuItems && enableRowEditing ? (
         <Tooltip
@@ -65,15 +65,21 @@ export const MRT_ToggleRowActionMenuButton: FC<Props> = ({ row }) => {
         </Tooltip>
       ) : renderRowActionMenuItems ? (
         <>
-          <IconButton
-            aria-label={localization.rowActionMenuButtonTitle}
-            onClick={handleOpenRowActionMenu}
-            size="small"
-            sx={commonIconButtonStyles}
+          <Tooltip
+            arrow
+            enterDelay={1000}
+            enterNextDelay={1000}
             title={localization.rowActionMenuButtonTitle}
           >
-            <MoreHorizIcon />
-          </IconButton>
+            <IconButton
+              aria-label={localization.rowActionMenuButtonTitle}
+              onClick={handleOpenRowActionMenu}
+              size="small"
+              sx={commonIconButtonStyles}
+            >
+              <MoreHorizIcon />
+            </IconButton>
+          </Tooltip>
           <MRT_RowActionMenu
             anchorEl={anchorEl}
             handleEdit={handleEdit}

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_TableFooter.tsx

@@ -9,8 +9,13 @@ interface Props {}
 export const MRT_TableFooter: FC<Props> = () => {
   const { muiTableFooterProps, tableInstance } = useMRT();
 
+  const tableFooterProps =
+    muiTableFooterProps instanceof Function
+      ? muiTableFooterProps(tableInstance)
+      : muiTableFooterProps;
+
   return (
-    <TableFooter {...muiTableFooterProps}>
+    <TableFooter {...tableFooterProps}>
       {tableInstance.footerGroups.map((footerGroup: MRT_HeaderGroup) => (
         <MRT_TableFooterRow
           key={footerGroup.getFooterGroupProps().key}

package/src/footer/MRT_TableFooterCell.tsx

@@ -8,8 +8,13 @@ interface Props {
 }
 
 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;
 

package/src/head/MRT_TableHeadCell.tsx

@@ -30,13 +30,11 @@ interface Props {
 
 export const MRT_TableHeadCell: FC<Props> = ({ column }) => {
   const {
-    densePadding,
     disableColumnActions,
     disableFilters,
     enableColumnResizing,
     localization,
     muiTableHeadCellProps,
-    showFilters,
     tableInstance,
   } = useMRT();
 
@@ -80,7 +78,10 @@ export const MRT_TableHeadCell: FC<Props> = ({ column }) => {
       align={isParentHeader ? 'center' : 'left'}
       {...tableCellProps}
       sx={{
-        ...commonTableHeadCellStyles(densePadding, enableColumnResizing),
+        ...commonTableHeadCellStyles(
+          tableInstance.state.densePadding,
+          enableColumnResizing,
+        ),
         ...tableCellProps?.sx,
       }}
     >
@@ -133,7 +134,7 @@ export const MRT_TableHeadCell: FC<Props> = ({ column }) => {
           </Box>
         </Box>
         {!disableFilters && column.canFilter && (
-          <Collapse in={showFilters}>
+          <Collapse in={tableInstance.state.showFilters}>
             <MRT_FilterTextField column={column} />
           </Collapse>
         )}

package/src/head/MRT_TableHeadCellActions.tsx

@@ -6,7 +6,12 @@ import { commonTableHeadCellStyles } from './MRT_TableHeadCell';
 interface Props {}
 
 export const MRT_TableHeadCellActions: FC<Props> = () => {
-  const { densePadding, localization } = useMRT();
+  const {
+    localization,
+    tableInstance: {
+      state: { densePadding },
+    },
+  } = useMRT();
 
   return (
     <TableCell

package/src/head/MRT_TableHeadRow.tsx

@@ -18,7 +18,6 @@ interface Props {
 export const MRT_TableHeadRow: FC<Props> = ({ headerGroup }) => {
   const {
     anyRowsCanExpand,
-    densePadding,
     disableExpandAll,
     enableRowActions,
     enableRowEditing,
@@ -55,7 +54,13 @@ export const MRT_TableHeadRow: FC<Props> = ({ headerGroup }) => {
         (isParentHeader ? (
           <MRT_TableSpacerCell />
         ) : (
-          <TableCell sx={{...commonTableHeadCellStyles(densePadding)}}>#</TableCell>
+          <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

@@ -8,7 +8,6 @@ interface Props {}
 export const MRT_SearchTextField: FC<Props> = () => {
   const {
     icons: { SearchIcon, CloseIcon },
-    showSearch,
     localization,
     muiSearchTextFieldProps,
     onGlobalFilterChange,
@@ -31,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}

package/src/inputs/MRT_SelectCheckbox.tsx

@@ -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 (
-    <TableCell sx={commonTableBodyButtonCellStyles(densePadding)} >
+    <TableCell sx={commonTableBodyButtonCellStyles(tableInstance.state.densePadding)} >
       <Tooltip
         arrow
         enterDelay={1000}

package/src/table/MRT_Table.tsx

@@ -11,12 +11,17 @@ export const MRT_Table: FC<Props> = () => {
   const { tableInstance, muiTableProps, hideTableHead, hideTableFooter } =
     useMRT();
 
+  const mTableProps =
+    muiTableProps instanceof Function
+      ? muiTableProps(tableInstance)
+      : muiTableProps;
+
   const tableProps = {
-    ...muiTableProps,
+    ...mTableProps,
     ...tableInstance.getTableProps(),
     style: {
       ...tableInstance.getTableProps().style,
-      ...muiTableProps?.style,
+      ...mTableProps?.style,
     },
   };
 

package/src/table/MRT_TableContainer.tsx

@@ -1,5 +1,11 @@
 import React, { FC, useEffect, useRef } from 'react';
-import { LinearProgress, Paper, TableContainer, Collapse } from '@mui/material';
+import {
+  LinearProgress,
+  Paper,
+  TableContainer,
+  Collapse,
+  Box,
+} from '@mui/material';
 import { useMRT } from '../useMRT';
 import { MRT_Table } from './MRT_Table';
 import { MRT_ToolbarTop } from '../toolbar/MRT_ToolbarTop';
@@ -9,7 +15,6 @@ interface Props {}
 
 export const MRT_TableContainer: FC<Props> = () => {
   const {
-    fullScreen,
     hideToolbarBottom,
     hideToolbarTop,
     isFetching,
@@ -17,6 +22,7 @@ export const MRT_TableContainer: FC<Props> = () => {
     muiTableContainerProps,
     tableInstance,
   } = useMRT();
+  const fullScreen = tableInstance.state.fullScreen;
   const originalBodyOverflowStyle = useRef<string | undefined>();
 
   useEffect(() => {
@@ -29,8 +35,9 @@ export const MRT_TableContainer: FC<Props> = () => {
     if (typeof window !== 'undefined') {
       if (fullScreen) {
         document.body.style.overflow = 'hidden';
-      } else if (originalBodyOverflowStyle.current) {
-        document.body.style.overflow = originalBodyOverflowStyle.current;
+      } else {
+        document.body.style.overflow =
+          originalBodyOverflowStyle.current ?? 'auto';
       }
     }
   }, [fullScreen]);
@@ -62,7 +69,14 @@ export const MRT_TableContainer: FC<Props> = () => {
       <Collapse in={isFetching || isLoading} unmountOnExit>
         <LinearProgress />
       </Collapse>
-      <MRT_Table />
+      <Box
+        sx={{
+          maxWidth: '100%',
+          overflowX: 'auto',
+        }}
+      >
+        <MRT_Table />
+      </Box>
       {!hideToolbarBottom && <MRT_ToolbarBottom />}
     </TableContainer>
   );

package/src/toolbar/MRT_ToolbarBottom.tsx

@@ -13,7 +13,6 @@ export const MRT_ToolbarBottom: FC<Props> = () => {
     manualPagination,
     muiTableToolbarBottomProps,
     positionPagination,
-    fullScreen,
     positionToolbarActions,
     positionToolbarAlertBanner,
     tableInstance,
@@ -35,12 +34,12 @@ export const MRT_ToolbarBottom: FC<Props> = () => {
             theme.palette.common.white,
             0.05,
           )},${alpha(theme.palette.common.white, 0.05)})`,
-          bottom: fullScreen ? '0' : undefined,
+          bottom: tableInstance.state.fullScreen ? '0' : undefined,
           display: 'flex',
           justifyContent: 'space-between',
           overflowY: 'hidden',
           p: '0 0.5rem !important',
-          position: fullScreen ? 'fixed' : undefined,
+          position: tableInstance.state.fullScreen ? 'fixed' : undefined,
           width: 'calc(100% - 1rem)',
           zIndex: 1,
           ...toolbarProps?.sx,

package/src/toolbar/MRT_ToolbarTop.tsx

@@ -16,7 +16,6 @@ export const MRT_ToolbarTop: FC<Props> = () => {
     muiTableToolbarTopProps,
     positionPagination,
     positionToolbarActions,
-    fullScreen,
     positionToolbarAlertBanner,
     renderToolbarCustomActions,
     tableInstance,
@@ -40,8 +39,8 @@ export const MRT_ToolbarTop: FC<Props> = () => {
           )},${alpha(theme.palette.common.white, 0.05)})`,
           display: 'grid',
           p: '0 !important',
-          position: fullScreen ? 'sticky' : undefined,
-          top: fullScreen ? '0' : undefined,
+          position: tableInstance.state.fullScreen ? 'sticky' : undefined,
+          top: tableInstance.state.fullScreen ? '0' : undefined,
           width: '100%',
           zIndex: 1,
           ...toolbarProps?.sx,