material-react-table 0.5.1 → 0.5.2

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

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_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_TableContainer.tsx

@@ -9,7 +9,6 @@ interface Props {}
 
 export const MRT_TableContainer: FC<Props> = () => {
   const {
-    fullScreen,
     hideToolbarBottom,
     hideToolbarTop,
     isFetching,
@@ -17,6 +16,7 @@ export const MRT_TableContainer: FC<Props> = () => {
     muiTableContainerProps,
     tableInstance,
   } = useMRT();
+  const fullScreen = tableInstance.state.fullScreen;
   const originalBodyOverflowStyle = useRef<string | undefined>();
 
   useEffect(() => {

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,

package/src/useMRT.tsx

@@ -27,9 +27,6 @@ import { MaterialReactTableProps } from './MaterialReactTable';
 export 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;
@@ -37,8 +34,6 @@ export 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>;
 };
 
@@ -61,18 +56,6 @@ export const MaterialReactTableProvider = <D extends {}>(
   if (props.enableColumnResizing)
     hooks.unshift(useResizeColumns, useFlexLayout);
 
-  const tableInstance = useTable<D>(props, ...hooks) as MRT_TableInstance<D>;
-
-  const anyRowsCanExpand = useMemo(
-    // @ts-ignore
-    () => tableInstance.rows.some((row: MRT_Row) => row.canExpand),
-    [tableInstance.rows],
-  );
-  const anyRowsExpanded = useMemo(
-    // @ts-ignore
-    () => tableInstance.rows.some((row: MRT_Row) => row.isExpanded),
-    [tableInstance.rows],
-  );
   const [currentEditingRow, setCurrentEditingRow] = useState<MRT_Row | null>(
     null,
   );
@@ -86,7 +69,44 @@ export const MaterialReactTableProvider = <D extends {}>(
     props.initialState?.showFilters ?? false,
   );
   const [showSearch, setShowSearch] = useState(
-    props.initialState?.showSearchTextField ?? false,
+    props.initialState?.showSearch ?? false,
+  );
+
+  const tableInstance = useTable<D>(
+    {
+      ...props,
+      useControlledState: (state) =>
+        useMemo(
+          () => ({
+            ...state,
+            currentEditingRow,
+            densePadding,
+            fullScreen,
+            showFilters,
+            showSearch,
+            //@ts-ignore
+            ...props?.useControlledState?.(state),
+          }),
+          [
+            currentEditingRow,
+            densePadding,
+            fullScreen,
+            showFilters,
+            showSearch,
+            state,
+          ],
+        ),
+    },
+    ...hooks,
+  ) as MRT_TableInstance<D>;
+
+  const anyRowsCanExpand = useMemo(
+    () => tableInstance.rows.some((row) => row.canExpand),
+    [tableInstance.rows],
+  );
+  const anyRowsExpanded = useMemo(
+    () => tableInstance.rows.some((row) => row.isExpanded),
+    [tableInstance.rows],
   );
 
   return (
@@ -95,16 +115,11 @@ export const MaterialReactTableProvider = <D extends {}>(
         ...props,
         anyRowsCanExpand,
         anyRowsExpanded,
-        currentEditingRow,
-        densePadding,
         setCurrentEditingRow,
         setDensePadding,
-        fullScreen,
         setFullScreen,
         setShowFilters,
         setShowSearch,
-        showFilters,
-        showSearch,
         //@ts-ignore
         tableInstance,
       }}