material-react-table 0.6.10 → 0.7.0-alpha.11

package/src/buttons/MRT_FullScreenToggleButton.tsx

@@ -1,28 +1,35 @@
 import React, { FC } from 'react';
 import { IconButton, IconButtonProps, Tooltip } from '@mui/material';
-import { useMRT } from '../useMRT';
+import { MRT_TableInstance } from '..';
 
-interface Props extends IconButtonProps {}
+interface Props extends IconButtonProps {
+  tableInstance: MRT_TableInstance;
+}
 
-export const MRT_FullScreenToggleButton: FC<Props> = ({ ...rest }) => {
+export const MRT_FullScreenToggleButton: FC<Props> = ({
+  tableInstance,
+  ...rest
+}) => {
   const {
-    icons: { FullscreenExitIcon, FullscreenIcon },
-    localization,
-    setFullScreen,
-    tableInstance: {
-      state: { fullScreen },
+    getState,
+    options: {
+      icons: { FullscreenExitIcon, FullscreenIcon },
+      localization,
     },
-  } = useMRT();
+    setIsFullScreen,
+  } = tableInstance;
+
+  const { isFullScreen } = getState();
 
   return (
     <Tooltip arrow title={localization.toggleFullScreen}>
       <IconButton
         aria-label={localization.showHideFilters}
-        onClick={() => setFullScreen(!fullScreen)}
+        onClick={() => setIsFullScreen(!isFullScreen)}
         size="small"
         {...rest}
       >
-        {fullScreen ? <FullscreenExitIcon /> : <FullscreenIcon />}
+        {isFullScreen ? <FullscreenExitIcon /> : <FullscreenIcon />}
       </IconButton>
     </Tooltip>
   );

package/src/buttons/MRT_ShowHideColumnsButton.tsx

@@ -1,15 +1,22 @@
 import React, { FC, MouseEvent, useState } from 'react';
 import { IconButton, Tooltip, IconButtonProps } from '@mui/material';
-import { useMRT } from '../useMRT';
 import { MRT_ShowHideColumnsMenu } from '../menus/MRT_ShowHideColumnsMenu';
+import { MRT_TableInstance } from '..';
 
-interface Props extends IconButtonProps {}
+interface Props extends IconButtonProps {
+  tableInstance: MRT_TableInstance;
+}
 
-export const MRT_ShowHideColumnsButton: FC<Props> = ({ ...rest }) => {
+export const MRT_ShowHideColumnsButton: FC<Props> = ({
+  tableInstance,
+  ...rest
+}) => {
   const {
-    icons: { ViewColumnIcon },
-    localization,
-  } = useMRT();
+    options: {
+      icons: { ViewColumnIcon },
+      localization,
+    },
+  } = tableInstance;
 
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
 
@@ -29,7 +36,11 @@ export const MRT_ShowHideColumnsButton: FC<Props> = ({ ...rest }) => {
           <ViewColumnIcon />
         </IconButton>
       </Tooltip>
-      <MRT_ShowHideColumnsMenu anchorEl={anchorEl} setAnchorEl={setAnchorEl} />
+      <MRT_ShowHideColumnsMenu
+        anchorEl={anchorEl}
+        setAnchorEl={setAnchorEl}
+        tableInstance={tableInstance}
+      />
     </>
   );
 };

package/src/buttons/MRT_ToggleColumnActionMenuButton.tsx

@@ -1,19 +1,26 @@
 import React, { FC, MouseEvent, useState } from 'react';
 import { IconButton, Tooltip } from '@mui/material';
-import { useMRT } from '../useMRT';
 import { MRT_ColumnActionMenu } from '../menus/MRT_ColumnActionMenu';
-import type { MRT_HeaderGroup } from '..';
+import type { MRT_Header, MRT_TableInstance } from '..';
 
 interface Props {
-  column: MRT_HeaderGroup;
+  header: MRT_Header;
+  tableInstance: MRT_TableInstance;
 }
 
-export const MRT_ToggleColumnActionMenuButton: FC<Props> = ({ column }) => {
+export const MRT_ToggleColumnActionMenuButton: FC<Props> = ({
+  header,
+  tableInstance,
+}) => {
   const {
-    icons: { MoreVertIcon },
-    localization,
-    muiTableHeadCellColumnActionsButtonProps,
-  } = useMRT();
+    options: {
+      icons: { MoreVertIcon },
+      localization,
+      muiTableHeadCellColumnActionsButtonProps,
+    },
+  } = tableInstance;
+
+  const { column } = header;
 
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
 
@@ -25,12 +32,15 @@ export const MRT_ToggleColumnActionMenuButton: FC<Props> = ({ column }) => {
 
   const mTableHeadCellColumnActionsButtonProps =
     muiTableHeadCellColumnActionsButtonProps instanceof Function
-      ? muiTableHeadCellColumnActionsButtonProps(column)
+      ? muiTableHeadCellColumnActionsButtonProps({ column, tableInstance })
       : muiTableHeadCellColumnActionsButtonProps;
 
   const mcTableHeadCellColumnActionsButtonProps =
     column.muiTableHeadCellColumnActionsButtonProps instanceof Function
-      ? column.muiTableHeadCellColumnActionsButtonProps(column)
+      ? column.muiTableHeadCellColumnActionsButtonProps({
+          column,
+          tableInstance,
+        })
       : column.muiTableHeadCellColumnActionsButtonProps;
 
   const iconButtonProps = {
@@ -70,8 +80,9 @@ export const MRT_ToggleColumnActionMenuButton: FC<Props> = ({ column }) => {
       </Tooltip>
       <MRT_ColumnActionMenu
         anchorEl={anchorEl}
-        column={column}
+        header={header}
         setAnchorEl={setAnchorEl}
+        tableInstance={tableInstance}
       />
     </>
   );

package/src/buttons/MRT_ToggleDensePaddingButton.tsx

@@ -1,28 +1,35 @@
 import React, { FC } from 'react';
 import { IconButton, IconButtonProps, Tooltip } from '@mui/material';
-import { useMRT } from '../useMRT';
+import { MRT_TableInstance } from '..';
 
-interface Props extends IconButtonProps {}
+interface Props extends IconButtonProps {
+  tableInstance: MRT_TableInstance;
+}
 
-export const MRT_ToggleDensePaddingButton: FC<Props> = ({ ...rest }) => {
+export const MRT_ToggleDensePaddingButton: FC<Props> = ({
+  tableInstance,
+  ...rest
+}) => {
   const {
-    setDensePadding,
-    localization,
-    icons: { DensityMediumIcon, DensitySmallIcon },
-    tableInstance: {
-      state: { densePadding },
+    getState,
+    options: {
+      icons: { DensityMediumIcon, DensitySmallIcon },
+      localization,
     },
-  } = useMRT();
+    setIsDensePadding,
+  } = tableInstance;
+
+  const { isDensePadding } = getState();
 
   return (
     <Tooltip arrow title={localization.toggleDensePadding}>
       <IconButton
         aria-label={localization.toggleDensePadding}
-        onClick={() => setDensePadding(!densePadding)}
+        onClick={() => setIsDensePadding(!isDensePadding)}
         size="small"
         {...rest}
       >
-        {densePadding ? <DensitySmallIcon /> : <DensityMediumIcon />}
+        {isDensePadding ? <DensitySmallIcon /> : <DensityMediumIcon />}
       </IconButton>
     </Tooltip>
   );

package/src/buttons/MRT_ToggleFiltersButton.tsx

@@ -1,18 +1,25 @@
 import React, { FC } from 'react';
 import { IconButton, IconButtonProps, Tooltip } from '@mui/material';
-import { useMRT } from '../useMRT';
+import { MRT_TableInstance } from '..';
 
-interface Props extends IconButtonProps {}
+interface Props extends IconButtonProps {
+  tableInstance: MRT_TableInstance;
+}
 
-export const MRT_ToggleFiltersButton: FC<Props> = ({ ...rest }) => {
+export const MRT_ToggleFiltersButton: FC<Props> = ({
+  tableInstance,
+  ...rest
+}) => {
   const {
-    icons: { FilterListIcon, FilterListOffIcon },
-    localization,
-    setShowFilters,
-    tableInstance: {
-      state: { showFilters },
+    getState,
+    options: {
+      icons: { FilterListIcon, FilterListOffIcon },
+      localization,
     },
-  } = useMRT();
+    setShowFilters,
+  } = tableInstance;
+
+  const { showFilters } = getState();
 
   return (
     <Tooltip arrow title={localization.showHideFilters}>

package/src/buttons/MRT_ToggleRowActionMenuButton.tsx

@@ -1,16 +1,14 @@
 import React, { FC, MouseEvent, useState } from 'react';
-import { IconButton, TableCell, Tooltip } from '@mui/material';
-import { useMRT } from '../useMRT';
+import { IconButton, Tooltip } from '@mui/material';
 import { MRT_RowActionMenu } from '../menus/MRT_RowActionMenu';
 import { MRT_EditActionButtons } from './MRT_EditActionButtons';
-import type { MRT_Row } from '..';
-import { commonTableBodyButtonCellStyles } from '../body/MRT_TableBodyCell';
+import type { MRT_Row, MRT_TableInstance } from '..';
 
 const commonIconButtonStyles = {
+  height: '2rem',
+  ml: '10px',
   opacity: 0.5,
   transition: 'opacity 0.2s',
-  marginRight: '2px',
-  height: '2rem',
   width: '2rem',
   '&:hover': {
     opacity: 1,
@@ -19,18 +17,26 @@ const commonIconButtonStyles = {
 
 interface Props {
   row: MRT_Row;
+  tableInstance: MRT_TableInstance;
 }
 
-export const MRT_ToggleRowActionMenuButton: FC<Props> = ({ row }) => {
+export const MRT_ToggleRowActionMenuButton: FC<Props> = ({
+  row,
+  tableInstance,
+}) => {
   const {
-    enableRowEditing,
-    icons: { EditIcon, MoreHorizIcon },
-    localization,
-    renderRowActionMenuItems,
-    renderRowActions,
+    getState,
+    options: {
+      enableEditing,
+      icons: { EditIcon, MoreHorizIcon },
+      localization,
+      renderRowActionMenuItems,
+      renderRowActions,
+    },
     setCurrentEditingRow,
-    tableInstance,
-  } = useMRT();
+  } = tableInstance;
+
+  const { currentEditingRow } = getState();
 
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
 
@@ -40,22 +46,20 @@ export const MRT_ToggleRowActionMenuButton: FC<Props> = ({ row }) => {
     setAnchorEl(event.currentTarget);
   };
 
-  const handleEdit = () => {
+  const handleStartEditMode = () => {
     setCurrentEditingRow({ ...row });
     setAnchorEl(null);
   };
 
   return (
-    <TableCell
-      sx={commonTableBodyButtonCellStyles(tableInstance.state.densePadding)}
-    >
+    <>
       {renderRowActions ? (
-        <>{renderRowActions(row, tableInstance)}</>
-      ) : row.id === tableInstance.state.currentEditingRow?.id ? (
-        <MRT_EditActionButtons row={row} />
-      ) : !renderRowActionMenuItems && enableRowEditing ? (
+        <>{renderRowActions({ row, tableInstance })}</>
+      ) : row.id === currentEditingRow?.id ? (
+        <MRT_EditActionButtons row={row} tableInstance={tableInstance} />
+      ) : !renderRowActionMenuItems && enableEditing ? (
         <Tooltip placement="right" arrow title={localization.edit}>
-          <IconButton sx={commonIconButtonStyles} onClick={handleEdit}>
+          <IconButton sx={commonIconButtonStyles} onClick={handleStartEditMode}>
             <EditIcon />
           </IconButton>
         </Tooltip>
@@ -78,12 +82,13 @@ export const MRT_ToggleRowActionMenuButton: FC<Props> = ({ row }) => {
           </Tooltip>
           <MRT_RowActionMenu
             anchorEl={anchorEl}
-            handleEdit={handleEdit}
+            handleEdit={handleStartEditMode}
             row={row}
             setAnchorEl={setAnchorEl}
+            tableInstance={tableInstance}
           />
         </>
       ) : null}
-    </TableCell>
+    </>
   );
 };

package/src/buttons/MRT_ToggleSearchButton.tsx

@@ -1,20 +1,32 @@
 import React, { FC } from 'react';
 import { IconButton, IconButtonProps, Tooltip } from '@mui/material';
-import { useMRT } from '../useMRT';
+import { MRT_TableInstance } from '..';
 
-interface Props extends IconButtonProps {}
+interface Props extends IconButtonProps {
+  tableInstance: MRT_TableInstance;
+}
 
-export const MRT_ToggleSearchButton: FC<Props> = ({ ...rest }) => {
+export const MRT_ToggleSearchButton: FC<Props> = ({
+  tableInstance,
+  ...rest
+}) => {
   const {
-    icons: { SearchIcon, SearchOffIcon },
-    idPrefix,
-    localization,
-    muiSearchTextFieldProps,
-    setShowSearch,
-    tableInstance: {
-      state: { showSearch },
+    getState,
+    options: {
+      icons: { SearchIcon, SearchOffIcon },
+      idPrefix,
+      localization,
+      muiSearchTextFieldProps,
     },
-  } = useMRT();
+    setShowSearch,
+  } = tableInstance;
+
+  const { showSearch } = getState();
+
+  const textFieldProps =
+    muiSearchTextFieldProps instanceof Function
+      ? muiSearchTextFieldProps({ tableInstance })
+      : muiSearchTextFieldProps;
 
   const handleToggleSearch = () => {
     setShowSearch(!showSearch);
@@ -22,7 +34,7 @@ export const MRT_ToggleSearchButton: FC<Props> = ({ ...rest }) => {
       () =>
         document
           .getElementById(
-            muiSearchTextFieldProps?.id ?? `mrt-${idPrefix}-search-text-field`,
+            textFieldProps?.id ?? `mrt-${idPrefix}-search-text-field`,
           )
           ?.focus(),
       200,

package/src/footer/MRT_TableFooter.tsx

@@ -1,25 +1,41 @@
 import React, { FC } from 'react';
 import { TableFooter } from '@mui/material';
 import { MRT_TableFooterRow } from './MRT_TableFooterRow';
-import { useMRT } from '../useMRT';
-import type { MRT_HeaderGroup } from '..';
+import type { MRT_HeaderGroup, MRT_TableInstance } from '..';
 
-interface Props {}
+interface Props {
+  pinned: 'left' | 'center' | 'right' | 'none';
+  tableInstance: MRT_TableInstance;
+}
 
-export const MRT_TableFooter: FC<Props> = () => {
-  const { muiTableFooterProps, tableInstance } = useMRT();
+export const MRT_TableFooter: FC<Props> = ({ pinned, tableInstance }) => {
+  const {
+    getCenterFooterGroups,
+    getFooterGroups,
+    getLeftFooterGroups,
+    getRightFooterGroups,
+    options: { muiTableFooterProps },
+  } = tableInstance;
 
   const tableFooterProps =
     muiTableFooterProps instanceof Function
-      ? muiTableFooterProps(tableInstance)
+      ? muiTableFooterProps({ tableInstance })
       : muiTableFooterProps;
 
+  const getFooterGroupsMap = {
+    center: getCenterFooterGroups,
+    left: getLeftFooterGroups,
+    none: getFooterGroups,
+    right: getRightFooterGroups,
+  };
+
   return (
     <TableFooter {...tableFooterProps}>
-      {tableInstance.footerGroups.map((footerGroup: MRT_HeaderGroup) => (
+      {getFooterGroupsMap[pinned]().map((footerGroup) => (
         <MRT_TableFooterRow
+          footerGroup={footerGroup as MRT_HeaderGroup}
           key={footerGroup.getFooterGroupProps().key}
-          footerGroup={footerGroup}
+          tableInstance={tableInstance}
         />
       ))}
     </TableFooter>

package/src/footer/MRT_TableFooterCell.tsx

@@ -1,58 +1,66 @@
 import React, { FC } from 'react';
-import { TableCell } from '@mui/material';
-import { useMRT } from '../useMRT';
-import type { MRT_HeaderGroup } from '..';
+import { alpha, TableCell } from '@mui/material';
+import type { MRT_Header, MRT_TableInstance } from '..';
 
 interface Props {
-  column: MRT_HeaderGroup;
+  footer: MRT_Header;
+  tableInstance: MRT_TableInstance;
 }
 
-export const MRT_TableFooterCell: FC<Props> = ({ column }) => {
+export const MRT_TableFooterCell: FC<Props> = ({ footer, tableInstance }) => {
   const {
-    muiTableFooterCellProps,
-    enableColumnResizing,
-    tableInstance: {
-      state: { densePadding },
-    },
-  } = useMRT();
+    getState,
+    options: { muiTableFooterCellProps, enableColumnResizing },
+  } = tableInstance;
 
-  const isParentHeader = !!column?.columns?.length;
+  const { isDensePadding } = getState();
+
+  const { column } = footer;
 
   const mTableFooterCellProps =
     muiTableFooterCellProps instanceof Function
-      ? muiTableFooterCellProps(column)
+      ? muiTableFooterCellProps({ column, tableInstance })
       : muiTableFooterCellProps;
 
   const mcTableFooterCellProps =
     column.muiTableFooterCellProps instanceof Function
-      ? column.muiTableFooterCellProps(column)
+      ? column.muiTableFooterCellProps({ column, tableInstance })
       : column.muiTableFooterCellProps;
 
   const tableCellProps = {
+    ...footer.getFooterProps(),
     ...mTableFooterCellProps,
     ...mcTableFooterCellProps,
-    ...column.getFooterProps(),
-    style: {
-      ...column.getFooterProps().style,
-      ...mTableFooterCellProps?.style,
-      ...mcTableFooterCellProps?.style,
-    },
   };
 
   return (
     <TableCell
-      align={isParentHeader ? 'center' : 'left'}
+      align={column.columnDefType === 'group' ? 'center' : 'left'}
       variant="head"
       {...tableCellProps}
-      sx={{
+      //@ts-ignore
+      sx={(theme) => ({
+        backgroundColor: theme.palette.background.default,
+        backgroundImage: `linear-gradient(${alpha(
+          theme.palette.common.white,
+          0.05,
+        )},${alpha(theme.palette.common.white, 0.05)})`,
         fontWeight: 'bold',
-        verticalAlign: 'text-top',
-        p: densePadding ? '0.5rem' : '1rem',
+        p: isDensePadding ? '0.5rem' : '1rem',
         transition: `all ${enableColumnResizing ? '10ms' : '0.2s'} ease-in-out`,
+        verticalAlign: 'text-top',
+        //@ts-ignore
         ...tableCellProps?.sx,
-      }}
+      })}
     >
-      {column.render('Footer')}
+      {footer.isPlaceholder
+        ? null
+        : column.Footer?.({
+            footer,
+            tableInstance,
+          }) ??
+          column.footer ??
+          null}
     </TableCell>
   );
 };

package/src/footer/MRT_TableFooterRow.tsx

@@ -1,66 +1,48 @@
 import React, { FC } from 'react';
 import { TableRow } from '@mui/material';
 import { MRT_TableFooterCell } from './MRT_TableFooterCell';
-import { MRT_TableSpacerCell } from '../table/MRT_TableSpacerCell';
-import { useMRT } from '../useMRT';
-import type { MRT_HeaderGroup } from '..';
+import type { MRT_Header, MRT_HeaderGroup, MRT_TableInstance } from '..';
 
 interface Props {
   footerGroup: MRT_HeaderGroup;
+  tableInstance: MRT_TableInstance;
 }
 
-export const MRT_TableFooterRow: FC<Props> = ({ footerGroup }) => {
+export const MRT_TableFooterRow: FC<Props> = ({
+  footerGroup,
+  tableInstance,
+}) => {
   const {
-    anyRowsCanExpand,
-    columns,
-    enableRowActions,
-    enableRowEditing,
-    enableRowNumbers,
-    enableSelection,
-    muiTableFooterRowProps,
-    positionActionsColumn,
-    renderDetailPanel,
-    tableInstance,
-  } = useMRT();
+    options: { muiTableFooterRowProps },
+  } = tableInstance;
 
-  //if no content in row, skip row
-  if (!columns?.some((c) => c.Footer)) return null;
+  // if no content in row, skip row
+  if (
+    !footerGroup.headers?.some(
+      (h) => h.column.columnDef.footer || h.column.Footer,
+    )
+  )
+    return null;
 
   const mTableFooterRowProps =
     muiTableFooterRowProps instanceof Function
-      ? muiTableFooterRowProps(footerGroup)
+      ? muiTableFooterRowProps({ footerGroup, tableInstance })
       : muiTableFooterRowProps;
 
   const tableRowProps = {
-    ...mTableFooterRowProps,
     ...footerGroup.getFooterGroupProps(),
-    style: {
-      ...footerGroup.getFooterGroupProps().style,
-      ...mTableFooterRowProps?.style,
-    },
+    ...mTableFooterRowProps,
   };
 
   return (
     <TableRow {...tableRowProps}>
-      {enableRowNumbers && <MRT_TableSpacerCell />}
-      {(enableRowActions || enableRowEditing) &&
-        positionActionsColumn === 'first' && <MRT_TableSpacerCell />}
-      {(anyRowsCanExpand || renderDetailPanel) && (
-        <MRT_TableSpacerCell
-          width={`${
-            renderDetailPanel ? 2 : tableInstance.expandedDepth + 0.5
-          }rem`}
-        />
-      )}
-      {enableSelection && <MRT_TableSpacerCell width="1rem" />}
-      {footerGroup.headers.map((column: MRT_HeaderGroup) => (
+      {footerGroup.headers.map((footer: MRT_Header) => (
         <MRT_TableFooterCell
-          key={column.getFooterProps().key}
-          column={column}
+          footer={footer}
+          key={footer.getFooterProps().key}
+          tableInstance={tableInstance}
         />
       ))}
-      {(enableRowActions || enableRowEditing) &&
-        positionActionsColumn === 'last' && <MRT_TableSpacerCell />}
     </TableRow>
   );
 };

package/src/head/MRT_TableHead.tsx

@@ -1,25 +1,41 @@
 import React, { FC } from 'react';
 import { TableHead } from '@mui/material';
 import { MRT_TableHeadRow } from './MRT_TableHeadRow';
-import { useMRT } from '../useMRT';
-import type { MRT_HeaderGroup } from '..';
+import type { MRT_HeaderGroup, MRT_TableInstance } from '..';
 
-interface Props {}
+interface Props {
+  pinned: 'left' | 'center' | 'right' | 'none';
+  tableInstance: MRT_TableInstance;
+}
 
-export const MRT_TableHead: FC<Props> = () => {
-  const { tableInstance, muiTableHeadProps } = useMRT();
+export const MRT_TableHead: FC<Props> = ({ pinned, tableInstance }) => {
+  const {
+    getCenterHeaderGroups,
+    getHeaderGroups,
+    getLeftHeaderGroups,
+    getRightHeaderGroups,
+    options: { muiTableHeadProps },
+  } = tableInstance;
 
   const tableHeadProps =
     muiTableHeadProps instanceof Function
-      ? muiTableHeadProps(tableInstance)
+      ? muiTableHeadProps({ tableInstance })
       : muiTableHeadProps;
 
+  const getHeaderGroupsMap = {
+    center: getCenterHeaderGroups,
+    left: getLeftHeaderGroups,
+    none: getHeaderGroups,
+    right: getRightHeaderGroups,
+  };
+
   return (
     <TableHead {...tableHeadProps}>
-      {tableInstance.headerGroups.map((headerGroup: MRT_HeaderGroup) => (
+      {getHeaderGroupsMap[pinned]().map((headerGroup) => (
         <MRT_TableHeadRow
+          headerGroup={headerGroup as MRT_HeaderGroup}
           key={headerGroup.getHeaderGroupProps().key}
-          headerGroup={headerGroup}
+          tableInstance={tableInstance}
         />
       ))}
     </TableHead>