material-react-table 0.7.6 → 0.8.0-alpha.1

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,6 +53,7 @@ export interface MRT_Localization {
   sortedByColumnAsc: string;
   sortedByColumnDesc: string;
   thenBy: string;
+  to: string;
   toggleDensePadding: string;
   toggleFullScreen: string;
   toggleSelectAll: string;
@@ -62,6 +66,7 @@ export interface MRT_Localization {
 
 export const MRT_DefaultLocalization_EN: MRT_Localization = {
   actions: 'Actions',
+  and: 'and',
   cancel: 'Cancel',
   changeFilterMode: 'Change filter mode',
   changeSearchMode: 'Change search mode',
@@ -74,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',
@@ -113,6 +120,7 @@ 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',

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);
   };
 
@@ -200,9 +201,9 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
           </MenuItem>,
         ]}
       {enableColumnFilters &&
-        column.getCanColumnFilter() && [
+        column.getCanFilter() && [
           <MenuItem
-            disabled={!column.getColumnFilterValue()}
+            disabled={!column.getFilterValue()}
             key={0}
             onClick={handleClearFilter}
             sx={commonMenuItemStyles}
@@ -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}
           >

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

@@ -83,7 +83,7 @@ export const MRT_ShowHideColumnsMenu: FC<Props> = ({
         {!isSubMenu && enablePinning && (
           <Button
             disabled={!getIsSomeColumnsPinned()}
-            onClick={() => tableInstance.setColumnPinning({})}
+            onClick={() => tableInstance.resetColumnPinning(true)}
           >
             {localization.unpinAll}
           </Button>

package/src/menus/MRT_ShowHideColumnsMenuItems.tsx

@@ -16,7 +16,7 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
 }) => {
   const {
     getState,
-    options: { onToggleColumnVisibility, enablePinning },
+    options: { onToggleColumnVisibility },
   } = tableInstance;
 
   const { columnVisibility } = getState();
@@ -52,7 +52,7 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
           py: '6px',
         }}
       >
-        {!isSubMenu && enablePinning && (
+        {!isSubMenu && column.getCanPin() && (
           <MRT_ColumnPinningButtons
             column={column}
             tableInstance={tableInstance}
@@ -62,9 +62,7 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
           componentsProps={{ typography: { sx: { marginBottom: 0 } } }}
           checked={switchChecked}
           control={<Switch />}
-          disabled={
-            (isSubMenu && switchChecked) || column.enableHiding === false
-          }
+          disabled={(isSubMenu && switchChecked) || !column.getCanHide()}
           label={column.header}
           onChange={() => handleToggleColumnHidden(column)}
         />

package/src/table/MRT_Table.tsx

@@ -6,13 +6,11 @@ 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: {
       enableStickyHeader,
       enableTableFooter,
@@ -21,25 +19,16 @@ export const MRT_Table: FC<Props> = ({ pinned, tableInstance }) => {
     },
   } = 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,16 +12,8 @@ interface Props {
 
 export const MRT_TableContainer: FC<Props> = ({ tableInstance }) => {
   const {
-    getCenterTableWidth,
-    getLeftTableWidth,
-    getRightTableWidth,
     getState,
-    options: {
-      enablePinning,
-      enableStickyHeader,
-      idPrefix,
-      muiTableContainerProps,
-    },
+    options: { enableStickyHeader, idPrefix, muiTableContainerProps },
   } = tableInstance;
 
   const { isFullScreen } = getState();
@@ -50,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`)
@@ -66,9 +41,6 @@ export const MRT_TableContainer: FC<Props> = ({ tableInstance }) => {
     setTotalToolbarHeight(topToolbarHeight + bottomToolbarHeight);
   });
 
-  const isSomeColumnsPinnedLeft = !!tableInstance.getLeftFlatHeaders().length;
-  const isSomeColumnsPinnedRight = !!tableInstance.getRightFlatHeaders().length;
-
   return (
     <TableContainer
       {...tableContainerProps}
@@ -86,50 +58,7 @@ export const MRT_TableContainer: FC<Props> = ({ tableInstance }) => {
           : undefined,
       }}
     >
-      {(enablePinning && isSomeColumnsPinnedLeft) ||
-      isSomeColumnsPinnedRight ? (
-        <Box
-          sx={{
-            display: 'grid',
-            gridTemplateColumns: `${getLeftTableWidth()}fr ${getCenterTableWidth()}fr ${getRightTableWidth()}fr`,
-          }}
-        >
-          <Box
-            sx={(theme: Theme) =>
-              commonBoxStyles({
-                pinned: 'left',
-                theme,
-                visible: isSomeColumnsPinnedLeft,
-              })
-            }
-          >
-            <MRT_Table pinned="left" tableInstance={tableInstance} />
-          </Box>
-          <Box
-            sx={(theme: Theme) =>
-              commonBoxStyles({
-                theme,
-                visible: !!tableInstance.getCenterFlatHeaders().length,
-              })
-            }
-          >
-            <MRT_Table pinned="center" tableInstance={tableInstance} />
-          </Box>
-          <Box
-            sx={(theme: Theme) =>
-              commonBoxStyles({
-                pinned: 'right',
-                theme,
-                visible: isSomeColumnsPinnedRight,
-              })
-            }
-          >
-            <MRT_Table pinned="right" tableInstance={tableInstance} />
-          </Box>
-        </Box>
-      ) : (
-        <MRT_Table pinned="none" tableInstance={tableInstance} />
-      )}
+      <MRT_Table tableInstance={tableInstance} />
     </TableContainer>
   );
 };