material-react-table 0.5.1 → 0.5.4

package/dist/menus/MRT_FilterMenu.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_FilterMenu: FC<Props>;
+export {};

package/dist/useMRT.d.ts

@@ -1,24 +1,23 @@
-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';
 export declare type UseMRT<D extends {} = {}> = MaterialReactTableProps<D> & {
     anyRowsCanExpand: boolean;
     anyRowsExpanded: boolean;
-    currentEditingRow: MRT_Row<D> | null;
-    densePadding: boolean;
-    fullScreen: 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;
-    showFilters: boolean;
-    showSearch: boolean;
+    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.1",
+  "version": "0.5.4",
   "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.",
@@ -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/@types/react-table-config.d.ts

@@ -14,8 +14,6 @@ import {
 } from '..';
 
 declare module 'react-table' {
-  // take this file as-is, or comment out the sections that don't apply to your plugin configuration
-
   export interface TableOptions<D extends Record<string, unknown>>
     extends MRT_TableOptions<D> {}
 
@@ -28,7 +26,9 @@ declare module 'react-table' {
 
   export interface TableInstance<
     D extends Record<string, unknown> = Record<string, unknown>,
-  > extends MRT_TableInstance<D> {}
+  > extends MRT_TableInstance<D> {
+    rows: MRT_Row<D>[];
+  }
 
   export interface TableState<
     D extends Record<string, unknown> = Record<string, unknown>,

package/src/MaterialReactTable.tsx

@@ -181,6 +181,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> &
@@ -192,10 +202,12 @@ export type MRT_TableState<D extends {} = {}> = TableState<D> &
   UseRowSelectState<D> &
   UseRowStateState<D> &
   UseSortByState<D> & {
-    densePadding?: boolean;
-    fullScreen?: boolean;
-    showFilters?: boolean;
-    showSearchTextField?: boolean;
+    currentEditingRow: MRT_Row<D> | null;
+    currentFilterTypes: { [key: string]: MRT_FilterType };
+    densePadding: boolean;
+    fullScreen: boolean;
+    showFilters: boolean;
+    showSearch: boolean;
   };
 
 export type MaterialReactTableProps<D extends {} = {}> = UseTableOptions<D> &
@@ -228,6 +240,7 @@ 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>;
@@ -238,18 +251,22 @@ export type MaterialReactTableProps<D extends {} = {}> = UseTableOptions<D> &
     muiTableBodyCellProps?:
       | TableCellProps
       | ((cell?: MRT_Cell<D>) => TableCellProps);
-    muiTableBodyProps?: TableBodyProps;
+    muiTableBodyProps?:
+      | TableBodyProps
+      | ((tableInstance: MRT_TableInstance<D>) => TableBodyProps);
     muiTableBodyRowProps?: TableRowProps | ((row: Row<D>) => TableRowProps);
     muiTableContainerProps?:
       | TableContainerProps
-      | ((table: MRT_TableInstance<D>) => TableContainerProps);
+      | ((tableInstance: MRT_TableInstance<D>) => TableContainerProps);
     muiTableDetailPanelProps?:
       | TableCellProps
       | ((row: Row<D>) => TableCellProps);
     muiTableFooterCellProps?:
       | TableCellProps
       | ((column: Column<D>) => TableCellProps);
-    muiTableFooterProps?: TableFooterProps;
+    muiTableFooterProps?:
+      | TableFooterProps
+      | ((tableInstance: MRT_TableInstance<D>) => TableFooterProps);
     muiTableFooterRowProps?:
       | TableRowProps
       | ((footerGroup: MRT_HeaderGroup<D>) => TableRowProps);
@@ -259,7 +276,9 @@ export type MaterialReactTableProps<D extends {} = {}> = UseTableOptions<D> &
     muiTableHeadCellProps?:
       | TableCellProps
       | ((column: Column<D>) => TableCellProps);
-    muiTableHeadProps?: TableHeadProps;
+    muiTableHeadProps?:
+      | TableHeadProps
+      | ((tableInstance: MRT_TableInstance<D>) => TableHeadProps);
     muiTableHeadRowProps?:
       | TableRowProps
       | ((row: MRT_HeaderGroup<D>) => TableRowProps);
@@ -268,7 +287,9 @@ export type MaterialReactTableProps<D extends {} = {}> = UseTableOptions<D> &
       | ((
           tableInstance: MRT_TableInstance<D>,
         ) => Partial<TablePaginationProps>);
-    muiTableProps?: TableProps;
+    muiTableProps?:
+      | TableProps
+      | ((tableInstance: MRT_TableInstance<D>) => TableProps);
     muiTableToolbarAlertBannerProps?:
       | AlertProps
       | ((tableInstance: MRT_TableInstance<D>) => AlertProps);

package/src/body/MRT_TableBody.tsx

@@ -11,12 +11,17 @@ export const MRT_TableBody: FC<Props> = () => {
 
   const rows = manualPagination ? tableInstance.rows : tableInstance.page;
 
+  const mTableBodyProps =
+    muiTableBodyProps instanceof Function
+      ? muiTableBodyProps(tableInstance)
+      : muiTableBodyProps;
+
   const tableBodyProps = {
-    ...muiTableBodyProps,
+    ...mTableBodyProps,
     ...tableInstance.getTableBodyProps(),
     style: {
       ...tableInstance.getTableBodyProps().style,
-      ...muiTableBodyProps?.style,
+      ...mTableBodyProps?.style,
     },
   };
 

package/src/body/MRT_TableBodyCell.tsx

@@ -24,8 +24,9 @@ export const MRT_TableBodyCell: FC<Props> = ({ cell }) => {
   const {
     onCellClick,
     muiTableBodyCellProps,
-    densePadding,
-    currentEditingRow,
+    tableInstance: {
+      state: { currentEditingRow, densePadding },
+    },
   } = useMRT();
 
   const mTableCellBodyProps =

package/src/body/MRT_TableBodyRow.tsx

@@ -18,7 +18,6 @@ interface Props {
 export const MRT_TableBodyRow: FC<Props> = ({ row }) => {
   const {
     anyRowsCanExpand,
-    densePadding,
     enableRowActions,
     enableRowEditing,
     enableRowNumbers,
@@ -27,6 +26,9 @@ export const MRT_TableBodyRow: FC<Props> = ({ row }) => {
     onRowClick,
     positionActionsColumn,
     renderDetailPanel,
+    tableInstance: {
+      state: { densePadding },
+    },
   } = useMRT();
 
   const mTableBodyRowProps =
@@ -51,13 +53,14 @@ export const MRT_TableBodyRow: FC<Props> = ({ row }) => {
           onRowClick?.(event, row)
         }
         {...tableRowProps}
-        //@ts-ignore
-        sx={(theme) => ({
-          backgroundColor: row.isSelected
-            ? alpha(theme.palette.primary.light, 0.1)
-            : 'transparent',
-          ...tableRowProps?.sx,
-        })}
+        sx={(theme) =>
+          ({
+            backgroundColor: row.isSelected
+              ? alpha(theme.palette.primary.light, 0.1)
+              : 'transparent',
+            ...tableRowProps?.sx,
+          } as any)
+        }
       >
         {enableRowNumbers && (
           <TableCell sx={{ ...commonTableBodyCellStyles(densePadding) }}>

package/src/buttons/MRT_EditActionButtons.tsx

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

package/src/buttons/MRT_ExpandAllButton.tsx

@@ -7,18 +7,17 @@ interface Props {}
 
 export const MRT_ExpandAllButton: FC<Props> = () => {
   const {
-    tableInstance,
-    localization,
     anyRowsExpanded,
-    densePadding,
     icons: { DoubleArrowDownIcon },
+    localization,
+    tableInstance,
   } = useMRT();
 
   return (
     <TableCell
       size="small"
       {...tableInstance.getToggleAllRowsExpandedProps()}
-      sx={commonTableBodyButtonCellStyles(densePadding)}
+      sx={commonTableBodyButtonCellStyles(tableInstance.state.densePadding)}
     >
       <IconButton
         aria-label={localization.expandAllButtonTitle}

package/src/buttons/MRT_ExpandButton.tsx

@@ -10,10 +10,12 @@ interface Props {
 
 export const MRT_ExpandButton: FC<Props> = ({ row }) => {
   const {
-    densePadding,
     icons: { ExpandMoreIcon },
     localization,
     renderDetailPanel,
+    tableInstance: {
+      state: { densePadding },
+    },
   } = useMRT();
 
   return (

package/src/buttons/MRT_FullScreenToggleButton.tsx

@@ -6,10 +6,12 @@ interface Props extends IconButtonProps {}
 
 export const MRT_FullScreenToggleButton: FC<Props> = ({ ...rest }) => {
   const {
-    fullScreen,
     icons: { FullscreenExitIcon, FullscreenIcon },
     localization,
     setFullScreen,
+    tableInstance: {
+      state: { fullScreen },
+    },
   } = useMRT();
 
   return (

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_ToggleDensePaddingButton.tsx

@@ -6,10 +6,12 @@ interface Props extends IconButtonProps {}
 
 export const MRT_ToggleDensePaddingButton: FC<Props> = ({ ...rest }) => {
   const {
-    densePadding,
     setDensePadding,
     localization,
     icons: { DensityMediumIcon, DensitySmallIcon },
+    tableInstance: {
+      state: { densePadding },
+    },
   } = useMRT();
 
   return (

package/src/buttons/MRT_ToggleFiltersButton.tsx

@@ -6,10 +6,12 @@ interface Props extends IconButtonProps {}
 
 export const MRT_ToggleFiltersButton: FC<Props> = ({ ...rest }) => {
   const {
+    icons: { FilterListIcon, FilterListOffIcon },
     localization,
     setShowFilters,
-    showFilters,
-    icons: { FilterListIcon, FilterListOffIcon },
+    tableInstance: {
+      state: { showFilters },
+    },
   } = useMRT();
 
   return (

package/src/buttons/MRT_ToggleRowActionMenuButton.tsx

@@ -23,8 +23,6 @@ interface Props {
 
 export const MRT_ToggleRowActionMenuButton: FC<Props> = ({ row }) => {
   const {
-    currentEditingRow,
-    densePadding,
     enableRowEditing,
     icons: { EditIcon, MoreHorizIcon },
     localization,
@@ -48,10 +46,12 @@ export const MRT_ToggleRowActionMenuButton: FC<Props> = ({ row }) => {
   };
 
   return (
-    <TableCell sx={commonTableBodyButtonCellStyles(densePadding)}>
+    <TableCell
+      sx={commonTableBodyButtonCellStyles(tableInstance.state.densePadding)}
+    >
       {renderRowActions ? (
         <>{renderRowActions(row, tableInstance)}</>
-      ) : row.id === currentEditingRow?.id ? (
+      ) : row.id === tableInstance.state.currentEditingRow?.id ? (
         <MRT_EditActionButtons row={row} />
       ) : !renderRowActionMenuItems && enableRowEditing ? (
         <Tooltip
@@ -65,15 +65,21 @@ export const MRT_ToggleRowActionMenuButton: FC<Props> = ({ row }) => {
         </Tooltip>
       ) : renderRowActionMenuItems ? (
         <>
-          <IconButton
-            aria-label={localization.rowActionMenuButtonTitle}
-            onClick={handleOpenRowActionMenu}
-            size="small"
-            sx={commonIconButtonStyles}
+          <Tooltip
+            arrow
+            enterDelay={1000}
+            enterNextDelay={1000}
             title={localization.rowActionMenuButtonTitle}
           >
-            <MoreHorizIcon />
-          </IconButton>
+            <IconButton
+              aria-label={localization.rowActionMenuButtonTitle}
+              onClick={handleOpenRowActionMenu}
+              size="small"
+              sx={commonIconButtonStyles}
+            >
+              <MoreHorizIcon />
+            </IconButton>
+          </Tooltip>
           <MRT_RowActionMenu
             anchorEl={anchorEl}
             handleEdit={handleEdit}

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,
-    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_TableFooter.tsx

@@ -9,8 +9,13 @@ interface Props {}
 export const MRT_TableFooter: FC<Props> = () => {
   const { muiTableFooterProps, tableInstance } = useMRT();
 
+  const tableFooterProps =
+    muiTableFooterProps instanceof Function
+      ? muiTableFooterProps(tableInstance)
+      : muiTableFooterProps;
+
   return (
-    <TableFooter {...muiTableFooterProps}>
+    <TableFooter {...tableFooterProps}>
       {tableInstance.footerGroups.map((footerGroup: MRT_HeaderGroup) => (
         <MRT_TableFooterRow
           key={footerGroup.getFooterGroupProps().key}

package/src/footer/MRT_TableFooterCell.tsx

@@ -8,8 +8,13 @@ interface Props {
 }
 
 export const MRT_TableFooterCell: FC<Props> = ({ column }) => {
-  const { muiTableFooterCellProps, densePadding, enableColumnResizing } =
-    useMRT();
+  const {
+    muiTableFooterCellProps,
+    enableColumnResizing,
+    tableInstance: {
+      state: { densePadding },
+    },
+  } = useMRT();
 
   const isParentHeader = (column?.columns?.length ?? 0) > 0;