material-react-table 0.5.7 → 0.6.0

package/src/inputs/MRT_EditCellTextField.tsx

@@ -1,7 +1,7 @@
 import React, { ChangeEvent, FC } from 'react';
 import { TextField } from '@mui/material';
 import { useMRT } from '../useMRT';
-import { MRT_Cell } from '..';
+import type { MRT_Cell } from '..';
 
 interface Props {
   cell: MRT_Cell;

package/src/inputs/MRT_FilterTextField.tsx

@@ -3,14 +3,16 @@ import {
   Chip,
   IconButton,
   InputAdornment,
+  MenuItem,
   TextField,
   TextFieldProps,
   Tooltip,
 } from '@mui/material';
 import { useAsyncDebounce } from 'react-table';
 import { useMRT } from '../useMRT';
-import { MRT_HeaderGroup } from '..';
+import type { MRT_HeaderGroup } from '..';
 import { MRT_FilterTypeMenu } from '../menus/MRT_FilterTypeMenu';
+import { MRT_FILTER_TYPE } from '../enums';
 
 interface Props {
   column: MRT_HeaderGroup;
@@ -65,7 +67,10 @@ export const MRT_FilterTextField: FC<Props> = ({ column }) => {
   const handleClearFilterChip = () => {
     setFilterValue('');
     column.setFilter(undefined);
-    setCurrentFilterTypes((prev) => ({ ...prev, [column.id]: 'fuzzy' }));
+    setCurrentFilterTypes((prev) => ({
+      ...prev,
+      [column.id]: MRT_FILTER_TYPE.FUZZY,
+    }));
   };
 
   if (column.Filter) {
@@ -73,8 +78,18 @@ export const MRT_FilterTextField: FC<Props> = ({ column }) => {
   }
 
   const filterType = tableInstance.state.currentFilterTypes[column.id];
-  const filterChipLabel = ['empty', 'notEmpty'].includes(filterType);
-  const filterPlaceholder = localization.filterTextFieldPlaceholder?.replace(
+  const isSelectFilter = !!column.filterSelectOptions;
+  const filterChipLabel =
+    !(filterType instanceof Function) &&
+    [MRT_FILTER_TYPE.EMPTY, MRT_FILTER_TYPE.NOT_EMPTY].includes(
+      filterType as MRT_FILTER_TYPE,
+    )
+      ? //@ts-ignore
+        localization[
+          `filter${filterType.charAt(0).toUpperCase() + filterType.slice(1)}`
+        ]
+      : '';
+  const filterPlaceholder = localization.filterByColumn?.replace(
     '{column}',
     String(column.Header),
   );
@@ -92,29 +107,61 @@ export const MRT_FilterTextField: FC<Props> = ({ column }) => {
           },
           title: filterPlaceholder,
         }}
+        helperText={
+          filterType instanceof Function
+            ? ''
+            : localization.filterMode.replace(
+                '{filterType}',
+                // @ts-ignore
+                localization[
+                  `filter${
+                    filterType.charAt(0).toUpperCase() + filterType.slice(1)
+                  }`
+                ],
+              )
+        }
+        FormHelperTextProps={{
+          sx: { fontSize: '0.6rem', lineHeight: '0.8rem' },
+        }}
+        label={isSelectFilter && !filterValue ? filterPlaceholder : undefined}
+        InputLabelProps={{
+          shrink: false,
+          sx: {
+            maxWidth: 'calc(100% - 2.5rem)',
+          },
+          title: filterPlaceholder,
+        }}
         margin="none"
-        placeholder={filterChipLabel ? '' : filterPlaceholder}
+        placeholder={
+          filterChipLabel || isSelectFilter ? undefined : filterPlaceholder
+        }
         onChange={(e: ChangeEvent<HTMLInputElement>) => {
           setFilterValue(e.target.value);
           handleChange(e.target.value);
         }}
         onClick={(e) => e.stopPropagation()}
+        select={isSelectFilter}
         value={filterValue ?? ''}
         variant="standard"
         InputProps={{
-          startAdornment: (
+          startAdornment: !isSelectFilter && (
             <InputAdornment position="start">
-              <Tooltip arrow title="Change Filter Mode">
-                <IconButton
-                  onClick={handleFilterMenuOpen}
-                  size="small"
-                  sx={{ height: '1.75rem', width: '1.75rem' }}
-                >
-                  <FilterListIcon />
-                </IconButton>
+              <Tooltip arrow title={localization.changeFilterMode}>
+                <span>
+                  <IconButton
+                    onClick={handleFilterMenuOpen}
+                    size="small"
+                    sx={{ height: '1.75rem', width: '1.75rem' }}
+                  >
+                    <FilterListIcon />
+                  </IconButton>
+                </span>
               </Tooltip>
               {filterChipLabel && (
-                <Chip onDelete={handleClearFilterChip} label={filterType} />
+                <Chip
+                  onDelete={handleClearFilterChip}
+                  label={filterChipLabel}
+                />
               )}
             </InputAdornment>
           ),
@@ -122,16 +169,20 @@ export const MRT_FilterTextField: FC<Props> = ({ column }) => {
             <InputAdornment position="end">
               <Tooltip
                 arrow
+                disableHoverListener={isSelectFilter}
                 placement="right"
-                title={localization.filterTextFieldClearButtonTitle ?? ''}
+                title={localization.clearFilter ?? ''}
               >
                 <span>
                   <IconButton
-                    aria-label={localization.filterTextFieldClearButtonTitle}
-                    disabled={filterValue?.length === 0}
+                    aria-label={localization.clearFilter}
+                    disabled={!filterValue?.length}
                     onClick={handleClear}
                     size="small"
-                    sx={{ height: '1.75rem', width: '1.75rem' }}
+                    sx={{
+                      height: '1.75rem',
+                      width: '1.75rem',
+                    }}
                   >
                     <CloseIcon fontSize="small" />
                   </IconButton>
@@ -142,12 +193,39 @@ export const MRT_FilterTextField: FC<Props> = ({ column }) => {
         }}
         {...textFieldProps}
         sx={{
-          m: '0 -0.25rem',
+          m: '-0.25rem',
+          p: 0,
           minWidth: !filterChipLabel ? '5rem' : 'auto',
           width: 'calc(100% + 0.5rem)',
+          mt: isSelectFilter && !filterValue ? '-1rem' : undefined,
+          '&	.MuiSelect-icon': {
+            mr: '1.5rem',
+          },
           ...textFieldProps?.sx,
         }}
-      />
+      >
+        {isSelectFilter && (
+          <MenuItem divider disabled={!filterValue} value="">
+            {localization.clearFilter}
+          </MenuItem>
+        )}
+        {column?.filterSelectOptions?.map((option) => {
+          let value;
+          let text;
+          if (typeof option === 'string') {
+            value = option;
+            text = option;
+          } else if (typeof option === 'object') {
+            value = option.value;
+            text = option.text;
+          }
+          return (
+            <MenuItem key={value} value={value}>
+              {text}
+            </MenuItem>
+          );
+        })}
+      </TextField>
       <MRT_FilterTypeMenu
         anchorEl={anchorEl}
         column={column}

package/src/inputs/MRT_SearchTextField.tsx

@@ -34,7 +34,7 @@ export const MRT_SearchTextField: FC<Props> = () => {
     <Collapse in={tableInstance.state.showSearch} orientation="horizontal">
       <TextField
         id={`mrt-${idPrefix}-search-text-field`}
-        placeholder={localization.searchTextFieldPlaceholder}
+        placeholder={localization.search}
         onChange={(event: ChangeEvent<HTMLInputElement>) => {
           setSearchValue(event.target.value);
           handleChange(event);
@@ -50,11 +50,11 @@ export const MRT_SearchTextField: FC<Props> = () => {
           endAdornment: (
             <InputAdornment position="end">
               <IconButton
-                aria-label={localization.searchTextFieldClearButtonTitle}
+                aria-label={localization.clearSearch}
                 disabled={searchValue?.length === 0}
                 onClick={handleClear}
                 size="small"
-                title={localization.searchTextFieldClearButtonTitle}
+                title={localization.clearSearch}
               >
                 <CloseIcon fontSize="small" />
               </IconButton>

package/src/inputs/MRT_SelectCheckbox.tsx

@@ -1,7 +1,7 @@
 import React, { ChangeEvent, FC } from 'react';
 import { Checkbox, TableCell, Tooltip } from '@mui/material';
 import { useMRT } from '../useMRT';
-import { MRT_Row } from '..';
+import type { MRT_Row } from '..';
 import { commonTableBodyButtonCellStyles } from '../body/MRT_TableBodyCell';
 
 interface Props {
@@ -37,15 +37,15 @@ export const MRT_SelectCheckbox: FC<Props> = ({ row, selectAll }) => {
         enterNextDelay={1000}
         title={
           selectAll
-            ? localization.selectAllCheckboxTitle
-            : localization.selectCheckboxTitle
+            ? localization.toggleSelectAll
+            : localization.toggleSelectRow
         }
       >
         <Checkbox
           inputProps={{
             'aria-label': selectAll
-              ? localization.selectAllCheckboxTitle
-              : localization.selectCheckboxTitle,
+              ? localization.toggleSelectAll
+              : localization.toggleSelectRow,
           }}
           onChange={onSelectChange}
           {...checkboxProps}

package/src/localization.ts

@@ -1,93 +1,94 @@
 export interface MRT_Localization {
-  actionsHeadColumnTitle: string;
-  columnActionMenuButtonTitle: string;
-  columnActionMenuItemClearSort: string;
-  columnActionMenuItemGroupBy: string;
-  columnActionMenuItemHideColumn: string;
-  columnActionMenuItemSortAsc: string;
-  columnActionMenuItemSortDesc: string;
-  columnActionMenuItemUnGroupBy: string;
-  columnShowHideMenuHideAll: string;
-  columnShowHideMenuShowAll: string;
-  expandAllButtonTitle: string;
-  expandButtonTitle: string;
-  filterApplied: string;
-  filterMenuItemContains: string;
-  filterMenuItemEmpty: string;
-  filterMenuItemEndsWith: string;
-  filterMenuItemEquals: string;
-  filterMenuItemFuzzy: string;
-  filterMenuItemNotEmpty: string;
-  filterMenuItemNotEquals: string;
-  filterMenuItemStartsWith: string;
-  filterMenuTitle: string;
-  filterTextFieldChangeFilterButtonTitle: string;
-  filterTextFieldChipLabelEmpty: string;
-  filterTextFieldChipLabelNotEmpty: string;
-  filterTextFieldClearButtonTitle: string;
-  filterTextFieldPlaceholder: string;
-  rowActionButtonCancel: string;
-  rowActionButtonSave: string;
-  rowActionMenuButtonTitle: string;
-  rowActionMenuItemEdit: string;
-  rowActionsColumnTitle: string;
-  searchTextFieldClearButtonTitle: string;
-  searchTextFieldPlaceholder: string;
-  selectAllCheckboxTitle: string;
-  selectCheckboxTitle: string;
-  showHideColumnsButtonTitle: string;
-  toggleDensePaddingSwitchTitle: string;
-  toggleFilterButtonTitle: string;
-  toggleFullScreenButtonTitle: string;
-  toggleSearchButtonTitle: string;
-  toolbarAlertGroupedByMessage: string;
-  toolbarAlertGroupedThenByMessage: string;
-  toolbarAlertSelectionMessage: string;
+  actions: string;
+  cancel: string;
+  changeFilterMode: string;
+  clearFilter: string;
+  clearSearch: string;
+  clearSort: string;
+  columnActions: string;
+  edit: string;
+  expand: string;
+  expandAll: string;
+  filterByColumn: string;
+  filterContains: string;
+  filterEmpty: string;
+  filterEndsWith: string;
+  filterEquals: string;
+  filterFuzzy: string;
+  filterGreaterThan: string;
+  filterLessThan: string;
+  filterMode: string;
+  filterNotEmpty: string;
+  filterNotEquals: string;
+  filterStartsWith: string;
+  filteringByColumn: string;
+  groupByColumn: string;
+  groupedBy: string;
+  hideAll: string;
+  hideColumn: string;
+  rowActions: string;
+  save: string;
+  search: string;
+  selectedCountOfRowCountRowsSelected: string;
+  showAll: string;
+  showHideColumns: string;
+  showAllColumns: string;
+  showHideFilters: string;
+  showHideSearch: string;
+  sortByColumnAsc: string;
+  sortByColumnDesc: string;
+  thenBy: string;
+  toggleDensePadding: string;
+  toggleFullScreen: string;
+  toggleSelectAll: string;
+  toggleSelectRow: string;
+  ungroupByColumn: string;
 }
 
 export const MRT_DefaultLocalization_EN: MRT_Localization = {
-  actionsHeadColumnTitle: 'Actions',
-  columnActionMenuButtonTitle: 'Column Actions',
-  columnActionMenuItemClearSort: 'Clear sort',
-  columnActionMenuItemGroupBy: 'Group by {column}',
-  columnActionMenuItemHideColumn: 'Hide {column} column',
-  columnActionMenuItemSortAsc: 'Sort by {column} ascending',
-  columnActionMenuItemSortDesc: 'Sort by {column} descending',
-  columnActionMenuItemUnGroupBy: 'Ungroup by {column}',
-  columnShowHideMenuHideAll: 'Hide all',
-  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 (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',
-  rowActionButtonSave: 'Save',
-  rowActionMenuButtonTitle: 'Row Actions',
-  rowActionMenuItemEdit: 'Edit',
-  rowActionsColumnTitle: 'Actions',
-  searchTextFieldClearButtonTitle: 'Clear search',
-  searchTextFieldPlaceholder: 'Search',
-  selectAllCheckboxTitle: 'Toggle select all',
-  selectCheckboxTitle: 'Toggle select row',
-  showHideColumnsButtonTitle: 'Show/Hide columns',
-  toggleDensePaddingSwitchTitle: 'Toggle dense padding',
-  toggleFilterButtonTitle: 'Show/Hide filters',
-  toggleFullScreenButtonTitle: 'Toggle full screen',
-  toggleSearchButtonTitle: 'Show/Hide search',
-  toolbarAlertGroupedByMessage: 'Grouped by ',
-  toolbarAlertGroupedThenByMessage: ', then by ',
-  toolbarAlertSelectionMessage: '{selectedCount} of {rowCount} row(s) selected',
+  actions: 'Actions',
+  cancel: 'Cancel',
+  changeFilterMode: 'Change filter mode',
+  clearFilter: 'Clear filter',
+  clearSearch: 'Clear search',
+  clearSort: 'Clear sort',
+  columnActions: 'Column Actions',
+  edit: 'Edit',
+  expand: 'Expand',
+  expandAll: 'Expand all',
+  filterByColumn: 'Filter by {column}',
+  filterContains: 'Contains Exact',
+  filterEmpty: 'Empty',
+  filterEndsWith: 'Ends With',
+  filterEquals: 'Equals',
+  filterFuzzy: 'Fuzzy Match',
+  filterGreaterThan: 'Greater Than',
+  filterLessThan: 'Less Than',
+  filterMode: 'Filter Mode: {filterType}',
+  filterNotEmpty: 'Not Empty',
+  filterNotEquals: 'Not Equals',
+  filterStartsWith: 'Starts With',
+  filteringByColumn: 'Filtering by {column} - {filterType} "{filterValue}"',
+  groupByColumn: 'Group by {column}',
+  groupedBy: 'Grouped by ',
+  hideAll: 'Hide all',
+  hideColumn: 'Hide {column} column',
+  rowActions: 'Row Actions',
+  save: 'Save',
+  search: 'Search',
+  selectedCountOfRowCountRowsSelected:
+    '{selectedCount} of {rowCount} row(s) selected',
+  showAll: 'Show all',
+  showAllColumns: 'Show all columns',
+  showHideColumns: 'Show/Hide columns',
+  showHideFilters: 'Show/Hide filters',
+  showHideSearch: 'Show/Hide search',
+  sortByColumnAsc: 'Sort by {column} ascending',
+  sortByColumnDesc: 'Sort by {column} descending',
+  thenBy: ', then by ',
+  toggleDensePadding: 'Toggle dense padding',
+  toggleFullScreen: 'Toggle full screen',
+  toggleSelectAll: 'Toggle select all',
+  toggleSelectRow: 'Toggle select row',
+  ungroupByColumn: 'Ungroup by {column}',
 };