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

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 },
+      enableEditing,
+      localization,
+      renderRowActionMenuItems,
+    },
+  } = tableInstance;
+
+  const { isDensePadding } = getState();
 
   return (
     <Menu
@@ -34,10 +39,10 @@ export const MRT_RowActionMenu: FC<Props> = ({
       open={!!anchorEl}
       onClose={() => setAnchorEl(null)}
       MenuListProps={{
-        dense: tableInstance.state.densePadding,
+        dense: isDensePadding,
       }}
     >
-      {enableRowEditing && (
+      {enableEditing && (
         <MenuItem onClick={handleEdit} sx={commonMenuItemStyles}>
           <Box sx={commonListItemStyles}>
             <ListItemIcon>
@@ -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>

package/src/menus/MRT_ShowHideColumnsMenuItems.tsx

@@ -1,37 +1,44 @@
 import React, { FC } from 'react';
 import { FormControlLabel, MenuItem, Switch } from '@mui/material';
-import { ColumnInstance } from 'react-table';
-import type { MRT_ColumnInstance } from '..';
+import type { MRT_ColumnInstance, MRT_TableInstance } from '..';
 import { commonMenuItemStyles } from './MRT_ColumnActionMenu';
-import { useMRT } from '../useMRT';
 
 interface Props {
   column: MRT_ColumnInstance;
   isSubMenu?: boolean;
+  tableInstance: MRT_TableInstance;
 }
 
 export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
   column,
   isSubMenu,
+  tableInstance,
 }) => {
-  const { onColumnHide, tableInstance } = useMRT();
-  const isParentHeader = !!column?.columns?.length;
+  const {
+    getState,
+    options: { onColumnHide },
+  } = tableInstance;
 
-  const allChildColumnsVisible =
-    isParentHeader &&
-    !!column.columns?.every((childColumn) => childColumn.isVisible);
+  const { columnVisibility } = getState();
 
-  const switchChecked = column.isVisible ?? allChildColumnsVisible;
+  const switchChecked =
+    (column.columnDefType !== 'group' && column.getIsVisible()) ||
+    (column.columnDefType === 'group' &&
+      column.getLeafColumns().some((col) => col.getIsVisible()));
 
-  const handleToggleColumnHidden = (column: ColumnInstance) => {
-    if (isParentHeader) {
-      column?.columns?.forEach?.((childColumn) => {
-        childColumn.toggleHidden(switchChecked);
+  const handleToggleColumnHidden = (column: MRT_ColumnInstance) => {
+    if (column.columnDefType === 'group') {
+      column?.columns?.forEach?.((childColumn: MRT_ColumnInstance) => {
+        childColumn.toggleVisibility(!switchChecked);
       });
     } else {
-      column.toggleHidden();
+      column.toggleVisibility();
     }
-    onColumnHide?.(column, tableInstance.state.hiddenColumns);
+    onColumnHide?.({
+      column,
+      columnVisibility,
+      tableInstance,
+    });
   };
 
   return (
@@ -43,8 +50,10 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
           componentsProps={{ typography: { sx: { marginBottom: 0 } } }}
           checked={switchChecked}
           control={<Switch />}
-          disabled={(isSubMenu && switchChecked) || column.disableColumnHiding}
-          label={column.Header as string}
+          disabled={
+            (isSubMenu && switchChecked) || column.enableHiding === false
+          }
+          label={column.header}
           onChange={() => handleToggleColumnHidden(column)}
         />
       </MenuItem>
@@ -53,6 +62,7 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
           key={`${i}-${c.id}`}
           column={c}
           isSubMenu={isSubMenu}
+          tableInstance={tableInstance}
         />
       ))}
     </>

package/src/table/MRT_Table.tsx

@@ -3,33 +3,43 @@ import { Table } from '@mui/material';
 import { MRT_TableHead } from '../head/MRT_TableHead';
 import { MRT_TableBody } from '../body/MRT_TableBody';
 import { MRT_TableFooter } from '../footer/MRT_TableFooter';
-import { useMRT } from '../useMRT';
+import { MRT_TableInstance } from '..';
 
-interface Props {}
+interface Props {
+  pinned: 'left' | 'center' | 'right' | 'none';
+  tableInstance: MRT_TableInstance;
+}
 
-export const MRT_Table: FC<Props> = () => {
-  const { tableInstance, muiTableProps, hideTableHead, hideTableFooter } =
-    useMRT();
+export const MRT_Table: FC<Props> = ({ pinned, tableInstance }) => {
+  const {
+    getTableProps,
+    options: {
+      enableStickyHeader,
+      hideTableFooter,
+      hideTableHead,
+      muiTableProps,
+    },
+  } = tableInstance;
 
   const mTableProps =
     muiTableProps instanceof Function
-      ? muiTableProps(tableInstance)
+      ? muiTableProps({ tableInstance })
       : muiTableProps;
 
   const tableProps = {
+    ...getTableProps(),
     ...mTableProps,
-    ...tableInstance.getTableProps(),
-    style: {
-      ...tableInstance.getTableProps().style,
-      ...mTableProps?.style,
-    },
   };
 
   return (
-    <Table {...tableProps}>
-      {!hideTableHead && <MRT_TableHead />}
-      <MRT_TableBody />
-      {!hideTableFooter && <MRT_TableFooter />}
+    <Table stickyHeader={enableStickyHeader} {...tableProps}>
+      {!hideTableHead && (
+        <MRT_TableHead pinned={pinned} tableInstance={tableInstance} />
+      )}
+      <MRT_TableBody pinned={pinned} tableInstance={tableInstance} />
+      {!hideTableFooter && (
+        <MRT_TableFooter pinned={pinned} tableInstance={tableInstance} />
+      )}
     </Table>
   );
 };

package/src/table/MRT_TableContainer.tsx

@@ -1,65 +1,126 @@
-import React, { FC, useEffect } from 'react';
-import { Paper, TableContainer, Box } from '@mui/material';
-import { useMRT } from '../useMRT';
+import React, { FC, useLayoutEffect, useState } from 'react';
+import { alpha, Box, TableContainer, Theme } from '@mui/material';
+import { SystemStyleObject } from '@mui/material/node_modules/@mui/system';
+import { MRT_TableInstance } from '..';
 import { MRT_Table } from './MRT_Table';
-import { MRT_ToolbarTop } from '../toolbar/MRT_ToolbarTop';
-import { MRT_ToolbarBottom } from '../toolbar/MRT_ToolbarBottom';
 
-interface Props {}
+const commonBoxStyles = ({
+  pinned,
+  theme,
+  visible,
+}: {
+  pinned?: 'left' | 'right';
+  theme: Theme;
+  visible?: boolean;
+}): SystemStyleObject<Theme> => ({
+  display: 'grid',
+  minWidth: visible ? '200px' : 0,
+  overflowX: 'auto',
+  boxShadow:
+    pinned === 'left'
+      ? `0 1px 12px ${alpha(theme.palette.common.black, 0.5)}`
+      : pinned === 'right'
+      ? `0 -1px 12px ${alpha(theme.palette.common.black, 0.5)}`
+      : 'none',
+});
 
-export const MRT_TableContainer: FC<Props> = () => {
+interface Props {
+  tableInstance: MRT_TableInstance;
+}
+
+export const MRT_TableContainer: FC<Props> = ({ tableInstance }) => {
   const {
-    hideToolbarBottom,
-    hideToolbarTop,
-    muiTableContainerProps,
-    tableInstance,
-  } = useMRT();
-  const fullScreen = tableInstance.state.fullScreen;
+    getCenterTableWidth,
+    getIsSomeColumnsPinned,
+    getLeftTableWidth,
+    getRightTableWidth,
+    getState,
+    options: {
+      enableColumnPinning,
+      enableStickyHeader,
+      idPrefix,
+      muiTableContainerProps,
+    },
+  } = tableInstance;
+
+  const { isFullScreen, columnPinning } = getState();
 
-  useEffect(() => {
-    if (typeof window !== 'undefined') {
-      if (fullScreen) {
-        document.body.style.overflow = 'hidden';
-      } else {
-        document.body.style.overflow = 'auto';
-      }
-    }
-  }, [fullScreen]);
+  const [totalToolbarHeight, setTotalToolbarHeight] = useState(0);
 
   const tableContainerProps =
     muiTableContainerProps instanceof Function
-      ? muiTableContainerProps(tableInstance)
+      ? muiTableContainerProps({ tableInstance })
       : muiTableContainerProps;
 
+  useLayoutEffect(() => {
+    const topToolbarHeight =
+      typeof document !== 'undefined'
+        ? document?.getElementById(`mrt-${idPrefix}-toolbar-top`)
+            ?.offsetHeight ?? 0
+        : 0;
+
+    const bottomToolbarHeight =
+      typeof document !== 'undefined'
+        ? document?.getElementById(`mrt-${idPrefix}-toolbar-bottom`)
+            ?.offsetHeight ?? 0
+        : 0;
+
+    setTotalToolbarHeight(topToolbarHeight + bottomToolbarHeight);
+  });
+
   return (
     <TableContainer
-      component={Paper}
       {...tableContainerProps}
       sx={{
-        bottom: fullScreen ? '0' : undefined,
-        height: fullScreen ? '100%' : undefined,
-        left: fullScreen ? '0' : undefined,
-        m: fullScreen ? '0' : undefined,
-        overflowY: !fullScreen ? 'hidden' : undefined,
-        position: fullScreen ? 'fixed' : undefined,
-        right: fullScreen ? '0' : undefined,
-        top: fullScreen ? '0' : undefined,
-        transition: 'all 0.2s ease-in-out',
-        width: fullScreen ? '100vw' : undefined,
-        zIndex: fullScreen ? 1200 : 1,
+        maxWidth: '100%',
+        maxHeight: enableStickyHeader
+          ? `clamp(350px, calc(100vh - ${totalToolbarHeight}px), 2000px)`
+          : undefined,
+        overflow: 'auto',
         ...tableContainerProps?.sx,
       }}
+      style={{
+        maxHeight: isFullScreen
+          ? `calc(100vh - ${totalToolbarHeight}px)`
+          : undefined,
+      }}
     >
-      {!hideToolbarTop && <MRT_ToolbarTop />}
-      <Box
-        sx={{
-          maxWidth: '100%',
-          overflowX: 'auto',
-        }}
-      >
-        <MRT_Table />
-      </Box>
-      {!hideToolbarBottom && <MRT_ToolbarBottom />}
+      {enableColumnPinning && getIsSomeColumnsPinned() ? (
+        <Box
+          sx={{
+            display: 'grid',
+            gridTemplateColumns: `${getLeftTableWidth()}fr ${getCenterTableWidth()}fr ${getRightTableWidth()}fr`,
+          }}
+        >
+          <Box
+            sx={(theme: Theme) =>
+              commonBoxStyles({
+                pinned: 'left',
+                theme,
+                visible: !!columnPinning.left?.length,
+              })
+            }
+          >
+            <MRT_Table pinned="left" tableInstance={tableInstance} />
+          </Box>
+          <Box sx={(theme: Theme) => commonBoxStyles({ theme })}>
+            <MRT_Table pinned="center" tableInstance={tableInstance} />
+          </Box>
+          <Box
+            sx={(theme: Theme) =>
+              commonBoxStyles({
+                pinned: 'right',
+                theme,
+                visible: !!columnPinning.right?.length,
+              })
+            }
+          >
+            <MRT_Table pinned="right" tableInstance={tableInstance} />
+          </Box>
+        </Box>
+      ) : (
+        <MRT_Table pinned="none" tableInstance={tableInstance} />
+      )}
     </TableContainer>
   );
 };