material-react-table 0.5.5 → 0.5.8

package/src/menus/MRT_ColumnActionMenu.tsx

@@ -1,18 +1,19 @@
 import React, { FC, useState } from 'react';
-import {
-  IconButton,
-  ListItemIcon,
-  ListItemText,
-  Menu,
-  MenuItem,
-  MenuList,
-} from '@mui/material';
+import { Box, IconButton, Menu, MenuItem } from '@mui/material';
 import { useMRT } from '../useMRT';
 import { MRT_HeaderGroup } from '..';
 import { MRT_FilterTypeMenu } from './MRT_FilterTypeMenu';
 
-const commonMenuItemStyles = {
+export const commonMenuItemStyles = {
+  py: '6px',
+  my: 0,
+  justifyContent: 'space-between',
+  alignItems: 'center',
+};
+
+export const commonListItemStyles = {
   display: 'flex',
+  gap: '0.75rem',
   alignItems: 'center',
 };
 
@@ -37,6 +38,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
       ClearAllIcon,
       DynamicFeedIcon,
       FilterListIcon,
+      FilterListOffIcon,
       SortIcon,
       VisibilityOffIcon,
     },
@@ -74,6 +76,11 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
     setAnchorEl(null);
   };
 
+  const handleClearFilter = () => {
+    column.setFilter('');
+    setAnchorEl(null);
+  };
+
   const handleFilterByColumn = () => {
     setShowFilters(true);
     setTimeout(
@@ -100,76 +107,82 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
       anchorEl={anchorEl}
       open={!!anchorEl}
       onClose={() => setAnchorEl(null)}
+      MenuListProps={{
+        dense: tableInstance.state.densePadding,
+      }}
     >
-      <MenuList dense={tableInstance.state.densePadding} disablePadding>
-        {!disableSortBy &&
-          column.canSort && [
-            <MenuItem
-              key={1}
-              disabled={!column.isSorted}
-              onClick={handleClearSort}
-              sx={commonMenuItemStyles}
-            >
-              <ListItemIcon>
-                <ClearAllIcon />
-              </ListItemIcon>
-              <ListItemText>
-                {localization.columnActionMenuItemClearSort}
-              </ListItemText>
-            </MenuItem>,
-            <MenuItem
-              disabled={column.isSorted && !column.isSortedDesc}
-              key={2}
-              onClick={handleSortAsc}
-              sx={commonMenuItemStyles}
-            >
-              <ListItemIcon>
-                <SortIcon />
-              </ListItemIcon>
-              <ListItemText>
-                {localization.columnActionMenuItemSortAsc?.replace(
-                  '{column}',
-                  String(column.Header),
-                )}
-              </ListItemText>
-            </MenuItem>,
-            <MenuItem
-              divider={
-                !disableFilters || enableColumnGrouping || !disableColumnHiding
-              }
-              key={3}
-              disabled={column.isSorted && column.isSortedDesc}
-              onClick={handleSortDesc}
-              sx={commonMenuItemStyles}
-            >
-              <ListItemIcon>
-                <SortIcon style={{ transform: 'rotate(180deg) scaleX(-1)' }} />
-              </ListItemIcon>
-              <ListItemText>
-                {localization.columnActionMenuItemSortDesc?.replace(
-                  '{column}',
-                  String(column.Header),
-                )}
-              </ListItemText>
-            </MenuItem>,
-          ]}
-        {!disableFilters &&
-          column.canFilter && [
-            <MenuItem
-              divider={enableColumnGrouping || !disableColumnHiding}
-              key={1}
-              onClick={handleFilterByColumn}
-              sx={commonMenuItemStyles}
-            >
-              <ListItemIcon>
-                <FilterListIcon />
-              </ListItemIcon>
-              <ListItemText>
-                {localization.filterTextFieldPlaceholder?.replace(
-                  '{column}',
-                  String(column.Header),
-                )}
-              </ListItemText>
+      {!disableSortBy &&
+        column.canSort && [
+          <MenuItem
+            disabled={!column.isSorted}
+            key={1}
+            onClick={handleClearSort}
+            sx={commonMenuItemStyles}
+          >
+            <Box sx={commonListItemStyles}>
+              <ClearAllIcon />
+              {localization.columnActionMenuItemClearSort}
+            </Box>
+          </MenuItem>,
+          <MenuItem
+            disabled={column.isSorted && !column.isSortedDesc}
+            key={2}
+            onClick={handleSortAsc}
+            sx={commonMenuItemStyles}
+          >
+            <Box sx={commonListItemStyles}>
+              <SortIcon />
+              {localization.columnActionMenuItemSortAsc?.replace(
+                '{column}',
+                String(column.Header),
+              )}
+            </Box>
+          </MenuItem>,
+          <MenuItem
+            divider={
+              !disableFilters || enableColumnGrouping || !disableColumnHiding
+            }
+            key={3}
+            disabled={column.isSorted && column.isSortedDesc}
+            onClick={handleSortDesc}
+            sx={commonMenuItemStyles}
+          >
+            <Box sx={commonListItemStyles}>
+              <SortIcon style={{ transform: 'rotate(180deg) scaleX(-1)' }} />
+              {localization.columnActionMenuItemSortDesc?.replace(
+                '{column}',
+                String(column.Header),
+              )}
+            </Box>
+          </MenuItem>,
+        ]}
+      {!disableFilters &&
+        column.canFilter && [
+          <MenuItem
+            disabled={!column.filterValue}
+            key={0}
+            onClick={handleClearFilter}
+            sx={commonMenuItemStyles}
+          >
+            <Box sx={commonListItemStyles}>
+              <FilterListOffIcon />
+              {localization.filterTextFieldClearButtonTitle}
+            </Box>
+          </MenuItem>,
+          <MenuItem
+            divider={enableColumnGrouping || !disableColumnHiding}
+            key={1}
+            onClick={handleFilterByColumn}
+            sx={commonMenuItemStyles}
+          >
+            <Box sx={commonListItemStyles}>
+              <FilterListIcon />
+              {localization.filterTextFieldPlaceholder?.replace(
+                '{column}',
+                String(column.Header),
+              )}
+            </Box>
+            {!column.filterSelectOptions && (
               <IconButton
                 onClick={handleOpenFilterModeMenu}
                 onMouseEnter={handleOpenFilterModeMenu}
@@ -178,53 +191,45 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
               >
                 <ArrowRightIcon />
               </IconButton>
-            </MenuItem>,
-            <MRT_FilterTypeMenu
-              anchorEl={filterMenuAnchorEl}
-              column={column}
-              key={2}
-              setAnchorEl={setFilterMenuAnchorEl}
-              onSelect={handleFilterByColumn}
-            />,
-          ]}
-        {enableColumnGrouping &&
-          column.canGroupBy && [
-            <MenuItem
-              divider={!disableColumnHiding}
-              key={2}
-              onClick={handleGroupByColumn}
-              sx={commonMenuItemStyles}
-            >
-              <ListItemIcon>
-                <DynamicFeedIcon />
-              </ListItemIcon>
-              <ListItemText>
-                {localization[
-                  column.isGrouped
-                    ? 'columnActionMenuItemUnGroupBy'
-                    : 'columnActionMenuItemGroupBy'
-                ]?.replace('{column}', String(column.Header))}
-              </ListItemText>
-            </MenuItem>,
-          ]}
-        {!disableColumnHiding && [
+            )}
+          </MenuItem>,
+          <MRT_FilterTypeMenu
+            anchorEl={filterMenuAnchorEl}
+            column={column}
+            key={2}
+            setAnchorEl={setFilterMenuAnchorEl}
+            onSelect={handleFilterByColumn}
+          />,
+        ]}
+      {enableColumnGrouping &&
+        column.canGroupBy && [
           <MenuItem
-            key={1}
-            onClick={handleHideColumn}
+            divider={!disableColumnHiding}
+            key={2}
+            onClick={handleGroupByColumn}
             sx={commonMenuItemStyles}
           >
-            <ListItemIcon>
-              <VisibilityOffIcon />
-            </ListItemIcon>
-            <ListItemText>
-              {localization.columnActionMenuItemHideColumn?.replace(
-                '{column}',
-                String(column.Header),
-              )}
-            </ListItemText>
+            <Box sx={commonListItemStyles}>
+              <DynamicFeedIcon />
+              {localization[
+                column.isGrouped
+                  ? 'columnActionMenuItemUnGroupBy'
+                  : 'columnActionMenuItemGroupBy'
+              ]?.replace('{column}', String(column.Header))}
+            </Box>
           </MenuItem>,
         ]}
-      </MenuList>
+      {!disableColumnHiding && [
+        <MenuItem key={1} onClick={handleHideColumn} sx={commonMenuItemStyles}>
+          <Box sx={commonListItemStyles}>
+            <VisibilityOffIcon />
+            {localization.columnActionMenuItemHideColumn?.replace(
+              '{column}',
+              String(column.Header),
+            )}
+          </Box>
+        </MenuItem>,
+      ]}
     </Menu>
   );
 };

package/src/menus/MRT_FilterTypeMenu.tsx

@@ -1,7 +1,13 @@
 import React, { FC, useMemo } from 'react';
-import { Menu, MenuItem, MenuList } from '@mui/material';
+import { Menu, MenuItem } from '@mui/material';
 import { useMRT } from '../useMRT';
-import { MRT_FilterType, MRT_HeaderGroup } from '..';
+import { MRT_FilterType, MRT_FILTER_TYPE, MRT_HeaderGroup } from '..';
+
+const commonMenuItemStyles = {
+  py: '6px',
+  my: 0,
+  alignItems: 'center',
+};
 
 interface Props {
   anchorEl: HTMLElement | null;
@@ -19,48 +25,48 @@ export const MRT_FilterTypeMenu: FC<Props> = ({
   const { localization, setCurrentFilterTypes, tableInstance } = useMRT();
 
   const filterTypes: {
-    type: MRT_FilterType;
+    type: MRT_FILTER_TYPE;
     label: string;
     divider: boolean;
   }[] = useMemo(
     () => [
       {
-        type: 'fuzzy',
+        type: MRT_FILTER_TYPE.FUZZY,
         label: localization.filterMenuItemFuzzy,
         divider: false,
       },
       {
-        type: 'contains',
+        type: MRT_FILTER_TYPE.CONTAINS,
         label: localization.filterMenuItemContains,
         divider: true,
       },
       {
-        type: 'startsWith',
+        type: MRT_FILTER_TYPE.STARTS_WITH,
         label: localization.filterMenuItemStartsWith,
         divider: false,
       },
       {
-        type: 'endsWith',
+        type: MRT_FILTER_TYPE.ENDS_WITH,
         label: localization.filterMenuItemEndsWith,
         divider: true,
       },
       {
-        type: 'equals',
+        type: MRT_FILTER_TYPE.EQUALS,
         label: localization.filterMenuItemEquals,
         divider: false,
       },
       {
-        type: 'notEquals',
+        type: MRT_FILTER_TYPE.NOT_EQUALS,
         label: localization.filterMenuItemNotEquals,
         divider: true,
       },
       {
-        type: 'empty',
+        type: MRT_FILTER_TYPE.EMPTY,
         label: localization.filterMenuItemEmpty,
         divider: false,
       },
       {
-        type: 'notEmpty',
+        type: MRT_FILTER_TYPE.NOT_EMPTY,
         label: localization.filterMenuItemNotEmpty,
         divider: false,
       },
@@ -68,13 +74,13 @@ export const MRT_FilterTypeMenu: FC<Props> = ({
     [],
   );
 
-  const handleSelectFilterType = (value: MRT_FilterType) => {
+  const handleSelectFilterType = (value: MRT_FILTER_TYPE) => {
     setAnchorEl(null);
     setCurrentFilterTypes((prev: { [key: string]: MRT_FilterType }) => ({
       ...prev,
       [column.id]: value,
     }));
-    if (['empty', 'notEmpty'].includes(value)) {
+    if ([MRT_FILTER_TYPE.EMPTY, MRT_FILTER_TYPE.NOT_EMPTY].includes(value)) {
       column.setFilter(' ');
     }
     onSelect?.();
@@ -88,20 +94,22 @@ export const MRT_FilterTypeMenu: FC<Props> = ({
       anchorOrigin={{ vertical: 'center', horizontal: 'right' }}
       onClose={() => setAnchorEl(null)}
       open={!!anchorEl}
+      MenuListProps={{
+        dense: tableInstance.state.densePadding,
+      }}
     >
-      <MenuList dense={tableInstance.state.densePadding} disablePadding>
-        {filterTypes.map(({ type, label, divider }) => (
-          <MenuItem
-            divider={divider}
-            key={type}
-            onClick={() => handleSelectFilterType(type)}
-            selected={type === filterType}
-            value={type}
-          >
-            {label}
-          </MenuItem>
-        ))}
-      </MenuList>
+      {filterTypes.map(({ type, label, divider }, index) => (
+        <MenuItem
+          divider={divider}
+          key={index}
+          onClick={() => handleSelectFilterType(type)}
+          selected={type === filterType}
+          sx={commonMenuItemStyles}
+          value={type}
+        >
+          {label}
+        </MenuItem>
+      ))}
     </Menu>
   );
 };

package/src/menus/MRT_RowActionMenu.tsx

@@ -1,13 +1,8 @@
 import React, { FC } from 'react';
-import {
-  ListItemIcon,
-  ListItemText,
-  Menu,
-  MenuItem,
-  MenuList,
-} from '@mui/material';
+import { Menu, MenuItem } from '@mui/material';
 import { useMRT } from '../useMRT';
 import { MRT_Row } from '..';
+import { commonMenuItemStyles } from './MRT_ColumnActionMenu';
 
 interface Props {
   anchorEl: HTMLElement | null;
@@ -35,20 +30,19 @@ export const MRT_RowActionMenu: FC<Props> = ({
       anchorEl={anchorEl}
       open={!!anchorEl}
       onClose={() => setAnchorEl(null)}
+      MenuListProps={{
+        dense: tableInstance.state.densePadding,
+      }}
     >
-      <MenuList dense={tableInstance.state.densePadding} disablePadding>
-        {enableRowEditing && (
-          <MenuItem onClick={handleEdit}>
-            <ListItemIcon>
-              <EditIcon />
-            </ListItemIcon>
-            <ListItemText>{localization.rowActionMenuItemEdit}</ListItemText>
-          </MenuItem>
-        )}
-        {renderRowActionMenuItems?.(row, tableInstance, () =>
-          setAnchorEl(null),
-        ) ?? null}
-      </MenuList>
+      {enableRowEditing && (
+        <MenuItem onClick={handleEdit} sx={commonMenuItemStyles}>
+          <EditIcon />
+          {localization.rowActionMenuItemEdit}
+        </MenuItem>
+      )}
+      {renderRowActionMenuItems?.(row, tableInstance, () =>
+        setAnchorEl(null),
+      ) ?? null}
     </Menu>
   );
 };

package/src/menus/MRT_ShowHideColumnsMenu.tsx

@@ -2,6 +2,7 @@ import React, { FC } from 'react';
 import { FormControlLabel, MenuItem, Switch } from '@mui/material';
 import { ColumnInstance } from 'react-table';
 import { MRT_ColumnInstance } from '..';
+import { commonMenuItemStyles } from './MRT_ColumnActionMenu';
 
 interface Props {
   column: MRT_ColumnInstance;
@@ -28,8 +29,11 @@ export const MRT_ShowHideColumnsMenu: FC<Props> = ({ column }) => {
 
   return (
     <>
-      <MenuItem sx={{ pl: `${(column.depth + 0.5) * 2}rem` }}>
+      <MenuItem
+        sx={{ ...commonMenuItemStyles, pl: `${(column.depth + 0.5) * 2}rem` }}
+      >
         <FormControlLabel
+          componentsProps={{ typography: { sx: { marginBottom: 0 } } }}
           checked={switchChecked}
           control={<Switch />}
           label={column.Header as string}

package/src/table/MRT_TableContainer.tsx

@@ -19,6 +19,7 @@ export const MRT_TableContainer: FC<Props> = () => {
     hideToolbarTop,
     isFetching,
     isLoading,
+    muiLinearProgressProps,
     muiTableContainerProps,
     tableInstance,
   } = useMRT();
@@ -47,6 +48,11 @@ export const MRT_TableContainer: FC<Props> = () => {
       ? muiTableContainerProps(tableInstance)
       : muiTableContainerProps;
 
+  const linearProgressProps =
+    muiLinearProgressProps instanceof Function
+      ? muiLinearProgressProps(tableInstance)
+      : muiLinearProgressProps;
+
   return (
     <TableContainer
       component={Paper}
@@ -67,7 +73,7 @@ export const MRT_TableContainer: FC<Props> = () => {
     >
       {!hideToolbarTop && <MRT_ToolbarTop />}
       <Collapse in={isFetching || isLoading} unmountOnExit>
-        <LinearProgress />
+        <LinearProgress {...linearProgressProps} />
       </Collapse>
       <Box
         sx={{

package/src/useMRT.tsx

@@ -21,7 +21,7 @@ import {
   useSortBy,
   useTable,
 } from 'react-table';
-import { MRT_FilterType, MRT_Row, MRT_TableInstance } from '.';
+import { MRT_FilterType, MRT_FILTER_TYPE, MRT_Row, MRT_TableInstance } from '.';
 import { defaultFilterFNs } from './filtersFNs';
 import { MRT_Icons } from './icons';
 import { MRT_Localization } from './localization';
@@ -81,7 +81,9 @@ export const MaterialReactTableProvider = <D extends {} = {}>(
     props.initialState?.showSearch ?? false,
   );
 
-  const filterTypes = useMemo<Partial<{ [key in MRT_FilterType]: any }>>(
+  const filterTypes = useMemo<{
+    [key in MRT_FILTER_TYPE]: any;
+  }>(
     () => ({
       ...defaultFilterFNs,
       ...props.filterTypes,
@@ -94,12 +96,12 @@ export const MaterialReactTableProvider = <D extends {} = {}>(
   }>(() =>
     Object.assign(
       {},
-      ...props.columns
-        .map((c) => c.accessor?.toString() as string)
-        .map((accessor) => ({
-          [accessor]:
-            props?.initialState?.filters?.[accessor as any] ?? 'fuzzy',
-        })),
+      ...props.columns.map((c) => ({
+        [c.accessor as string]:
+          c.filter ??
+          props?.initialState?.filters?.[c.accessor as any] ??
+          (!!c.filterSelectOptions ? 'equals' : 'fuzzy'),
+      })),
     ),
   );
 
@@ -107,7 +109,9 @@ export const MaterialReactTableProvider = <D extends {} = {}>(
     () =>
       props.columns.map((column) => {
         column.filter =
-          filterTypes[currentFilterTypes[column.accessor as string]];
+          filterTypes[
+            currentFilterTypes[column.accessor as string] as MRT_FILTER_TYPE
+          ];
         return column;
       }),
     [props.columns, filterTypes, currentFilterTypes],
@@ -119,6 +123,7 @@ export const MaterialReactTableProvider = <D extends {} = {}>(
       columns,
       // @ts-ignore
       filterTypes,
+      globalFilterValue: 'fuzzy',
       useControlledState: (state) =>
         useMemo(
           () => ({