material-react-table 0.5.8 → 0.5.9

package/dist/menus/MRT_ColumnActionMenu.d.ts

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { MRT_HeaderGroup } from '..';
+import type { MRT_HeaderGroup } from '..';
 export declare const commonMenuItemStyles: {
     py: string;
     my: number;

package/dist/menus/MRT_FilterTypeMenu.d.ts

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { MRT_HeaderGroup } from '..';
+import type { MRT_HeaderGroup } from '..';
 interface Props {
     anchorEl: HTMLElement | null;
     column: MRT_HeaderGroup;

package/dist/menus/MRT_RowActionMenu.d.ts

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { MRT_Row } from '..';
+import type { MRT_Row } from '..';
 interface Props {
     anchorEl: HTMLElement | null;
     row: MRT_Row;

package/dist/menus/MRT_ShowHideColumnsMenu.d.ts

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { MRT_ColumnInstance } from '..';
+import type { MRT_ColumnInstance } from '..';
 interface Props {
     column: MRT_ColumnInstance;
 }

package/dist/useMRT.d.ts

@@ -1,5 +1,5 @@
 import React, { PropsWithChildren, Dispatch, SetStateAction } from 'react';
-import { MRT_FilterType, MRT_Row, MRT_TableInstance } from '.';
+import type { MRT_FilterType, MRT_Row, MRT_TableInstance } from '.';
 import { MRT_Icons } from './icons';
 import { MRT_Localization } from './localization';
 import { MaterialReactTableProps } from './MaterialReactTable';

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.5.8",
+  "version": "0.5.9",
   "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/MaterialReactTable.tsx

@@ -77,6 +77,7 @@ import { MaterialReactTableProvider } from './useMRT';
 import { MRT_TableContainer } from './table/MRT_TableContainer';
 import { MRT_Localization, MRT_DefaultLocalization_EN } from './localization';
 import { MRT_Default_Icons, MRT_Icons } from './icons';
+import { MRT_FILTER_TYPE } from './enums';
 
 export type MRT_TableOptions<D extends {} = {}> = TableOptions<D> &
   UseExpandedOptions<D> &
@@ -186,17 +187,6 @@ export type MRT_Cell<D extends {} = {}, _V = any> = Cell<D> &
   UseGroupByCellProps<D> &
   UseRowStateCellProps<D> & {};
 
-export enum MRT_FILTER_TYPE {
-  CONTAINS = 'contains',
-  EMPTY = 'empty',
-  ENDS_WITH = 'endsWith',
-  EQUALS = 'equals',
-  FUZZY = 'fuzzy',
-  NOT_EMPTY = 'notEmpty',
-  NOT_EQUALS = 'notEquals',
-  STARTS_WITH = 'startsWith',
-}
-
 export type MRT_FilterType = MRT_FILTER_TYPE | Function;
 
 export type MRT_TableState<D extends {} = {}> = TableState<D> &

package/src/body/MRT_TableBody.tsx

@@ -2,7 +2,7 @@ import React, { FC } from 'react';
 import { TableBody } from '@mui/material';
 import { MRT_TableBodyRow } from './MRT_TableBodyRow';
 import { useMRT } from '../useMRT';
-import { MRT_Row } from '..';
+import type { MRT_Row } from '..';
 
 interface Props {}
 

package/src/body/MRT_TableBodyCell.tsx

@@ -2,7 +2,7 @@ import React, { FC, MouseEvent } from 'react';
 import { Skeleton, TableCell, TableCellProps } from '@mui/material';
 import { useMRT } from '../useMRT';
 import { MRT_EditCellTextField } from '../inputs/MRT_EditCellTextField';
-import { MRT_Cell } from '..';
+import type { MRT_Cell } from '..';
 
 export const commonTableBodyCellStyles = (densePadding: boolean) => ({
   p: densePadding ? '0.5rem' : '1rem',

package/src/body/MRT_TableBodyRow.tsx

@@ -9,7 +9,7 @@ import { MRT_TableDetailPanel } from './MRT_TableDetailPanel';
 import { MRT_ExpandButton } from '../buttons/MRT_ExpandButton';
 import { MRT_SelectCheckbox } from '../inputs/MRT_SelectCheckbox';
 import { MRT_ToggleRowActionMenuButton } from '../buttons/MRT_ToggleRowActionMenuButton';
-import { MRT_Cell, MRT_Row } from '..';
+import type { MRT_Cell, MRT_Row } from '..';
 
 interface Props {
   row: MRT_Row;

package/src/body/MRT_TableDetailPanel.tsx

@@ -1,7 +1,7 @@
 import React, { FC, MouseEvent } from 'react';
 import { Collapse, TableCell, TableRow } from '@mui/material';
 import { useMRT } from '../useMRT';
-import { MRT_Row } from '..';
+import type { MRT_Row } from '..';
 
 interface Props {
   row: MRT_Row;

package/src/buttons/MRT_EditActionButtons.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
 import { Box, IconButton, Tooltip } from '@mui/material';
 import { useMRT } from '../useMRT';
-import { MRT_Row } from '..';
+import type { MRT_Row } from '..';
 
 interface Props {
   row: MRT_Row;

package/src/buttons/MRT_ExpandButton.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
 import { IconButton, TableCell } from '@mui/material';
 import { useMRT } from '../useMRT';
-import { MRT_Row } from '..';
+import type { MRT_Row } from '..';
 import { commonTableBodyButtonCellStyles } from '../body/MRT_TableBodyCell';
 
 interface Props {

package/src/buttons/MRT_ShowHideColumnsButton.tsx

@@ -10,7 +10,7 @@ import {
 } from '@mui/material';
 import { useMRT } from '../useMRT';
 import { MRT_ShowHideColumnsMenu } from '../menus/MRT_ShowHideColumnsMenu';
-import { MRT_ColumnInstance } from '..';
+import type { MRT_ColumnInstance } from '..';
 
 interface Props extends IconButtonProps {}
 

package/src/buttons/MRT_ToggleColumnActionMenuButton.tsx

@@ -2,7 +2,7 @@ import React, { FC, MouseEvent, useState } from 'react';
 import { IconButton, Tooltip } from '@mui/material';
 import { useMRT } from '../useMRT';
 import { MRT_ColumnActionMenu } from '../menus/MRT_ColumnActionMenu';
-import { MRT_HeaderGroup } from '..';
+import type { MRT_HeaderGroup } from '..';
 
 interface Props {
   column: MRT_HeaderGroup;
@@ -28,6 +28,7 @@ export const MRT_ToggleColumnActionMenuButton: FC<Props> = ({ column }) => {
         arrow
         enterDelay={1000}
         enterNextDelay={1000}
+        placement="top"
         title={localization.columnActionMenuButtonTitle}
       >
         <IconButton

package/src/buttons/MRT_ToggleRowActionMenuButton.tsx

@@ -3,7 +3,7 @@ import { IconButton, TableCell, Tooltip } from '@mui/material';
 import { useMRT } from '../useMRT';
 import { MRT_RowActionMenu } from '../menus/MRT_RowActionMenu';
 import { MRT_EditActionButtons } from './MRT_EditActionButtons';
-import { MRT_Row } from '..';
+import type { MRT_Row } from '..';
 import { commonTableBodyButtonCellStyles } from '../body/MRT_TableBodyCell';
 
 const commonIconButtonStyles = {

package/src/enums.ts

@@ -0,0 +1,12 @@
+export enum MRT_FILTER_TYPE {
+  CONTAINS = 'contains',
+  EMPTY = 'empty',
+  ENDS_WITH = 'endsWith',
+  EQUALS = 'equals',
+  FUZZY = 'fuzzy',
+  GREATER_THAN = 'greaterThan',
+  LESS_THAN = 'lessThan',
+  NOT_EMPTY = 'notEmpty',
+  NOT_EQUALS = 'notEquals',
+  STARTS_WITH = 'startsWith',
+}

package/src/filtersFNs.ts

@@ -96,6 +96,34 @@ export const notEqualsFilterFN = (
 
 notEqualsFilterFN.autoRemove = (val: any) => !val;
 
+export const greaterThanFilterFN = (
+  rows: MRT_Row[],
+  id: string,
+  filterValue: string | number,
+) =>
+  rows.filter((row) =>
+    !isNaN(+filterValue) && !isNaN(+row.values[id])
+      ? +row.values[id] > +filterValue
+      : row.values[id].toString().toLowerCase().trim() >
+        filterValue.toString().toLowerCase().trim(),
+  );
+
+greaterThanFilterFN.autoRemove = (val: any) => !val;
+
+export const lessThanFilterFN = (
+  rows: MRT_Row[],
+  id: string,
+  filterValue: string | number,
+) =>
+  rows.filter((row) =>
+    !isNaN(+filterValue) && !isNaN(+row.values[id])
+      ? +row.values[id] < +filterValue
+      : row.values[id].toString().toLowerCase().trim() <
+        filterValue.toString().toLowerCase().trim(),
+  );
+
+lessThanFilterFN.autoRemove = (val: any) => !val;
+
 export const emptyFilterFN = (
   rows: MRT_Row[],
   id: string,
@@ -116,6 +144,8 @@ export const defaultFilterFNs = {
   contains: containsFilterFN,
   empty: emptyFilterFN,
   endsWith: endsWithFilterFN,
+  greaterThan: greaterThanFilterFN,
+  lessThan: lessThanFilterFN,
   equals: equalsFilterFN,
   fuzzy: fuzzyFilterFN,
   notEmpty: notEmptyFilterFN,

package/src/footer/MRT_TableFooter.tsx

@@ -2,7 +2,7 @@ import React, { FC } from 'react';
 import { TableFooter } from '@mui/material';
 import { MRT_TableFooterRow } from './MRT_TableFooterRow';
 import { useMRT } from '../useMRT';
-import { MRT_HeaderGroup } from '..';
+import type { MRT_HeaderGroup } from '..';
 
 interface Props {}
 

package/src/footer/MRT_TableFooterCell.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
 import { TableCell } from '@mui/material';
 import { useMRT } from '../useMRT';
-import { MRT_HeaderGroup } from '..';
+import type { MRT_HeaderGroup } from '..';
 
 interface Props {
   column: MRT_HeaderGroup;

package/src/footer/MRT_TableFooterRow.tsx

@@ -3,7 +3,7 @@ import { TableRow } from '@mui/material';
 import { MRT_TableFooterCell } from './MRT_TableFooterCell';
 import { MRT_TableSpacerCell } from '../table/MRT_TableSpacerCell';
 import { useMRT } from '../useMRT';
-import { MRT_HeaderGroup } from '..';
+import type { MRT_HeaderGroup } from '..';
 
 interface Props {
   footerGroup: MRT_HeaderGroup;

package/src/head/MRT_TableHead.tsx

@@ -2,7 +2,7 @@ import React, { FC } from 'react';
 import { TableHead } from '@mui/material';
 import { MRT_TableHeadRow } from './MRT_TableHeadRow';
 import { useMRT } from '../useMRT';
-import { MRT_HeaderGroup } from '..';
+import type { MRT_HeaderGroup } from '..';
 
 interface Props {}
 

package/src/head/MRT_TableHeadCell.tsx

@@ -11,7 +11,7 @@ import {
 import { useMRT } from '../useMRT';
 import { MRT_FilterTextField } from '../inputs/MRT_FilterTextField';
 import { MRT_ToggleColumnActionMenuButton } from '../buttons/MRT_ToggleColumnActionMenuButton';
-import { MRT_HeaderGroup } from '..';
+import type { MRT_HeaderGroup } from '..';
 
 export const commonTableHeadCellStyles = (
   densePadding: boolean,

package/src/head/MRT_TableHeadRow.tsx

@@ -9,7 +9,7 @@ import { MRT_SelectCheckbox } from '../inputs/MRT_SelectCheckbox';
 import { MRT_ExpandAllButton } from '../buttons/MRT_ExpandAllButton';
 import { MRT_TableSpacerCell } from '../table/MRT_TableSpacerCell';
 import { MRT_TableHeadCellActions } from './MRT_TableHeadCellActions';
-import { MRT_HeaderGroup } from '..';
+import type { MRT_HeaderGroup } from '..';
 
 interface Props {
   headerGroup: MRT_HeaderGroup;

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

@@ -10,8 +10,9 @@ import {
 } from '@mui/material';
 import { useAsyncDebounce } from 'react-table';
 import { useMRT } from '../useMRT';
-import { MRT_FILTER_TYPE, 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;
@@ -128,7 +129,6 @@ export const MRT_FilterTextField: FC<Props> = ({ column }) => {
               <Tooltip arrow title={localization.changeFilterMode}>
                 <span>
                   <IconButton
-                    disabled={isCustomFilterType}
                     onClick={handleFilterMenuOpen}
                     size="small"
                     sx={{ height: '1.75rem', width: '1.75rem' }}

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 {

package/src/localization.ts

@@ -1,5 +1,6 @@
 export interface MRT_Localization {
   actionsHeadColumnTitle: string;
+  changeFilterMode: string;
   columnActionMenuButtonTitle: string;
   columnActionMenuItemClearSort: string;
   columnActionMenuItemGroupBy: string;
@@ -17,6 +18,8 @@ export interface MRT_Localization {
   filterMenuItemEndsWith: string;
   filterMenuItemEquals: string;
   filterMenuItemFuzzy: string;
+  filterMenuItemGreaterThan: string;
+  filterMenuItemLessThan: string;
   filterMenuItemNotEmpty: string;
   filterMenuItemNotEquals: string;
   filterMenuItemStartsWith: string;
@@ -26,7 +29,6 @@ export interface MRT_Localization {
   filterTextFieldChipLabelNotEmpty: string;
   filterTextFieldClearButtonTitle: string;
   filterTextFieldPlaceholder: string;
-  changeFilterMode: string;
   rowActionButtonCancel: string;
   rowActionButtonSave: string;
   rowActionMenuButtonTitle: string;
@@ -48,6 +50,7 @@ export interface MRT_Localization {
 
 export const MRT_DefaultLocalization_EN: MRT_Localization = {
   actionsHeadColumnTitle: 'Actions',
+  changeFilterMode: 'Change filter mode',
   columnActionMenuButtonTitle: 'Column Actions',
   columnActionMenuItemClearSort: 'Clear sort',
   columnActionMenuItemGroupBy: 'Group by {column}',
@@ -64,8 +67,9 @@ export const MRT_DefaultLocalization_EN: MRT_Localization = {
   filterMenuItemEmpty: 'Empty',
   filterMenuItemEndsWith: 'Ends With',
   filterMenuItemEquals: 'Equals',
-  changeFilterMode: 'Change filter mode',
   filterMenuItemFuzzy: 'Fuzzy Match (Default)',
+  filterMenuItemGreaterThan: 'Greater Than',
+  filterMenuItemLessThan: 'Less Than',
   filterMenuItemNotEmpty: 'Not Empty',
   filterMenuItemNotEquals: 'Not Equals',
   filterMenuItemStartsWith: 'Starts With',

package/src/menus/MRT_ColumnActionMenu.tsx

@@ -1,7 +1,7 @@
 import React, { FC, useState } from 'react';
 import { Box, IconButton, Menu, MenuItem } from '@mui/material';
 import { useMRT } from '../useMRT';
-import { MRT_HeaderGroup } from '..';
+import type { MRT_HeaderGroup } from '..';
 import { MRT_FilterTypeMenu } from './MRT_FilterTypeMenu';
 
 export const commonMenuItemStyles = {

package/src/menus/MRT_FilterTypeMenu.tsx

@@ -1,7 +1,20 @@
 import React, { FC, useMemo } from 'react';
 import { Menu, MenuItem } from '@mui/material';
 import { useMRT } from '../useMRT';
-import { MRT_FilterType, MRT_FILTER_TYPE, MRT_HeaderGroup } from '..';
+import type { MRT_FilterType, MRT_HeaderGroup } from '..';
+import { MRT_FILTER_TYPE } from '../enums';
+import {
+  containsFilterFN,
+  emptyFilterFN,
+  endsWithFilterFN,
+  equalsFilterFN,
+  fuzzyFilterFN,
+  greaterThanFilterFN,
+  lessThanFilterFN,
+  notEmptyFilterFN,
+  notEqualsFilterFN,
+  startsWithFilterFN,
+} from '../filtersFNs';
 
 const commonMenuItemStyles = {
   py: '6px',
@@ -28,47 +41,68 @@ export const MRT_FilterTypeMenu: FC<Props> = ({
     type: MRT_FILTER_TYPE;
     label: string;
     divider: boolean;
+    fn: Function;
   }[] = useMemo(
     () => [
       {
         type: MRT_FILTER_TYPE.FUZZY,
         label: localization.filterMenuItemFuzzy,
         divider: false,
+        fn: fuzzyFilterFN,
       },
       {
         type: MRT_FILTER_TYPE.CONTAINS,
         label: localization.filterMenuItemContains,
         divider: true,
+        fn: containsFilterFN,
       },
       {
         type: MRT_FILTER_TYPE.STARTS_WITH,
         label: localization.filterMenuItemStartsWith,
         divider: false,
+        fn: startsWithFilterFN,
       },
       {
         type: MRT_FILTER_TYPE.ENDS_WITH,
         label: localization.filterMenuItemEndsWith,
         divider: true,
+        fn: endsWithFilterFN,
       },
       {
         type: MRT_FILTER_TYPE.EQUALS,
         label: localization.filterMenuItemEquals,
         divider: false,
+        fn: equalsFilterFN,
       },
       {
         type: MRT_FILTER_TYPE.NOT_EQUALS,
         label: localization.filterMenuItemNotEquals,
         divider: true,
+        fn: notEqualsFilterFN,
+      },
+      {
+        type: MRT_FILTER_TYPE.GREATER_THAN,
+        label: localization.filterMenuItemGreaterThan,
+        divider: false,
+        fn: greaterThanFilterFN,
+      },
+      {
+        type: MRT_FILTER_TYPE.LESS_THAN,
+        label: localization.filterMenuItemLessThan,
+        divider: true,
+        fn: lessThanFilterFN,
       },
       {
         type: MRT_FILTER_TYPE.EMPTY,
         label: localization.filterMenuItemEmpty,
         divider: false,
+        fn: emptyFilterFN,
       },
       {
         type: MRT_FILTER_TYPE.NOT_EMPTY,
         label: localization.filterMenuItemNotEmpty,
         divider: false,
+        fn: notEmptyFilterFN,
       },
     ],
     [],
@@ -98,12 +132,12 @@ export const MRT_FilterTypeMenu: FC<Props> = ({
         dense: tableInstance.state.densePadding,
       }}
     >
-      {filterTypes.map(({ type, label, divider }, index) => (
+      {filterTypes.map(({ type, label, divider, fn }, index) => (
         <MenuItem
           divider={divider}
           key={index}
           onClick={() => handleSelectFilterType(type)}
-          selected={type === filterType}
+          selected={type === filterType || fn === filterType}
           sx={commonMenuItemStyles}
           value={type}
         >

package/src/menus/MRT_RowActionMenu.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
 import { Menu, MenuItem } from '@mui/material';
 import { useMRT } from '../useMRT';
-import { MRT_Row } from '..';
+import type { MRT_Row } from '..';
 import { commonMenuItemStyles } from './MRT_ColumnActionMenu';
 
 interface Props {

package/src/menus/MRT_ShowHideColumnsMenu.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
 import { FormControlLabel, MenuItem, Switch } from '@mui/material';
 import { ColumnInstance } from 'react-table';
-import { MRT_ColumnInstance } from '..';
+import type { MRT_ColumnInstance } from '..';
 import { commonMenuItemStyles } from './MRT_ColumnActionMenu';
 
 interface Props {

package/src/useMRT.tsx

@@ -21,7 +21,8 @@ import {
   useSortBy,
   useTable,
 } from 'react-table';
-import { MRT_FilterType, MRT_FILTER_TYPE, MRT_Row, MRT_TableInstance } from '.';
+import type { MRT_FilterType, MRT_Row, MRT_TableInstance } from '.';
+import { MRT_FILTER_TYPE } from './enums';
 import { defaultFilterFNs } from './filtersFNs';
 import { MRT_Icons } from './icons';
 import { MRT_Localization } from './localization';
@@ -91,19 +92,35 @@ export const MaterialReactTableProvider = <D extends {} = {}>(
     [props.filterTypes],
   );
 
-  const [currentFilterTypes, setCurrentFilterTypes] = useState<{
-    [key: string]: MRT_FilterType;
-  }>(() =>
-    Object.assign(
+  const getInitialFilterTypeState = () => {
+    let lowestLevelColumns: any[] = props.columns;
+    let currentCols: any[] = props.columns;
+    while (!!currentCols.length && currentCols.some((col) => col.columns)) {
+      const nextCols = currentCols
+        .filter((col) => !!col.columns)
+        .map((col) => col.columns)
+        .flat();
+      if (nextCols.every((col) => !col.columns)) {
+        lowestLevelColumns = [...lowestLevelColumns, ...nextCols];
+      }
+      currentCols = nextCols;
+    }
+    lowestLevelColumns = lowestLevelColumns.filter((col) => !col.columns);
+
+    return Object.assign(
       {},
-      ...props.columns.map((c) => ({
+      ...lowestLevelColumns.map((c) => ({
         [c.accessor as string]:
           c.filter ??
           props?.initialState?.filters?.[c.accessor as any] ??
           (!!c.filterSelectOptions ? 'equals' : 'fuzzy'),
       })),
-    ),
-  );
+    );
+  };
+
+  const [currentFilterTypes, setCurrentFilterTypes] = useState<{
+    [key: string]: MRT_FilterType;
+  }>(() => getInitialFilterTypeState());
 
   const columns = useMemo(
     () =>