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

package/src/inputs/MRT_SelectCheckbox.tsx

@@ -17,9 +17,7 @@ export const MRT_SelectCheckbox: FC<Props> = ({
     getRowModel,
     getSelectedRowModel,
     getState,
-    getToggleAllRowsSelectedProps,
     options: {
-      isLoading,
       localization,
       muiSelectCheckboxProps,
       onSelectChange,
@@ -27,18 +25,18 @@ export const MRT_SelectCheckbox: FC<Props> = ({
     },
   } = tableInstance;
 
-  const { isDensePadding } = getState();
+  const { isDensePadding, isLoading } = getState();
 
   const handleSelectChange = (event: ChangeEvent<HTMLInputElement>) => {
     if (selectAll) {
-      getToggleAllRowsSelectedProps?.()?.onChange?.(event as any);
+      tableInstance.getToggleAllRowsSelectedHandler()(event as any);
       onSelectAllChange?.({
         event,
         selectedRows: event.target.checked ? getRowModel().flatRows : [],
         tableInstance,
       });
     } else if (row) {
-      row?.getToggleSelectedProps()?.onChange?.(event as any);
+      row?.getToggleSelectedHandler()(event as any);
       onSelectChange?.({
         event,
         row,
@@ -52,20 +50,11 @@ export const MRT_SelectCheckbox: FC<Props> = ({
     }
   };
 
-  const mTableBodyRowSelectCheckboxProps =
+  const checkboxProps =
     muiSelectCheckboxProps instanceof Function
       ? muiSelectCheckboxProps({ isSelectAll: !!selectAll, row, tableInstance })
       : muiSelectCheckboxProps;
 
-  const rtSelectCheckboxProps = selectAll
-    ? getToggleAllRowsSelectedProps()
-    : row?.getToggleSelectedProps();
-
-  const checkboxProps = {
-    ...rtSelectCheckboxProps,
-    ...mTableBodyRowSelectCheckboxProps,
-  };
-
   return (
     <Tooltip
       arrow
@@ -76,20 +65,30 @@ export const MRT_SelectCheckbox: FC<Props> = ({
       }
     >
       <Checkbox
+        checked={
+          selectAll
+            ? tableInstance.getIsAllRowsSelected()
+            : row?.getIsSelected()
+        }
         disabled={isLoading}
+        indeterminate={
+          selectAll
+            ? tableInstance.getIsSomeRowsSelected()
+            : row?.getIsSomeSelected()
+        }
         inputProps={{
           'aria-label': selectAll
             ? localization.toggleSelectAll
             : localization.toggleSelectRow,
         }}
+        onChange={handleSelectChange}
         size={isDensePadding ? 'small' : 'medium'}
         {...checkboxProps}
         sx={{
           height: isDensePadding ? '1.75rem' : '2.25rem',
           width: isDensePadding ? '1.75rem' : '2.25rem',
+          ...checkboxProps?.sx,
         }}
-        onChange={handleSelectChange}
-        title={undefined}
       />
     </Tooltip>
   );

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

@@ -1,7 +1,7 @@
 import React, { FC, useState } from 'react';
 import { Box, IconButton, ListItemIcon, Menu, MenuItem } from '@mui/material';
 import type { MRT_Header, MRT_TableInstance } from '..';
-import { MRT_FilterTypeMenu } from './MRT_FilterTypeMenu';
+import { MRT_FilterOptionMenu } from './MRT_FilterOptionMenu';
 import { MRT_ShowHideColumnsMenu } from './MRT_ShowHideColumnsMenu';
 
 export const commonMenuItemStyles = {
@@ -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}
@@ -240,7 +241,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
               </IconButton>
             )}
           </MenuItem>,
-          <MRT_FilterTypeMenu
+          <MRT_FilterOptionMenu
             anchorEl={filterMenuAnchorEl}
             header={header}
             key={2}
@@ -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_FilterTypeMenu.tsx → MRT_FilterOptionMenu.tsx}

@@ -1,14 +1,14 @@
 import React, { FC, useMemo } from 'react';
 import { Menu, MenuItem } from '@mui/material';
-import type { MRT_FilterType, MRT_Header, MRT_TableInstance } from '..';
-import { MRT_FILTER_TYPE } from '../enums';
+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,
@@ -30,7 +30,7 @@ interface Props {
   tableInstance: MRT_TableInstance;
 }
 
-export const MRT_FilterTypeMenu: FC<Props> = ({
+export const MRT_FilterOptionMenu: FC<Props> = ({
   anchorEl,
   header,
   onSelect,
@@ -39,16 +39,16 @@ export const MRT_FilterTypeMenu: FC<Props> = ({
 }) => {
   const {
     getState,
-    options: { enabledGlobalFilterTypes, localization },
-    setCurrentFilterTypes,
-    setCurrentGlobalFilterType,
+    options: { enabledGlobalFilterOptions, localization },
+    setCurrentFilterFns,
+    setCurrentGlobalFilterFn,
   } = tableInstance;
 
-  const { isDensePadding, currentFilterTypes, currentGlobalFilterType } =
+  const { isDensePadding, currentFilterFns, currentGlobalFilterFn } =
     getState();
 
-  const filterTypes: {
-    type: MRT_FILTER_TYPE;
+  const filterOptions: {
+    option: MRT_FILTER_OPTION;
     label: string;
     divider: boolean;
     fn: Function;
@@ -56,104 +56,109 @@ export const MRT_FilterTypeMenu: FC<Props> = ({
     () =>
       [
         {
-          type: MRT_FILTER_TYPE.BEST_MATCH_FIRST,
-          label: localization.filterBestMatchFirst,
+          option: MRT_FILTER_OPTION.FUZZY,
+          label: localization.filterFuzzy,
           divider: false,
-          fn: bestMatchFirst,
+          fn: fuzzy,
         },
         {
-          type: MRT_FILTER_TYPE.BEST_MATCH,
-          label: localization.filterBestMatch,
-          divider: !!header,
-          fn: bestMatch,
-        },
-        {
-          type: MRT_FILTER_TYPE.CONTAINS,
+          option: MRT_FILTER_OPTION.CONTAINS,
           label: localization.filterContains,
           divider: false,
           fn: contains,
         },
         {
-          type: MRT_FILTER_TYPE.STARTS_WITH,
+          option: MRT_FILTER_OPTION.STARTS_WITH,
           label: localization.filterStartsWith,
           divider: false,
           fn: startsWith,
         },
         {
-          type: MRT_FILTER_TYPE.ENDS_WITH,
+          option: MRT_FILTER_OPTION.ENDS_WITH,
           label: localization.filterEndsWith,
           divider: true,
           fn: endsWith,
         },
         {
-          type: MRT_FILTER_TYPE.EQUALS,
+          option: MRT_FILTER_OPTION.EQUALS,
           label: localization.filterEquals,
           divider: false,
           fn: equals,
         },
         {
-          type: MRT_FILTER_TYPE.NOT_EQUALS,
+          option: MRT_FILTER_OPTION.NOT_EQUALS,
           label: localization.filterNotEquals,
           divider: true,
           fn: notEquals,
         },
         {
-          type: MRT_FILTER_TYPE.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_TYPE.LESS_THAN,
+          option: MRT_FILTER_OPTION.LESS_THAN,
           label: localization.filterLessThan,
           divider: true,
           fn: lessThan,
         },
         {
-          type: MRT_FILTER_TYPE.EMPTY,
+          option: MRT_FILTER_OPTION.EMPTY,
           label: localization.filterEmpty,
           divider: false,
           fn: empty,
         },
         {
-          type: MRT_FILTER_TYPE.NOT_EMPTY,
+          option: MRT_FILTER_OPTION.NOT_EMPTY,
           label: localization.filterNotEmpty,
           divider: false,
           fn: notEmpty,
         },
       ].filter((filterType) =>
         header
-          ? !header.column.enabledColumnFilterTypes ||
-            header.column.enabledColumnFilterTypes.includes(filterType.type)
-          : (!enabledGlobalFilterTypes ||
-              enabledGlobalFilterTypes.includes(filterType.type)) &&
-            [
-              MRT_FILTER_TYPE.BEST_MATCH_FIRST,
-              MRT_FILTER_TYPE.BEST_MATCH,
-            ].includes(filterType.type),
+          ? !header.column.enabledColumnFilterOptions ||
+            header.column.enabledColumnFilterOptions.includes(filterType.option)
+          : (!enabledGlobalFilterOptions ||
+              enabledGlobalFilterOptions.includes(filterType.option)) &&
+            [MRT_FILTER_OPTION.FUZZY, MRT_FILTER_OPTION.CONTAINS].includes(
+              filterType.option,
+            ),
       ),
     [],
   );
 
-  const handleSelectFilterType = (value: MRT_FILTER_TYPE) => {
+  const handleSelectFilterType = (value: MRT_FILTER_OPTION) => {
     if (header) {
-      setCurrentFilterTypes((prev: { [key: string]: MRT_FilterType }) => ({
+      setCurrentFilterFns((prev: { [key: string]: MRT_FilterFn }) => ({
         ...prev,
         [header.id]: value,
       }));
-      if ([MRT_FILTER_TYPE.EMPTY, MRT_FILTER_TYPE.NOT_EMPTY].includes(value)) {
-        header.column.setColumnFilterValue(' ');
+      if (
+        [MRT_FILTER_OPTION.EMPTY, MRT_FILTER_OPTION.NOT_EMPTY].includes(value)
+      ) {
+        header.column.setFilterValue(' ');
+      } else if (value === MRT_FILTER_OPTION.BETWEEN) {
+        header.column.setFilterValue(['', '']);
+      } else {
+        header.column.setFilterValue('');
       }
     } else {
-      setCurrentGlobalFilterType(value);
+      setCurrentGlobalFilterFn(value);
     }
     setAnchorEl(null);
     onSelect?.();
   };
 
-  const filterType = !!header
-    ? currentFilterTypes[header.id]
-    : currentGlobalFilterType;
+  const filterOption = !!header
+    ? currentFilterFns[header.id]
+    : currentGlobalFilterFn;
 
   return (
     <Menu
@@ -165,14 +170,14 @@ export const MRT_FilterTypeMenu: FC<Props> = ({
         dense: isDensePadding,
       }}
     >
-      {filterTypes.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,15 +44,25 @@ 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
-          }
+          disabled={(isSubMenu && switchChecked) || !column.getCanHide()}
           label={column.header}
           onChange={() => handleToggleColumnHidden(column)}
         />

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>
   );
 };