material-react-table 0.5.8 → 0.6.1

package/src/menus/MRT_ShowHideColumnsMenu.tsx

@@ -1,48 +1,65 @@
 import React, { FC } from 'react';
-import { FormControlLabel, MenuItem, Switch } from '@mui/material';
-import { ColumnInstance } from 'react-table';
-import { MRT_ColumnInstance } from '..';
-import { commonMenuItemStyles } from './MRT_ColumnActionMenu';
+import { Button, Menu, Divider, Box } from '@mui/material';
+import type { MRT_ColumnInstance } from '..';
+import { useMRT } from '../useMRT';
+import { MRT_ShowHideColumnsMenuItems } from './MRT_ShowHideColumnsMenuItems';
 
 interface Props {
-  column: MRT_ColumnInstance;
+  anchorEl: HTMLElement | null;
+  isSubMenu?: boolean;
+  setAnchorEl: (anchorEl: HTMLElement | null) => void;
 }
 
-export const MRT_ShowHideColumnsMenu: FC<Props> = ({ column }) => {
-  const isParentHeader = !!column?.columns?.length;
-
-  const allChildColumnsVisible =
-    isParentHeader &&
-    !!column.columns?.every((childColumn) => childColumn.isVisible);
-
-  const switchChecked = column.isVisible ?? allChildColumnsVisible;
-
-  const handleToggleColumnHidden = (column: ColumnInstance) => {
-    if (isParentHeader) {
-      column?.columns?.forEach?.((childColumn) => {
-        childColumn.toggleHidden(switchChecked);
-      });
-    } else {
-      column.toggleHidden();
-    }
-  };
+export const MRT_ShowHideColumnsMenu: FC<Props> = ({
+  anchorEl,
+  isSubMenu,
+  setAnchorEl,
+}) => {
+  const { localization, tableInstance } = useMRT();
 
   return (
-    <>
-      <MenuItem
-        sx={{ ...commonMenuItemStyles, pl: `${(column.depth + 0.5) * 2}rem` }}
+    <Menu
+      anchorEl={anchorEl}
+      open={!!anchorEl}
+      onClose={() => setAnchorEl(null)}
+      MenuListProps={{
+        dense: tableInstance.state.densePadding,
+      }}
+    >
+      <Box
+        sx={{
+          display: 'flex',
+          justifyContent: isSubMenu ? 'center' : 'space-between',
+          p: '0.5rem',
+          pt: 0,
+        }}
       >
-        <FormControlLabel
-          componentsProps={{ typography: { sx: { marginBottom: 0 } } }}
-          checked={switchChecked}
-          control={<Switch />}
-          label={column.Header as string}
-          onChange={() => handleToggleColumnHidden(column)}
+        {!isSubMenu && (
+          <Button
+            disabled={
+              !tableInstance.getToggleHideAllColumnsProps().checked &&
+              !tableInstance.getToggleHideAllColumnsProps().indeterminate
+            }
+            onClick={() => tableInstance.toggleHideAllColumns(true)}
+          >
+            {localization.hideAll}
+          </Button>
+        )}
+        <Button
+          disabled={tableInstance.getToggleHideAllColumnsProps().checked}
+          onClick={() => tableInstance.toggleHideAllColumns(false)}
+        >
+          {localization.showAll}
+        </Button>
+      </Box>
+      <Divider />
+      {tableInstance.columns.map((column: MRT_ColumnInstance, index) => (
+        <MRT_ShowHideColumnsMenuItems
+          column={column}
+          isSubMenu={isSubMenu}
+          key={`${index}-${column.id}`}
         />
-      </MenuItem>
-      {column.columns?.map((c: MRT_ColumnInstance, i) => (
-        <MRT_ShowHideColumnsMenu key={`${i}-${c.id}`} column={c} />
       ))}
-    </>
+    </Menu>
   );
 };

package/src/menus/MRT_ShowHideColumnsMenuItems.tsx

@@ -0,0 +1,57 @@
+import React, { FC } from 'react';
+import { FormControlLabel, MenuItem, Switch } from '@mui/material';
+import { ColumnInstance } from 'react-table';
+import type { MRT_ColumnInstance } from '..';
+import { commonMenuItemStyles } from './MRT_ColumnActionMenu';
+
+interface Props {
+  column: MRT_ColumnInstance;
+  isSubMenu?: boolean;
+}
+
+export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
+  column,
+  isSubMenu,
+}) => {
+  const isParentHeader = !!column?.columns?.length;
+
+  const allChildColumnsVisible =
+    isParentHeader &&
+    !!column.columns?.every((childColumn) => childColumn.isVisible);
+
+  const switchChecked = column.isVisible ?? allChildColumnsVisible;
+
+  const handleToggleColumnHidden = (column: ColumnInstance) => {
+    if (isParentHeader) {
+      column?.columns?.forEach?.((childColumn) => {
+        childColumn.toggleHidden(switchChecked);
+      });
+    } else {
+      column.toggleHidden();
+    }
+  };
+
+  return (
+    <>
+      <MenuItem
+        sx={{ ...commonMenuItemStyles, pl: `${(column.depth + 0.5) * 2}rem` }}
+      >
+        <FormControlLabel
+          componentsProps={{ typography: { sx: { marginBottom: 0 } } }}
+          checked={switchChecked}
+          control={<Switch />}
+          disabled={isSubMenu && switchChecked}
+          label={column.Header as string}
+          onChange={() => handleToggleColumnHidden(column)}
+        />
+      </MenuItem>
+      {column.columns?.map((c: MRT_ColumnInstance, i) => (
+        <MRT_ShowHideColumnsMenuItems
+          key={`${i}-${c.id}`}
+          column={c}
+          isSubMenu={isSubMenu}
+        />
+      ))}
+    </>
+  );
+};

package/src/toolbar/MRT_ToolbarAlertBanner.tsx

@@ -23,7 +23,7 @@ export const MRT_ToolbarAlertBanner: FC<Props> = () => {
 
   const selectMessage =
     tableInstance.selectedFlatRows.length > 0
-      ? localization.toolbarAlertSelectionMessage
+      ? localization.selectedCountOfRowCountRowsSelected
           ?.replace(
             '{selectedCount}',
             tableInstance.selectedFlatRows.length.toString(),
@@ -34,10 +34,10 @@ export const MRT_ToolbarAlertBanner: FC<Props> = () => {
   const groupedByMessage =
     tableInstance.state.groupBy.length > 0 ? (
       <span>
-        {localization.toolbarAlertGroupedByMessage}{' '}
+        {localization.groupedBy}{' '}
         {tableInstance.state.groupBy.map((columnId, index) => (
           <Fragment key={`${index}-${columnId}`}>
-            {index > 0 ? localization.toolbarAlertGroupedThenByMessage : ''}
+            {index > 0 ? localization.thenBy : ''}
             <Chip
               color="secondary"
               label={

package/src/useMRT.tsx

@@ -7,6 +7,7 @@ import React, {
   useState,
   Dispatch,
   SetStateAction,
+  useCallback,
 } from 'react';
 import {
   PluginHook,
@@ -21,7 +22,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,12 +93,28 @@ export const MaterialReactTableProvider = <D extends {} = {}>(
     [props.filterTypes],
   );
 
+  const findLowestLevelCols = useCallback(() => {
+    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;
+    }
+    return lowestLevelColumns.filter((col) => !col.columns);
+  }, [props.columns]);
+
   const [currentFilterTypes, setCurrentFilterTypes] = useState<{
     [key: string]: MRT_FilterType;
   }>(() =>
     Object.assign(
       {},
-      ...props.columns.map((c) => ({
+      ...findLowestLevelCols().map((c) => ({
         [c.accessor as string]:
           c.filter ??
           props?.initialState?.filters?.[c.accessor as any] ??
@@ -107,7 +125,7 @@ export const MaterialReactTableProvider = <D extends {} = {}>(
 
   const columns = useMemo(
     () =>
-      props.columns.map((column) => {
+      findLowestLevelCols().map((column) => {
         column.filter =
           filterTypes[
             currentFilterTypes[column.accessor as string] as MRT_FILTER_TYPE
@@ -123,7 +141,7 @@ export const MaterialReactTableProvider = <D extends {} = {}>(
       columns,
       // @ts-ignore
       filterTypes,
-      globalFilterValue: 'fuzzy',
+      globalFilter: props.globalFilter ?? 'globalFuzzy',
       useControlledState: (state) =>
         useMemo(
           () => ({