material-react-table 0.7.5 → 0.8.0-alpha.2

package/src/head/MRT_TableHeadCell.tsx

@@ -1,19 +1,21 @@
-import React, { FC, MouseEvent } from 'react';
+import React, { FC, MouseEvent, ReactNode } 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,22 +51,27 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, tableInstance }) => {
       : column.muiTableHeadCellProps;
 
   const tableCellProps = {
-    ...header.getHeaderProps(),
     ...mTableHeadCellProps,
     ...mcTableHeadCellProps,
   };
 
   const sortTooltip = !!column.getIsSorted()
     ? column.getIsSorted() === 'desc'
-      ? localization.sortedByColumnDesc.replace('{column}', column.header)
-      : localization.sortedByColumnAsc.replace('{column}', column.header)
+      ? localization.sortedByColumnDesc.replace(
+          '{column}',
+          column.columnDef.header,
+        )
+      : localization.sortedByColumnAsc.replace(
+          '{column}',
+          column.columnDef.header,
+        )
     : localization.unsorted;
 
   const filterFn = getState()?.currentFilterFns?.[header.id];
 
-  const filterTooltip = !!column.getColumnFilterValue()
+  const filterTooltip = !!column.getFilterValue()
     ? localization.filteringByColumn
-        .replace('{column}', String(column.header))
+        .replace('{column}', String(column.columnDef.header))
         .replace(
           '{filterType}',
           filterFn instanceof Function
@@ -74,31 +81,69 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, tableInstance }) => {
                 `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;
 
-  const headerElement =
-    column?.Header?.({
-      header,
-      tableInstance,
-    }) ?? column.header;
+  const headerElement = (column.columnDef?.Header?.({
+    header,
+    tableInstance,
+  }) ?? header.renderHeader()) as ReactNode;
+
+  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'
@@ -106,20 +151,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' ? (
@@ -144,7 +197,10 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, tableInstance }) => {
                   : undefined,
               display: 'flex',
               flexWrap: 'nowrap',
-              whiteSpace: column.header.length < 24 ? 'nowrap' : 'normal',
+              whiteSpace:
+                (column.columnDef.header?.length ?? 0) < 24
+                  ? 'nowrap'
+                  : 'normal',
             }}
           >
             {headerElement}
@@ -163,7 +219,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
@@ -174,7 +230,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': {
@@ -183,7 +239,7 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, tableInstance }) => {
                       },
                     }}
                   >
-                    {showFilters && !column.getColumnFilterValue() ? (
+                    {showFilters && !column.getFilterValue() ? (
                       <FilterAltOff />
                     ) : (
                       <FilterAltIcon />
@@ -204,7 +260,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',
@@ -225,21 +281,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);
@@ -73,7 +73,7 @@ export const MRT_EditCellTextField: FC<Props> = ({ cell, tableInstance }) => {
       onBlur={handleBlur}
       onChange={handleChange}
       onClick={(e: MouseEvent<HTMLInputElement>) => e.stopPropagation()}
-      placeholder={column.header}
+      placeholder={column.columnDef.header}
       value={value}
       variant="standard"
       {...textFieldProps}

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

@@ -21,10 +21,15 @@ 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: {
@@ -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);
+    column.setFilterValue(undefined);
     setCurrentFilterFns((prev) => ({
       ...prev,
-      [header.id]: MRT_FILTER_OPTION.BEST_MATCH,
+      [header.id]: MRT_FILTER_OPTION.FUZZY,
     }));
   };
 
@@ -92,7 +113,9 @@ export const MRT_FilterTextField: FC<Props> = ({ header, tableInstance }) => {
     return <>{column.Filter?.({ header, tableInstance })}</>;
   }
 
-  const filterId = `mrt-${idPrefix}-${header.id}-filter-text-field`;
+  const filterId = `mrt-${idPrefix}-${header.id}-filter-text-field${
+    inputIndex ?? ''
+  }`;
   const filterFn = currentFilterFns?.[header.id];
   const isSelectFilter = !!column.filterSelectOptions;
   const filterChipLabel =
@@ -105,10 +128,17 @@ export const MRT_FilterTextField: FC<Props> = ({ header, tableInstance }) => {
           `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.columnDef.header),
+        )
+      : inputIndex === 0
+      ? localization.min
+      : inputIndex === 1
+      ? localization.max
+      : '';
 
   return (
     <>
@@ -124,48 +154,53 @@ export const MRT_FilterTextField: FC<Props> = ({ header, tableInstance }) => {
           title: filterPlaceholder,
         }}
         helperText={
-          <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>
+          !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 +252,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': {

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,
@@ -31,14 +29,14 @@ export const MRT_SelectCheckbox: FC<Props> = ({
 
   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,29 @@ export const MRT_SelectCheckbox: FC<Props> = ({
       }
     >
       <Checkbox
-        disabled={isLoading}
+        checked={
+          selectAll
+            ? tableInstance.getIsAllRowsSelected()
+            : row?.getIsSelected()
+        }
+        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>
   );