material-react-table 0.6.8 → 0.7.0-alpha.1

package/src/icons.ts

@@ -3,7 +3,6 @@ import CancelIcon from '@mui/icons-material/Cancel';
 import CheckBoxIcon from '@mui/icons-material/CheckBox';
 import ClearAllIcon from '@mui/icons-material/ClearAll';
 import CloseIcon from '@mui/icons-material/Close';
-import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import DensityMediumIcon from '@mui/icons-material/DensityMedium';
 import DensitySmallIcon from '@mui/icons-material/DensitySmall';
 import DoubleArrowDownIcon from '@mui/icons-material/KeyboardDoubleArrowDown';
@@ -19,6 +18,7 @@ import FullscreenExitIcon from '@mui/icons-material/FullscreenExit';
 import FullscreenIcon from '@mui/icons-material/Fullscreen';
 import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
+import PushPinIcon from '@mui/icons-material/PushPin';
 import SaveIcon from '@mui/icons-material/Save';
 import SearchIcon from '@mui/icons-material/Search';
 import SearchOffIcon from '@mui/icons-material/SearchOff';
@@ -32,7 +32,6 @@ export interface MRT_Icons {
   CheckBoxIcon: any;
   ClearAllIcon: any;
   CloseIcon: any;
-  ContentCopyIcon: any;
   DensityMediumIcon: any;
   DensitySmallIcon: any;
   DoubleArrowDownIcon: any;
@@ -48,6 +47,7 @@ export interface MRT_Icons {
   FullscreenIcon: any;
   MoreHorizIcon: any;
   MoreVertIcon: any;
+  PushPinIcon: any;
   SaveIcon: any;
   SearchIcon: any;
   SearchOffIcon: any;
@@ -62,7 +62,6 @@ export const MRT_Default_Icons: MRT_Icons = {
   CheckBoxIcon,
   ClearAllIcon,
   CloseIcon,
-  ContentCopyIcon,
   DensityMediumIcon,
   DensitySmallIcon,
   DoubleArrowDownIcon,
@@ -78,6 +77,7 @@ export const MRT_Default_Icons: MRT_Icons = {
   FullscreenIcon,
   MoreHorizIcon,
   MoreVertIcon,
+  PushPinIcon,
   SaveIcon,
   SearchIcon,
   SearchOffIcon,

package/src/inputs/MRT_EditCellTextField.tsx

@@ -1,29 +1,28 @@
-import React, { ChangeEvent, FC } from 'react';
+import React, { ChangeEvent, FC, MouseEvent } from 'react';
 import { TextField } from '@mui/material';
-import { useMRT } from '../useMRT';
-import type { MRT_Cell } from '..';
+import type { MRT_Cell, MRT_TableInstance } from '..';
 
 interface Props {
   cell: MRT_Cell;
+  tableInstance: MRT_TableInstance;
 }
 
-export const MRT_EditCellTextField: FC<Props> = ({ cell }) => {
+export const MRT_EditCellTextField: FC<Props> = ({ cell, tableInstance }) => {
   const {
-    muiTableBodyCellEditTextFieldProps,
-    setCurrentEditingRow,
-    tableInstance: {
-      state: { currentEditingRow },
-    },
-  } = useMRT();
+    getState,
+    options: { muiTableBodyCellEditTextFieldProps },
+  } = tableInstance;
+
+  const { column, row } = cell;
 
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
-    if (currentEditingRow) {
-      cell.row.values[cell.column.id] = event.target.value;
-      setCurrentEditingRow({
-        ...currentEditingRow,
-      });
+    if (getState().currentEditingRow) {
+      row.values[column.id] = event.target.value;
+      // setCurrentEditingRow({
+      //   ...getState().currentEditingRow,
+      // });
     }
-    cell.column.onCellEditChange?.(event, cell);
+    column.onCellEditChange?.(event, cell);
   };
 
   const mTableBodyCellEditTextFieldProps =
@@ -32,25 +31,25 @@ export const MRT_EditCellTextField: FC<Props> = ({ cell }) => {
       : muiTableBodyCellEditTextFieldProps;
 
   const mcTableBodyCellEditTextFieldProps =
-    cell.column.muiTableBodyCellEditTextFieldProps instanceof Function
-      ? cell.column.muiTableBodyCellEditTextFieldProps(cell)
-      : cell.column.muiTableBodyCellEditTextFieldProps;
+    column.muiTableBodyCellEditTextFieldProps instanceof Function
+      ? column.muiTableBodyCellEditTextFieldProps(cell)
+      : column.muiTableBodyCellEditTextFieldProps;
 
   const textFieldProps = {
     ...mTableBodyCellEditTextFieldProps,
     ...mcTableBodyCellEditTextFieldProps,
   };
 
-  if (!cell.column.disableEditing && cell.column.Edit) {
-    return <>{cell.column.Edit({ ...textFieldProps, cell })}</>;
-  }
+  // if (enableEditing && Edit) {
+  //   return <>{Edit({ ...textFieldProps, cell })}</>;
+  // }
 
   return (
     <TextField
       margin="dense"
       onChange={handleChange}
-      onClick={(e) => e.stopPropagation()}
-      placeholder={cell.column.Header as string}
+      onClick={(e: MouseEvent<HTMLInputElement>) => e.stopPropagation()}
+      placeholder={column.header}
       value={cell.value}
       variant="standard"
       {...textFieldProps}

package/src/inputs/MRT_FilterTextField.tsx

@@ -1,6 +1,13 @@
-import React, { ChangeEvent, FC, MouseEvent, useState } from 'react';
+import React, {
+  ChangeEvent,
+  FC,
+  MouseEvent,
+  useCallback,
+  useState,
+} from 'react';
 import {
   Chip,
+  debounce,
   IconButton,
   InputAdornment,
   MenuItem,
@@ -8,25 +15,30 @@ import {
   TextFieldProps,
   Tooltip,
 } from '@mui/material';
-import { useAsyncDebounce } from 'react-table';
-import { useMRT } from '../useMRT';
-import type { MRT_HeaderGroup } from '..';
+import type { MRT_Header, MRT_TableInstance } from '..';
 import { MRT_FilterTypeMenu } from '../menus/MRT_FilterTypeMenu';
 import { MRT_FILTER_TYPE } from '../enums';
 
 interface Props {
-  column: MRT_HeaderGroup;
+  header: MRT_Header;
+  tableInstance: MRT_TableInstance;
 }
 
-export const MRT_FilterTextField: FC<Props> = ({ column }) => {
+export const MRT_FilterTextField: FC<Props> = ({ header, tableInstance }) => {
   const {
-    icons: { FilterListIcon, CloseIcon },
-    idPrefix,
-    localization,
-    muiTableHeadCellFilterTextFieldProps,
-    setCurrentFilterTypes,
-    tableInstance,
-  } = useMRT();
+    getState,
+    options: {
+      icons: { FilterListIcon, CloseIcon },
+      idPrefix,
+      localization,
+      muiTableHeadCellFilterTextFieldProps,
+      setCurrentFilterTypes,
+    },
+  } = tableInstance;
+
+  const { column } = header;
+
+  const { currentFilterTypes } = getState();
 
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
 
@@ -45,11 +57,18 @@ export const MRT_FilterTextField: FC<Props> = ({ column }) => {
     ...mcTableHeadCellFilterTextFieldProps,
   } as TextFieldProps;
 
-  const [filterValue, setFilterValue] = useState('');
+  const [filterValue, setFilterValue] = useState<string>(
+    (column.getColumnFilterValue() ?? '') as string,
+  );
 
-  const handleChange = useAsyncDebounce((value) => {
-    column.setFilter(value ?? undefined);
-  }, 150);
+  const handleChange = useCallback(
+    debounce(
+      (event: ChangeEvent<HTMLInputElement>) =>
+        column.setColumnFilterValue(event.target.value ?? undefined),
+      150,
+    ),
+    [],
+  );
 
   const handleFilterMenuOpen = (event: MouseEvent<HTMLElement>) => {
     setAnchorEl(event.currentTarget);
@@ -57,24 +76,24 @@ export const MRT_FilterTextField: FC<Props> = ({ column }) => {
 
   const handleClear = () => {
     setFilterValue('');
-    column.setFilter(undefined);
+    column.setColumnFilterValue(undefined);
   };
 
   const handleClearFilterChip = () => {
     setFilterValue('');
-    column.setFilter(undefined);
+    column.setColumnFilterValue(undefined);
     setCurrentFilterTypes((prev) => ({
       ...prev,
-      [column.id]: MRT_FILTER_TYPE.FUZZY,
+      [header.id]: MRT_FILTER_TYPE.BEST_MATCH,
     }));
   };
 
   if (column.Filter) {
-    return <>{column.Filter?.({ column })}</>;
+    return <>{column.Filter?.({ header, tableInstance })}</>;
   }
 
-  const filterId = `mrt-${idPrefix}-${column.id}-filter-text-field`;
-  const filterType = tableInstance.state.currentFilterTypes[column.id];
+  const filterId = `mrt-${idPrefix}-${header.id}-filter-text-field`;
+  const filterType = currentFilterTypes?.[header.id];
   const isSelectFilter = !!column.filterSelectOptions;
   const filterChipLabel =
     !(filterType instanceof Function) &&
@@ -88,7 +107,7 @@ export const MRT_FilterTextField: FC<Props> = ({ column }) => {
       : '';
   const filterPlaceholder = localization.filterByColumn?.replace(
     '{column}',
-    String(column.Header),
+    String(column.header),
   );
 
   return (
@@ -132,22 +151,16 @@ export const MRT_FilterTextField: FC<Props> = ({ column }) => {
           sx: { fontSize: '0.6rem', lineHeight: '0.8rem' },
         }}
         label={isSelectFilter && !filterValue ? filterPlaceholder : undefined}
-        InputLabelProps={{
-          shrink: false,
-          sx: {
-            maxWidth: 'calc(100% - 2.5rem)',
-          },
-          title: filterPlaceholder,
-        }}
         margin="none"
         placeholder={
-          filterChipLabel || isSelectFilter ? undefined : filterPlaceholder
+          filterPlaceholder
+          // filterChipLabel || isSelectFilter ? undefined : filterPlaceholder
         }
-        onChange={(e: ChangeEvent<HTMLInputElement>) => {
-          setFilterValue(e.target.value);
-          handleChange(e.target.value);
+        onChange={(event: ChangeEvent<HTMLInputElement>) => {
+          setFilterValue(event.target.value);
+          handleChange(event);
         }}
-        onClick={(e) => e.stopPropagation()}
+        onClick={(e: MouseEvent<HTMLInputElement>) => e.stopPropagation()}
         select={isSelectFilter}
         value={filterValue ?? ''}
         variant="standard"
@@ -237,8 +250,9 @@ export const MRT_FilterTextField: FC<Props> = ({ column }) => {
       </TextField>
       <MRT_FilterTypeMenu
         anchorEl={anchorEl}
-        column={column}
+        header={header}
         setAnchorEl={setAnchorEl}
+        tableInstance={tableInstance}
       />
     </>
   );

package/src/inputs/MRT_SearchTextField.tsx

@@ -1,37 +1,62 @@
-import React, { ChangeEvent, FC, useState } from 'react';
-import { Collapse, IconButton, InputAdornment, TextField } from '@mui/material';
-import { useMRT } from '../useMRT';
-import { useAsyncDebounce } from 'react-table';
+import React, {
+  ChangeEvent,
+  FC,
+  MouseEvent,
+  useCallback,
+  useState,
+} from 'react';
+import {
+  Collapse,
+  debounce,
+  IconButton,
+  InputAdornment,
+  TextField,
+  Tooltip,
+} from '@mui/material';
+import { MRT_FilterTypeMenu } from '../menus/MRT_FilterTypeMenu';
+import { MRT_TableInstance } from '..';
 
-interface Props {}
+interface Props {
+  tableInstance: MRT_TableInstance;
+}
 
-export const MRT_SearchTextField: FC<Props> = () => {
+export const MRT_SearchTextField: FC<Props> = ({ tableInstance }) => {
   const {
-    icons: { SearchIcon, CloseIcon },
-    idPrefix,
-    localization,
-    muiSearchTextFieldProps,
-    onGlobalFilterChange,
-    tableInstance,
-  } = useMRT();
+    getState,
+    setGlobalFilter,
+    options: {
+      icons: { SearchIcon, CloseIcon },
+      idPrefix,
+      localization,
+      muiSearchTextFieldProps,
+      onGlobalFilterChange,
+    },
+  } = tableInstance;
+
+  const { globalFilter, showSearch } = getState();
 
-  const [searchValue, setSearchValue] = useState('');
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const [searchValue, setSearchValue] = useState(globalFilter ?? '');
 
-  const handleChange = useAsyncDebounce(
-    (event: ChangeEvent<HTMLInputElement>) => {
-      tableInstance.setGlobalFilter(event.target.value ?? undefined);
+  const handleChange = useCallback(
+    debounce((event: ChangeEvent<HTMLInputElement>) => {
+      setGlobalFilter(event.target.value ?? undefined);
       onGlobalFilterChange?.(event);
-    },
-    200,
+    }, 200),
+    [],
   );
 
+  const handleGlobalFilterMenuOpen = (event: MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
   const handleClear = () => {
     setSearchValue('');
-    tableInstance.setGlobalFilter(undefined);
+    setGlobalFilter(undefined);
   };
 
   return (
-    <Collapse in={tableInstance.state.showSearch} orientation="horizontal">
+    <Collapse in={showSearch} orientation="horizontal">
       <TextField
         id={`mrt-${idPrefix}-search-text-field`}
         placeholder={localization.search}
@@ -44,7 +69,18 @@ export const MRT_SearchTextField: FC<Props> = () => {
         InputProps={{
           startAdornment: (
             <InputAdornment position="start">
-              <SearchIcon fontSize="small" />
+              <Tooltip arrow title={localization.changeSearchMode}>
+                <span>
+                  <IconButton
+                    aria-label={localization.changeSearchMode}
+                    onClick={handleGlobalFilterMenuOpen}
+                    size="small"
+                    sx={{ height: '1.75rem', width: '1.75rem' }}
+                  >
+                    <SearchIcon fontSize="small" />
+                  </IconButton>
+                </span>
+              </Tooltip>
             </InputAdornment>
           ),
           endAdornment: (
@@ -64,6 +100,11 @@ export const MRT_SearchTextField: FC<Props> = () => {
         {...muiSearchTextFieldProps}
         sx={{ justifySelf: 'end', ...muiSearchTextFieldProps?.sx }}
       />
+      <MRT_FilterTypeMenu
+        anchorEl={anchorEl}
+        setAnchorEl={setAnchorEl}
+        tableInstance={tableInstance}
+      />
     </Collapse>
   );
 };

package/src/inputs/MRT_SelectCheckbox.tsx

@@ -1,61 +1,94 @@
 import React, { ChangeEvent, FC } from 'react';
-import { Checkbox, TableCell, Tooltip } from '@mui/material';
-import { useMRT } from '../useMRT';
-import type { MRT_Row } from '..';
-import { commonTableBodyButtonCellStyles } from '../body/MRT_TableBodyCell';
+import { Checkbox, Tooltip } from '@mui/material';
+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 }) => {
-  const { localization, onRowSelectChange, onSelectAllChange, tableInstance } =
-    useMRT();
+export const MRT_SelectCheckbox: FC<Props> = ({
+  row,
+  selectAll,
+  tableInstance,
+}) => {
+  const {
+    getRowModel,
+    getSelectedRowModel,
+    getState,
+    getToggleAllRowsSelectedProps,
+    options: {
+      isLoading,
+      localization,
+      muiSelectCheckboxProps,
+      onSelectChange,
+      onSelectAllChange,
+    },
+  } = tableInstance;
 
-  const onSelectChange = (event: ChangeEvent<HTMLInputElement>) => {
+  const { isDensePadding } = getState();
+
+  const handleSelectChange = (event: ChangeEvent<HTMLInputElement>) => {
     if (selectAll) {
-      tableInstance?.getToggleAllRowsSelectedProps?.()?.onChange?.(event);
-      onSelectAllChange?.(event, tableInstance.selectedFlatRows);
+      getToggleAllRowsSelectedProps?.()?.onChange?.(event as any);
+      onSelectAllChange?.(
+        event,
+        event.target.checked ? getRowModel().flatRows : [],
+      );
     } else if (row) {
-      row?.getToggleRowSelectedProps()?.onChange?.(event);
-      onRowSelectChange?.(event, row, tableInstance.selectedFlatRows);
+      row?.getToggleSelectedProps()?.onChange?.(event as any);
+      onSelectChange?.(
+        event,
+        row,
+        event.target.checked
+          ? [...getSelectedRowModel().flatRows, row]
+          : getSelectedRowModel().flatRows.filter(
+              (selectedRow) => selectedRow.id !== row.id,
+            ),
+      );
     }
   };
 
-  const checkboxProps = selectAll
-    ? tableInstance.getToggleAllRowsSelectedProps()
-    : row?.getToggleRowSelectedProps();
+  const mTableBodyRowSelectCheckboxProps =
+    muiSelectCheckboxProps instanceof Function
+      ? muiSelectCheckboxProps(selectAll, row, tableInstance)
+      : muiSelectCheckboxProps;
+
+  const rtSelectCheckboxProps = selectAll
+    ? getToggleAllRowsSelectedProps()
+    : row?.getToggleSelectedProps();
+
+  const checkboxProps = {
+    ...rtSelectCheckboxProps,
+    ...mTableBodyRowSelectCheckboxProps,
+  };
 
   return (
-    <TableCell
-      sx={{
-        ...commonTableBodyButtonCellStyles(tableInstance.state.densePadding),
-        maxWidth: '2rem',
-        width: '2rem',
-      }}
+    <Tooltip
+      arrow
+      enterDelay={1000}
+      enterNextDelay={1000}
+      title={
+        selectAll ? localization.toggleSelectAll : localization.toggleSelectRow
+      }
     >
-      <Tooltip
-        arrow
-        enterDelay={1000}
-        enterNextDelay={1000}
-        title={
-          selectAll
+      <Checkbox
+        disabled={isLoading}
+        inputProps={{
+          'aria-label': selectAll
             ? localization.toggleSelectAll
-            : localization.toggleSelectRow
-        }
-      >
-        <Checkbox
-          inputProps={{
-            'aria-label': selectAll
-              ? localization.toggleSelectAll
-              : localization.toggleSelectRow,
-          }}
-          onChange={onSelectChange}
-          {...checkboxProps}
-          title={undefined}
-        />
-      </Tooltip>
-    </TableCell>
+            : localization.toggleSelectRow,
+        }}
+        size={isDensePadding ? 'small' : 'medium'}
+        {...checkboxProps}
+        sx={{
+          height: isDensePadding ? '1.75rem' : '2.25rem',
+          width: isDensePadding ? '1.75rem' : '2.25rem',
+        }}
+        onChange={handleSelectChange}
+        title={undefined}
+      />
+    </Tooltip>
   );
 };

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,17 @@ export interface MRT_Localization {
   groupedBy: string;
   hideAll: string;
   hideColumn: string;
+  pinToLeft: string;
+  pinToRight: string;
   rowActions: 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 +51,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 +68,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 +86,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',
+  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 +109,5 @@ export const MRT_DefaultLocalization_EN: MRT_Localization = {
   toggleSelectAll: 'Toggle select all',
   toggleSelectRow: 'Toggle select row',
   ungroupByColumn: 'Ungroup by {column}',
+  unpin: 'Unpin',
 };