material-react-table 0.7.5 → 0.8.0-alpha.2

package/src/localization.ts

@@ -1,5 +1,6 @@
 export interface MRT_Localization {
   actions: string;
+  and: string;
   cancel: string;
   changeFilterMode: string;
   changeSearchMode: string;
@@ -12,13 +13,13 @@ export interface MRT_Localization {
   edit: string;
   expand: string;
   expandAll: string;
-  filterBestMatch: string;
-  filterBestMatchFirst: string;
+  filterBetween: string;
   filterByColumn: string;
   filterContains: string;
   filterEmpty: string;
   filterEndsWith: string;
   filterEquals: string;
+  filterFuzzy: string;
   filterGreaterThan: string;
   filterLessThan: string;
   filterMode: string;
@@ -30,6 +31,8 @@ export interface MRT_Localization {
   groupedBy: string;
   hideAll: string;
   hideColumn: string;
+  max: string;
+  min: string;
   pinToLeft: string;
   pinToRight: string;
   resetColumnSize: string;
@@ -50,17 +53,20 @@ export interface MRT_Localization {
   sortedByColumnAsc: string;
   sortedByColumnDesc: string;
   thenBy: string;
+  to: string;
   toggleDensePadding: string;
   toggleFullScreen: string;
   toggleSelectAll: string;
   toggleSelectRow: string;
   ungroupByColumn: string;
   unpin: string;
+  unpinAll: string;
   unsorted: string;
 }
 
 export const MRT_DefaultLocalization_EN: MRT_Localization = {
   actions: 'Actions',
+  and: 'and',
   cancel: 'Cancel',
   changeFilterMode: 'Change filter mode',
   changeSearchMode: 'Change search mode',
@@ -73,24 +79,26 @@ export const MRT_DefaultLocalization_EN: MRT_Localization = {
   edit: 'Edit',
   expand: 'Expand',
   expandAll: 'Expand all',
-  filterBestMatch: 'Best Match',
-  filterBestMatchFirst: 'Best Match First',
+  filterBetween: 'Between',
   filterByColumn: 'Filter by {column}',
   filterContains: 'Contains',
   filterEmpty: 'Empty',
   filterEndsWith: 'Ends With',
   filterEquals: 'Equals',
+  filterFuzzy: 'Fuzzy',
   filterGreaterThan: 'Greater Than',
   filterLessThan: 'Less Than',
   filterMode: 'Filter Mode: {filterType}',
   filterNotEmpty: 'Not Empty',
   filterNotEquals: 'Not Equals',
   filterStartsWith: 'Starts With',
-  filteringByColumn: 'Filtering by {column} - {filterType} "{filterValue}"',
+  filteringByColumn: 'Filtering by {column} - {filterType} {filterValue}',
   groupByColumn: 'Group by {column}',
   groupedBy: 'Grouped by ',
   hideAll: 'Hide all',
   hideColumn: 'Hide {column} column',
+  max: 'Max',
+  min: 'Min',
   pinToLeft: 'Pin to left',
   pinToRight: 'Pin to right',
   resetColumnSize: 'Reset column size',
@@ -112,11 +120,13 @@ export const MRT_DefaultLocalization_EN: MRT_Localization = {
   sortedByColumnAsc: 'Sorted by {column} ascending',
   sortedByColumnDesc: 'Sorted by {column} descending',
   thenBy: ', then by ',
+  to: 'to',
   toggleDensePadding: 'Toggle dense padding',
   toggleFullScreen: 'Toggle full screen',
   toggleSelectAll: 'Toggle select all',
   toggleSelectRow: 'Toggle select row',
   ungroupByColumn: 'Ungroup by {column}',
   unpin: 'Unpin',
+  unpinAll: 'Unpin all',
   unsorted: 'Unsorted',
 };

package/src/menus/MRT_ColumnActionMenu.tsx

@@ -69,7 +69,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
     useState<null | HTMLElement>(null);
 
   const handleClearSort = () => {
-    column.resetSorting();
+    column.clearSorting();
     setAnchorEl(null);
   };
 
@@ -95,6 +95,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
 
   const handlePinColumn = (pinDirection: 'left' | 'right' | false) => {
     column.pin(pinDirection);
+    setAnchorEl(null);
   };
 
   const handleGroupByColumn = () => {
@@ -104,7 +105,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
   };
 
   const handleClearFilter = () => {
-    column.setColumnFilterValue('');
+    column.setFilterValue('');
     setAnchorEl(null);
   };
 
@@ -177,7 +178,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
               </ListItemIcon>
               {localization.sortByColumnAsc?.replace(
                 '{column}',
-                String(column.header),
+                String(column.columnDef.header),
               )}
             </Box>
           </MenuItem>,
@@ -194,15 +195,15 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
               </ListItemIcon>
               {localization.sortByColumnDesc?.replace(
                 '{column}',
-                String(column.header),
+                String(column.columnDef.header),
               )}
             </Box>
           </MenuItem>,
         ]}
       {enableColumnFilters &&
-        column.getCanColumnFilter() && [
+        column.getCanFilter() && [
           <MenuItem
-            disabled={!column.getColumnFilterValue()}
+            disabled={!column.getFilterValue()}
             key={0}
             onClick={handleClearFilter}
             sx={commonMenuItemStyles}
@@ -226,7 +227,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
               </ListItemIcon>
               {localization.filterByColumn?.replace(
                 '{column}',
-                String(column.header),
+                String(column.columnDef.header),
               )}
             </Box>
             {!column.filterSelectOptions && (
@@ -263,7 +264,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
               </ListItemIcon>
               {localization[
                 column.getIsGrouped() ? 'ungroupByColumn' : 'groupByColumn'
-              ]?.replace('{column}', String(column.header))}
+              ]?.replace('{column}', String(column.columnDef.header))}
             </Box>
           </MenuItem>,
         ]}
@@ -284,7 +285,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
           </MenuItem>,
           <MenuItem
             disabled={column.getIsPinned() === 'right' || !column.getCanPin()}
-            key={0}
+            key={1}
             onClick={() => handlePinColumn('right')}
             sx={commonMenuItemStyles}
           >
@@ -298,7 +299,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
           <MenuItem
             disabled={!column.getIsPinned()}
             divider={enableHiding}
-            key={0}
+            key={2}
             onClick={() => handlePinColumn(false)}
             sx={commonMenuItemStyles}
           >
@@ -338,7 +339,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
             </ListItemIcon>
             {localization.hideColumn?.replace(
               '{column}',
-              String(column.header),
+              String(column.columnDef.header),
             )}
           </Box>
         </MenuItem>,
@@ -357,7 +358,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
             </ListItemIcon>
             {localization.showAllColumns?.replace(
               '{column}',
-              String(column.header),
+              String(column.columnDef.header),
             )}
           </Box>
           <IconButton

package/src/menus/MRT_FilterOptionMenu.tsx

@@ -3,12 +3,12 @@ import { Menu, MenuItem } from '@mui/material';
 import type { MRT_FilterFn, MRT_Header, MRT_TableInstance } from '..';
 import { MRT_FILTER_OPTION } from '../enums';
 import {
-  bestMatch,
-  bestMatchFirst,
+  between,
   contains,
   empty,
   endsWith,
   equals,
+  fuzzy,
   greaterThan,
   lessThan,
   notEmpty,
@@ -48,7 +48,7 @@ export const MRT_FilterOptionMenu: FC<Props> = ({
     getState();
 
   const filterOptions: {
-    type: MRT_FILTER_OPTION;
+    option: MRT_FILTER_OPTION;
     label: string;
     divider: boolean;
     fn: Function;
@@ -56,67 +56,67 @@ export const MRT_FilterOptionMenu: FC<Props> = ({
     () =>
       [
         {
-          type: MRT_FILTER_OPTION.BEST_MATCH_FIRST,
-          label: localization.filterBestMatchFirst,
+          option: MRT_FILTER_OPTION.FUZZY,
+          label: localization.filterFuzzy,
           divider: false,
-          fn: bestMatchFirst,
+          fn: fuzzy,
         },
         {
-          type: MRT_FILTER_OPTION.BEST_MATCH,
-          label: localization.filterBestMatch,
-          divider: !!header,
-          fn: bestMatch,
-        },
-        {
-          type: MRT_FILTER_OPTION.CONTAINS,
+          option: MRT_FILTER_OPTION.CONTAINS,
           label: localization.filterContains,
           divider: false,
           fn: contains,
         },
         {
-          type: MRT_FILTER_OPTION.STARTS_WITH,
+          option: MRT_FILTER_OPTION.STARTS_WITH,
           label: localization.filterStartsWith,
           divider: false,
           fn: startsWith,
         },
         {
-          type: MRT_FILTER_OPTION.ENDS_WITH,
+          option: MRT_FILTER_OPTION.ENDS_WITH,
           label: localization.filterEndsWith,
           divider: true,
           fn: endsWith,
         },
         {
-          type: MRT_FILTER_OPTION.EQUALS,
+          option: MRT_FILTER_OPTION.EQUALS,
           label: localization.filterEquals,
           divider: false,
           fn: equals,
         },
         {
-          type: MRT_FILTER_OPTION.NOT_EQUALS,
+          option: MRT_FILTER_OPTION.NOT_EQUALS,
           label: localization.filterNotEquals,
           divider: true,
           fn: notEquals,
         },
         {
-          type: MRT_FILTER_OPTION.GREATER_THAN,
+          option: MRT_FILTER_OPTION.BETWEEN,
+          label: localization.filterBetween,
+          divider: false,
+          fn: between,
+        },
+        {
+          option: MRT_FILTER_OPTION.GREATER_THAN,
           label: localization.filterGreaterThan,
           divider: false,
           fn: greaterThan,
         },
         {
-          type: MRT_FILTER_OPTION.LESS_THAN,
+          option: MRT_FILTER_OPTION.LESS_THAN,
           label: localization.filterLessThan,
           divider: true,
           fn: lessThan,
         },
         {
-          type: MRT_FILTER_OPTION.EMPTY,
+          option: MRT_FILTER_OPTION.EMPTY,
           label: localization.filterEmpty,
           divider: false,
           fn: empty,
         },
         {
-          type: MRT_FILTER_OPTION.NOT_EMPTY,
+          option: MRT_FILTER_OPTION.NOT_EMPTY,
           label: localization.filterNotEmpty,
           divider: false,
           fn: notEmpty,
@@ -124,13 +124,12 @@ export const MRT_FilterOptionMenu: FC<Props> = ({
       ].filter((filterType) =>
         header
           ? !header.column.enabledColumnFilterOptions ||
-            header.column.enabledColumnFilterOptions.includes(filterType.type)
+            header.column.enabledColumnFilterOptions.includes(filterType.option)
           : (!enabledGlobalFilterOptions ||
-              enabledGlobalFilterOptions.includes(filterType.type)) &&
-            [
-              MRT_FILTER_OPTION.BEST_MATCH_FIRST,
-              MRT_FILTER_OPTION.BEST_MATCH,
-            ].includes(filterType.type),
+              enabledGlobalFilterOptions.includes(filterType.option)) &&
+            [MRT_FILTER_OPTION.FUZZY, MRT_FILTER_OPTION.CONTAINS].includes(
+              filterType.option,
+            ),
       ),
     [],
   );
@@ -144,7 +143,11 @@ export const MRT_FilterOptionMenu: FC<Props> = ({
       if (
         [MRT_FILTER_OPTION.EMPTY, MRT_FILTER_OPTION.NOT_EMPTY].includes(value)
       ) {
-        header.column.setColumnFilterValue(' ');
+        header.column.setFilterValue(' ');
+      } else if (value === MRT_FILTER_OPTION.BETWEEN) {
+        header.column.setFilterValue(['', '']);
+      } else {
+        header.column.setFilterValue('');
       }
     } else {
       setCurrentGlobalFilterFn(value);
@@ -153,7 +156,7 @@ export const MRT_FilterOptionMenu: FC<Props> = ({
     onSelect?.();
   };
 
-  const filterType = !!header
+  const filterOption = !!header
     ? currentFilterFns[header.id]
     : currentGlobalFilterFn;
 
@@ -167,14 +170,14 @@ export const MRT_FilterOptionMenu: FC<Props> = ({
         dense: isDensePadding,
       }}
     >
-      {filterOptions.map(({ type, label, divider, fn }, index) => (
+      {filterOptions.map(({ option, label, divider, fn }, index) => (
         <MenuItem
           divider={divider}
           key={index}
-          onClick={() => handleSelectFilterType(type)}
-          selected={type === filterType || fn === filterType}
+          onClick={() => handleSelectFilterType(option)}
+          selected={option === filterOption || fn === filterOption}
           sx={commonMenuItemStyles}
-          value={type}
+          value={option}
         >
           {label}
         </MenuItem>

package/src/menus/MRT_ShowHideColumnsMenu.tsx

@@ -1,7 +1,7 @@
 import React, { FC, useMemo } from 'react';
 import { Button, Menu, Divider, Box } from '@mui/material';
 import { MRT_ShowHideColumnsMenuItems } from './MRT_ShowHideColumnsMenuItems';
-import { MRT_TableInstance } from '..';
+import { MRT_Column, MRT_TableInstance } from '..';
 
 interface Props {
   anchorEl: HTMLElement | null;
@@ -24,7 +24,7 @@ export const MRT_ShowHideColumnsMenu: FC<Props> = ({
     getState,
     toggleAllColumnsVisible,
     getAllLeafColumns,
-    options: { localization },
+    options: { localization, enablePinning },
   } = tableInstance;
 
   const { isDensePadding } = getState();
@@ -40,14 +40,16 @@ export const MRT_ShowHideColumnsMenu: FC<Props> = ({
     [getAllColumns()],
   );
 
-  const allDataColumns = useMemo(() => {
+  const allDataColumns: (MRT_Column | null)[] = useMemo(() => {
     const dataColumns = getAllColumns().filter(
       (col) => col.columnDefType !== 'display',
     );
     return getIsSomeColumnsPinned()
       ? [
           ...dataColumns.filter((c) => c.getIsPinned() === 'left'),
+          null,
           ...dataColumns.filter((c) => c.getIsPinned() === false),
+          null,
           ...dataColumns.filter((c) => c.getIsPinned() === 'right'),
         ]
       : dataColumns;
@@ -78,6 +80,14 @@ export const MRT_ShowHideColumnsMenu: FC<Props> = ({
             {localization.hideAll}
           </Button>
         )}
+        {!isSubMenu && enablePinning && (
+          <Button
+            disabled={!getIsSomeColumnsPinned()}
+            onClick={() => tableInstance.resetColumnPinning(true)}
+          >
+            {localization.unpinAll}
+          </Button>
+        )}
         <Button
           disabled={getIsAllColumnsVisible()}
           onClick={() => toggleAllColumnsVisible(true)}
@@ -95,14 +105,18 @@ export const MRT_ShowHideColumnsMenu: FC<Props> = ({
         />
       ))}
       <Divider />
-      {allDataColumns.map((column, index) => (
-        <MRT_ShowHideColumnsMenuItems
-          column={column}
-          isSubMenu={isSubMenu}
-          key={`${index}-${column.id}`}
-          tableInstance={tableInstance}
-        />
-      ))}
+      {allDataColumns.map((column, index) =>
+        column ? (
+          <MRT_ShowHideColumnsMenuItems
+            column={column}
+            isSubMenu={isSubMenu}
+            key={`${index}-${column.id}`}
+            tableInstance={tableInstance}
+          />
+        ) : (
+          <Divider key={`${index}-divider`} />
+        ),
+      )}
     </Menu>
   );
 };

package/src/menus/MRT_ShowHideColumnsMenuItems.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
 import { FormControlLabel, MenuItem, Switch } from '@mui/material';
 import type { MRT_Column, MRT_TableInstance } from '..';
-import { commonMenuItemStyles } from './MRT_ColumnActionMenu';
+import { MRT_ColumnPinningButtons } from '../buttons/MRT_ColumnPinningButtons';
 
 interface Props {
   column: MRT_Column;
@@ -44,16 +44,26 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
   return (
     <>
       <MenuItem
-        sx={{ ...commonMenuItemStyles, pl: `${(column.depth + 0.5) * 2}rem` }}
+        sx={{
+          alignItems: 'center',
+          justifyContent: 'flex-start',
+          my: 0,
+          pl: `${(column.depth + 0.5) * 2}rem`,
+          py: '6px',
+        }}
       >
+        {!isSubMenu && column.getCanPin() && (
+          <MRT_ColumnPinningButtons
+            column={column}
+            tableInstance={tableInstance}
+          />
+        )}
         <FormControlLabel
           componentsProps={{ typography: { sx: { marginBottom: 0 } } }}
           checked={switchChecked}
           control={<Switch />}
-          disabled={
-            (isSubMenu && switchChecked) || column.enableHiding === false
-          }
-          label={column.header}
+          disabled={(isSubMenu && switchChecked) || !column.getCanHide()}
+          label={column.columnDef.header}
           onChange={() => handleToggleColumnHidden(column)}
         />
       </MenuItem>

package/src/table/MRT_Table.tsx

@@ -6,40 +6,29 @@ import { MRT_TableFooter } from '../footer/MRT_TableFooter';
 import { MRT_TableInstance } from '..';
 
 interface Props {
-  pinned: 'left' | 'center' | 'right' | 'none';
   tableInstance: MRT_TableInstance;
 }
 
-export const MRT_Table: FC<Props> = ({ pinned, tableInstance }) => {
+export const MRT_Table: FC<Props> = ({ tableInstance }) => {
   const {
-    getTableProps,
     options: {
-      muiTableProps,
-      enableTableHead,
-      enableTableFooter,
       enableStickyHeader,
+      enableTableFooter,
+      enableTableHead,
+      muiTableProps,
     },
   } = tableInstance;
 
-  const mTableProps =
+  const tableProps =
     muiTableProps instanceof Function
       ? muiTableProps({ tableInstance })
       : muiTableProps;
 
-  const tableProps = {
-    ...getTableProps(),
-    ...mTableProps,
-  };
-
   return (
     <Table stickyHeader={enableStickyHeader} {...tableProps}>
-      {enableTableHead && (
-        <MRT_TableHead pinned={pinned} tableInstance={tableInstance} />
-      )}
-      <MRT_TableBody pinned={pinned} tableInstance={tableInstance} />
-      {enableTableFooter && (
-        <MRT_TableFooter pinned={pinned} tableInstance={tableInstance} />
-      )}
+      {enableTableHead && <MRT_TableHead tableInstance={tableInstance} />}
+      <MRT_TableBody tableInstance={tableInstance} />
+      {enableTableFooter && <MRT_TableFooter tableInstance={tableInstance} />}
     </Table>
   );
 };

package/src/table/MRT_TableContainer.tsx

@@ -1,27 +1,10 @@
-import React, { CSSProperties, FC, useEffect, useState } from 'react';
-import { alpha, Box, TableContainer, Theme } from '@mui/material';
+import React, { FC, useEffect, useLayoutEffect, useState } from 'react';
+import { TableContainer } from '@mui/material';
 import { MRT_TableInstance } from '..';
 import { MRT_Table } from './MRT_Table';
 
-const commonBoxStyles = ({
-  pinned,
-  theme,
-  visible,
-}: {
-  pinned?: 'left' | 'right';
-  theme: Theme;
-  visible?: boolean;
-}): CSSProperties => ({
-  display: 'grid',
-  minWidth: visible ? '200px' : 0,
-  overflowX: pinned ? 'scroll' : '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',
-});
+const useIsomorphicLayoutEffect =
+  typeof window !== 'undefined' ? useLayoutEffect : useEffect;
 
 interface Props {
   tableInstance: MRT_TableInstance;
@@ -29,20 +12,11 @@ interface Props {
 
 export const MRT_TableContainer: FC<Props> = ({ tableInstance }) => {
   const {
-    getCenterTableWidth,
-    getIsSomeColumnsPinned,
-    getLeftTableWidth,
-    getRightTableWidth,
     getState,
-    options: {
-      enablePinning,
-      enableStickyHeader,
-      idPrefix,
-      muiTableContainerProps,
-    },
+    options: { enableStickyHeader, idPrefix, muiTableContainerProps },
   } = tableInstance;
 
-  const { isFullScreen, columnPinning } = getState();
+  const { isFullScreen } = getState();
 
   const [totalToolbarHeight, setTotalToolbarHeight] = useState(0);
 
@@ -51,7 +25,7 @@ export const MRT_TableContainer: FC<Props> = ({ tableInstance }) => {
       ? muiTableContainerProps({ tableInstance })
       : muiTableContainerProps;
 
-  useEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     const topToolbarHeight =
       typeof document !== 'undefined'
         ? document?.getElementById(`mrt-${idPrefix}-toolbar-top`)
@@ -84,42 +58,7 @@ export const MRT_TableContainer: FC<Props> = ({ tableInstance }) => {
           : undefined,
       }}
     >
-      {enablePinning && 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} />
-      )}
+      <MRT_Table tableInstance={tableInstance} />
     </TableContainer>
   );
 };