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

package/src/head/MRT_TableHeadCell.tsx

@@ -1,19 +1,21 @@
 import React, { FC, MouseEvent } from 'react';
 import {
+  Box,
+  Collapse,
+  Divider,
+  IconButton,
   TableCell,
   TableSortLabel,
-  Divider,
-  Collapse,
+  Theme,
   Tooltip,
-  Box,
-  IconButton,
   alpha,
-  Theme,
+  lighten,
 } from '@mui/material';
 import { MRT_FilterTextField } from '../inputs/MRT_FilterTextField';
 import { MRT_ToggleColumnActionMenuButton } from '../buttons/MRT_ToggleColumnActionMenuButton';
 import type { MRT_Header, MRT_TableInstance } from '..';
-import { ColumnResizerProps } from '@tanstack/react-table';
+import MRT_FilterRangeFields from '../inputs/MRT_FilterRangeFields';
+import { MRT_FILTER_OPTION } from '../enums';
 
 interface Props {
   header: MRT_Header;
@@ -34,7 +36,7 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, tableInstance }) => {
     setShowFilters,
   } = tableInstance;
 
-  const { isDensePadding, showFilters } = getState();
+  const { currentFilterFns, isDensePadding, showFilters } = getState();
 
   const { column } = header;
 
@@ -49,7 +51,6 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, tableInstance }) => {
       : column.muiTableHeadCellProps;
 
   const tableCellProps = {
-    ...header.getHeaderProps(),
     ...mTableHeadCellProps,
     ...mcTableHeadCellProps,
   };
@@ -60,23 +61,30 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, tableInstance }) => {
       : localization.sortedByColumnAsc.replace('{column}', column.header)
     : localization.unsorted;
 
-  const filterType = getState()?.currentFilterTypes?.[header.id];
+  const filterFn = getState()?.currentFilterFns?.[header.id];
 
-  const filterTooltip = !!column.getColumnFilterValue()
+  const filterTooltip = !!column.getFilterValue()
     ? localization.filteringByColumn
         .replace('{column}', String(column.header))
         .replace(
           '{filterType}',
-          filterType instanceof Function
+          filterFn instanceof Function
             ? ''
             : // @ts-ignore
               localization[
-                `filter${
-                  filterType.charAt(0).toUpperCase() + filterType.slice(1)
-                }`
+                `filter${filterFn.charAt(0).toUpperCase() + filterFn.slice(1)}`
               ],
         )
-        .replace('{filterValue}', column.getColumnFilterValue() as string)
+        .replace(
+          '{filterValue}',
+          `"${
+            Array.isArray(column.getFilterValue())
+              ? (column.getFilterValue() as [string, string]).join(
+                  `" ${localization.and} "`,
+                )
+              : (column.getFilterValue() as string)
+          }"`,
+        )
         .replace('" "', '')
     : localization.showHideFilters;
 
@@ -86,21 +94,51 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, tableInstance }) => {
       tableInstance,
     }) ?? column.header;
 
+  const getIsLastLeftPinnedColumn = () => {
+    return (
+      column.getIsPinned() === 'left' &&
+      tableInstance.getLeftLeafHeaders().length - 1 === column.getPinnedIndex()
+    );
+  };
+
+  const getIsFirstRightPinnedColumn = () => {
+    return column.getIsPinned() === 'right' && column.getPinnedIndex() === 0;
+  };
+
+  const getTotalRight = () => {
+    return (
+      (tableInstance.getRightLeafHeaders().length -
+        1 -
+        column.getPinnedIndex()) *
+      150
+    );
+  };
+
   return (
     <TableCell
       align={column.columnDefType === 'group' ? 'center' : 'left'}
+      colSpan={header.colSpan}
       {...tableCellProps}
-      //@ts-ignore
       sx={(theme: Theme) => ({
-        backgroundColor: theme.palette.background.default,
-        backgroundImage: `linear-gradient(${alpha(
-          theme.palette.common.white,
-          0.05,
-        )},${alpha(theme.palette.common.white, 0.05)})`,
+        backgroundColor:
+          column.getIsPinned() && column.columnDefType !== 'group'
+            ? alpha(lighten(theme.palette.background.default, 0.04), 0.95)
+            : 'inherit',
+        backgroundImage: 'inherit',
+        boxShadow: getIsLastLeftPinnedColumn()
+          ? `4px 0 4px -2px ${alpha(theme.palette.common.black, 0.1)}`
+          : getIsFirstRightPinnedColumn()
+          ? `-4px 0 4px -2px ${alpha(theme.palette.common.black, 0.1)}`
+          : undefined,
         fontWeight: 'bold',
         height: '100%',
-        maxWidth: `min(${column.getWidth()}px, ${column.maxWidth}px)`,
-        minWidth: `max(${column.getWidth()}px, ${column.minWidth}px)`,
+        left:
+          column.getIsPinned() === 'left'
+            ? `${column.getStart('left')}px`
+            : undefined,
+        maxWidth: `min(${column.getSize()}px, fit-content)`,
+        minWidth: `max(${column.getSize()}px, ${column.minSize}px)`,
+        overflow: 'visible',
         p: isDensePadding
           ? column.columnDefType === 'display'
             ? '0 0.5rem'
@@ -108,20 +146,28 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, tableInstance }) => {
           : column.columnDefType === 'display'
           ? '0.5rem 0.75rem'
           : '1rem',
+        pb: column.columnDefType === 'display' ? 0 : undefined,
+        position:
+          column.getIsPinned() && column.columnDefType !== 'group'
+            ? 'sticky'
+            : undefined,
         pt:
           column.columnDefType === 'display'
             ? 0
             : isDensePadding
             ? '0.75rem'
             : '1.25rem',
-        pb: column.columnDefType === 'display' ? 0 : undefined,
-        overflow: 'visible',
+        right:
+          column.getIsPinned() === 'right' ? `${getTotalRight()}px` : undefined,
         transition: `all ${enableColumnResizing ? 0 : '0.2s'} ease-in-out`,
         verticalAlign: 'text-top',
-        width: header.getWidth(),
-        zIndex: column.getIsResizing() ? 2 : 1,
-        //@ts-ignore
-        ...tableCellProps?.sx,
+        width: header.getSize(),
+        zIndex: column.getIsResizing()
+          ? 3
+          : column.getIsPinned() && column.columnDefType !== 'group'
+          ? 2
+          : 1,
+        ...(tableCellProps?.sx as any),
       })}
     >
       {header.isPlaceholder ? null : column.columnDefType === 'display' ? (
@@ -165,7 +211,7 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, tableInstance }) => {
             )}
             {column.columnDefType === 'data' &&
               enableColumnFilters &&
-              !!column.getCanColumnFilter() && (
+              !!column.getCanFilter() && (
                 <Tooltip arrow placement="top" title={filterTooltip}>
                   <IconButton
                     disableRipple
@@ -176,7 +222,7 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, tableInstance }) => {
                     size="small"
                     sx={{
                       m: 0,
-                      opacity: !!column.getColumnFilterValue() ? 0.8 : 0,
+                      opacity: !!column.getFilterValue() ? 0.8 : 0,
                       p: '2px',
                       transition: 'all 0.2s ease-in-out',
                       '&:hover': {
@@ -185,7 +231,7 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, tableInstance }) => {
                       },
                     }}
                   >
-                    {showFilters && !column.getColumnFilterValue() ? (
+                    {showFilters && !column.getFilterValue() ? (
                       <FilterAltOff />
                     ) : (
                       <FilterAltIcon />
@@ -206,7 +252,7 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, tableInstance }) => {
             <Divider
               flexItem
               orientation="vertical"
-              onDoubleClick={() => header.resetSize()}
+              onDoubleClick={() => column.resetSize()}
               sx={(theme: Theme) => ({
                 borderRadius: '2px',
                 borderRightWidth: '2px',
@@ -227,21 +273,32 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, tableInstance }) => {
                   opacity: 1,
                 },
               })}
-              {...(header.getResizerProps((props: ColumnResizerProps) => ({
-                ...props,
-                style: {
-                  transform: column.getIsResizing()
-                    ? `translateX(${getState().columnSizingInfo.deltaOffset}px)`
-                    : '',
-                },
-              })) as any)}
+              {...{
+                onMouseDown: header.getResizeHandler,
+                onTouchStart: header.getResizeHandler,
+              }}
+              style={{
+                transform: column.getIsResizing()
+                  ? `translateX(${getState().columnSizingInfo.deltaOffset}px)`
+                  : 'none',
+              }}
             />
           )}
         </Box>
       )}
-      {column.columnDefType === 'data' && column.getCanColumnFilter() && (
-        <Collapse in={showFilters}>
-          <MRT_FilterTextField header={header} tableInstance={tableInstance} />
+      {column.columnDefType === 'data' && column.getCanFilter() && (
+        <Collapse in={showFilters} mountOnEnter unmountOnExit>
+          {currentFilterFns[column.id] === MRT_FILTER_OPTION.BETWEEN ? (
+            <MRT_FilterRangeFields
+              header={header}
+              tableInstance={tableInstance}
+            />
+          ) : (
+            <MRT_FilterTextField
+              header={header}
+              tableInstance={tableInstance}
+            />
+          )}
         </Collapse>
       )}
     </TableCell>

package/src/head/MRT_TableHeadRow.tsx

@@ -1,5 +1,5 @@
-import React, { CSSProperties, FC } from 'react';
-import { alpha, TableRow } from '@mui/material';
+import React, { FC } from 'react';
+import { alpha, lighten, TableRow } from '@mui/material';
 import { MRT_TableHeadCell } from './MRT_TableHeadCell';
 import type { MRT_Header, MRT_HeaderGroup, MRT_TableInstance } from '..';
 
@@ -13,26 +13,19 @@ export const MRT_TableHeadRow: FC<Props> = ({ headerGroup, tableInstance }) => {
     options: { muiTableHeadRowProps },
   } = tableInstance;
 
-  const mTableHeadRowProps =
+  const tableRowProps =
     muiTableHeadRowProps instanceof Function
       ? muiTableHeadRowProps({ headerGroup, tableInstance })
       : muiTableHeadRowProps;
 
-  const tableRowProps = {
-    ...headerGroup?.getHeaderGroupProps(),
-    ...mTableHeadRowProps,
-  };
-
   return (
     <TableRow
       {...tableRowProps}
-      sx={(theme) =>
-        ({
-          boxShadow: `4px 0 8px ${alpha(theme.palette.common.black, 0.1)}`,
-          //@ts-ignore
-          ...tableRowProps?.sx,
-        } as CSSProperties)
-      }
+      sx={(theme) => ({
+        boxShadow: `4px 0 8px ${alpha(theme.palette.common.black, 0.1)}`,
+        backgroundColor: lighten(theme.palette.background.default, 0.04),
+        ...(tableRowProps?.sx as any),
+      })}
     >
       {headerGroup.headers.map((header: MRT_Header, index) => (
         <MRT_TableHeadCell

package/src/inputs/MRT_EditCellTextField.tsx

@@ -27,7 +27,7 @@ export const MRT_EditCellTextField: FC<Props> = ({ cell, tableInstance }) => {
     setCurrentEditingRow,
   } = tableInstance;
 
-  const [value, setValue] = useState(cell.value);
+  const [value, setValue] = useState(cell.getValue());
 
   const { column, row } = cell;
 
@@ -39,7 +39,7 @@ export const MRT_EditCellTextField: FC<Props> = ({ cell, tableInstance }) => {
 
   const handleBlur = (event: FocusEvent<HTMLInputElement>) => {
     if (getState().currentEditingRow) {
-      row.values[column.id] = value;
+      row._valuesCache[column.id] = value;
       setCurrentEditingRow({ ...getState().currentEditingRow } as MRT_Row);
     }
     setCurrentEditingCell(null);

package/src/inputs/MRT_FilterRangeFields.tsx

@@ -0,0 +1,41 @@
+import React, { FC } from 'react';
+import { Box } from '@mui/material';
+import { MRT_FilterTextField } from './MRT_FilterTextField';
+import { MRT_Header, MRT_TableInstance } from '..';
+
+interface Props {
+  header: MRT_Header;
+  tableInstance: MRT_TableInstance;
+}
+
+const MRT_FilterRangeFields: FC<Props> = ({ header, tableInstance }) => {
+  const {
+    options: { localization },
+  } = tableInstance;
+
+  return (
+    <Box sx={{ display: 'grid', gridTemplateColumns: '6fr auto 5fr' }}>
+      <MRT_FilterTextField
+        header={header}
+        inputIndex={0}
+        tableInstance={tableInstance}
+      />
+      <Box
+        sx={{
+          width: '100%',
+          minWidth: '5ch',
+          textAlign: 'center',
+        }}
+      >
+        {localization.to}
+      </Box>
+      <MRT_FilterTextField
+        header={header}
+        inputIndex={1}
+        tableInstance={tableInstance}
+      />
+    </Box>
+  );
+};
+
+export default MRT_FilterRangeFields;

package/src/inputs/MRT_FilterTextField.tsx

@@ -16,15 +16,20 @@ import {
   Tooltip,
 } from '@mui/material';
 import type { MRT_Header, MRT_TableInstance } from '..';
-import { MRT_FilterTypeMenu } from '../menus/MRT_FilterTypeMenu';
-import { MRT_FILTER_TYPE } from '../enums';
+import { MRT_FilterOptionMenu } from '../menus/MRT_FilterOptionMenu';
+import { MRT_FILTER_OPTION } from '../enums';
 
 interface Props {
   header: MRT_Header;
+  inputIndex?: number;
   tableInstance: MRT_TableInstance;
 }
 
-export const MRT_FilterTextField: FC<Props> = ({ header, tableInstance }) => {
+export const MRT_FilterTextField: FC<Props> = ({
+  header,
+  inputIndex,
+  tableInstance,
+}) => {
   const {
     getState,
     options: {
@@ -33,12 +38,12 @@ export const MRT_FilterTextField: FC<Props> = ({ header, tableInstance }) => {
       localization,
       muiTableHeadCellFilterTextFieldProps,
     },
-    setCurrentFilterTypes,
+    setCurrentFilterFns,
   } = tableInstance;
 
   const { column } = header;
 
-  const { currentFilterTypes } = getState();
+  const { currentFilterFns } = getState();
 
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
 
@@ -57,14 +62,22 @@ export const MRT_FilterTextField: FC<Props> = ({ header, tableInstance }) => {
     ...mcTableHeadCellFilterTextFieldProps,
   } as TextFieldProps;
 
-  const [filterValue, setFilterValue] = useState<string>(
-    (column.getColumnFilterValue() ?? '') as string,
+  const [filterValue, setFilterValue] = useState<string>(() =>
+    inputIndex !== undefined
+      ? (column.getFilterValue() as [string, string])?.[inputIndex] ?? ''
+      : (column.getFilterValue() as string) ?? '',
   );
 
-  const handleChange = useCallback(
+  const handleChangeDebounced = useCallback(
     debounce(
       (event: ChangeEvent<HTMLInputElement>) =>
-        column.setColumnFilterValue(event.target.value ?? undefined),
+        inputIndex !== undefined
+          ? column.setFilterValue((old: [string, string]) => {
+              const newFilterValues = old ?? ['', ''];
+              newFilterValues[inputIndex] = event.target.value;
+              return newFilterValues;
+            })
+          : column.setFilterValue(event.target.value ?? undefined),
       150,
     ),
     [],
@@ -76,15 +89,23 @@ export const MRT_FilterTextField: FC<Props> = ({ header, tableInstance }) => {
 
   const handleClear = () => {
     setFilterValue('');
-    column.setColumnFilterValue(undefined);
+    if (inputIndex !== undefined) {
+      column.setFilterValue((old: [string | undefined, string | undefined]) => {
+        const newFilterValues = old ?? ['', ''];
+        newFilterValues[inputIndex] = undefined;
+        return newFilterValues;
+      });
+    } else {
+      column.setFilterValue(undefined);
+    }
   };
 
   const handleClearFilterChip = () => {
     setFilterValue('');
-    column.setColumnFilterValue(undefined);
-    setCurrentFilterTypes((prev) => ({
+    column.setFilterValue(undefined);
+    setCurrentFilterFns((prev) => ({
       ...prev,
-      [header.id]: MRT_FILTER_TYPE.BEST_MATCH,
+      [header.id]: MRT_FILTER_OPTION.FUZZY,
     }));
   };
 
@@ -92,23 +113,29 @@ export const MRT_FilterTextField: FC<Props> = ({ header, tableInstance }) => {
     return <>{column.Filter?.({ header, tableInstance })}</>;
   }
 
-  const filterId = `mrt-${idPrefix}-${header.id}-filter-text-field`;
-  const filterType = currentFilterTypes?.[header.id];
+  const filterId = `mrt-${idPrefix}-${header.id}-filter-text-field${
+    inputIndex ?? ''
+  }`;
+  const filterFn = currentFilterFns?.[header.id];
   const isSelectFilter = !!column.filterSelectOptions;
   const filterChipLabel =
-    !(filterType instanceof Function) &&
-    [MRT_FILTER_TYPE.EMPTY, MRT_FILTER_TYPE.NOT_EMPTY].includes(
-      filterType as MRT_FILTER_TYPE,
+    !(filterFn instanceof Function) &&
+    [MRT_FILTER_OPTION.EMPTY, MRT_FILTER_OPTION.NOT_EMPTY].includes(
+      filterFn as MRT_FILTER_OPTION,
     )
       ? //@ts-ignore
         localization[
-          `filter${filterType.charAt(0).toUpperCase() + filterType.slice(1)}`
+          `filter${filterFn.charAt(0).toUpperCase() + filterFn.slice(1)}`
         ]
       : '';
-  const filterPlaceholder = localization.filterByColumn?.replace(
-    '{column}',
-    String(column.header),
-  );
+  const filterPlaceholder =
+    inputIndex === undefined
+      ? localization.filterByColumn?.replace('{column}', String(column.header))
+      : inputIndex === 0
+      ? localization.min
+      : inputIndex === 1
+      ? localization.max
+      : '';
 
   return (
     <>
@@ -124,48 +151,53 @@ export const MRT_FilterTextField: FC<Props> = ({ header, tableInstance }) => {
           title: filterPlaceholder,
         }}
         helperText={
-          <label htmlFor={filterId}>
-            {filterType instanceof Function
-              ? localization.filterMode.replace(
-                  '{filterType}',
-                  // @ts-ignore
-                  localization[
-                    `filter${
-                      filterType.name.charAt(0).toUpperCase() +
-                      filterType.name.slice(1)
-                    }`
-                  ] ?? '',
-                ) ?? ''
-              : localization.filterMode.replace(
-                  '{filterType}',
-                  // @ts-ignore
-                  localization[
-                    `filter${
-                      filterType.charAt(0).toUpperCase() + filterType.slice(1)
-                    }`
-                  ],
-                )}
-          </label>
+          !inputIndex ? (
+            <label htmlFor={filterId}>
+              {filterFn instanceof Function
+                ? localization.filterMode.replace(
+                    '{filterType}',
+                    // @ts-ignore
+                    localization[
+                      `filter${
+                        filterFn.name.charAt(0).toUpperCase() +
+                        filterFn.name.slice(1)
+                      }`
+                    ] ?? '',
+                  ) ?? ''
+                : localization.filterMode.replace(
+                    '{filterType}',
+                    // @ts-ignore
+                    localization[
+                      `filter${
+                        filterFn.charAt(0).toUpperCase() + filterFn.slice(1)
+                      }`
+                    ],
+                  )}
+            </label>
+          ) : null
         }
         FormHelperTextProps={{
-          sx: { fontSize: '0.6rem', lineHeight: '0.8rem' },
+          sx: {
+            fontSize: '0.6rem',
+            lineHeight: '0.8rem',
+            whiteSpace: 'nowrap',
+          },
         }}
         label={isSelectFilter && !filterValue ? filterPlaceholder : undefined}
         margin="none"
         placeholder={
-          filterPlaceholder
-          // filterChipLabel || isSelectFilter ? undefined : filterPlaceholder
+          filterChipLabel || isSelectFilter ? undefined : filterPlaceholder
         }
         onChange={(event: ChangeEvent<HTMLInputElement>) => {
           setFilterValue(event.target.value);
-          handleChange(event);
+          handleChangeDebounced(event);
         }}
         onClick={(e: MouseEvent<HTMLInputElement>) => e.stopPropagation()}
         select={isSelectFilter}
         value={filterValue ?? ''}
         variant="standard"
         InputProps={{
-          startAdornment: !isSelectFilter && (
+          startAdornment: !isSelectFilter && !inputIndex && (
             <InputAdornment position="start">
               <Tooltip arrow title={localization.changeFilterMode}>
                 <span>
@@ -217,7 +249,7 @@ export const MRT_FilterTextField: FC<Props> = ({ header, tableInstance }) => {
         sx={{
           m: '-0.25rem',
           p: 0,
-          minWidth: !filterChipLabel ? '5rem' : 'auto',
+          minWidth: !filterChipLabel ? '6rem' : 'auto',
           width: 'calc(100% + 0.5rem)',
           mt: isSelectFilter && !filterValue ? '-1rem' : undefined,
           '&	.MuiSelect-icon': {
@@ -248,7 +280,7 @@ export const MRT_FilterTextField: FC<Props> = ({ header, tableInstance }) => {
           );
         })}
       </TextField>
-      <MRT_FilterTypeMenu
+      <MRT_FilterOptionMenu
         anchorEl={anchorEl}
         header={header}
         setAnchorEl={setAnchorEl}

package/src/inputs/MRT_SearchTextField.tsx

@@ -13,7 +13,7 @@ import {
   TextField,
   Tooltip,
 } from '@mui/material';
-import { MRT_FilterTypeMenu } from '../menus/MRT_FilterTypeMenu';
+import { MRT_FilterOptionMenu } from '../menus/MRT_FilterOptionMenu';
 import { MRT_TableInstance } from '..';
 
 interface Props {
@@ -105,7 +105,7 @@ export const MRT_SearchTextField: FC<Props> = ({ tableInstance }) => {
         {...textFieldProps}
         sx={{ justifySelf: 'end', ...textFieldProps?.sx }}
       />
-      <MRT_FilterTypeMenu
+      <MRT_FilterOptionMenu
         anchorEl={anchorEl}
         setAnchorEl={setAnchorEl}
         tableInstance={tableInstance}