material-react-table 0.5.1 → 0.5.4

package/src/menus/MRT_ColumnActionMenu.tsx

@@ -1,12 +1,17 @@
-import React, { FC } from 'react';
-import { Divider, Menu, MenuItem } from '@mui/material';
+import React, { FC, useState } from 'react';
+import {
+  Divider,
+  IconButton,
+  ListItemIcon,
+  ListItemText,
+  Menu,
+  MenuItem,
+  MenuList,
+} from '@mui/material';
 import { useMRT } from '../useMRT';
 import { MRT_HeaderGroup } from '..';
-
-const commonMenuItemStyles = {
-  display: 'flex',
-  gap: '0.75rem',
-};
+import { MRT_FilterMenu } from './MRT_FilterMenu';
+import ArrowRightIcon from '@mui/icons-material/ArrowRight';
 
 interface Props {
   anchorEl: HTMLElement | null;
@@ -24,17 +29,21 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
     disableFilters,
     disableSortBy,
     enableColumnGrouping,
-    localization,
-    setShowFilters,
     icons: {
-      FilterListIcon,
-      SortIcon,
       ClearAllIcon,
       DynamicFeedIcon,
+      FilterListIcon,
+      SortIcon,
       VisibilityOffIcon,
     },
+    idPrefix,
+    localization,
+    setShowFilters,
   } = useMRT();
 
+  const [filterMenuAnchorEl, setFilterMenuAnchorEl] =
+    useState<null | HTMLElement>(null);
+
   const handleClearSort = () => {
     column.clearSortBy();
     setAnchorEl(null);
@@ -68,7 +77,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
           .getElementById(
             // @ts-ignore
             column.muiTableHeadCellFilterTextFieldProps?.id ??
-              `filter-${column.id}-column`,
+              `mrt-${idPrefix}-${column.id}-filter-text-field`,
           )
           ?.focus(),
       200,
@@ -76,88 +85,119 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
     setAnchorEl(null);
   };
 
+  const handleOpenFilterModeMenu = (event: React.MouseEvent<HTMLElement>) => {
+    event.stopPropagation();
+    setFilterMenuAnchorEl(event.currentTarget);
+  };
+
   return (
     <Menu
       anchorEl={anchorEl}
       open={!!anchorEl}
       onClose={() => setAnchorEl(null)}
     >
-      {!disableSortBy &&
-        column.canSort && [
-          <MenuItem
-            key={1}
-            disabled={!column.isSorted}
-            onClick={handleClearSort}
-            sx={commonMenuItemStyles}
-          >
-            <ClearAllIcon /> {localization.columnActionMenuItemClearSort}
-          </MenuItem>,
-          <MenuItem
-            key={2}
-            disabled={column.isSorted && !column.isSortedDesc}
-            onClick={handleSortAsc}
-            sx={commonMenuItemStyles}
-          >
-            <SortIcon />{' '}
-            {localization.columnActionMenuItemSortAsc?.replace(
-              '{column}',
-              String(column.Header),
-            )}
-          </MenuItem>,
-          <MenuItem
-            key={3}
-            disabled={column.isSorted && column.isSortedDesc}
-            onClick={handleSortDesc}
-            sx={commonMenuItemStyles}
-          >
-            <SortIcon style={{ transform: 'rotate(180deg) scaleX(-1)' }} />{' '}
-            {localization.columnActionMenuItemSortDesc?.replace(
-              '{column}',
-              String(column.Header),
-            )}
-          </MenuItem>,
-        ]}
-      {!disableFilters &&
-        column.canFilter && [
+      <MenuList>
+        {!disableSortBy &&
+          column.canSort && [
+            <MenuItem
+              key={1}
+              disabled={!column.isSorted}
+              onClick={handleClearSort}
+            >
+              <ListItemIcon>
+                <ClearAllIcon />
+              </ListItemIcon>
+              <ListItemText>
+                {localization.columnActionMenuItemClearSort}
+              </ListItemText>
+            </MenuItem>,
+            <MenuItem
+              key={2}
+              disabled={column.isSorted && !column.isSortedDesc}
+              onClick={handleSortAsc}
+            >
+              <ListItemIcon>
+                <SortIcon />
+              </ListItemIcon>
+              <ListItemText>
+                {localization.columnActionMenuItemSortAsc?.replace(
+                  '{column}',
+                  String(column.Header),
+                )}
+              </ListItemText>
+            </MenuItem>,
+            <MenuItem
+              key={3}
+              disabled={column.isSorted && column.isSortedDesc}
+              onClick={handleSortDesc}
+            >
+              <ListItemIcon>
+                <SortIcon style={{ transform: 'rotate(180deg) scaleX(-1)' }} />
+              </ListItemIcon>
+              <ListItemText>
+                {localization.columnActionMenuItemSortDesc?.replace(
+                  '{column}',
+                  String(column.Header),
+                )}
+              </ListItemText>
+            </MenuItem>,
+          ]}
+        {!disableFilters &&
+          column.canFilter && [
+            <Divider key={0} />,
+            <MenuItem key={1} onClick={handleFilterByColumn}>
+              <ListItemIcon>
+                <FilterListIcon />
+              </ListItemIcon>
+              <ListItemText>
+                {localization.filterTextFieldPlaceholder?.replace(
+                  '{column}',
+                  String(column.Header),
+                )}
+              </ListItemText>
+              <IconButton size="small" onMouseEnter={handleOpenFilterModeMenu}>
+                <ArrowRightIcon />
+              </IconButton>
+            </MenuItem>,
+            <MRT_FilterMenu
+              anchorEl={filterMenuAnchorEl}
+              column={column}
+              key={2}
+              setAnchorEl={setFilterMenuAnchorEl}
+              onSelect={handleFilterByColumn}
+            />,
+          ]}
+        {enableColumnGrouping &&
+          column.canGroupBy && [
+            <Divider key={1} />,
+            <MenuItem key={2} onClick={handleGroupByColumn}>
+              <ListItemIcon>
+                <DynamicFeedIcon />
+              </ListItemIcon>
+              <ListItemText>
+                {localization[
+                  column.isGrouped
+                    ? 'columnActionMenuItemUnGroupBy'
+                    : 'columnActionMenuItemGroupBy'
+                ]?.replace('{column}', String(column.Header))}
+              </ListItemText>
+            </MenuItem>,
+          ]}
+        {!disableColumnHiding && [
           <Divider key={0} />,
-          <MenuItem
-            key={1}
-            onClick={handleFilterByColumn}
-            sx={commonMenuItemStyles}
-          >
-            <FilterListIcon />{' '}
-            {localization.filterTextFieldPlaceholder?.replace(
-              '{column}',
-              String(column.Header),
-            )}
-          </MenuItem>,
-        ]}
-      {enableColumnGrouping &&
-        column.canGroupBy && [
-          <Divider key={1} />,
-          <MenuItem
-            key={2}
-            onClick={handleGroupByColumn}
-            sx={commonMenuItemStyles}
-          >
-            <DynamicFeedIcon />{' '}
-            {localization[
-              column.isGrouped
-                ? 'columnActionMenuItemUnGroupBy'
-                : 'columnActionMenuItemGroupBy'
-            ]?.replace('{column}', String(column.Header))}
+          <MenuItem key={1} onClick={handleHideColumn}>
+            <ListItemIcon>
+              <VisibilityOffIcon />
+            </ListItemIcon>
+            <ListItemText>
+              {localization.columnActionMenuItemHideColumn?.replace(
+                '{column}',
+                String(column.Header),
+              )}
+            </ListItemText>
           </MenuItem>,
         ]}
-      {!disableColumnHiding && [
-        <Divider key={0} />,
-        <MenuItem key={1} onClick={handleHideColumn} sx={commonMenuItemStyles}>
-          <VisibilityOffIcon />{' '}
-          {localization.columnActionMenuItemHideColumn?.replace(
-            '{column}',
-            String(column.Header),
-          )}
-        </MenuItem>,
-      ]}
+      </MenuList>
     </Menu>
   );
 };

package/src/menus/MRT_FilterMenu.tsx

@@ -0,0 +1,109 @@
+import React, { FC, useMemo } from 'react';
+import { Divider, Menu, MenuItem, Typography } from '@mui/material';
+import { useMRT } from '../useMRT';
+import { MRT_FilterType, MRT_HeaderGroup } from '..';
+
+interface Props {
+  anchorEl: HTMLElement | null;
+  column: MRT_HeaderGroup;
+  setAnchorEl: (anchorEl: HTMLElement | null) => void;
+  onSelect?: () => void;
+}
+
+export const MRT_FilterMenu: FC<Props> = ({
+  anchorEl,
+  column,
+  onSelect,
+  setAnchorEl,
+}) => {
+  const { localization, setCurrentFilterTypes, tableInstance } = useMRT();
+
+  const filterTypes: {
+    type: MRT_FilterType;
+    label: string;
+    divider: boolean;
+  }[] = useMemo(
+    () => [
+      {
+        type: 'fuzzy',
+        label: localization.filterMenuItemFuzzy,
+        divider: false,
+      },
+      {
+        type: 'contains',
+        label: localization.filterMenuItemContains,
+        divider: true,
+      },
+      {
+        type: 'startsWith',
+        label: localization.filterMenuItemStartsWith,
+        divider: false,
+      },
+      {
+        type: 'endsWith',
+        label: localization.filterMenuItemEndsWith,
+        divider: true,
+      },
+      {
+        type: 'equals',
+        label: localization.filterMenuItemEquals,
+        divider: false,
+      },
+      {
+        type: 'notEquals',
+        label: localization.filterMenuItemNotEquals,
+        divider: true,
+      },
+      {
+        type: 'empty',
+        label: localization.filterMenuItemEmpty,
+        divider: false,
+      },
+      {
+        type: 'notEmpty',
+        label: localization.filterMenuItemNotEmpty,
+        divider: false,
+      },
+    ],
+    [],
+  );
+
+  const handleSelectMenuItem = (value: MRT_FilterType) => {
+    setAnchorEl(null);
+    setCurrentFilterTypes((prev: { [key: string]: MRT_FilterType }) => ({
+      ...prev,
+      [column.id]: value,
+    }));
+    if (['empty', 'notEmpty'].includes(value)) {
+      column.setFilter(' ');
+    }
+    onSelect?.();
+  };
+
+  const filterType = tableInstance.state.currentFilterTypes[column.id];
+
+  return (
+    <Menu
+      anchorEl={anchorEl}
+      open={!!anchorEl}
+      anchorOrigin={{ vertical: 'center', horizontal: 'right' }}
+      onClose={() => setAnchorEl(null)}
+    >
+      <Typography sx={{ fontWeight: 'bold', p: '1rem', fontSize: '1.1rem' }}>
+        {localization.filterMenuTitle}
+      </Typography>
+      <Divider />
+      {filterTypes.map(({ type, label, divider }) => (
+        <MenuItem
+          divider={divider}
+          key={type}
+          onClick={() => handleSelectMenuItem(type)}
+          selected={type === filterType}
+          value={type}
+        >
+          {label}
+        </MenuItem>
+      ))}
+    </Menu>
+  );
+};

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(() => {
@@ -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>
   );

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

@@ -5,6 +5,8 @@ import React, {
   useContext,
   useMemo,
   useState,
+  Dispatch,
+  SetStateAction,
 } from 'react';
 import {
   PluginHook,
@@ -19,7 +21,8 @@ import {
   useSortBy,
   useTable,
 } from 'react-table';
-import { MRT_Row, MRT_TableInstance } from '.';
+import { MRT_FilterType, MRT_Row, MRT_TableInstance } from '.';
+import { defaultFilterFNs } from './filtersFNs';
 import { MRT_Icons } from './icons';
 import { MRT_Localization } from './localization';
 import { MaterialReactTableProps } from './MaterialReactTable';
@@ -27,25 +30,26 @@ 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;
+  idPrefix: string;
   localization: MRT_Localization;
-  setCurrentEditingRow: (currentRowEditingId: MRT_Row<D> | null) => void;
-  setDensePadding: (densePadding: boolean) => void;
-  setFullScreen: (fullScreen: boolean) => void;
-  setShowFilters: (showFilters: boolean) => void;
-  setShowSearch: (showSearch: boolean) => void;
-  showFilters: boolean;
-  showSearch: boolean;
+  setCurrentEditingRow: Dispatch<SetStateAction<MRT_Row<D> | null>>;
+  setCurrentFilterTypes: Dispatch<
+    SetStateAction<{
+      [key: string]: MRT_FilterType;
+    }>
+  >;
+  setDensePadding: Dispatch<SetStateAction<boolean>>;
+  setFullScreen: Dispatch<SetStateAction<boolean>>;
+  setShowFilters: Dispatch<SetStateAction<boolean>>;
+  setShowSearch: Dispatch<SetStateAction<boolean>>;
   tableInstance: MRT_TableInstance<D>;
 };
 
-const MaterialReactTableContext = (<D extends {}>() =>
+const MaterialReactTableContext = (<D extends {} = {}>() =>
   createContext<UseMRT<D>>({} as UseMRT<D>) as Context<UseMRT<D>>)();
 
-export const MaterialReactTableProvider = <D extends {}>(
+export const MaterialReactTableProvider = <D extends {} = {}>(
   props: PropsWithChildren<MaterialReactTableProps<D>>,
 ) => {
   const hooks: PluginHook<D>[] = [
@@ -61,19 +65,7 @@ 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>(
+  const [currentEditingRow, setCurrentEditingRow] = useState<MRT_Row<D> | null>(
     null,
   );
   const [densePadding, setDensePadding] = useState(
@@ -86,7 +78,85 @@ export const MaterialReactTableProvider = <D extends {}>(
     props.initialState?.showFilters ?? false,
   );
   const [showSearch, setShowSearch] = useState(
-    props.initialState?.showSearchTextField ?? false,
+    props.initialState?.showSearch ?? false,
+  );
+
+  const filterTypes = useMemo<Partial<{ [key in MRT_FilterType]: any }>>(
+    () => ({
+      ...defaultFilterFNs,
+      ...props.filterTypes,
+    }),
+    [props.filterTypes],
+  );
+
+  const [currentFilterTypes, setCurrentFilterTypes] = useState<{
+    [key: string]: MRT_FilterType;
+  }>(() =>
+    Object.assign(
+      {},
+      ...props.columns
+        .map((c) => c.accessor?.toString() as string)
+        .map((accessor) => ({
+          [accessor]:
+            props?.initialState?.filters?.[accessor as any] ?? 'fuzzy',
+        })),
+    ),
+  );
+
+  const columns = useMemo(
+    () =>
+      props.columns.map((column) => {
+        column.filter =
+          filterTypes[currentFilterTypes[column.accessor as string]];
+        return column;
+      }),
+    [props.columns, filterTypes, currentFilterTypes],
+  );
+
+  const tableInstance = useTable(
+    {
+      ...props,
+      columns,
+      // @ts-ignore
+      filterTypes,
+      useControlledState: (state) =>
+        useMemo(
+          () => ({
+            ...state,
+            currentEditingRow,
+            currentFilterTypes,
+            densePadding,
+            fullScreen,
+            showFilters,
+            showSearch,
+            //@ts-ignore
+            ...props?.useControlledState?.(state),
+          }),
+          [
+            currentEditingRow,
+            currentFilterTypes,
+            densePadding,
+            fullScreen,
+            showFilters,
+            showSearch,
+            state,
+          ],
+        ),
+    },
+    ...hooks,
+  ) as MRT_TableInstance<D>;
+
+  const idPrefix = useMemo(
+    () => props.idPrefix ?? Math.random().toString(36).substring(2, 9),
+    [props.idPrefix],
+  );
+  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 +165,14 @@ export const MaterialReactTableProvider = <D extends {}>(
         ...props,
         anyRowsCanExpand,
         anyRowsExpanded,
-        currentEditingRow,
-        densePadding,
+        idPrefix,
+        //@ts-ignore
         setCurrentEditingRow,
+        setCurrentFilterTypes,
         setDensePadding,
-        fullScreen,
         setFullScreen,
         setShowFilters,
         setShowSearch,
-        showFilters,
-        showSearch,
         //@ts-ignore
         tableInstance,
       }}
@@ -114,6 +182,7 @@ export const MaterialReactTableProvider = <D extends {}>(
   );
 };
 
-export const useMRT = <D extends {}>(): UseMRT<D> =>
-  // @ts-ignore
-  useContext<UseMRT<D>>(MaterialReactTableContext);
+export const useMRT = <D extends {} = {}>(): UseMRT<D> =>
+  useContext<UseMRT<D>>(
+    MaterialReactTableContext as unknown as Context<UseMRT<D>>,
+  );