material-react-table 0.5.4 → 0.5.5

package/dist/menus/{MRT_FilterMenu.d.ts → MRT_FilterTypeMenu.d.ts}

@@ -6,5 +6,5 @@ interface Props {
     setAnchorEl: (anchorEl: HTMLElement | null) => void;
     onSelect?: () => void;
 }
-export declare const MRT_FilterMenu: FC<Props>;
+export declare const MRT_FilterTypeMenu: FC<Props>;
 export {};

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.5.4",
+  "version": "0.5.5",
   "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/buttons/MRT_ShowHideColumnsButton.tsx

@@ -7,6 +7,7 @@ import {
   Divider,
   IconButtonProps,
   Box,
+  MenuList,
 } from '@mui/material';
 import { useMRT } from '../useMRT';
 import { MRT_ShowHideColumnsMenu } from '../menus/MRT_ShowHideColumnsMenu';
@@ -16,9 +17,9 @@ interface Props extends IconButtonProps {}
 
 export const MRT_ShowHideColumnsButton: FC<Props> = ({ ...rest }) => {
   const {
-    tableInstance,
-    localization,
     icons: { ViewColumnIcon },
+    localization,
+    tableInstance,
   } = useMRT();
 
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
@@ -44,36 +45,38 @@ export const MRT_ShowHideColumnsButton: FC<Props> = ({ ...rest }) => {
         open={!!anchorEl}
         onClose={() => setAnchorEl(null)}
       >
-        <Box
-          sx={{
-            display: 'flex',
-            justifyContent: 'space-between',
-            p: '0 0.5rem 0.5rem 0.5rem',
-          }}
-        >
-          <Button
-            disabled={
-              !tableInstance.getToggleHideAllColumnsProps().checked &&
-              !tableInstance.getToggleHideAllColumnsProps().indeterminate
-            }
-            onClick={() => tableInstance.toggleHideAllColumns(true)}
-          >
-            {localization.columnShowHideMenuHideAll}
-          </Button>
-          <Button
-            disabled={tableInstance.getToggleHideAllColumnsProps().checked}
-            onClick={() => tableInstance.toggleHideAllColumns(false)}
+        <MenuList dense={tableInstance.state.densePadding} disablePadding>
+          <Box
+            sx={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              p: '0 0.5rem 0.5rem 0.5rem',
+            }}
           >
-            {localization.columnShowHideMenuShowAll}
-          </Button>
-        </Box>
-        <Divider />
-        {tableInstance.columns.map((column: MRT_ColumnInstance, index) => (
-          <MRT_ShowHideColumnsMenu
-            key={`${index}-${column.id}`}
-            column={column}
-          />
-        ))}
+            <Button
+              disabled={
+                !tableInstance.getToggleHideAllColumnsProps().checked &&
+                !tableInstance.getToggleHideAllColumnsProps().indeterminate
+              }
+              onClick={() => tableInstance.toggleHideAllColumns(true)}
+            >
+              {localization.columnShowHideMenuHideAll}
+            </Button>
+            <Button
+              disabled={tableInstance.getToggleHideAllColumnsProps().checked}
+              onClick={() => tableInstance.toggleHideAllColumns(false)}
+            >
+              {localization.columnShowHideMenuShowAll}
+            </Button>
+          </Box>
+          <Divider />
+          {tableInstance.columns.map((column: MRT_ColumnInstance, index) => (
+            <MRT_ShowHideColumnsMenu
+              key={`${index}-${column.id}`}
+              column={column}
+            />
+          ))}
+        </MenuList>
       </Menu>
     </>
   );

package/src/footer/MRT_TableFooterCell.tsx

@@ -16,7 +16,7 @@ export const MRT_TableFooterCell: FC<Props> = ({ column }) => {
     },
   } = useMRT();
 
-  const isParentHeader = (column?.columns?.length ?? 0) > 0;
+  const isParentHeader = !!column?.columns?.length;
 
   const mTableFooterCellProps =
     muiTableFooterCellProps instanceof Function

package/src/head/MRT_TableHeadCell.tsx

@@ -6,6 +6,7 @@ import {
   Collapse,
   Tooltip,
   Box,
+  IconButton,
 } from '@mui/material';
 import { useMRT } from '../useMRT';
 import { MRT_FilterTextField } from '../inputs/MRT_FilterTextField';
@@ -33,12 +34,14 @@ export const MRT_TableHeadCell: FC<Props> = ({ column }) => {
     disableColumnActions,
     disableFilters,
     enableColumnResizing,
+    icons: { FilterAltIcon, FilterAltOff },
     localization,
     muiTableHeadCellProps,
+    setShowFilters,
     tableInstance,
   } = useMRT();
 
-  const isParentHeader = (column?.columns?.length ?? 0) > 0;
+  const isParentHeader = !!column?.columns?.length;
 
   const mTableHeadCellProps =
     muiTableHeadCellProps instanceof Function
@@ -73,6 +76,23 @@ export const MRT_TableHeadCell: FC<Props> = ({ column }) => {
         column.Header as string,
       );
 
+  const filterTooltip = !!column.filterValue
+    ? localization.filterApplied
+        .replace('{column}', String(column.Header))
+        .replace(
+          '{filterType}',
+          // @ts-ignore
+          localization[
+            `filterMenuItem${
+              tableInstance.state.currentFilterTypes[column.id]
+                .charAt(0)
+                .toUpperCase() +
+              tableInstance.state.currentFilterTypes[column.id].slice(1)
+            }`
+          ],
+        )
+    : localization.toggleFilterButtonTitle;
+
   const columnHeader = column.render('Header') as string;
 
   return (
@@ -115,6 +135,32 @@ export const MRT_TableHeadCell: FC<Props> = ({ column }) => {
               />
             </Tooltip>
           )}
+          {!isParentHeader && !!column.canFilter && (
+            <Tooltip arrow title={filterTooltip}>
+              <IconButton
+                onClick={(event) => {
+                  event.stopPropagation();
+                  setShowFilters(!tableInstance.state.showFilters);
+                }}
+                size="small"
+                sx={{
+                  opacity: !!column.filterValue ? 0.8 : 0,
+                  p: '2px',
+                  m: 0,
+                  transition: 'all 0.2s ease-in-out',
+                  '&:hover': {
+                    opacity: 0.8,
+                  },
+                }}
+              >
+                {tableInstance.state.showFilters && !column.filterValue ? (
+                  <FilterAltOff fontSize="small" />
+                ) : (
+                  <FilterAltIcon fontSize="small" />
+                )}
+              </IconButton>
+            </Tooltip>
+          )}
         </Box>
         <Box sx={{ alignItems: 'center', display: 'flex', flexWrap: 'nowrap' }}>
           {!disableColumnActions && !isParentHeader && (

package/src/{icons.tsx → icons.ts}

@@ -1,3 +1,4 @@
+import ArrowRightIcon from '@mui/icons-material/ArrowRight';
 import CancelIcon from '@mui/icons-material/Cancel';
 import ClearAllIcon from '@mui/icons-material/ClearAll';
 import CloseIcon from '@mui/icons-material/Close';
@@ -8,6 +9,8 @@ import DynamicFeedIcon from '@mui/icons-material/DynamicFeed';
 import EditIcon from '@mui/icons-material/Edit';
 import ExpandLessIcon from '@mui/icons-material/ExpandLess';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import FilterAltIcon from '@mui/icons-material/FilterAlt';
+import FilterAltOff from '@mui/icons-material/FilterAltOff';
 import FilterListIcon from '@mui/icons-material/FilterList';
 import FilterListOffIcon from '@mui/icons-material/FilterListOff';
 import FullscreenExitIcon from '@mui/icons-material/FullscreenExit';
@@ -22,6 +25,7 @@ import ViewColumnIcon from '@mui/icons-material/ViewColumn';
 import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
 
 export interface MRT_Icons {
+  ArrowRightIcon: any;
   CancelIcon: any;
   ClearAllIcon: any;
   CloseIcon: any;
@@ -32,6 +36,8 @@ export interface MRT_Icons {
   EditIcon: any;
   ExpandLessIcon: any;
   ExpandMoreIcon: any;
+  FilterAltIcon: any;
+  FilterAltOff: any;
   FilterListIcon: any;
   FilterListOffIcon: any;
   FullscreenExitIcon: any;
@@ -47,6 +53,7 @@ export interface MRT_Icons {
 }
 
 export const MRT_Default_Icons: MRT_Icons = {
+  ArrowRightIcon,
   CancelIcon,
   ClearAllIcon,
   CloseIcon,
@@ -57,6 +64,8 @@ export const MRT_Default_Icons: MRT_Icons = {
   EditIcon,
   ExpandLessIcon,
   ExpandMoreIcon,
+  FilterAltIcon,
+  FilterAltOff,
   FilterListIcon,
   FilterListOffIcon,
   FullscreenExitIcon,

package/src/inputs/MRT_FilterTextField.tsx

@@ -10,7 +10,7 @@ import {
 import { useAsyncDebounce } from 'react-table';
 import { useMRT } from '../useMRT';
 import { MRT_HeaderGroup } from '..';
-import { MRT_FilterMenu } from '../menus/MRT_FilterMenu';
+import { MRT_FilterTypeMenu } from '../menus/MRT_FilterTypeMenu';
 
 interface Props {
   column: MRT_HeaderGroup;
@@ -73,7 +73,7 @@ export const MRT_FilterTextField: FC<Props> = ({ column }) => {
   }
 
   const filterType = tableInstance.state.currentFilterTypes[column.id];
-  const showFilterChip = ['empty', 'notEmpty'].includes(filterType);
+  const filterChipLabel = ['empty', 'notEmpty'].includes(filterType);
   const filterPlaceholder = localization.filterTextFieldPlaceholder?.replace(
     '{column}',
     String(column.Header),
@@ -85,13 +85,15 @@ export const MRT_FilterTextField: FC<Props> = ({ column }) => {
         fullWidth
         id={`mrt-${idPrefix}-${column.id}-filter-text-field`}
         inputProps={{
+          disabled: !!filterChipLabel,
           sx: {
             textOverflow: 'ellipsis',
+            width: filterChipLabel ? 0 : 'auto',
           },
           title: filterPlaceholder,
         }}
         margin="none"
-        placeholder={showFilterChip ? '' : filterPlaceholder}
+        placeholder={filterChipLabel ? '' : filterPlaceholder}
         onChange={(e: ChangeEvent<HTMLInputElement>) => {
           setFilterValue(e.target.value);
           handleChange(e.target.value);
@@ -111,12 +113,12 @@ export const MRT_FilterTextField: FC<Props> = ({ column }) => {
                   <FilterListIcon />
                 </IconButton>
               </Tooltip>
-              {showFilterChip && (
+              {filterChipLabel && (
                 <Chip onDelete={handleClearFilterChip} label={filterType} />
               )}
             </InputAdornment>
           ),
-          endAdornment: !showFilterChip && (
+          endAdornment: !filterChipLabel && (
             <InputAdornment position="end">
               <Tooltip
                 arrow
@@ -140,11 +142,13 @@ export const MRT_FilterTextField: FC<Props> = ({ column }) => {
         }}
         {...textFieldProps}
         sx={{
-          minWidth: '6rem',
+          m: '0 -0.25rem',
+          minWidth: !filterChipLabel ? '5rem' : 'auto',
+          width: 'calc(100% + 0.5rem)',
           ...textFieldProps?.sx,
         }}
       />
-      <MRT_FilterMenu
+      <MRT_FilterTypeMenu
         anchorEl={anchorEl}
         column={column}
         setAnchorEl={setAnchorEl}

package/src/localization.ts

@@ -11,6 +11,7 @@ export interface MRT_Localization {
   columnShowHideMenuShowAll: string;
   expandAllButtonTitle: string;
   expandButtonTitle: string;
+  filterApplied: string;
   filterMenuItemContains: string;
   filterMenuItemEmpty: string;
   filterMenuItemEndsWith: string;
@@ -20,6 +21,9 @@ export interface MRT_Localization {
   filterMenuItemNotEquals: string;
   filterMenuItemStartsWith: string;
   filterMenuTitle: string;
+  filterTextFieldChangeFilterButtonTitle: string;
+  filterTextFieldChipLabelEmpty: string;
+  filterTextFieldChipLabelNotEmpty: string;
   filterTextFieldClearButtonTitle: string;
   filterTextFieldPlaceholder: string;
   rowActionButtonCancel: string;
@@ -54,15 +58,19 @@ export const MRT_DefaultLocalization_EN: MRT_Localization = {
   columnShowHideMenuShowAll: 'Show all',
   expandAllButtonTitle: 'Expand all',
   expandButtonTitle: 'Expand',
+  filterApplied: 'Filtering by {column} - ({filterType})',
   filterMenuItemContains: 'Contains Exact',
   filterMenuItemEmpty: 'Empty',
   filterMenuItemEndsWith: 'Ends With',
   filterMenuItemEquals: 'Equals',
-  filterMenuItemFuzzy: 'Fuzzy Match',
+  filterMenuItemFuzzy: 'Fuzzy Match (Default)',
   filterMenuItemNotEmpty: 'Not Empty',
   filterMenuItemNotEquals: 'Not Equals',
   filterMenuItemStartsWith: 'Starts With',
   filterMenuTitle: 'Filter Mode',
+  filterTextFieldChangeFilterButtonTitle: 'Change Filter Mode',
+  filterTextFieldChipLabelEmpty: 'Empty',
+  filterTextFieldChipLabelNotEmpty: 'Not Empty',
   filterTextFieldClearButtonTitle: 'Clear filter',
   filterTextFieldPlaceholder: 'Filter by {column}',
   rowActionButtonCancel: 'Cancel',
@@ -76,9 +84,9 @@ export const MRT_DefaultLocalization_EN: MRT_Localization = {
   selectCheckboxTitle: 'Toggle select row',
   showHideColumnsButtonTitle: 'Show/Hide columns',
   toggleDensePaddingSwitchTitle: 'Toggle dense padding',
-  toggleFilterButtonTitle: 'Toggle filters',
+  toggleFilterButtonTitle: 'Show/Hide filters',
   toggleFullScreenButtonTitle: 'Toggle full screen',
-  toggleSearchButtonTitle: 'Toggle search',
+  toggleSearchButtonTitle: 'Show/Hide search',
   toolbarAlertGroupedByMessage: 'Grouped by ',
   toolbarAlertGroupedThenByMessage: ', then by ',
   toolbarAlertSelectionMessage: '{selectedCount} of {rowCount} row(s) selected',

package/src/menus/MRT_ColumnActionMenu.tsx

@@ -1,6 +1,5 @@
 import React, { FC, useState } from 'react';
 import {
-  Divider,
   IconButton,
   ListItemIcon,
   ListItemText,
@@ -10,8 +9,12 @@ import {
 } from '@mui/material';
 import { useMRT } from '../useMRT';
 import { MRT_HeaderGroup } from '..';
-import { MRT_FilterMenu } from './MRT_FilterMenu';
-import ArrowRightIcon from '@mui/icons-material/ArrowRight';
+import { MRT_FilterTypeMenu } from './MRT_FilterTypeMenu';
+
+const commonMenuItemStyles = {
+  display: 'flex',
+  alignItems: 'center',
+};
 
 interface Props {
   anchorEl: HTMLElement | null;
@@ -30,6 +33,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
     disableSortBy,
     enableColumnGrouping,
     icons: {
+      ArrowRightIcon,
       ClearAllIcon,
       DynamicFeedIcon,
       FilterListIcon,
@@ -39,6 +43,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
     idPrefix,
     localization,
     setShowFilters,
+    tableInstance,
   } = useMRT();
 
   const [filterMenuAnchorEl, setFilterMenuAnchorEl] =
@@ -96,13 +101,14 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
       open={!!anchorEl}
       onClose={() => setAnchorEl(null)}
     >
-      <MenuList>
+      <MenuList dense={tableInstance.state.densePadding} disablePadding>
         {!disableSortBy &&
           column.canSort && [
             <MenuItem
               key={1}
               disabled={!column.isSorted}
               onClick={handleClearSort}
+              sx={commonMenuItemStyles}
             >
               <ListItemIcon>
                 <ClearAllIcon />
@@ -112,9 +118,10 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
               </ListItemText>
             </MenuItem>,
             <MenuItem
-              key={2}
               disabled={column.isSorted && !column.isSortedDesc}
+              key={2}
               onClick={handleSortAsc}
+              sx={commonMenuItemStyles}
             >
               <ListItemIcon>
                 <SortIcon />
@@ -127,9 +134,13 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
               </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)' }} />
@@ -144,8 +155,12 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
           ]}
         {!disableFilters &&
           column.canFilter && [
-            <Divider key={0} />,
-            <MenuItem key={1} onClick={handleFilterByColumn}>
+            <MenuItem
+              divider={enableColumnGrouping || !disableColumnHiding}
+              key={1}
+              onClick={handleFilterByColumn}
+              sx={commonMenuItemStyles}
+            >
               <ListItemIcon>
                 <FilterListIcon />
               </ListItemIcon>
@@ -155,11 +170,16 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
                   String(column.Header),
                 )}
               </ListItemText>
-              <IconButton size="small" onMouseEnter={handleOpenFilterModeMenu}>
+              <IconButton
+                onClick={handleOpenFilterModeMenu}
+                onMouseEnter={handleOpenFilterModeMenu}
+                size="small"
+                sx={{ p: 0 }}
+              >
                 <ArrowRightIcon />
               </IconButton>
             </MenuItem>,
-            <MRT_FilterMenu
+            <MRT_FilterTypeMenu
               anchorEl={filterMenuAnchorEl}
               column={column}
               key={2}
@@ -169,8 +189,12 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
           ]}
         {enableColumnGrouping &&
           column.canGroupBy && [
-            <Divider key={1} />,
-            <MenuItem key={2} onClick={handleGroupByColumn}>
+            <MenuItem
+              divider={!disableColumnHiding}
+              key={2}
+              onClick={handleGroupByColumn}
+              sx={commonMenuItemStyles}
+            >
               <ListItemIcon>
                 <DynamicFeedIcon />
               </ListItemIcon>
@@ -184,8 +208,11 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
             </MenuItem>,
           ]}
         {!disableColumnHiding && [
-          <Divider key={0} />,
-          <MenuItem key={1} onClick={handleHideColumn}>
+          <MenuItem
+            key={1}
+            onClick={handleHideColumn}
+            sx={commonMenuItemStyles}
+          >
             <ListItemIcon>
               <VisibilityOffIcon />
             </ListItemIcon>

package/src/menus/{MRT_FilterMenu.tsx → MRT_FilterTypeMenu.tsx}

@@ -1,5 +1,5 @@
 import React, { FC, useMemo } from 'react';
-import { Divider, Menu, MenuItem, Typography } from '@mui/material';
+import { Menu, MenuItem, MenuList } from '@mui/material';
 import { useMRT } from '../useMRT';
 import { MRT_FilterType, MRT_HeaderGroup } from '..';
 
@@ -10,7 +10,7 @@ interface Props {
   onSelect?: () => void;
 }
 
-export const MRT_FilterMenu: FC<Props> = ({
+export const MRT_FilterTypeMenu: FC<Props> = ({
   anchorEl,
   column,
   onSelect,
@@ -68,7 +68,7 @@ export const MRT_FilterMenu: FC<Props> = ({
     [],
   );
 
-  const handleSelectMenuItem = (value: MRT_FilterType) => {
+  const handleSelectFilterType = (value: MRT_FilterType) => {
     setAnchorEl(null);
     setCurrentFilterTypes((prev: { [key: string]: MRT_FilterType }) => ({
       ...prev,
@@ -85,25 +85,23 @@ export const MRT_FilterMenu: FC<Props> = ({
   return (
     <Menu
       anchorEl={anchorEl}
-      open={!!anchorEl}
       anchorOrigin={{ vertical: 'center', horizontal: 'right' }}
       onClose={() => setAnchorEl(null)}
+      open={!!anchorEl}
     >
-      <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>
-      ))}
+      <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>
     </Menu>
   );
 };

package/src/menus/MRT_RowActionMenu.tsx

@@ -1,5 +1,11 @@
 import React, { FC } from 'react';
-import { Menu, MenuItem } from '@mui/material';
+import {
+  ListItemIcon,
+  ListItemText,
+  Menu,
+  MenuItem,
+  MenuList,
+} from '@mui/material';
 import { useMRT } from '../useMRT';
 import { MRT_Row } from '..';
 
@@ -30,14 +36,19 @@ export const MRT_RowActionMenu: FC<Props> = ({
       open={!!anchorEl}
       onClose={() => setAnchorEl(null)}
     >
-      {enableRowEditing && (
-        <MenuItem sx={{ display: 'flex', gap: '0.75rem' }} onClick={handleEdit}>
-          <EditIcon /> {localization.rowActionMenuItemEdit}
-        </MenuItem>
-      )}
-      {renderRowActionMenuItems?.(row, tableInstance, () =>
-        setAnchorEl(null),
-      ) ?? null}
+      <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>
     </Menu>
   );
 };

package/src/menus/MRT_ShowHideColumnsMenu.tsx

@@ -8,7 +8,7 @@ interface Props {
 }
 
 export const MRT_ShowHideColumnsMenu: FC<Props> = ({ column }) => {
-  const isParentHeader = (column?.columns?.length ?? 0) > 0;
+  const isParentHeader = !!column?.columns?.length;
 
   const allChildColumnsVisible =
     isParentHeader &&