material-react-table 0.5.8 → 0.6.1

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,7 +1,8 @@
 import { FC } from 'react';
-import { MRT_ColumnInstance } from '..';
 interface Props {
-    column: MRT_ColumnInstance;
+    anchorEl: HTMLElement | null;
+    isSubMenu?: boolean;
+    setAnchorEl: (anchorEl: HTMLElement | null) => void;
 }
 export declare const MRT_ShowHideColumnsMenu: FC<Props>;
 export {};

package/dist/menus/MRT_ShowHideColumnsMenuItems.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import type { MRT_ColumnInstance } from '..';
+interface Props {
+    column: MRT_ColumnInstance;
+    isSubMenu?: boolean;
+}
+export declare const MRT_ShowHideColumnsMenuItems: FC<Props>;
+export {};

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.6.1",
   "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.",
@@ -56,7 +56,7 @@
   ],
   "devDependencies": {
     "@babel/core": "^7.17.5",
-    "@emotion/react": "^11.8.1",
+    "@emotion/react": "^11.8.2",
     "@emotion/styled": "^11.8.1",
     "@etchteam/storybook-addon-status": "^4.2.0",
     "@faker-js/faker": "^6.0.0-beta.0",
@@ -73,7 +73,7 @@
     "@storybook/addons": "^6.4.19",
     "@storybook/react": "^6.4.19",
     "@types/faker": "^6.6.8",
-    "@types/react": "^17.0.39",
+    "@types/react": "^17.0.40",
     "@types/react-dom": "^17.0.13",
     "@types/react-table": "^7.7.9",
     "babel-loader": "^8.2.3",

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;
@@ -30,17 +30,14 @@ export const MRT_EditActionButtons: FC<Props> = ({ row }) => {
 
   return (
     <Box sx={{ display: 'flex', gap: '0.75rem' }}>
-      <Tooltip arrow title={localization.rowActionButtonCancel}>
-        <IconButton
-          aria-label={localization.rowActionButtonCancel}
-          onClick={handleCancel}
-        >
+      <Tooltip arrow title={localization.cancel}>
+        <IconButton aria-label={localization.cancel} onClick={handleCancel}>
           <CancelIcon />
         </IconButton>
       </Tooltip>
-      <Tooltip arrow title={localization.rowActionButtonSave}>
+      <Tooltip arrow title={localization.save}>
         <IconButton
-          aria-label={localization.rowActionButtonSave}
+          aria-label={localization.save}
           color="info"
           onClick={handleSave}
         >

package/src/buttons/MRT_ExpandAllButton.tsx

@@ -20,8 +20,8 @@ export const MRT_ExpandAllButton: FC<Props> = () => {
       sx={commonTableBodyButtonCellStyles(tableInstance.state.densePadding)}
     >
       <IconButton
-        aria-label={localization.expandAllButtonTitle}
-        title={localization.expandAllButtonTitle}
+        aria-label={localization.expandAll}
+        title={localization.expandAll}
       >
         <DoubleArrowDownIcon
           style={{

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 {
@@ -28,9 +28,9 @@ export const MRT_ExpandButton: FC<Props> = ({ row }) => {
       }}
     >
       <IconButton
-        aria-label={localization.expandButtonTitle}
+        aria-label={localization.expand}
         disabled={!row.canExpand && !renderDetailPanel}
-        title={localization.expandButtonTitle}
+        title={localization.expand}
         {...row.getToggleRowExpandedProps()}
       >
         <ExpandMoreIcon

package/src/buttons/MRT_FullScreenToggleButton.tsx

@@ -15,9 +15,9 @@ export const MRT_FullScreenToggleButton: FC<Props> = ({ ...rest }) => {
   } = useMRT();
 
   return (
-    <Tooltip arrow title={localization.toggleFullScreenButtonTitle}>
+    <Tooltip arrow title={localization.toggleFullScreen}>
       <IconButton
-        aria-label={localization.toggleFilterButtonTitle}
+        aria-label={localization.showHideFilters}
         onClick={() => setFullScreen(!fullScreen)}
         size="small"
         {...rest}

package/src/buttons/MRT_ShowHideColumnsButton.tsx

@@ -1,16 +1,7 @@
 import React, { FC, MouseEvent, useState } from 'react';
-import {
-  Button,
-  IconButton,
-  Menu,
-  Tooltip,
-  Divider,
-  IconButtonProps,
-  Box,
-} from '@mui/material';
+import { IconButton, Tooltip, IconButtonProps } from '@mui/material';
 import { useMRT } from '../useMRT';
 import { MRT_ShowHideColumnsMenu } from '../menus/MRT_ShowHideColumnsMenu';
-import { MRT_ColumnInstance } from '..';
 
 interface Props extends IconButtonProps {}
 
@@ -18,7 +9,6 @@ export const MRT_ShowHideColumnsButton: FC<Props> = ({ ...rest }) => {
   const {
     icons: { ViewColumnIcon },
     localization,
-    tableInstance,
   } = useMRT();
 
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
@@ -29,9 +19,9 @@ export const MRT_ShowHideColumnsButton: FC<Props> = ({ ...rest }) => {
 
   return (
     <>
-      <Tooltip arrow title={localization.showHideColumnsButtonTitle}>
+      <Tooltip arrow title={localization.showHideColumns}>
         <IconButton
-          aria-label={localization.showHideColumnsButtonTitle}
+          aria-label={localization.showHideColumns}
           onClick={handleClick}
           size="small"
           {...rest}
@@ -39,45 +29,7 @@ export const MRT_ShowHideColumnsButton: FC<Props> = ({ ...rest }) => {
           <ViewColumnIcon />
         </IconButton>
       </Tooltip>
-      <Menu
-        anchorEl={anchorEl}
-        open={!!anchorEl}
-        onClose={() => setAnchorEl(null)}
-        MenuListProps={{
-          dense: tableInstance.state.densePadding,
-        }}
-      >
-        <Box
-          sx={{
-            display: 'flex',
-            justifyContent: 'space-between',
-            p: '0.5rem',
-          }}
-        >
-          <Button
-            disabled={
-              !tableInstance.getToggleHideAllColumnsProps().checked &&
-              !tableInstance.getToggleHideAllColumnsProps().indeterminate
-            }
-            onClick={() => tableInstance.toggleHideAllColumns(true)}
-          >
-            {localization.columnShowHideMenuHideAll}
-          </Button>
-          <Button
-            disabled={tableInstance.getToggleHideAllColumnsProps().checked}
-            onClick={() => tableInstance.toggleHideAllColumns(false)}
-          >
-            {localization.columnShowHideMenuShowAll}
-          </Button>
-        </Box>
-        <Divider />
-        {tableInstance.columns.map((column: MRT_ColumnInstance, index) => (
-          <MRT_ShowHideColumnsMenu
-            key={`${index}-${column.id}`}
-            column={column}
-          />
-        ))}
-      </Menu>
+      <MRT_ShowHideColumnsMenu anchorEl={anchorEl} setAnchorEl={setAnchorEl} />
     </>
   );
 };

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,10 +28,11 @@ export const MRT_ToggleColumnActionMenuButton: FC<Props> = ({ column }) => {
         arrow
         enterDelay={1000}
         enterNextDelay={1000}
-        title={localization.columnActionMenuButtonTitle}
+        placement="top"
+        title={localization.columnActions}
       >
         <IconButton
-          aria-label={localization.columnActionMenuButtonTitle}
+          aria-label={localization.columnActions}
           onClick={handleClick}
           size="small"
           sx={{

package/src/buttons/MRT_ToggleDensePaddingButton.tsx

@@ -15,9 +15,9 @@ export const MRT_ToggleDensePaddingButton: FC<Props> = ({ ...rest }) => {
   } = useMRT();
 
   return (
-    <Tooltip arrow title={localization.toggleDensePaddingSwitchTitle}>
+    <Tooltip arrow title={localization.toggleDensePadding}>
       <IconButton
-        aria-label={localization.toggleDensePaddingSwitchTitle}
+        aria-label={localization.toggleDensePadding}
         onClick={() => setDensePadding(!densePadding)}
         size="small"
         {...rest}

package/src/buttons/MRT_ToggleFiltersButton.tsx

@@ -15,9 +15,9 @@ export const MRT_ToggleFiltersButton: FC<Props> = ({ ...rest }) => {
   } = useMRT();
 
   return (
-    <Tooltip arrow title={localization.toggleFilterButtonTitle}>
+    <Tooltip arrow title={localization.showHideFilters}>
       <IconButton
-        aria-label={localization.toggleFilterButtonTitle}
+        aria-label={localization.showHideFilters}
         onClick={() => setShowFilters(!showFilters)}
         size="small"
         {...rest}

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 = {
@@ -54,11 +54,7 @@ export const MRT_ToggleRowActionMenuButton: FC<Props> = ({ row }) => {
       ) : row.id === tableInstance.state.currentEditingRow?.id ? (
         <MRT_EditActionButtons row={row} />
       ) : !renderRowActionMenuItems && enableRowEditing ? (
-        <Tooltip
-          placement="right"
-          arrow
-          title={localization.rowActionMenuItemEdit}
-        >
+        <Tooltip placement="right" arrow title={localization.edit}>
           <IconButton sx={commonIconButtonStyles} onClick={handleEdit}>
             <EditIcon />
           </IconButton>
@@ -69,10 +65,10 @@ export const MRT_ToggleRowActionMenuButton: FC<Props> = ({ row }) => {
             arrow
             enterDelay={1000}
             enterNextDelay={1000}
-            title={localization.rowActionMenuButtonTitle}
+            title={localization.rowActions}
           >
             <IconButton
-              aria-label={localization.rowActionMenuButtonTitle}
+              aria-label={localization.rowActions}
               onClick={handleOpenRowActionMenu}
               size="small"
               sx={commonIconButtonStyles}

package/src/buttons/MRT_ToggleSearchButton.tsx

@@ -30,7 +30,7 @@ export const MRT_ToggleSearchButton: FC<Props> = ({ ...rest }) => {
   };
 
   return (
-    <Tooltip arrow title={localization.toggleSearchButtonTitle}>
+    <Tooltip arrow title={localization.showHideSearch}>
       <IconButton size="small" onClick={handleToggleSearch} {...rest}>
         {showSearch ? <SearchOffIcon /> : <SearchIcon />}
       </IconButton>

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,
@@ -118,6 +146,9 @@ export const defaultFilterFNs = {
   endsWith: endsWithFilterFN,
   equals: equalsFilterFN,
   fuzzy: fuzzyFilterFN,
+  globalFuzzy: fuzzySearchFN,
+  greaterThan: greaterThanFilterFN,
+  lessThan: lessThanFilterFN,
   notEmpty: notEmptyFilterFN,
   notEquals: notEqualsFilterFN,
   startsWith: startsWithFilterFN,

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,
@@ -66,21 +66,34 @@ export const MRT_TableHeadCell: FC<Props> = ({ column }) => {
 
   const sortTooltip = column.isSorted
     ? column.isSortedDesc
-      ? localization.columnActionMenuItemClearSort
-      : localization.columnActionMenuItemSortDesc?.replace(
+      ? localization.clearSort
+      : localization.sortByColumnDesc?.replace(
           '{column}',
           column.Header as string,
         )
-    : localization.columnActionMenuItemSortAsc?.replace(
+    : localization.sortByColumnAsc?.replace(
         '{column}',
         column.Header as string,
       );
 
+  const filterType = tableInstance.state.currentFilterTypes[column.id];
+
   const filterTooltip = !!column.filterValue
-    ? localization.filterApplied
+    ? localization.filteringByColumn
         .replace('{column}', String(column.Header))
-        .replace('{filterType}', column.filterValue)
-    : localization.toggleFilterButtonTitle;
+        .replace(
+          '{filterType}',
+          filterType instanceof Function
+            ? ''
+            : // @ts-ignore
+              localization[
+                `filter${
+                  filterType.charAt(0).toUpperCase() + filterType.slice(1)
+                }`
+              ],
+        )
+        .replace('{filterValue}', column.filterValue)
+    : localization.showHideFilters;
 
   const columnHeader = column.render('Header') as string;
 

package/src/head/MRT_TableHeadCellActions.tsx

@@ -18,7 +18,7 @@ export const MRT_TableHeadCellActions: FC<Props> = () => {
       style={{ textAlign: 'center' }}
       sx={{ ...commonTableHeadCellStyles(densePadding), textAlign: 'center' }}
     >
-      {localization.actionsHeadColumnTitle}
+      {localization.actions}
     </TableCell>
   );
 };

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;