material-react-table 0.6.9 → 0.7.0-alpha.2

package/src/buttons/MRT_ExpandButton.tsx

@@ -1,59 +1,53 @@
 import React, { FC, MouseEvent } from 'react';
-import { IconButton, TableCell } from '@mui/material';
-import { useMRT } from '../useMRT';
-import type { MRT_Row } from '..';
-import { commonTableBodyButtonCellStyles } from '../body/MRT_TableBodyCell';
+import { IconButton } from '@mui/material';
+import type { MRT_Row, MRT_TableInstance } from '..';
 
 interface Props {
   row: MRT_Row;
+  tableInstance: MRT_TableInstance;
 }
 
-export const MRT_ExpandButton: FC<Props> = ({ row }) => {
+export const MRT_ExpandButton: FC<Props> = ({ row, tableInstance }) => {
   const {
-    icons: { ExpandMoreIcon },
-    localization,
-    onRowExpandChange,
-    renderDetailPanel,
-    tableInstance: {
-      state: { densePadding },
+    getState,
+    options: {
+      icons: { ExpandMoreIcon },
+      localization,
+      onRowExpandChange,
+      renderDetailPanel,
     },
-  } = useMRT();
+  } = tableInstance;
+
+  const { isDensePadding } = getState();
 
   const handleToggleExpand = (event: MouseEvent<HTMLButtonElement>) => {
-    // @ts-ignore
-    row.getToggleRowExpandedProps()?.onClick(event);
-    onRowExpandChange?.(event, row);
+    row.toggleExpanded();
+    onRowExpandChange?.({ event, row, tableInstance });
   };
 
   return (
-    <TableCell
-      size="small"
+    <IconButton
+      aria-label={localization.expand}
+      disabled={!row.getCanExpand() && !renderDetailPanel}
+      title={localization.expand}
+      onClick={handleToggleExpand}
       sx={{
-        ...commonTableBodyButtonCellStyles(densePadding),
-        pl: `${row.depth + 0.5}rem`,
-        textAlign: 'left',
+        height: isDensePadding ? '1.75rem' : '2.25rem',
+        width: isDensePadding ? '1.75rem' : '2.25rem',
       }}
     >
-      <IconButton
-        aria-label={localization.expand}
-        disabled={!row.canExpand && !renderDetailPanel}
-        title={localization.expand}
-        {...row.getToggleRowExpandedProps()}
-        onClick={handleToggleExpand}
-      >
-        <ExpandMoreIcon
-          style={{
-            transform: `rotate(${
-              !row.canExpand && !renderDetailPanel
-                ? -90
-                : row.isExpanded
-                ? -180
-                : 0
-            }deg)`,
-            transition: 'transform 0.2s',
-          }}
-        />
-      </IconButton>
-    </TableCell>
+      <ExpandMoreIcon
+        style={{
+          transform: `rotate(${
+            !row.getCanExpand() && !renderDetailPanel
+              ? -90
+              : row.getIsExpanded()
+              ? -180
+              : 0
+          }deg)`,
+          transition: 'transform 0.2s',
+        }}
+      />
+    </IconButton>
   );
 };

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,
+      setIsFullScreen,
     },
-  } = useMRT();
+  } = 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,
+      setIsDensePadding,
     },
-  } = useMRT();
+  } = 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,
+      setShowFilters,
     },
-  } = useMRT();
+  } = 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,
-    setCurrentEditingRow,
-    tableInstance,
-  } = useMRT();
+    getState,
+    options: {
+      enableRowEditing,
+      icons: { EditIcon, MoreHorizIcon },
+      localization,
+      renderRowActionMenuItems,
+      renderRowActions,
+      setCurrentEditingRow,
+    },
+  } = tableInstance;
+
+  const { currentEditingRow } = getState();
 
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
 
@@ -46,13 +52,11 @@ export const MRT_ToggleRowActionMenuButton: FC<Props> = ({ row }) => {
   };
 
   return (
-    <TableCell
-      sx={commonTableBodyButtonCellStyles(tableInstance.state.densePadding)}
-    >
+    <>
       {renderRowActions ? (
-        <>{renderRowActions(row, tableInstance)}</>
-      ) : row.id === tableInstance.state.currentEditingRow?.id ? (
-        <MRT_EditActionButtons row={row} />
+        <>{renderRowActions({ row, tableInstance })}</>
+      ) : row.id === currentEditingRow?.id ? (
+        <MRT_EditActionButtons row={row} tableInstance={tableInstance} />
       ) : !renderRowActionMenuItems && enableRowEditing ? (
         <Tooltip placement="right" arrow title={localization.edit}>
           <IconButton sx={commonIconButtonStyles} onClick={handleEdit}>
@@ -81,9 +85,10 @@ export const MRT_ToggleRowActionMenuButton: FC<Props> = ({ row }) => {
             handleEdit={handleEdit}
             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,
+      setShowSearch,
     },
-  } = useMRT();
+  } = 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/enums.ts

@@ -1,9 +1,10 @@
 export enum MRT_FILTER_TYPE {
+  BEST_MATCH = 'bestMatch',
+  BEST_MATCH_FIRST = 'bestMatchFirst',
   CONTAINS = 'contains',
   EMPTY = 'empty',
   ENDS_WITH = 'endsWith',
   EQUALS = 'equals',
-  FUZZY = 'fuzzy',
   GREATER_THAN = 'greaterThan',
   LESS_THAN = 'lessThan',
   NOT_EMPTY = 'notEmpty',

package/src/filtersFNs.ts

@@ -1,7 +1,20 @@
 import { matchSorter } from 'match-sorter';
 import { MRT_Row } from '.';
 
-export const fuzzy = (
+export const bestMatchFirst = (
+  rows: MRT_Row[],
+  columnIds: string[] | string,
+  filterValue: string | number,
+) =>
+  matchSorter(rows, filterValue.toString().trim(), {
+    keys: Array.isArray(columnIds)
+      ? columnIds.map((c) => `values.${c}`)
+      : [`values.${columnIds}`],
+  });
+
+bestMatchFirst.autoRemove = (val: any) => !val;
+
+export const bestMatch = (
   rows: MRT_Row[],
   columnIds: string[] | string,
   filterValue: string | number,
@@ -13,7 +26,7 @@ export const fuzzy = (
     sorter: (rankedItems) => rankedItems,
   });
 
-fuzzy.autoRemove = (val: any) => !val;
+bestMatch.autoRemove = (val: any) => !val;
 
 export const contains = (
   rows: MRT_Row[],
@@ -131,11 +144,12 @@ export const notEmpty = (
 notEmpty.autoRemove = (val: any) => !val;
 
 export const defaultFilterFNs = {
+  bestMatch,
+  bestMatchFirst,
   contains,
   empty,
   endsWith,
   equals,
-  fuzzy,
   greaterThan,
   lessThan,
   notEmpty,

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>
   );
 };