material-react-table 0.6.9 → 0.7.0-alpha.2

package/src/menus/MRT_ColumnActionMenu.tsx

@@ -1,7 +1,6 @@
 import React, { FC, useState } from 'react';
 import { Box, IconButton, ListItemIcon, Menu, MenuItem } from '@mui/material';
-import { useMRT } from '../useMRT';
-import type { MRT_HeaderGroup } from '..';
+import type { MRT_Header, MRT_TableInstance } from '..';
 import { MRT_FilterTypeMenu } from './MRT_FilterTypeMenu';
 import { MRT_ShowHideColumnsMenu } from './MRT_ShowHideColumnsMenu';
 
@@ -19,35 +18,47 @@ export const commonListItemStyles = {
 
 interface Props {
   anchorEl: HTMLElement | null;
-  column: MRT_HeaderGroup;
+  header: MRT_Header;
   setAnchorEl: (anchorEl: HTMLElement | null) => void;
+  tableInstance: MRT_TableInstance;
 }
 
 export const MRT_ColumnActionMenu: FC<Props> = ({
   anchorEl,
-  column,
+  header,
   setAnchorEl,
+  tableInstance,
 }) => {
   const {
-    disableColumnHiding,
-    disableFilters,
-    disableSortBy,
-    enableColumnGrouping,
-    icons: {
-      ArrowRightIcon,
-      ClearAllIcon,
-      ViewColumnIcon,
-      DynamicFeedIcon,
-      FilterListIcon,
-      FilterListOffIcon,
-      SortIcon,
-      VisibilityOffIcon,
+    getState,
+    toggleAllColumnsVisible,
+    setColumnOrder,
+    options: {
+      enableColumnFilters,
+      enableColumnPinning,
+      enableGrouping,
+      enableHiding,
+      enableSorting,
+      icons: {
+        ArrowRightIcon,
+        ClearAllIcon,
+        ViewColumnIcon,
+        DynamicFeedIcon,
+        FilterListIcon,
+        FilterListOffIcon,
+        PushPinIcon,
+        SortIcon,
+        VisibilityOffIcon,
+      },
+      idPrefix,
+      localization,
+      setShowFilters,
     },
-    idPrefix,
-    localization,
-    setShowFilters,
-    tableInstance,
-  } = useMRT();
+  } = tableInstance;
+
+  const { column } = header;
+
+  const { isDensePadding, columnVisibility } = getState();
 
   const [filterMenuAnchorEl, setFilterMenuAnchorEl] =
     useState<null | HTMLElement>(null);
@@ -56,32 +67,37 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
     useState<null | HTMLElement>(null);
 
   const handleClearSort = () => {
-    column.clearSortBy();
+    column.resetSorting();
     setAnchorEl(null);
   };
 
   const handleSortAsc = () => {
-    column.toggleSortBy(false);
+    column.toggleSorting(false);
     setAnchorEl(null);
   };
 
   const handleSortDesc = () => {
-    column.toggleSortBy(true);
+    column.toggleSorting(true);
     setAnchorEl(null);
   };
 
   const handleHideColumn = () => {
-    column.toggleHidden();
+    column.toggleVisibility(false);
     setAnchorEl(null);
   };
 
+  const handlePinColumn = (pinDirection: 'left' | 'right' | false) => {
+    column.pin(pinDirection);
+  };
+
   const handleGroupByColumn = () => {
-    column.toggleGroupBy();
+    column.toggleGrouping();
+    setColumnOrder((old) => ['mrt-expand', ...old]);
     setAnchorEl(null);
   };
 
   const handleClearFilter = () => {
-    column.setFilter('');
+    column.setColumnFilterValue('');
     setAnchorEl(null);
   };
 
@@ -92,8 +108,8 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
         document
           .getElementById(
             // @ts-ignore
-            column.muiTableHeadCellFilterTextFieldProps?.id ??
-              `mrt-${idPrefix}-${column.id}-filter-text-field`,
+            header.muiTableHeadCellFilterTextFieldProps?.id ??
+              `mrt-${idPrefix}-${header.id}-filter-text-field`,
           )
           ?.focus(),
       200,
@@ -102,7 +118,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
   };
 
   const handleShowAllColumns = () => {
-    tableInstance.toggleHideAllColumns(false);
+    toggleAllColumnsVisible(true);
     setAnchorEl(null);
   };
 
@@ -124,13 +140,13 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
       open={!!anchorEl}
       onClose={() => setAnchorEl(null)}
       MenuListProps={{
-        dense: tableInstance.state.densePadding,
+        dense: isDensePadding,
       }}
     >
-      {!disableSortBy &&
-        column.canSort && [
+      {enableSorting &&
+        column.getCanSort() && [
           <MenuItem
-            disabled={!column.isSorted}
+            disabled={!column.getIsSorted()}
             key={0}
             onClick={handleClearSort}
             sx={commonMenuItemStyles}
@@ -143,7 +159,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
             </Box>
           </MenuItem>,
           <MenuItem
-            disabled={column.isSorted && !column.isSortedDesc}
+            disabled={column.getIsSorted() === 'asc'}
             key={1}
             onClick={handleSortAsc}
             sx={commonMenuItemStyles}
@@ -154,16 +170,14 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
               </ListItemIcon>
               {localization.sortByColumnAsc?.replace(
                 '{column}',
-                String(column.Header),
+                String(column.header),
               )}
             </Box>
           </MenuItem>,
           <MenuItem
-            divider={
-              !disableFilters || enableColumnGrouping || !disableColumnHiding
-            }
+            divider={enableColumnFilters || enableGrouping || enableHiding}
             key={2}
-            disabled={column.isSorted && column.isSortedDesc}
+            disabled={column.getIsSorted() === 'desc'}
             onClick={handleSortDesc}
             sx={commonMenuItemStyles}
           >
@@ -173,15 +187,15 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
               </ListItemIcon>
               {localization.sortByColumnDesc?.replace(
                 '{column}',
-                String(column.Header),
+                String(column.header),
               )}
             </Box>
           </MenuItem>,
         ]}
-      {!disableFilters &&
-        column.canFilter && [
+      {enableColumnFilters &&
+        column.getCanColumnFilter() && [
           <MenuItem
-            disabled={!column.filterValue}
+            disabled={!column.getColumnFilterValue()}
             key={0}
             onClick={handleClearFilter}
             sx={commonMenuItemStyles}
@@ -194,7 +208,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
             </Box>
           </MenuItem>,
           <MenuItem
-            divider={enableColumnGrouping || !disableColumnHiding}
+            divider={enableGrouping || enableHiding}
             key={1}
             onClick={handleFilterByColumn}
             sx={commonMenuItemStyles}
@@ -205,7 +219,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
               </ListItemIcon>
               {localization.filterByColumn?.replace(
                 '{column}',
-                String(column.Header),
+                String(column.header),
               )}
             </Box>
             {!column.filterSelectOptions && (
@@ -221,16 +235,17 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
           </MenuItem>,
           <MRT_FilterTypeMenu
             anchorEl={filterMenuAnchorEl}
-            column={column}
+            header={header}
             key={2}
-            setAnchorEl={setFilterMenuAnchorEl}
             onSelect={handleFilterByColumn}
+            setAnchorEl={setFilterMenuAnchorEl}
+            tableInstance={tableInstance}
           />,
         ]}
-      {enableColumnGrouping &&
-        column.canGroupBy && [
+      {enableGrouping &&
+        column.getCanGroup() && [
           <MenuItem
-            divider={!disableColumnHiding}
+            divider={enableColumnPinning}
             key={0}
             onClick={handleGroupByColumn}
             sx={commonMenuItemStyles}
@@ -240,14 +255,57 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
                 <DynamicFeedIcon />
               </ListItemIcon>
               {localization[
-                column.isGrouped ? 'ungroupByColumn' : 'groupByColumn'
-              ]?.replace('{column}', String(column.Header))}
+                column.getIsGrouped() ? 'ungroupByColumn' : 'groupByColumn'
+              ]?.replace('{column}', String(column.header))}
             </Box>
           </MenuItem>,
         ]}
-      {!disableColumnHiding && [
+      {enableColumnPinning &&
+        column.getCanPin() && [
+          <MenuItem
+            disabled={column.getIsPinned() === 'left'}
+            key={0}
+            onClick={() => handlePinColumn('left')}
+            sx={commonMenuItemStyles}
+          >
+            <Box sx={commonListItemStyles}>
+              <ListItemIcon>
+                <PushPinIcon style={{ transform: 'rotate(90deg)' }} />
+              </ListItemIcon>
+              {localization.pinToLeft}
+            </Box>
+          </MenuItem>,
+          <MenuItem
+            disabled={column.getIsPinned() === 'right'}
+            key={0}
+            onClick={() => handlePinColumn('right')}
+            sx={commonMenuItemStyles}
+          >
+            <Box sx={commonListItemStyles}>
+              <ListItemIcon>
+                <PushPinIcon style={{ transform: 'rotate(-90deg)' }} />
+              </ListItemIcon>
+              {localization.pinToRight}
+            </Box>
+          </MenuItem>,
+          <MenuItem
+            disabled={!column.getIsPinned()}
+            divider={enableHiding}
+            key={0}
+            onClick={() => handlePinColumn(false)}
+            sx={commonMenuItemStyles}
+          >
+            <Box sx={commonListItemStyles}>
+              <ListItemIcon>
+                <PushPinIcon />
+              </ListItemIcon>
+              {localization.unpin}
+            </Box>
+          </MenuItem>,
+        ]}
+      {enableHiding && [
         <MenuItem
-          disabled={column.disableColumnHiding}
+          disabled={column.enableHiding === false}
           key={0}
           onClick={handleHideColumn}
           sx={commonMenuItemStyles}
@@ -258,12 +316,15 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
             </ListItemIcon>
             {localization.hideColumn?.replace(
               '{column}',
-              String(column.Header),
+              String(column.header),
             )}
           </Box>
         </MenuItem>,
         <MenuItem
-          disabled={!tableInstance.state.hiddenColumns?.length}
+          disabled={
+            !Object.values(columnVisibility).filter((visible) => !visible)
+              .length
+          }
           key={1}
           onClick={handleShowAllColumns}
           sx={commonMenuItemStyles}
@@ -274,25 +335,24 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
             </ListItemIcon>
             {localization.showAllColumns?.replace(
               '{column}',
-              String(column.Header),
+              String(column.header),
             )}
           </Box>
-          {!column.filterSelectOptions && (
-            <IconButton
-              onClick={handleOpenShowHideColumnsMenu}
-              onMouseEnter={handleOpenShowHideColumnsMenu}
-              size="small"
-              sx={{ p: 0 }}
-            >
-              <ArrowRightIcon />
-            </IconButton>
-          )}
+          <IconButton
+            onClick={handleOpenShowHideColumnsMenu}
+            onMouseEnter={handleOpenShowHideColumnsMenu}
+            size="small"
+            sx={{ p: 0 }}
+          >
+            <ArrowRightIcon />
+          </IconButton>
         </MenuItem>,
         <MRT_ShowHideColumnsMenu
           anchorEl={showHideColumnsMenuAnchorEl}
           isSubMenu
           key={2}
           setAnchorEl={setShowHideColumnsMenuAnchorEl}
+          tableInstance={tableInstance}
         />,
       ]}
     </Menu>

package/src/menus/MRT_FilterTypeMenu.tsx

@@ -1,14 +1,14 @@
 import React, { FC, useMemo } from 'react';
 import { Menu, MenuItem } from '@mui/material';
-import { useMRT } from '../useMRT';
-import type { MRT_FilterType, MRT_HeaderGroup } from '..';
+import type { MRT_FilterType, MRT_Header, MRT_TableInstance } from '..';
 import { MRT_FILTER_TYPE } from '../enums';
 import {
+  bestMatch,
+  bestMatchFirst,
   contains,
   empty,
   endsWith,
   equals,
-  fuzzy,
   greaterThan,
   lessThan,
   notEmpty,
@@ -24,18 +24,31 @@ const commonMenuItemStyles = {
 
 interface Props {
   anchorEl: HTMLElement | null;
-  column: MRT_HeaderGroup;
-  setAnchorEl: (anchorEl: HTMLElement | null) => void;
+  header?: MRT_Header;
   onSelect?: () => void;
+  setAnchorEl: (anchorEl: HTMLElement | null) => void;
+  tableInstance: MRT_TableInstance;
 }
 
 export const MRT_FilterTypeMenu: FC<Props> = ({
   anchorEl,
-  column,
+  header,
   onSelect,
   setAnchorEl,
+  tableInstance,
 }) => {
-  const { localization, setCurrentFilterTypes, tableInstance } = useMRT();
+  const {
+    getState,
+    options: {
+      enabledGlobalFilterTypes,
+      localization,
+      setCurrentFilterTypes,
+      setCurrentGlobalFilterType,
+    },
+  } = tableInstance;
+
+  const { isDensePadding, currentFilterTypes, currentGlobalFilterType } =
+    getState();
 
   const filterTypes: {
     type: MRT_FILTER_TYPE;
@@ -46,15 +59,21 @@ export const MRT_FilterTypeMenu: FC<Props> = ({
     () =>
       [
         {
-          type: MRT_FILTER_TYPE.FUZZY,
-          label: localization.filterFuzzy,
+          type: MRT_FILTER_TYPE.BEST_MATCH_FIRST,
+          label: localization.filterBestMatchFirst,
           divider: false,
-          fn: fuzzy,
+          fn: bestMatchFirst,
+        },
+        {
+          type: MRT_FILTER_TYPE.BEST_MATCH,
+          label: localization.filterBestMatch,
+          divider: !!header,
+          fn: bestMatch,
         },
         {
           type: MRT_FILTER_TYPE.CONTAINS,
           label: localization.filterContains,
-          divider: true,
+          divider: false,
           fn: contains,
         },
         {
@@ -105,26 +124,39 @@ export const MRT_FilterTypeMenu: FC<Props> = ({
           divider: false,
           fn: notEmpty,
         },
-      ].filter(
-        (filterType) =>
-          !column.filterTypes || column.filterTypes.includes(filterType.type),
+      ].filter((filterType) =>
+        header
+          ? !header.column.enabledFilterTypes ||
+            header.column.enabledFilterTypes.includes(filterType.type)
+          : (!enabledGlobalFilterTypes ||
+              enabledGlobalFilterTypes.includes(filterType.type)) &&
+            [
+              MRT_FILTER_TYPE.BEST_MATCH_FIRST,
+              MRT_FILTER_TYPE.BEST_MATCH,
+            ].includes(filterType.type),
       ),
     [],
   );
 
   const handleSelectFilterType = (value: MRT_FILTER_TYPE) => {
-    setAnchorEl(null);
-    setCurrentFilterTypes((prev: { [key: string]: MRT_FilterType }) => ({
-      ...prev,
-      [column.id]: value,
-    }));
-    if ([MRT_FILTER_TYPE.EMPTY, MRT_FILTER_TYPE.NOT_EMPTY].includes(value)) {
-      column.setFilter(' ');
+    if (header) {
+      setCurrentFilterTypes((prev: { [key: string]: MRT_FilterType }) => ({
+        ...prev,
+        [header.id]: value,
+      }));
+      if ([MRT_FILTER_TYPE.EMPTY, MRT_FILTER_TYPE.NOT_EMPTY].includes(value)) {
+        header.column.setColumnFilterValue(' ');
+      }
+    } else {
+      setCurrentGlobalFilterType(value);
     }
+    setAnchorEl(null);
     onSelect?.();
   };
 
-  const filterType = tableInstance.state.currentFilterTypes[column.id];
+  const filterType = !!header
+    ? currentFilterTypes[header.id]
+    : currentGlobalFilterType;
 
   return (
     <Menu
@@ -133,7 +165,7 @@ export const MRT_FilterTypeMenu: FC<Props> = ({
       onClose={() => setAnchorEl(null)}
       open={!!anchorEl}
       MenuListProps={{
-        dense: tableInstance.state.densePadding,
+        dense: isDensePadding,
       }}
     >
       {filterTypes.map(({ type, label, divider, fn }, index) => (

package/src/menus/MRT_RowActionMenu.tsx

@@ -1,7 +1,6 @@
 import React, { FC } from 'react';
 import { Box, ListItemIcon, Menu, MenuItem } from '@mui/material';
-import { useMRT } from '../useMRT';
-import type { MRT_Row } from '..';
+import type { MRT_Row, MRT_TableInstance } from '..';
 import {
   commonListItemStyles,
   commonMenuItemStyles,
@@ -9,24 +8,30 @@ import {
 
 interface Props {
   anchorEl: HTMLElement | null;
+  handleEdit: () => void;
   row: MRT_Row;
   setAnchorEl: (anchorEl: HTMLElement | null) => void;
-  handleEdit: () => void;
+  tableInstance: MRT_TableInstance;
 }
 
 export const MRT_RowActionMenu: FC<Props> = ({
   anchorEl,
-  row,
   handleEdit,
+  row,
   setAnchorEl,
+  tableInstance,
 }) => {
   const {
-    icons: { EditIcon },
-    enableRowEditing,
-    localization,
-    renderRowActionMenuItems,
-    tableInstance,
-  } = useMRT();
+    getState,
+    options: {
+      icons: { EditIcon },
+      enableRowEditing,
+      localization,
+      renderRowActionMenuItems,
+    },
+  } = tableInstance;
+
+  const { isDensePadding } = getState();
 
   return (
     <Menu
@@ -34,7 +39,7 @@ export const MRT_RowActionMenu: FC<Props> = ({
       open={!!anchorEl}
       onClose={() => setAnchorEl(null)}
       MenuListProps={{
-        dense: tableInstance.state.densePadding,
+        dense: isDensePadding,
       }}
     >
       {enableRowEditing && (
@@ -47,9 +52,11 @@ export const MRT_RowActionMenu: FC<Props> = ({
           </Box>
         </MenuItem>
       )}
-      {renderRowActionMenuItems?.(row, tableInstance, () =>
-        setAnchorEl(null),
-      ) ?? null}
+      {renderRowActionMenuItems?.({
+        row,
+        tableInstance,
+        closeMenu: () => setAnchorEl(null),
+      })}
     </Menu>
   );
 };

package/src/menus/MRT_ShowHideColumnsMenu.tsx

@@ -1,40 +1,65 @@
-import React, { FC } from 'react';
+import React, { FC, useMemo } from 'react';
 import { Button, Menu, Divider, Box } from '@mui/material';
-import type { MRT_ColumnInstance } from '..';
-import { useMRT } from '../useMRT';
 import { MRT_ShowHideColumnsMenuItems } from './MRT_ShowHideColumnsMenuItems';
-import { findLowestLevelCols } from '../utils';
+import { MRT_TableInstance } from '..';
 
 interface Props {
   anchorEl: HTMLElement | null;
   isSubMenu?: boolean;
   setAnchorEl: (anchorEl: HTMLElement | null) => void;
+  tableInstance: MRT_TableInstance;
 }
 
 export const MRT_ShowHideColumnsMenu: FC<Props> = ({
   anchorEl,
   isSubMenu,
   setAnchorEl,
+  tableInstance,
 }) => {
-  const { localization, tableInstance } = useMRT();
+  const {
+    getAllColumns,
+    getIsAllColumnsVisible,
+    getIsSomeColumnsVisible,
+    getIsSomeColumnsPinned,
+    getState,
+    toggleAllColumnsVisible,
+    getAllLeafColumns,
+    options: { localization },
+  } = tableInstance;
+
+  const { isDensePadding } = getState();
 
   const hideAllColumns = () => {
-    (
-      findLowestLevelCols(
-        tableInstance.columns as MRT_ColumnInstance[],
-      ) as MRT_ColumnInstance[]
-    )
-      .filter((col: MRT_ColumnInstance) => !col.disableColumnHiding)
-      .forEach((col: MRT_ColumnInstance) => col.toggleHidden(true));
+    getAllLeafColumns()
+      .filter((col) => col.enableHiding !== false)
+      .forEach((col) => col.toggleVisibility(false));
   };
 
+  const allDisplayColumns = useMemo(
+    () => getAllColumns().filter((col) => col.columnDefType === 'display'),
+    [getAllColumns()],
+  );
+
+  const allDataColumns = useMemo(() => {
+    const dataColumns = getAllColumns().filter(
+      (col) => col.columnDefType !== 'display',
+    );
+    return getIsSomeColumnsPinned()
+      ? [
+          ...dataColumns.filter((c) => c.getIsPinned() === 'left'),
+          ...dataColumns.filter((c) => c.getIsPinned() === false),
+          ...dataColumns.filter((c) => c.getIsPinned() === 'right'),
+        ]
+      : dataColumns;
+  }, [getAllColumns(), getState().columnPinning, getIsSomeColumnsPinned()]);
+
   return (
     <Menu
       anchorEl={anchorEl}
       open={!!anchorEl}
       onClose={() => setAnchorEl(null)}
       MenuListProps={{
-        dense: tableInstance.state.densePadding,
+        dense: isDensePadding,
       }}
     >
       <Box
@@ -47,28 +72,35 @@ export const MRT_ShowHideColumnsMenu: FC<Props> = ({
       >
         {!isSubMenu && (
           <Button
-            disabled={
-              !tableInstance.getToggleHideAllColumnsProps().checked &&
-              !tableInstance.getToggleHideAllColumnsProps().indeterminate
-            }
+            disabled={!getIsSomeColumnsVisible()}
             onClick={hideAllColumns}
           >
             {localization.hideAll}
           </Button>
         )}
         <Button
-          disabled={tableInstance.getToggleHideAllColumnsProps().checked}
-          onClick={() => tableInstance.toggleHideAllColumns(false)}
+          disabled={getIsAllColumnsVisible()}
+          onClick={() => toggleAllColumnsVisible(true)}
         >
           {localization.showAll}
         </Button>
       </Box>
       <Divider />
-      {tableInstance.columns.map((column: MRT_ColumnInstance, index) => (
+      {allDisplayColumns.map((column, index) => (
+        <MRT_ShowHideColumnsMenuItems
+          column={column}
+          isSubMenu={isSubMenu}
+          key={`${index}-${column.id}`}
+          tableInstance={tableInstance}
+        />
+      ))}
+      <Divider />
+      {allDataColumns.map((column, index) => (
         <MRT_ShowHideColumnsMenuItems
           column={column}
           isSubMenu={isSubMenu}
           key={`${index}-${column.id}`}
+          tableInstance={tableInstance}
         />
       ))}
     </Menu>