material-react-table 0.6.10 → 0.7.0-alpha.11

package/src/head/MRT_TableHeadCell.tsx

@@ -1,4 +1,4 @@
-import React, { CSSProperties, FC } from 'react';
+import React, { FC, MouseEvent } from 'react';
 import {
   TableCell,
   TableSortLabel,
@@ -7,86 +7,64 @@ import {
   Tooltip,
   Box,
   IconButton,
+  alpha,
+  Theme,
 } from '@mui/material';
-import { useMRT } from '../useMRT';
 import { MRT_FilterTextField } from '../inputs/MRT_FilterTextField';
 import { MRT_ToggleColumnActionMenuButton } from '../buttons/MRT_ToggleColumnActionMenuButton';
-import type { MRT_HeaderGroup } from '..';
-
-export const commonTableHeadCellStyles = (
-  densePadding: boolean,
-  enableColumnResizing?: boolean,
-  widths?: {
-    maxWidth?: CSSProperties['maxWidth'];
-    minWidth?: CSSProperties['minWidth'];
-    width?: CSSProperties['width'];
-  },
-) => ({
-  fontWeight: 'bold',
-  height: '100%',
-  p: densePadding ? '0.5rem' : '1rem',
-  pt: densePadding ? '0.75rem' : '1.25rem',
-  transition: `all ${enableColumnResizing ? '10ms' : '0.2s'} ease-in-out`,
-  verticalAlign: 'text-top',
-  ...widths,
-});
+import type { MRT_Header, MRT_TableInstance } from '..';
+import { ColumnResizerProps } from '@tanstack/react-table';
 
 interface Props {
-  column: MRT_HeaderGroup;
+  header: MRT_Header;
+  tableInstance: MRT_TableInstance;
 }
 
-export const MRT_TableHeadCell: FC<Props> = ({ column }) => {
+export const MRT_TableHeadCell: FC<Props> = ({ header, tableInstance }) => {
   const {
-    disableColumnActions,
-    disableFilters,
-    enableColumnResizing,
-    icons: { FilterAltIcon, FilterAltOff },
-    localization,
-    muiTableHeadCellProps,
+    getState,
+    options: {
+      enableColumnActions,
+      enableColumnFilters,
+      enableColumnResizing,
+      icons: { FilterAltIcon, FilterAltOff },
+      localization,
+      muiTableHeadCellProps,
+    },
     setShowFilters,
-    tableInstance,
-  } = useMRT();
+  } = tableInstance;
+
+  const { isDensePadding, showFilters } = getState();
 
-  const isParentHeader = !!column?.columns?.length;
+  const { column } = header;
 
   const mTableHeadCellProps =
     muiTableHeadCellProps instanceof Function
-      ? muiTableHeadCellProps(column)
+      ? muiTableHeadCellProps({ column, tableInstance })
       : muiTableHeadCellProps;
 
   const mcTableHeadCellProps =
     column.muiTableHeadCellProps instanceof Function
-      ? column.muiTableHeadCellProps(column)
+      ? column.muiTableHeadCellProps({ column, tableInstance })
       : column.muiTableHeadCellProps;
 
   const tableCellProps = {
+    ...header.getHeaderProps(),
     ...mTableHeadCellProps,
     ...mcTableHeadCellProps,
-    ...column.getHeaderProps(),
-    style: {
-      ...column.getHeaderProps().style,
-      ...mTableHeadCellProps?.style,
-      ...mcTableHeadCellProps?.style,
-    },
   };
 
-  const sortTooltip = column.isSorted
-    ? column.isSortedDesc
+  const sortTooltip = !!column.getIsSorted()
+    ? column.getIsSorted() === 'desc'
       ? localization.clearSort
-      : localization.sortByColumnDesc?.replace(
-          '{column}',
-          column.Header as string,
-        )
-    : localization.sortByColumnAsc?.replace(
-        '{column}',
-        column.Header as string,
-      );
+      : localization.sortByColumnDesc.replace('{column}', column.header)
+    : localization.sortByColumnAsc.replace('{column}', column.header);
 
-  const filterType = tableInstance.state.currentFilterTypes[column.id];
+  const filterType = getState()?.currentFilterTypes?.[header.id];
 
-  const filterTooltip = !!column.filterValue
+  const filterTooltip = !!column.getColumnFilterValue()
     ? localization.filteringByColumn
-        .replace('{column}', String(column.Header))
+        .replace('{column}', String(column.header))
         .replace(
           '{filterType}',
           filterType instanceof Function
@@ -98,112 +76,176 @@ export const MRT_TableHeadCell: FC<Props> = ({ column }) => {
                 }`
               ],
         )
-        .replace('{filterValue}', column.filterValue)
+        .replace('{filterValue}', column.getColumnFilterValue() as string)
         .replace('" "', '')
     : localization.showHideFilters;
 
-  const columnHeader = column.render('Header') as string;
+  const headerElement =
+    column?.Header?.({
+      header,
+      tableInstance,
+    }) ?? column.header;
 
   return (
     <TableCell
-      align={isParentHeader ? 'center' : 'left'}
+      align={column.columnDefType === 'group' ? 'center' : 'left'}
       {...tableCellProps}
-      sx={{
-        ...commonTableHeadCellStyles(
-          tableInstance.state.densePadding,
-          enableColumnResizing,
-          {
-            maxWidth: column.maxWidth,
-            minWidth: column.minWidth,
-            width: column.width,
-          },
-        ),
+      //@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)})`,
+        boxShadow: `3px 0 6px ${alpha(theme.palette.common.black, 0.1)}`,
+        fontWeight: 'bold',
+        height: '100%',
+        minWidth: `max(${header.getWidth()}, 100px)`,
+        p: isDensePadding
+          ? column.columnDefType === 'display'
+            ? '0 0.5rem'
+            : '0.5rem'
+          : column.columnDefType === 'display'
+          ? '0.5rem 0.75rem'
+          : '1rem',
+        pt:
+          column.columnDefType === 'display'
+            ? 0
+            : isDensePadding
+            ? '0.75rem'
+            : '1.25rem',
+        pb: column.columnDefType === 'display' ? 0 : undefined,
+        transition: `all ${enableColumnResizing ? 0 : '0.2s'} ease-in-out`,
+        verticalAlign: 'text-top',
+        width: header.getWidth(),
+        //@ts-ignore
         ...tableCellProps?.sx,
-      }}
+      })}
     >
-      <Box
-        sx={{
-          alignItems: 'flex-start',
-          display: 'flex',
-          justifyContent: isParentHeader ? 'center' : 'space-between',
-          width: '100%',
-        }}
-      >
+      {header.isPlaceholder ? null : column.columnDefType === 'display' ? (
+        headerElement
+      ) : (
         <Box
-          {...column.getSortByToggleProps()}
           sx={{
-            alignItems: 'center',
+            alignItems: 'flex-start',
             display: 'flex',
-            flexWrap: 'nowrap',
-            whiteSpace: columnHeader.length < 15 ? 'nowrap' : 'normal',
+            justifyContent:
+              column.columnDefType === 'group' ? 'center' : 'space-between',
+            width: '100%',
           }}
-          title={undefined}
         >
-          {column.render('Header')}
-          {!isParentHeader && column.canSort && (
-            <Tooltip arrow placement="top" title={sortTooltip}>
-              <TableSortLabel
-                aria-label={sortTooltip}
-                active={column.isSorted}
-                direction={column.isSortedDesc ? 'desc' : 'asc'}
-              />
-            </Tooltip>
-          )}
-          {!isParentHeader && !!column.canFilter && (
-            <Tooltip arrow placement="top" title={filterTooltip}>
-              <IconButton
-                disableRipple
-                onClick={(event) => {
-                  event.stopPropagation();
-                  setShowFilters(!tableInstance.state.showFilters);
-                }}
-                size="small"
-                sx={{
-                  m: 0,
-                  opacity: !!column.filterValue ? 0.8 : 0,
-                  p: '2px',
-                  transition: 'all 0.2s ease-in-out',
-                  '&:hover': {
-                    backgroundColor: 'transparent',
-                    opacity: 0.8,
+          <Box
+            {...column.getToggleSortingProps()}
+            sx={{
+              alignItems: 'center',
+              cursor:
+                column.getCanSort() && column.columnDefType !== 'group'
+                  ? 'pointer'
+                  : undefined,
+              display: 'flex',
+              flexWrap: 'nowrap',
+              whiteSpace: column.header.length < 15 ? 'nowrap' : 'normal',
+            }}
+            title={undefined}
+          >
+            {headerElement}
+            {column.columnDefType !== 'group' && column.getCanSort() && (
+              <Tooltip arrow placement="top" title={sortTooltip}>
+                <TableSortLabel
+                  aria-label={sortTooltip}
+                  active={!!column.getIsSorted()}
+                  direction={
+                    column.getIsSorted()
+                      ? (column.getIsSorted() as 'asc' | 'desc')
+                      : undefined
+                  }
+                />
+              </Tooltip>
+            )}
+            {column.columnDefType !== 'group' &&
+              enableColumnFilters &&
+              !!column.getCanColumnFilter() && (
+                <Tooltip arrow placement="top" title={filterTooltip}>
+                  <IconButton
+                    disableRipple
+                    onClick={(event: MouseEvent<HTMLButtonElement>) => {
+                      event.stopPropagation();
+                      setShowFilters(!showFilters);
+                    }}
+                    size="small"
+                    sx={{
+                      m: 0,
+                      opacity: !!column.getColumnFilterValue() ? 0.8 : 0,
+                      p: '2px',
+                      transition: 'all 0.2s ease-in-out',
+                      '&:hover': {
+                        backgroundColor: 'transparent',
+                        opacity: 0.8,
+                      },
+                    }}
+                  >
+                    {showFilters && !column.getColumnFilterValue() ? (
+                      <FilterAltOff fontSize="small" />
+                    ) : (
+                      <FilterAltIcon fontSize="small" />
+                    )}
+                  </IconButton>
+                </Tooltip>
+              )}
+          </Box>
+          <Box
+            sx={{ alignItems: 'center', display: 'flex', flexWrap: 'nowrap' }}
+          >
+            {(enableColumnActions || column.enableColumnActions) &&
+              column.enableColumnActions !== false &&
+              column.columnDefType !== 'group' && (
+                <MRT_ToggleColumnActionMenuButton
+                  header={header}
+                  tableInstance={tableInstance}
+                />
+              )}
+            {enableColumnResizing && column.columnDefType !== 'group' && (
+              <Divider
+                flexItem
+                orientation="vertical"
+                onDoubleClick={() => header.resetSize()}
+                sx={(theme: Theme) => ({
+                  borderRightWidth: '2px',
+                  borderRadius: '2px',
+                  maxHeight: '2rem',
+                  cursor: 'col-resize',
+                  userSelect: 'none',
+                  touchAction: 'none',
+                  '&:active': {
+                    backgroundColor: theme.palette.secondary.dark,
+                    opacity: 1,
                   },
-                }}
-              >
-                {tableInstance.state.showFilters && !column.filterValue ? (
-                  <FilterAltOff fontSize="small" />
-                ) : (
-                  <FilterAltIcon fontSize="small" />
-                )}
-              </IconButton>
-            </Tooltip>
-          )}
-        </Box>
-        <Box sx={{ alignItems: 'center', display: 'flex', flexWrap: 'nowrap' }}>
-          {!disableColumnActions &&
-            !column.disableColumnActions &&
-            !isParentHeader && (
-              <MRT_ToggleColumnActionMenuButton column={column} />
+                })}
+                {...(header.getResizerProps((props: ColumnResizerProps) => ({
+                  ...props,
+                  style: {
+                    transform: column.getIsResizing()
+                      ? `translateX(${
+                          getState().columnSizingInfo.deltaOffset
+                        }px)`
+                      : '',
+                  },
+                })) as any)}
+              />
             )}
-          {enableColumnResizing && !isParentHeader && (
-            <Divider
-              flexItem
-              orientation="vertical"
-              onDoubleClick={() => tableInstance.resetResizing()}
-              {...column.getResizerProps()}
-              sx={{
-                borderRightWidth: '2px',
-                borderRadius: '2px',
-                maxHeight: '2rem',
-              }}
-            />
-          )}
+          </Box>
         </Box>
-      </Box>
-      {!disableFilters && column.canFilter && (
-        <Collapse in={tableInstance.state.showFilters}>
-          <MRT_FilterTextField column={column} />
-        </Collapse>
       )}
+      {column.columnDefType === 'data' &&
+        enableColumnFilters &&
+        column.getCanColumnFilter() && (
+          <Collapse in={showFilters}>
+            <MRT_FilterTextField
+              header={header}
+              tableInstance={tableInstance}
+            />
+          </Collapse>
+        )}
     </TableCell>
   );
 };

package/src/head/MRT_TableHeadRow.tsx

@@ -1,125 +1,37 @@
-import React, { FC, useMemo } from 'react';
-import { TableCell, TableRow } from '@mui/material';
-import {
-  commonTableHeadCellStyles,
-  MRT_TableHeadCell,
-} from './MRT_TableHeadCell';
-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}>
-      {(enableRowActions || enableRowEditing) &&
-        positionActionsColumn === 'first' &&
-        (isParentHeader ? (
-          <MRT_TableSpacerCell />
-        ) : (
-          <MRT_TableHeadCellActions />
-        ))}
-      {anyRowsCanExpand || renderDetailPanel ? (
-        !disableExpandAll && !isParentHeader ? (
-          <TableCell
-            size="small"
-            {...tableInstance.getToggleAllRowsExpandedProps()}
-            sx={{
-              ...commonTableHeadCellStyles(tableInstance.state.densePadding),
-              width: '3rem',
-              maxWidth: '3rem',
-              textAlign: 'center',
-            }}
-          >
-            <MRT_ExpandAllButton />
-          </TableCell>
-        ) : (
-          <MRT_TableSpacerCell
-            width={`${
-              renderDetailPanel ? 2 : tableInstance.expandedDepth + 0.5
-            }rem`}
-          />
-        )
-      ) : null}
-      {enableSelection ? (
-        !isParentHeader && !disableSelectAll ? (
-          <TableCell
-            sx={{
-              ...commonTableHeadCellStyles(tableInstance.state.densePadding),
-              maxWidth: '3rem',
-              width: '3rem',
-              textAlign: 'center',
-            }}
-          >
-            <MRT_SelectCheckbox selectAll />
-          </TableCell>
-        ) : (
-          <MRT_TableSpacerCell width="1rem" />
-        )
-      ) : null}
-      {enableRowNumbers &&
-        (isParentHeader ? (
-          <MRT_TableSpacerCell />
-        ) : (
-          <TableCell
-            sx={{
-              ...commonTableHeadCellStyles(tableInstance.state.densePadding),
-              width: '2rem',
-              maxWidth: '2rem',
-            }}
-          >
-            #
-          </TableCell>
-        ))}
-      {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,69 @@
-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,
+    getState,
+    options: { enableEditing, muiTableBodyCellEditTextFieldProps },
     setCurrentEditingRow,
-    tableInstance: {
-      state: { currentEditingRow },
-    },
-  } = 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}
     />