material-react-table 0.5.2 → 0.5.3

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.5.2",
+  "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.",

package/src/MaterialReactTable.tsx

@@ -239,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);
@@ -260,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);
@@ -269,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/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/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';
@@ -63,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>
   );