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

package/src/head/MRT_TableHeadRow.tsx

@@ -1,114 +1,37 @@
-import React, { FC, useMemo } from 'react';
-import { TableCell, TableRow } from '@mui/material';
-import {
-  commonTableHeadCellStyles,
-  MRT_TableHeadCell,
-} from './MRT_TableHeadCell';
-import { commonTableBodyButtonCellStyles } from '../body/MRT_TableBodyCell';
-import { useMRT } from '../useMRT';
-import { MRT_SelectCheckbox } from '../inputs/MRT_SelectCheckbox';
-import { MRT_ExpandAllButton } from '../buttons/MRT_ExpandAllButton';
-import { MRT_TableSpacerCell } from '../table/MRT_TableSpacerCell';
-import { MRT_TableHeadCellActions } from './MRT_TableHeadCellActions';
-import type { MRT_HeaderGroup } from '..';
+import React, { FC } from 'react';
+import { TableRow } from '@mui/material';
+import { MRT_TableHeadCell } from './MRT_TableHeadCell';
+import type { MRT_Header, MRT_HeaderGroup, MRT_TableInstance } from '..';
 
 interface Props {
   headerGroup: MRT_HeaderGroup;
+  tableInstance: MRT_TableInstance;
 }
 
-export const MRT_TableHeadRow: FC<Props> = ({ headerGroup }) => {
+export const MRT_TableHeadRow: FC<Props> = ({ headerGroup, tableInstance }) => {
   const {
-    anyRowsCanExpand,
-    disableExpandAll,
-    disableSelectAll,
-    enableRowActions,
-    enableRowEditing,
-    enableRowNumbers,
-    enableSelection,
-    muiTableHeadRowProps,
-    positionActionsColumn,
-    renderDetailPanel,
-    tableInstance,
-  } = useMRT();
-
-  const isParentHeader = useMemo(
-    () => headerGroup.headers.some((h) => (h.columns?.length ?? 0) > 0),
-    [headerGroup.headers],
-  );
+    options: { muiTableHeadRowProps },
+  } = tableInstance;
 
   const mTableHeadRowProps =
     muiTableHeadRowProps instanceof Function
-      ? muiTableHeadRowProps(headerGroup)
+      ? muiTableHeadRowProps({ headerGroup, tableInstance })
       : muiTableHeadRowProps;
 
   const tableRowProps = {
+    ...headerGroup?.getHeaderGroupProps(),
     ...mTableHeadRowProps,
-    ...headerGroup.getHeaderGroupProps(),
-    style: {
-      ...headerGroup.getHeaderGroupProps().style,
-      ...mTableHeadRowProps?.style,
-    },
   };
 
   return (
     <TableRow {...tableRowProps}>
-      {enableRowNumbers &&
-        (isParentHeader ? (
-          <MRT_TableSpacerCell />
-        ) : (
-          <TableCell
-            sx={{
-              ...commonTableHeadCellStyles(tableInstance.state.densePadding),
-            }}
-          >
-            #
-          </TableCell>
-        ))}
-      {(enableRowActions || enableRowEditing) &&
-        positionActionsColumn === 'first' &&
-        (isParentHeader ? (
-          <MRT_TableSpacerCell />
-        ) : (
-          <MRT_TableHeadCellActions />
-        ))}
-      {anyRowsCanExpand || renderDetailPanel ? (
-        !disableExpandAll && !isParentHeader ? (
-          <MRT_ExpandAllButton />
-        ) : (
-          <MRT_TableSpacerCell
-            width={`${
-              renderDetailPanel ? 2 : tableInstance.expandedDepth + 0.5
-            }rem`}
-          />
-        )
-      ) : null}
-      {enableSelection ? (
-        !isParentHeader && !disableSelectAll ? (
-          <TableCell
-            sx={{
-              ...commonTableBodyButtonCellStyles(
-                tableInstance.state.densePadding,
-              ),
-              maxWidth: '3rem',
-              width: '3rem',
-            }}
-          >
-            <MRT_SelectCheckbox selectAll />
-          </TableCell>
-        ) : (
-          <MRT_TableSpacerCell width="1rem" />
-        )
-      ) : null}
-      {headerGroup.headers.map((column: MRT_HeaderGroup) => (
-        <MRT_TableHeadCell key={column.getHeaderProps().key} column={column} />
+      {headerGroup.headers.map((header: MRT_Header, index) => (
+        <MRT_TableHeadCell
+          header={header}
+          key={header.id || index}
+          tableInstance={tableInstance}
+        />
       ))}
-      {(enableRowActions || enableRowEditing) &&
-        positionActionsColumn === 'last' &&
-        (isParentHeader ? (
-          <MRT_TableSpacerCell />
-        ) : (
-          <MRT_TableHeadCellActions />
-        ))}
     </TableRow>
   );
 };

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,57 +1,72 @@
-import React, { ChangeEvent, FC } from 'react';
+import React, {
+  ChangeEvent,
+  FC,
+  FocusEvent,
+  MouseEvent,
+  useState,
+} from 'react';
 import { TextField } from '@mui/material';
-import { useMRT } from '../useMRT';
-import type { MRT_Cell } from '..';
+import type { MRT_Cell, MRT_Row, 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 },
+    getState,
+    options: {
+      enableEditing,
+      muiTableBodyCellEditTextFieldProps,
+      setCurrentEditingRow,
     },
-  } = useMRT();
+  } = tableInstance;
+
+  const [value, setValue] = useState(cell.value);
+
+  const { column, row } = cell;
 
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
-    if (currentEditingRow) {
-      cell.row.values[cell.column.id] = event.target.value;
-      setCurrentEditingRow({
-        ...currentEditingRow,
-      });
+    setValue(event.target.value);
+    column.onCellEditChange?.({ event, cell, tableInstance });
+  };
+
+  const handleBlur = (event: FocusEvent<HTMLInputElement>) => {
+    if (getState().currentEditingRow) {
+      row.values[column.id] = value;
+      setCurrentEditingRow({ ...getState().currentEditingRow } as MRT_Row);
     }
-    cell.column.onCellEditChange?.(event, cell);
+    column.onCellEditBlur?.({ event, cell, tableInstance });
   };
 
   const mTableBodyCellEditTextFieldProps =
     muiTableBodyCellEditTextFieldProps instanceof Function
-      ? muiTableBodyCellEditTextFieldProps(cell)
+      ? muiTableBodyCellEditTextFieldProps({ cell, tableInstance })
       : muiTableBodyCellEditTextFieldProps;
 
   const mcTableBodyCellEditTextFieldProps =
-    cell.column.muiTableBodyCellEditTextFieldProps instanceof Function
-      ? cell.column.muiTableBodyCellEditTextFieldProps(cell)
-      : cell.column.muiTableBodyCellEditTextFieldProps;
+    column.muiTableBodyCellEditTextFieldProps instanceof Function
+      ? column.muiTableBodyCellEditTextFieldProps({ cell, tableInstance })
+      : column.muiTableBodyCellEditTextFieldProps;
 
   const textFieldProps = {
     ...mTableBodyCellEditTextFieldProps,
     ...mcTableBodyCellEditTextFieldProps,
   };
 
-  if (!cell.column.disableEditing && cell.column.Edit) {
-    return <>{cell.column.Edit({ ...textFieldProps, cell })}</>;
+  if (enableEditing && column.enableEditing !== false && column.Edit) {
+    return <>{column.Edit?.({ cell, tableInstance })}</>;
   }
 
   return (
     <TextField
       margin="dense"
+      onBlur={handleBlur}
       onChange={handleChange}
-      onClick={(e) => e.stopPropagation()}
-      placeholder={cell.column.Header as string}
-      value={cell.value}
+      onClick={(e: MouseEvent<HTMLInputElement>) => e.stopPropagation()}
+      placeholder={column.header}
+      value={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,36 +15,41 @@ 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);
 
   const mTableHeadCellFilterTextFieldProps =
     muiTableHeadCellFilterTextFieldProps instanceof Function
-      ? muiTableHeadCellFilterTextFieldProps(column)
+      ? muiTableHeadCellFilterTextFieldProps({ column, tableInstance })
       : muiTableHeadCellFilterTextFieldProps;
 
   const mcTableHeadCellFilterTextFieldProps =
     column.muiTableHeadCellFilterTextFieldProps instanceof Function
-      ? column.muiTableHeadCellFilterTextFieldProps(column)
+      ? column.muiTableHeadCellFilterTextFieldProps({ column, tableInstance })
       : column.muiTableHeadCellFilterTextFieldProps;
 
   const textFieldProps = {
@@ -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,67 @@
-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 [searchValue, setSearchValue] = useState('');
+  const { globalFilter, showSearch } = getState();
 
-  const handleChange = useAsyncDebounce(
-    (event: ChangeEvent<HTMLInputElement>) => {
-      tableInstance.setGlobalFilter(event.target.value ?? undefined);
-      onGlobalFilterChange?.(event);
-    },
-    200,
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const [searchValue, setSearchValue] = useState(globalFilter ?? '');
+
+  const handleChange = useCallback(
+    debounce((event: ChangeEvent<HTMLInputElement>) => {
+      setGlobalFilter(event.target.value ?? undefined);
+      onGlobalFilterChange?.({ event, tableInstance });
+    }, 200),
+    [],
   );
 
+  const handleGlobalFilterMenuOpen = (event: MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
   const handleClear = () => {
     setSearchValue('');
-    tableInstance.setGlobalFilter(undefined);
+    setGlobalFilter(undefined);
   };
 
+  const textFieldProps =
+    muiSearchTextFieldProps instanceof Function
+      ? muiSearchTextFieldProps({ tableInstance })
+      : muiSearchTextFieldProps;
+
   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 +74,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: (
@@ -61,8 +102,13 @@ export const MRT_SearchTextField: FC<Props> = () => {
             </InputAdornment>
           ),
         }}
-        {...muiSearchTextFieldProps}
-        sx={{ justifySelf: 'end', ...muiSearchTextFieldProps?.sx }}
+        {...textFieldProps}
+        sx={{ justifySelf: 'end', ...textFieldProps?.sx }}
+      />
+      <MRT_FilterTypeMenu
+        anchorEl={anchorEl}
+        setAnchorEl={setAnchorEl}
+        tableInstance={tableInstance}
       />
     </Collapse>
   );