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

package/src/inputs/MRT_SelectCheckbox.tsx

@@ -1,62 +1,69 @@
 import React, { ChangeEvent, FC } from 'react';
 import { Checkbox, Tooltip } from '@mui/material';
-import { useMRT } from '../useMRT';
-import type { MRT_Row } from '..';
+import type { MRT_Row, MRT_TableInstance } from '..';
 
 interface Props {
   row?: MRT_Row;
   selectAll?: boolean;
+  tableInstance: MRT_TableInstance;
 }
 
-export const MRT_SelectCheckbox: FC<Props> = ({ row, selectAll }) => {
+export const MRT_SelectCheckbox: FC<Props> = ({
+  row,
+  selectAll,
+  tableInstance,
+}) => {
   const {
-    localization,
-    muiSelectCheckboxProps,
-    onSelectChange,
-    onSelectAllChange,
-    tableInstance,
-    tableInstance: {
-      state: { densePadding },
+    getRowModel,
+    getSelectedRowModel,
+    getState,
+    getToggleAllRowsSelectedProps,
+    options: {
+      isLoading,
+      localization,
+      muiSelectCheckboxProps,
+      onSelectChange,
+      onSelectAllChange,
     },
-  } = useMRT();
+  } = tableInstance;
+
+  const { isDensePadding } = getState();
 
   const handleSelectChange = (event: ChangeEvent<HTMLInputElement>) => {
     if (selectAll) {
-      tableInstance?.getToggleAllRowsSelectedProps?.()?.onChange?.(event);
-      onSelectAllChange?.(
+      getToggleAllRowsSelectedProps?.()?.onChange?.(event as any);
+      onSelectAllChange?.({
         event,
-        event.target.checked ? tableInstance.rows : [],
-      );
+        selectedRows: event.target.checked ? getRowModel().flatRows : [],
+        tableInstance,
+      });
     } else if (row) {
-      row?.getToggleRowSelectedProps()?.onChange?.(event);
-      onSelectChange?.(
+      row?.getToggleSelectedProps()?.onChange?.(event as any);
+      onSelectChange?.({
         event,
         row,
-        event.target.checked
-          ? [...tableInstance.selectedFlatRows, row]
-          : tableInstance.selectedFlatRows.filter(
+        selectedRows: event.target.checked
+          ? [...getSelectedRowModel().flatRows, row]
+          : getSelectedRowModel().flatRows.filter(
               (selectedRow) => selectedRow.id !== row.id,
             ),
-      );
+        tableInstance,
+      });
     }
   };
 
   const mTableBodyRowSelectCheckboxProps =
     muiSelectCheckboxProps instanceof Function
-      ? muiSelectCheckboxProps(selectAll, row, tableInstance)
+      ? muiSelectCheckboxProps({ isSelectAll: !!selectAll, row, tableInstance })
       : muiSelectCheckboxProps;
 
   const rtSelectCheckboxProps = selectAll
-    ? tableInstance.getToggleAllRowsSelectedProps()
-    : row?.getToggleRowSelectedProps();
+    ? getToggleAllRowsSelectedProps()
+    : row?.getToggleSelectedProps();
 
   const checkboxProps = {
-    ...mTableBodyRowSelectCheckboxProps,
     ...rtSelectCheckboxProps,
-    style: {
-      ...rtSelectCheckboxProps?.style,
-      ...mTableBodyRowSelectCheckboxProps?.style,
-    },
+    ...mTableBodyRowSelectCheckboxProps,
   };
 
   return (
@@ -69,13 +76,18 @@ export const MRT_SelectCheckbox: FC<Props> = ({ row, selectAll }) => {
       }
     >
       <Checkbox
+        disabled={isLoading}
         inputProps={{
           'aria-label': selectAll
             ? localization.toggleSelectAll
             : localization.toggleSelectRow,
         }}
-        size={densePadding ? 'small' : 'medium'}
+        size={isDensePadding ? 'small' : 'medium'}
         {...checkboxProps}
+        sx={{
+          height: isDensePadding ? '1.75rem' : '2.25rem',
+          width: isDensePadding ? '1.75rem' : '2.25rem',
+        }}
         onChange={handleSelectChange}
         title={undefined}
       />

package/src/localization.ts

@@ -2,6 +2,7 @@ export interface MRT_Localization {
   actions: string;
   cancel: string;
   changeFilterMode: string;
+  changeSearchMode: string;
   clearFilter: string;
   clearSearch: string;
   clearSort: string;
@@ -11,12 +12,13 @@ export interface MRT_Localization {
   edit: string;
   expand: string;
   expandAll: string;
+  filterBestMatch: string;
+  filterBestMatchFirst: string;
   filterByColumn: string;
   filterContains: string;
   filterEmpty: string;
   filterEndsWith: string;
   filterEquals: string;
-  filterFuzzy: string;
   filterGreaterThan: string;
   filterLessThan: string;
   filterMode: string;
@@ -28,13 +30,18 @@ export interface MRT_Localization {
   groupedBy: string;
   hideAll: string;
   hideColumn: string;
+  pinToLeft: string;
+  pinToRight: string;
   rowActions: string;
+  rowNumber: string;
+  rowNumbers: string;
   save: string;
   search: string;
+  select: string;
   selectedCountOfRowCountRowsSelected: string;
   showAll: string;
-  showHideColumns: string;
   showAllColumns: string;
+  showHideColumns: string;
   showHideFilters: string;
   showHideSearch: string;
   sortByColumnAsc: string;
@@ -45,12 +52,14 @@ export interface MRT_Localization {
   toggleSelectAll: string;
   toggleSelectRow: string;
   ungroupByColumn: string;
+  unpin: string;
 }
 
 export const MRT_DefaultLocalization_EN: MRT_Localization = {
   actions: 'Actions',
   cancel: 'Cancel',
   changeFilterMode: 'Change filter mode',
+  changeSearchMode: 'Change search mode',
   clearFilter: 'Clear filter',
   clearSearch: 'Clear search',
   clearSort: 'Clear sort',
@@ -60,12 +69,13 @@ export const MRT_DefaultLocalization_EN: MRT_Localization = {
   edit: 'Edit',
   expand: 'Expand',
   expandAll: 'Expand all',
+  filterBestMatch: 'Best Match',
+  filterBestMatchFirst: 'Best Match First',
   filterByColumn: 'Filter by {column}',
-  filterContains: 'Contains Exact',
+  filterContains: 'Contains',
   filterEmpty: 'Empty',
   filterEndsWith: 'Ends With',
   filterEquals: 'Equals',
-  filterFuzzy: 'Fuzzy Match',
   filterGreaterThan: 'Greater Than',
   filterLessThan: 'Less Than',
   filterMode: 'Filter Mode: {filterType}',
@@ -77,11 +87,16 @@ export const MRT_DefaultLocalization_EN: MRT_Localization = {
   groupedBy: 'Grouped by ',
   hideAll: 'Hide all',
   hideColumn: 'Hide {column} column',
+  pinToLeft: 'Pin to left',
+  pinToRight: 'Pin to right',
   rowActions: 'Row Actions',
+  rowNumber: '#',
+  rowNumbers: 'Row Numbers',
   save: 'Save',
   search: 'Search',
   selectedCountOfRowCountRowsSelected:
     '{selectedCount} of {rowCount} row(s) selected',
+  select: 'Select',
   showAll: 'Show all',
   showAllColumns: 'Show all columns',
   showHideColumns: 'Show/Hide columns',
@@ -95,4 +110,5 @@ export const MRT_DefaultLocalization_EN: MRT_Localization = {
   toggleSelectAll: 'Toggle select all',
   toggleSelectRow: 'Toggle select row',
   ungroupByColumn: 'Ungroup by {column}',
+  unpin: 'Unpin',
 };

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>