material-react-table 0.6.3 → 0.6.6

package/src/menus/MRT_FilterTypeMenu.tsx

@@ -4,16 +4,16 @@ import { useMRT } from '../useMRT';
 import type { MRT_FilterType, MRT_HeaderGroup } from '..';
 import { MRT_FILTER_TYPE } from '../enums';
 import {
-  containsFilterFN,
-  emptyFilterFN,
-  endsWithFilterFN,
-  equalsFilterFN,
-  fuzzyFilterFN,
-  greaterThanFilterFN,
-  lessThanFilterFN,
-  notEmptyFilterFN,
-  notEqualsFilterFN,
-  startsWithFilterFN,
+  contains,
+  empty,
+  endsWith,
+  equals,
+  fuzzy,
+  greaterThan,
+  lessThan,
+  notEmpty,
+  notEquals,
+  startsWith,
 } from '../filtersFNs';
 
 const commonMenuItemStyles = {
@@ -43,68 +43,72 @@ export const MRT_FilterTypeMenu: FC<Props> = ({
     divider: boolean;
     fn: Function;
   }[] = useMemo(
-    () => [
-      {
-        type: MRT_FILTER_TYPE.FUZZY,
-        label: localization.filterFuzzy,
-        divider: false,
-        fn: fuzzyFilterFN,
-      },
-      {
-        type: MRT_FILTER_TYPE.CONTAINS,
-        label: localization.filterContains,
-        divider: true,
-        fn: containsFilterFN,
-      },
-      {
-        type: MRT_FILTER_TYPE.STARTS_WITH,
-        label: localization.filterStartsWith,
-        divider: false,
-        fn: startsWithFilterFN,
-      },
-      {
-        type: MRT_FILTER_TYPE.ENDS_WITH,
-        label: localization.filterEndsWith,
-        divider: true,
-        fn: endsWithFilterFN,
-      },
-      {
-        type: MRT_FILTER_TYPE.EQUALS,
-        label: localization.filterEquals,
-        divider: false,
-        fn: equalsFilterFN,
-      },
-      {
-        type: MRT_FILTER_TYPE.NOT_EQUALS,
-        label: localization.filterNotEquals,
-        divider: true,
-        fn: notEqualsFilterFN,
-      },
-      {
-        type: MRT_FILTER_TYPE.GREATER_THAN,
-        label: localization.filterGreaterThan,
-        divider: false,
-        fn: greaterThanFilterFN,
-      },
-      {
-        type: MRT_FILTER_TYPE.LESS_THAN,
-        label: localization.filterLessThan,
-        divider: true,
-        fn: lessThanFilterFN,
-      },
-      {
-        type: MRT_FILTER_TYPE.EMPTY,
-        label: localization.filterEmpty,
-        divider: false,
-        fn: emptyFilterFN,
-      },
-      {
-        type: MRT_FILTER_TYPE.NOT_EMPTY,
-        label: localization.filterNotEmpty,
-        divider: false,
-        fn: notEmptyFilterFN,
-      },
-    ],
+    () =>
+      [
+        {
+          type: MRT_FILTER_TYPE.FUZZY,
+          label: localization.filterFuzzy,
+          divider: false,
+          fn: fuzzy,
+        },
+        {
+          type: MRT_FILTER_TYPE.CONTAINS,
+          label: localization.filterContains,
+          divider: true,
+          fn: contains,
+        },
+        {
+          type: MRT_FILTER_TYPE.STARTS_WITH,
+          label: localization.filterStartsWith,
+          divider: false,
+          fn: startsWith,
+        },
+        {
+          type: MRT_FILTER_TYPE.ENDS_WITH,
+          label: localization.filterEndsWith,
+          divider: true,
+          fn: endsWith,
+        },
+        {
+          type: MRT_FILTER_TYPE.EQUALS,
+          label: localization.filterEquals,
+          divider: false,
+          fn: equals,
+        },
+        {
+          type: MRT_FILTER_TYPE.NOT_EQUALS,
+          label: localization.filterNotEquals,
+          divider: true,
+          fn: notEquals,
+        },
+        {
+          type: MRT_FILTER_TYPE.GREATER_THAN,
+          label: localization.filterGreaterThan,
+          divider: false,
+          fn: greaterThan,
+        },
+        {
+          type: MRT_FILTER_TYPE.LESS_THAN,
+          label: localization.filterLessThan,
+          divider: true,
+          fn: lessThan,
+        },
+        {
+          type: MRT_FILTER_TYPE.EMPTY,
+          label: localization.filterEmpty,
+          divider: false,
+          fn: empty,
+        },
+        {
+          type: MRT_FILTER_TYPE.NOT_EMPTY,
+          label: localization.filterNotEmpty,
+          divider: false,
+          fn: notEmpty,
+        },
+      ].filter(
+        (filterType) =>
+          !column.filterTypes || column.filterTypes.includes(filterType.type),
+      ),
     [],
   );
 

package/src/menus/MRT_RowActionMenu.tsx

@@ -1,8 +1,11 @@
 import React, { FC } from 'react';
-import { Menu, MenuItem } from '@mui/material';
+import { Box, ListItemIcon, Menu, MenuItem } from '@mui/material';
 import { useMRT } from '../useMRT';
 import type { MRT_Row } from '..';
-import { commonMenuItemStyles } from './MRT_ColumnActionMenu';
+import {
+  commonListItemStyles,
+  commonMenuItemStyles,
+} from './MRT_ColumnActionMenu';
 
 interface Props {
   anchorEl: HTMLElement | null;
@@ -36,8 +39,12 @@ export const MRT_RowActionMenu: FC<Props> = ({
     >
       {enableRowEditing && (
         <MenuItem onClick={handleEdit} sx={commonMenuItemStyles}>
-          <EditIcon />
-          {localization.edit}
+          <Box sx={commonListItemStyles}>
+            <ListItemIcon>
+              <EditIcon />
+            </ListItemIcon>
+            {localization.edit}
+          </Box>
         </MenuItem>
       )}
       {renderRowActionMenuItems?.(row, tableInstance, () =>

package/src/menus/MRT_ShowHideColumnsMenuItems.tsx

@@ -3,6 +3,7 @@ import { FormControlLabel, MenuItem, Switch } from '@mui/material';
 import { ColumnInstance } from 'react-table';
 import type { MRT_ColumnInstance } from '..';
 import { commonMenuItemStyles } from './MRT_ColumnActionMenu';
+import { useMRT } from '../useMRT';
 
 interface Props {
   column: MRT_ColumnInstance;
@@ -13,6 +14,7 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
   column,
   isSubMenu,
 }) => {
+  const { onColumnHide, tableInstance } = useMRT();
   const isParentHeader = !!column?.columns?.length;
 
   const allChildColumnsVisible =
@@ -29,6 +31,7 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
     } else {
       column.toggleHidden();
     }
+    onColumnHide?.(column, tableInstance.state.hiddenColumns);
   };
 
   return (

package/src/table/MRT_TableContainer.tsx

@@ -40,7 +40,7 @@ export const MRT_TableContainer: FC<Props> = () => {
         height: fullScreen ? '100%' : undefined,
         left: fullScreen ? '0' : undefined,
         m: fullScreen ? '0' : undefined,
-        overflowY: 'hidden',
+        overflowY: !fullScreen ? 'hidden' : undefined,
         position: fullScreen ? 'fixed' : undefined,
         right: fullScreen ? '0' : undefined,
         top: fullScreen ? '0' : undefined,

package/src/useMRT.tsx

@@ -128,7 +128,7 @@ export const MaterialReactTableProvider = <D extends {} = {}>(
     () =>
       !props.isLoading || !!props.data.length
         ? props.data
-        : [...Array(10)].map((_) =>
+        : [...Array(10).fill(null)].map((_) =>
             Object.assign(
               {},
               ...findLowestLevelCols(props.columns).map((c) => ({