material-react-table 0.5.1 → 0.5.4

package/src/head/MRT_TableHeadCell.tsx

@@ -30,13 +30,11 @@ interface Props {
 
 export const MRT_TableHeadCell: FC<Props> = ({ column }) => {
   const {
-    densePadding,
     disableColumnActions,
     disableFilters,
     enableColumnResizing,
     localization,
     muiTableHeadCellProps,
-    showFilters,
     tableInstance,
   } = useMRT();
 
@@ -75,69 +73,73 @@ export const MRT_TableHeadCell: FC<Props> = ({ column }) => {
         column.Header as string,
       );
 
+  const columnHeader = column.render('Header') as string;
+
   return (
     <TableCell
       align={isParentHeader ? 'center' : 'left'}
       {...tableCellProps}
       sx={{
-        ...commonTableHeadCellStyles(densePadding, enableColumnResizing),
+        ...commonTableHeadCellStyles(
+          tableInstance.state.densePadding,
+          enableColumnResizing,
+        ),
         ...tableCellProps?.sx,
       }}
     >
       <Box
-        sx={{ alignContent: 'space-between', display: 'grid', height: '100%' }}
+        sx={{
+          alignItems: 'flex-start',
+          display: 'flex',
+          justifyContent: isParentHeader ? 'center' : 'space-between',
+          width: '100%',
+        }}
       >
         <Box
+          {...column.getSortByToggleProps()}
           sx={{
-            alignItems: 'flex-start',
+            alignItems: 'center',
             display: 'flex',
-            justifyContent: isParentHeader ? 'center' : 'space-between',
-            width: '100%',
+            flexWrap: 'nowrap',
+            whiteSpace: columnHeader.length < 15 ? 'nowrap' : 'normal',
           }}
+          title={undefined}
         >
-          <Box
-            {...column.getSortByToggleProps()}
-            sx={{ alignItems: 'center', display: 'flex', flexWrap: 'nowrap' }}
-            title={undefined}
-          >
-            {column.render('Header')}
-            {!isParentHeader && column.canSort && (
-              <Tooltip arrow title={sortTooltip}>
-                <TableSortLabel
-                  aria-label={sortTooltip}
-                  active={column.isSorted}
-                  direction={column.isSortedDesc ? 'desc' : 'asc'}
-                />
-              </Tooltip>
-            )}
-          </Box>
-          <Box
-            sx={{ alignItems: 'center', display: 'flex', flexWrap: 'nowrap' }}
-          >
-            {!disableColumnActions && !isParentHeader && (
-              <MRT_ToggleColumnActionMenuButton column={column} />
-            )}
-            {enableColumnResizing && !isParentHeader && (
-              <Divider
-                flexItem
-                orientation="vertical"
-                onDoubleClick={() => tableInstance.resetResizing()}
-                {...column.getResizerProps()}
-                sx={{
-                  borderRightWidth: '2px',
-                  borderRadius: '2px',
-                  maxHeight: '2rem',
-                }}
+          {column.render('Header')}
+          {!isParentHeader && column.canSort && (
+            <Tooltip arrow title={sortTooltip}>
+              <TableSortLabel
+                aria-label={sortTooltip}
+                active={column.isSorted}
+                direction={column.isSortedDesc ? 'desc' : 'asc'}
               />
-            )}
-          </Box>
+            </Tooltip>
+          )}
+        </Box>
+        <Box sx={{ alignItems: 'center', display: 'flex', flexWrap: 'nowrap' }}>
+          {!disableColumnActions && !isParentHeader && (
+            <MRT_ToggleColumnActionMenuButton column={column} />
+          )}
+          {enableColumnResizing && !isParentHeader && (
+            <Divider
+              flexItem
+              orientation="vertical"
+              onDoubleClick={() => tableInstance.resetResizing()}
+              {...column.getResizerProps()}
+              sx={{
+                borderRightWidth: '2px',
+                borderRadius: '2px',
+                maxHeight: '2rem',
+              }}
+            />
+          )}
         </Box>
-        {!disableFilters && column.canFilter && (
-          <Collapse in={showFilters}>
-            <MRT_FilterTextField column={column} />
-          </Collapse>
-        )}
       </Box>
+      {!disableFilters && column.canFilter && (
+        <Collapse in={tableInstance.state.showFilters}>
+          <MRT_FilterTextField column={column} />
+        </Collapse>
+      )}
     </TableCell>
   );
 };

package/src/head/MRT_TableHeadCellActions.tsx

@@ -6,7 +6,12 @@ import { commonTableHeadCellStyles } from './MRT_TableHeadCell';
 interface Props {}
 
 export const MRT_TableHeadCellActions: FC<Props> = () => {
-  const { densePadding, localization } = useMRT();
+  const {
+    localization,
+    tableInstance: {
+      state: { densePadding },
+    },
+  } = useMRT();
 
   return (
     <TableCell

package/src/head/MRT_TableHeadRow.tsx

@@ -18,7 +18,6 @@ interface Props {
 export const MRT_TableHeadRow: FC<Props> = ({ headerGroup }) => {
   const {
     anyRowsCanExpand,
-    densePadding,
     disableExpandAll,
     enableRowActions,
     enableRowEditing,
@@ -55,7 +54,13 @@ export const MRT_TableHeadRow: FC<Props> = ({ headerGroup }) => {
         (isParentHeader ? (
           <MRT_TableSpacerCell />
         ) : (
-          <TableCell sx={{...commonTableHeadCellStyles(densePadding)}}>#</TableCell>
+          <TableCell
+            sx={{
+              ...commonTableHeadCellStyles(tableInstance.state.densePadding),
+            }}
+          >
+            #
+          </TableCell>
         ))}
       {(enableRowActions || enableRowEditing) &&
         positionActionsColumn === 'first' &&

package/src/index.tsx

@@ -1,5 +1,3 @@
 import MaterialReactTable from './MaterialReactTable';
 export default MaterialReactTable;
 export * from './MaterialReactTable';
-
-

package/src/inputs/MRT_EditCellTextField.tsx

@@ -9,9 +9,11 @@ interface Props {
 
 export const MRT_EditCellTextField: FC<Props> = ({ cell }) => {
   const {
-    currentEditingRow,
     muiTableBodyCellEditTextFieldProps,
     setCurrentEditingRow,
+    tableInstance: {
+      state: { currentEditingRow },
+    },
   } = useMRT();
 
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {

package/src/inputs/MRT_FilterTextField.tsx

@@ -1,8 +1,16 @@
-import React, { ChangeEvent, FC, useState } from 'react';
-import { IconButton, InputAdornment, TextField, Tooltip } from '@mui/material';
+import React, { ChangeEvent, FC, MouseEvent, useState } from 'react';
+import {
+  Chip,
+  IconButton,
+  InputAdornment,
+  TextField,
+  TextFieldProps,
+  Tooltip,
+} from '@mui/material';
 import { useAsyncDebounce } from 'react-table';
 import { useMRT } from '../useMRT';
 import { MRT_HeaderGroup } from '..';
+import { MRT_FilterMenu } from '../menus/MRT_FilterMenu';
 
 interface Props {
   column: MRT_HeaderGroup;
@@ -11,79 +19,136 @@ interface Props {
 export const MRT_FilterTextField: FC<Props> = ({ column }) => {
   const {
     icons: { FilterListIcon, CloseIcon },
+    idPrefix,
     localization,
+    muiTableHeadCellFilterTextFieldProps,
+    setCurrentFilterTypes,
+    tableInstance,
   } = useMRT();
 
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+
+  const mTableHeadCellFilterTextFieldProps =
+    muiTableHeadCellFilterTextFieldProps instanceof Function
+      ? muiTableHeadCellFilterTextFieldProps(column)
+      : muiTableHeadCellFilterTextFieldProps;
+
+  const mcTableHeadCellFilterTextFieldProps =
+    column.muiTableHeadCellFilterTextFieldProps instanceof Function
+      ? column.muiTableHeadCellFilterTextFieldProps(column)
+      : column.muiTableHeadCellFilterTextFieldProps;
+
+  const textFieldProps = {
+    ...mTableHeadCellFilterTextFieldProps,
+    ...mcTableHeadCellFilterTextFieldProps,
+    style: {
+      ...mTableHeadCellFilterTextFieldProps?.style,
+      ...mcTableHeadCellFilterTextFieldProps?.style,
+    },
+  } as TextFieldProps;
+
   const [filterValue, setFilterValue] = useState('');
 
   const handleChange = useAsyncDebounce((value) => {
     column.setFilter(value ?? undefined);
   }, 150);
 
+  const handleFilterMenuOpen = (event: MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
   const handleClear = () => {
     setFilterValue('');
     column.setFilter(undefined);
   };
 
+  const handleClearFilterChip = () => {
+    setFilterValue('');
+    column.setFilter(undefined);
+    setCurrentFilterTypes((prev) => ({ ...prev, [column.id]: 'fuzzy' }));
+  };
+
   if (column.Filter) {
     return <>{column.Filter?.({ column })}</>;
   }
 
+  const filterType = tableInstance.state.currentFilterTypes[column.id];
+  const showFilterChip = ['empty', 'notEmpty'].includes(filterType);
+  const filterPlaceholder = localization.filterTextFieldPlaceholder?.replace(
+    '{column}',
+    String(column.Header),
+  );
+
   return (
-    <TextField
-      fullWidth
-      id={`filter-${column.id}-column`}
-      inputProps={{
-        style: {
-          textOverflow: 'ellipsis',
-        },
-      }}
-      margin="dense"
-      placeholder={localization.filterTextFieldPlaceholder?.replace(
-        '{column}',
-        String(column.Header),
-      )}
-      onChange={(e: ChangeEvent<HTMLInputElement>) => {
-        setFilterValue(e.target.value);
-        handleChange(e.target.value);
-      }}
-      onClick={(e) => e.stopPropagation()}
-      value={filterValue ?? ''}
-      variant="standard"
-      InputProps={{
-        startAdornment: (
-          <Tooltip
-            arrow
-            title={localization.filterTextFieldPlaceholder?.replace(
-              '{column}',
-              String(column.Header),
-            )}
-          >
+    <>
+      <TextField
+        fullWidth
+        id={`mrt-${idPrefix}-${column.id}-filter-text-field`}
+        inputProps={{
+          sx: {
+            textOverflow: 'ellipsis',
+          },
+          title: filterPlaceholder,
+        }}
+        margin="none"
+        placeholder={showFilterChip ? '' : filterPlaceholder}
+        onChange={(e: ChangeEvent<HTMLInputElement>) => {
+          setFilterValue(e.target.value);
+          handleChange(e.target.value);
+        }}
+        onClick={(e) => e.stopPropagation()}
+        value={filterValue ?? ''}
+        variant="standard"
+        InputProps={{
+          startAdornment: (
             <InputAdornment position="start">
-              <FilterListIcon />
-            </InputAdornment>
-          </Tooltip>
-        ),
-        endAdornment: (
-          <InputAdornment position="end">
-            <Tooltip
-              arrow
-              title={localization.filterTextFieldClearButtonTitle ?? ''}
-            >
-              <span>
+              <Tooltip arrow title="Change Filter Mode">
                 <IconButton
-                  aria-label={localization.filterTextFieldClearButtonTitle}
-                  disabled={filterValue?.length === 0}
-                  onClick={handleClear}
+                  onClick={handleFilterMenuOpen}
                   size="small"
+                  sx={{ height: '1.75rem', width: '1.75rem' }}
                 >
-                  <CloseIcon fontSize="small" />
+                  <FilterListIcon />
                 </IconButton>
-              </span>
-            </Tooltip>
-          </InputAdornment>
-        ),
-      }}
-    />
+              </Tooltip>
+              {showFilterChip && (
+                <Chip onDelete={handleClearFilterChip} label={filterType} />
+              )}
+            </InputAdornment>
+          ),
+          endAdornment: !showFilterChip && (
+            <InputAdornment position="end">
+              <Tooltip
+                arrow
+                placement="right"
+                title={localization.filterTextFieldClearButtonTitle ?? ''}
+              >
+                <span>
+                  <IconButton
+                    aria-label={localization.filterTextFieldClearButtonTitle}
+                    disabled={filterValue?.length === 0}
+                    onClick={handleClear}
+                    size="small"
+                    sx={{ height: '1.75rem', width: '1.75rem' }}
+                  >
+                    <CloseIcon fontSize="small" />
+                  </IconButton>
+                </span>
+              </Tooltip>
+            </InputAdornment>
+          ),
+        }}
+        {...textFieldProps}
+        sx={{
+          minWidth: '6rem',
+          ...textFieldProps?.sx,
+        }}
+      />
+      <MRT_FilterMenu
+        anchorEl={anchorEl}
+        column={column}
+        setAnchorEl={setAnchorEl}
+      />
+    </>
   );
 };

package/src/inputs/MRT_SearchTextField.tsx

@@ -8,7 +8,7 @@ interface Props {}
 export const MRT_SearchTextField: FC<Props> = () => {
   const {
     icons: { SearchIcon, CloseIcon },
-    showSearch,
+    idPrefix,
     localization,
     muiSearchTextFieldProps,
     onGlobalFilterChange,
@@ -31,9 +31,9 @@ export const MRT_SearchTextField: FC<Props> = () => {
   };
 
   return (
-    <Collapse in={showSearch} orientation="horizontal">
+    <Collapse in={tableInstance.state.showSearch} orientation="horizontal">
       <TextField
-        id="global-search-text-field"
+        id={`mrt-${idPrefix}-search-text-field`}
         placeholder={localization.searchTextFieldPlaceholder}
         onChange={(event: ChangeEvent<HTMLInputElement>) => {
           setSearchValue(event.target.value);

package/src/inputs/MRT_SelectCheckbox.tsx

@@ -10,13 +10,8 @@ interface Props {
 }
 
 export const MRT_SelectCheckbox: FC<Props> = ({ row, selectAll }) => {
-  const {
-    densePadding,
-    localization,
-    onRowSelectChange,
-    onSelectAllChange,
-    tableInstance,
-  } = useMRT();
+  const { localization, onRowSelectChange, onSelectAllChange, tableInstance } =
+    useMRT();
 
   const onSelectChange = (event: ChangeEvent<HTMLInputElement>) => {
     if (selectAll) {
@@ -33,7 +28,9 @@ export const MRT_SelectCheckbox: FC<Props> = ({ row, selectAll }) => {
     : row?.getToggleRowSelectedProps();
 
   return (
-    <TableCell sx={commonTableBodyButtonCellStyles(densePadding)} >
+    <TableCell
+      sx={commonTableBodyButtonCellStyles(tableInstance.state.densePadding)}
+    >
       <Tooltip
         arrow
         enterDelay={1000}

package/src/localization.ts

@@ -11,6 +11,15 @@ export interface MRT_Localization {
   columnShowHideMenuShowAll: string;
   expandAllButtonTitle: string;
   expandButtonTitle: string;
+  filterMenuItemContains: string;
+  filterMenuItemEmpty: string;
+  filterMenuItemEndsWith: string;
+  filterMenuItemEquals: string;
+  filterMenuItemFuzzy: string;
+  filterMenuItemNotEmpty: string;
+  filterMenuItemNotEquals: string;
+  filterMenuItemStartsWith: string;
+  filterMenuTitle: string;
   filterTextFieldClearButtonTitle: string;
   filterTextFieldPlaceholder: string;
   rowActionButtonCancel: string;
@@ -27,9 +36,9 @@ export interface MRT_Localization {
   toggleFilterButtonTitle: string;
   toggleFullScreenButtonTitle: string;
   toggleSearchButtonTitle: string;
-  toolbarAlertSelectionMessage: string;
   toolbarAlertGroupedByMessage: string;
   toolbarAlertGroupedThenByMessage: string;
+  toolbarAlertSelectionMessage: string;
 }
 
 export const MRT_DefaultLocalization_EN: MRT_Localization = {
@@ -45,6 +54,15 @@ export const MRT_DefaultLocalization_EN: MRT_Localization = {
   columnShowHideMenuShowAll: 'Show all',
   expandAllButtonTitle: 'Expand all',
   expandButtonTitle: 'Expand',
+  filterMenuItemContains: 'Contains Exact',
+  filterMenuItemEmpty: 'Empty',
+  filterMenuItemEndsWith: 'Ends With',
+  filterMenuItemEquals: 'Equals',
+  filterMenuItemFuzzy: 'Fuzzy Match',
+  filterMenuItemNotEmpty: 'Not Empty',
+  filterMenuItemNotEquals: 'Not Equals',
+  filterMenuItemStartsWith: 'Starts With',
+  filterMenuTitle: 'Filter Mode',
   filterTextFieldClearButtonTitle: 'Clear filter',
   filterTextFieldPlaceholder: 'Filter by {column}',
   rowActionButtonCancel: 'Cancel',
@@ -61,7 +79,7 @@ export const MRT_DefaultLocalization_EN: MRT_Localization = {
   toggleFilterButtonTitle: 'Toggle filters',
   toggleFullScreenButtonTitle: 'Toggle full screen',
   toggleSearchButtonTitle: 'Toggle search',
-  toolbarAlertSelectionMessage: '{selectedCount} of {rowCount} row(s) selected',
   toolbarAlertGroupedByMessage: 'Grouped by ',
   toolbarAlertGroupedThenByMessage: ', then by ',
+  toolbarAlertSelectionMessage: '{selectedCount} of {rowCount} row(s) selected',
 };