material-react-table 0.5.3 → 0.5.6

package/dist/menus/MRT_FilterTypeMenu.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import { MRT_HeaderGroup } from '..';
+interface Props {
+    anchorEl: HTMLElement | null;
+    column: MRT_HeaderGroup;
+    setAnchorEl: (anchorEl: HTMLElement | null) => void;
+    onSelect?: () => void;
+}
+export declare const MRT_FilterTypeMenu: FC<Props>;
+export {};

package/dist/useMRT.d.ts

@@ -1,5 +1,5 @@
-import React, { PropsWithChildren } from 'react';
-import { MRT_Row, MRT_TableInstance } from '.';
+import React, { PropsWithChildren, Dispatch, SetStateAction } from 'react';
+import { MRT_FilterType, MRT_Row, MRT_TableInstance } from '.';
 import { MRT_Icons } from './icons';
 import { MRT_Localization } from './localization';
 import { MaterialReactTableProps } from './MaterialReactTable';
@@ -7,13 +7,17 @@ export declare type UseMRT<D extends {} = {}> = MaterialReactTableProps<D> & {
     anyRowsCanExpand: boolean;
     anyRowsExpanded: 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;
+    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>;
 };
-export declare const MaterialReactTableProvider: <D extends {}>(props: React.PropsWithChildren<MaterialReactTableProps<D>>) => JSX.Element;
-export declare const useMRT: <D extends {}>() => UseMRT<D>;
+export declare const MaterialReactTableProvider: <D extends {} = {}>(props: React.PropsWithChildren<MaterialReactTableProps<D>>) => JSX.Element;
+export declare const useMRT: <D extends {} = {}>() => UseMRT<D>;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.5.3",
+  "version": "0.5.6",
   "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.",
@@ -60,9 +60,9 @@
     "@emotion/react": "^11.8.1",
     "@emotion/styled": "^11.8.1",
     "@etchteam/storybook-addon-status": "^4.2.0",
-    "@faker-js/faker": "^6.0.0-alpha.7",
-    "@mui/icons-material": "^5.4.4",
-    "@mui/material": "^5.4.4",
+    "@faker-js/faker": "^6.0.0-beta.0",
+    "@mui/icons-material": "^5.5.0",
+    "@mui/material": "^5.5.0",
     "@size-limit/preset-small-lib": "^7.0.8",
     "@storybook/addon-a11y": "^6.4.19",
     "@storybook/addon-actions": "^6.4.19",
@@ -75,7 +75,7 @@
     "@storybook/react": "^6.4.19",
     "@types/faker": "^6.6.8",
     "@types/react": "^17.0.39",
-    "@types/react-dom": "^17.0.11",
+    "@types/react-dom": "^17.0.13",
     "@types/react-table": "^7.7.9",
     "babel-loader": "^8.2.3",
     "husky": "^7.0.4",
@@ -93,9 +93,13 @@
   },
   "peerDependencies": {
     "@emotion/react": ">=11",
+    "@emotion/styled": ">=11",
     "@mui/icons-material": ">=5",
     "@mui/material": ">=5",
     "react": ">=16.8",
     "react-table": ">=7"
+  },
+  "dependencies": {
+    "match-sorter": "^6.3.1"
   }
 }

package/src/MaterialReactTable.tsx

@@ -2,6 +2,8 @@ import React, { ChangeEvent, FC, MouseEvent, ReactNode } from 'react';
 import {
   AlertProps,
   IconButtonProps,
+  LinearProgressProps,
+  SkeletonProps,
   TableBodyProps,
   TableCellProps,
   TableContainerProps,
@@ -181,6 +183,16 @@ export type MRT_Cell<D extends {} = {}, _V = any> = Cell<D> &
   UseGroupByCellProps<D> &
   UseRowStateCellProps<D> & {};
 
+export type MRT_FilterType =
+  | 'contains'
+  | 'empty'
+  | 'endsWith'
+  | 'equals'
+  | 'fuzzy'
+  | 'notEmpty'
+  | 'notEquals'
+  | 'startsWith';
+
 export type MRT_TableState<D extends {} = {}> = TableState<D> &
   UseColumnOrderState<D> &
   UseExpandedState<D> &
@@ -193,6 +205,7 @@ export type MRT_TableState<D extends {} = {}> = TableState<D> &
   UseRowStateState<D> &
   UseSortByState<D> & {
     currentEditingRow: MRT_Row<D> | null;
+    currentFilterTypes: { [key: string]: MRT_FilterType };
     densePadding: boolean;
     fullScreen: boolean;
     showFilters: boolean;
@@ -229,9 +242,13 @@ export type MaterialReactTableProps<D extends {} = {}> = UseTableOptions<D> &
     hideToolbarInternalActions?: boolean;
     hideToolbarTop?: boolean;
     icons?: Partial<MRT_Icons>;
+    idPrefix?: string;
     isFetching?: boolean;
     isLoading?: boolean;
     localization?: Partial<MRT_Localization>;
+    muiLinearProgressProps?:
+      | LinearProgressProps
+      | ((tableInstance: MRT_TableInstance) => LinearProgressProps);
     muiSearchTextFieldProps?: TextFieldProps;
     muiTableBodyCellEditTextFieldProps?:
       | TextFieldProps
@@ -239,6 +256,9 @@ export type MaterialReactTableProps<D extends {} = {}> = UseTableOptions<D> &
     muiTableBodyCellProps?:
       | TableCellProps
       | ((cell?: MRT_Cell<D>) => TableCellProps);
+    muiTableBodyCellSkeletonProps?:
+      | SkeletonProps
+      | ((cell?: MRT_Cell<D>) => SkeletonProps);
     muiTableBodyProps?:
       | TableBodyProps
       | ((tableInstance: MRT_TableInstance<D>) => TableBodyProps);
@@ -275,7 +295,9 @@ export type MaterialReactTableProps<D extends {} = {}> = UseTableOptions<D> &
       | ((
           tableInstance: MRT_TableInstance<D>,
         ) => Partial<TablePaginationProps>);
-    muiTableProps?: TableProps | ((tableInstance: MRT_TableInstance<D>) => TableProps);
+    muiTableProps?:
+      | TableProps
+      | ((tableInstance: MRT_TableInstance<D>) => TableProps);
     muiTableToolbarAlertBannerProps?:
       | AlertProps
       | ((tableInstance: MRT_TableInstance<D>) => AlertProps);

package/src/body/MRT_TableBodyCell.tsx

@@ -1,5 +1,5 @@
 import React, { FC, MouseEvent } from 'react';
-import { TableCell, TableCellProps } from '@mui/material';
+import { Skeleton, TableCell, TableCellProps } from '@mui/material';
 import { useMRT } from '../useMRT';
 import { MRT_EditCellTextField } from '../inputs/MRT_EditCellTextField';
 import { MRT_Cell } from '..';
@@ -22,8 +22,10 @@ interface Props {
 
 export const MRT_TableBodyCell: FC<Props> = ({ cell }) => {
   const {
-    onCellClick,
+    isLoading,
     muiTableBodyCellProps,
+    muiTableBodyCellSkeletonProps,
+    onCellClick,
     tableInstance: {
       state: { currentEditingRow, densePadding },
     },
@@ -63,7 +65,14 @@ export const MRT_TableBodyCell: FC<Props> = ({ cell }) => {
         } as TableCellProps['sx']
       }
     >
-      {currentEditingRow?.id === cell.row.id ? (
+      {isLoading ? (
+        <Skeleton
+          animation="wave"
+          height={20}
+          width={Math.random() * (120 - 60) + 60}
+          {...muiTableBodyCellSkeletonProps}
+        />
+      ) : currentEditingRow?.id === cell.row.id ? (
         <MRT_EditCellTextField cell={cell} />
       ) : cell.isPlaceholder ? null : cell.isAggregated ? (
         cell.render('Aggregated')

package/src/buttons/MRT_EditActionButtons.tsx

@@ -13,7 +13,9 @@ export const MRT_EditActionButtons: FC<Props> = ({ row }) => {
     localization,
     onRowEditSubmit,
     setCurrentEditingRow,
-    tableInstance: { state: { currentEditingRow } },
+    tableInstance: {
+      state: { currentEditingRow },
+    },
   } = useMRT();
 
   const handleCancel = () => {

package/src/buttons/MRT_ShowHideColumnsButton.tsx

@@ -16,9 +16,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);
@@ -43,12 +43,16 @@ export const MRT_ShowHideColumnsButton: FC<Props> = ({ ...rest }) => {
         anchorEl={anchorEl}
         open={!!anchorEl}
         onClose={() => setAnchorEl(null)}
+        MenuListProps={{
+          dense: tableInstance.state.densePadding,
+          disablePadding: true,
+        }}
       >
         <Box
           sx={{
             display: 'flex',
             justifyContent: 'space-between',
-            p: '0 0.5rem 0.5rem 0.5rem',
+            p: '0.5rem',
           }}
         >
           <Button

package/src/buttons/MRT_ToggleColumnActionMenuButton.tsx

@@ -35,11 +35,12 @@ export const MRT_ToggleColumnActionMenuButton: FC<Props> = ({ column }) => {
           onClick={handleClick}
           size="small"
           sx={{
+            height: '2rem',
+            mr: '2px',
+            mt: '-0.2rem',
             opacity: 0.5,
             transition: 'opacity 0.2s',
-            marginRight: '2px',
-            height: '1.6rem',
-            width: '1.6rem',
+            width: '2rem',
             '&:hover': {
               opacity: 1,
             },

package/src/buttons/MRT_ToggleFiltersButton.tsx

@@ -9,7 +9,9 @@ export const MRT_ToggleFiltersButton: FC<Props> = ({ ...rest }) => {
     icons: { FilterListIcon, FilterListOffIcon },
     localization,
     setShowFilters,
-    tableInstance: { state: { showFilters } },
+    tableInstance: {
+      state: { showFilters },
+    },
   } = useMRT();
 
   return (

package/src/buttons/MRT_ToggleSearchButton.tsx

@@ -7,10 +7,13 @@ interface Props extends IconButtonProps {}
 export const MRT_ToggleSearchButton: FC<Props> = ({ ...rest }) => {
   const {
     icons: { SearchIcon, SearchOffIcon },
+    idPrefix,
     localization,
     muiSearchTextFieldProps,
     setShowSearch,
-    tableInstance: { state: { showSearch } },
+    tableInstance: {
+      state: { showSearch },
+    },
   } = useMRT();
 
   const handleToggleSearch = () => {
@@ -19,7 +22,7 @@ export const MRT_ToggleSearchButton: FC<Props> = ({ ...rest }) => {
       () =>
         document
           .getElementById(
-            muiSearchTextFieldProps?.id ?? `global-search-text-field`,
+            muiSearchTextFieldProps?.id ?? `mrt-${idPrefix}-search-text-field`,
           )
           ?.focus(),
       200,

package/src/filtersFNs.ts

@@ -0,0 +1,112 @@
+import { matchSorter } from 'match-sorter';
+import { MRT_Row } from '.';
+
+export const fuzzyFilterFN = (
+  rows: MRT_Row[],
+  id: string,
+  filterValue: string | number,
+) =>
+  matchSorter(rows, filterValue.toString().trim(), {
+    keys: [`values.${id}`],
+    sorter: (rankedItems) => rankedItems,
+  });
+
+fuzzyFilterFN.autoRemove = (val: any) => !val;
+
+export const containsFilterFN = (
+  rows: MRT_Row[],
+  id: string,
+  filterValue: string | number,
+) =>
+  rows.filter((row) =>
+    row.values[id]
+      .toString()
+      .toLowerCase()
+      .trim()
+      .includes(filterValue.toString().toLowerCase().trim()),
+  );
+
+containsFilterFN.autoRemove = (val: any) => !val;
+
+export const startsWithFilterFN = (
+  rows: MRT_Row[],
+  id: string,
+  filterValue: string | number,
+) =>
+  rows.filter((row) =>
+    row.values[id]
+      .toString()
+      .toLowerCase()
+      .trim()
+      .startsWith(filterValue.toString().toLowerCase().trim()),
+  );
+
+startsWithFilterFN.autoRemove = (val: any) => !val;
+
+export const endsWithFilterFN = (
+  rows: MRT_Row[],
+  id: string,
+  filterValue: string | number,
+) =>
+  rows.filter((row) =>
+    row.values[id]
+      .toString()
+      .toLowerCase()
+      .trim()
+      .endsWith(filterValue.toString().toLowerCase().trim()),
+  );
+
+endsWithFilterFN.autoRemove = (val: any) => !val;
+
+export const equalsFilterFN = (
+  rows: MRT_Row[],
+  id: string,
+  filterValue: string | number,
+) =>
+  rows.filter(
+    (row) =>
+      row.values[id].toString().toLowerCase().trim() ===
+      filterValue.toString().toLowerCase().trim(),
+  );
+
+equalsFilterFN.autoRemove = (val: any) => !val;
+
+export const notEqualsFilterFN = (
+  rows: MRT_Row[],
+  id: string,
+  filterValue: string | number,
+) =>
+  rows.filter(
+    (row) =>
+      row.values[id].toString().toLowerCase().trim() !==
+      filterValue.toString().toLowerCase().trim(),
+  );
+
+notEqualsFilterFN.autoRemove = (val: any) => !val;
+
+export const emptyFilterFN = (
+  rows: MRT_Row[],
+  id: string,
+  _filterValue: string | number,
+) => rows.filter((row) => !row.values[id].toString().toLowerCase().trim());
+
+emptyFilterFN.autoRemove = (val: any) => !val;
+
+export const notEmptyFilterFN = (
+  rows: MRT_Row[],
+  id: string,
+  _filterValue: string | number,
+) => rows.filter((row) => !!row.values[id].toString().toLowerCase().trim());
+
+notEmptyFilterFN.autoRemove = (val: any) => !val;
+
+export const defaultFilterFNs = {
+  contains: containsFilterFN,
+  empty: emptyFilterFN,
+  endsWith: endsWithFilterFN,
+  equals: equalsFilterFN,
+  fuzzy: fuzzyFilterFN,
+  notEmpty: notEmptyFilterFN,
+  notEquals: notEqualsFilterFN,
+  startsWith: startsWithFilterFN,
+};

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,25 @@ 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 (
     <TableCell
       align={isParentHeader ? 'center' : 'left'}
@@ -86,59 +108,84 @@ export const MRT_TableHeadCell: FC<Props> = ({ column }) => {
       }}
     >
       <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()}
+          {column.render('Header')}
+          {!isParentHeader && column.canSort && (
+            <Tooltip arrow title={sortTooltip}>
+              <TableSortLabel
+                aria-label={sortTooltip}
+                active={column.isSorted}
+                direction={column.isSortedDesc ? 'desc' : 'asc'}
+              />
+            </Tooltip>
+          )}
+          {!isParentHeader && !!column.canFilter && (
+            <Tooltip arrow title={filterTooltip}>
+              <IconButton
+                onClick={(event) => {
+                  event.stopPropagation();
+                  setShowFilters(!tableInstance.state.showFilters);
+                }}
+                size="small"
                 sx={{
-                  borderRightWidth: '2px',
-                  borderRadius: '2px',
-                  maxHeight: '2rem',
+                  opacity: !!column.filterValue ? 0.8 : 0,
+                  p: '2px',
+                  m: 0,
+                  transition: 'all 0.2s ease-in-out',
+                  '&:hover': {
+                    opacity: 0.8,
+                  },
                 }}
-              />
-            )}
-          </Box>
+              >
+                {tableInstance.state.showFilters && !column.filterValue ? (
+                  <FilterAltOff fontSize="small" />
+                ) : (
+                  <FilterAltIcon fontSize="small" />
+                )}
+              </IconButton>
+            </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={tableInstance.state.showFilters}>
-            <MRT_FilterTextField column={column} />
-          </Collapse>
-        )}
       </Box>
+      {!disableFilters && column.canFilter && (
+        <Collapse in={tableInstance.state.showFilters}>
+          <MRT_FilterTextField column={column} />
+        </Collapse>
+      )}
     </TableCell>
   );
 };

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/index.tsx

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