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

package/src/footer/MRT_TableFooterRow.tsx

@@ -1,30 +1,28 @@
 import React, { FC } from 'react';
 import { TableRow } from '@mui/material';
 import { MRT_TableFooterCell } from './MRT_TableFooterCell';
-import { MRT_TableSpacerCell } from '../table/MRT_TableSpacerCell';
-import { useMRT } from '../useMRT';
-import type { MRT_HeaderGroup } from '..';
+import type { MRT_Header, MRT_HeaderGroup, MRT_TableInstance } from '..';
 
 interface Props {
   footerGroup: MRT_HeaderGroup;
+  tableInstance: MRT_TableInstance;
 }
 
-export const MRT_TableFooterRow: FC<Props> = ({ footerGroup }) => {
+export const MRT_TableFooterRow: FC<Props> = ({
+  footerGroup,
+  tableInstance,
+}) => {
   const {
-    anyRowsCanExpand,
-    columns,
-    enableRowActions,
-    enableRowEditing,
-    enableRowNumbers,
-    enableSelection,
-    muiTableFooterRowProps,
-    positionActionsColumn,
-    renderDetailPanel,
-    tableInstance,
-  } = useMRT();
+    options: { muiTableFooterRowProps },
+  } = tableInstance;
 
-  //if no content in row, skip row
-  if (!columns?.some((c) => c.Footer)) return null;
+  // if no content in row, skip row
+  if (
+    !footerGroup.headers?.some(
+      (h) => h.column.columnDef.footer || h.column.Footer,
+    )
+  )
+    return null;
 
   const mTableFooterRowProps =
     muiTableFooterRowProps instanceof Function
@@ -32,35 +30,19 @@ export const MRT_TableFooterRow: FC<Props> = ({ footerGroup }) => {
       : muiTableFooterRowProps;
 
   const tableRowProps = {
-    ...mTableFooterRowProps,
     ...footerGroup.getFooterGroupProps(),
-    style: {
-      ...footerGroup.getFooterGroupProps().style,
-      ...mTableFooterRowProps?.style,
-    },
+    ...mTableFooterRowProps,
   };
 
   return (
     <TableRow {...tableRowProps}>
-      {enableRowNumbers && <MRT_TableSpacerCell />}
-      {(enableRowActions || enableRowEditing) &&
-        positionActionsColumn === 'first' && <MRT_TableSpacerCell />}
-      {(anyRowsCanExpand || renderDetailPanel) && (
-        <MRT_TableSpacerCell
-          width={`${
-            renderDetailPanel ? 2 : tableInstance.expandedDepth + 0.5
-          }rem`}
-        />
-      )}
-      {enableSelection && <MRT_TableSpacerCell width="1rem" />}
-      {footerGroup.headers.map((column: MRT_HeaderGroup) => (
+      {footerGroup.headers.map((footer: MRT_Header) => (
         <MRT_TableFooterCell
-          key={column.getFooterProps().key}
-          column={column}
+          footer={footer}
+          key={footer.getFooterProps().key}
+          tableInstance={tableInstance}
         />
       ))}
-      {(enableRowActions || enableRowEditing) &&
-        positionActionsColumn === 'last' && <MRT_TableSpacerCell />}
     </TableRow>
   );
 };

package/src/head/MRT_TableHead.tsx

@@ -1,25 +1,41 @@
 import React, { FC } from 'react';
 import { TableHead } from '@mui/material';
 import { MRT_TableHeadRow } from './MRT_TableHeadRow';
-import { useMRT } from '../useMRT';
-import type { MRT_HeaderGroup } from '..';
+import type { MRT_HeaderGroup, MRT_TableInstance } from '..';
 
-interface Props {}
+interface Props {
+  pinned: 'left' | 'center' | 'right' | 'none';
+  tableInstance: MRT_TableInstance;
+}
 
-export const MRT_TableHead: FC<Props> = () => {
-  const { tableInstance, muiTableHeadProps } = useMRT();
+export const MRT_TableHead: FC<Props> = ({ pinned, tableInstance }) => {
+  const {
+    getCenterHeaderGroups,
+    getHeaderGroups,
+    getLeftHeaderGroups,
+    getRightHeaderGroups,
+    options: { muiTableHeadProps },
+  } = tableInstance;
 
   const tableHeadProps =
     muiTableHeadProps instanceof Function
       ? muiTableHeadProps(tableInstance)
       : muiTableHeadProps;
 
+  const getHeaderGroupsMap = {
+    center: getCenterHeaderGroups,
+    left: getLeftHeaderGroups,
+    none: getHeaderGroups,
+    right: getRightHeaderGroups,
+  };
+
   return (
     <TableHead {...tableHeadProps}>
-      {tableInstance.headerGroups.map((headerGroup: MRT_HeaderGroup) => (
+      {getHeaderGroupsMap[pinned]().map((headerGroup) => (
         <MRT_TableHeadRow
+          headerGroup={headerGroup as MRT_HeaderGroup}
           key={headerGroup.getHeaderGroupProps().key}
-          headerGroup={headerGroup}
+          tableInstance={tableInstance}
         />
       ))}
     </TableHead>

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,47 +7,36 @@ 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,
-    setShowFilters,
-    tableInstance,
-  } = useMRT();
+    getState,
+    options: {
+      enableColumnActions,
+      enableColumnFilters,
+      enableColumnResizing,
+      icons: { FilterAltIcon, FilterAltOff },
+      localization,
+      muiTableHeadCellProps,
+      setShowFilters,
+    },
+  } = tableInstance;
+
+  const { isDensePadding, showFilters } = getState();
 
-  const isParentHeader = !!column?.columns?.length;
+  const { column } = header;
 
   const mTableHeadCellProps =
     muiTableHeadCellProps instanceof Function
@@ -60,149 +49,210 @@ export const MRT_TableHeadCell: FC<Props> = ({ column }) => {
       : 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(
+      : localization.sortByColumnDesc.replace(
           '{column}',
-          column.Header as string,
+          column.header as string,
         )
-    : localization.sortByColumnAsc?.replace(
-        '{column}',
-        column.Header as string,
-      );
+    : localization.sortByColumnAsc.replace('{column}', column.header as string);
 
-  const filterType = tableInstance.state.currentFilterTypes[column.id];
+  // const filterType = getState()?.currentFilterTypes?.[id];
 
-  const filterTooltip = !!column.filterValue
-    ? localization.filteringByColumn
-        .replace('{column}', String(column.Header))
-        .replace(
-          '{filterType}',
-          filterType instanceof Function
-            ? ''
-            : // @ts-ignore
-              localization[
-                `filter${
-                  filterType.charAt(0).toUpperCase() + filterType.slice(1)
-                }`
-              ],
-        )
-        .replace('{filterValue}', column.filterValue)
-    : localization.showHideFilters;
+  const filterTooltip = '';
+  // !!getColumnFilterValue()
+  //   ? localization.filteringByColumn
+  //       .replace('{column}', String(headerString))
+  //       .replace(
+  //         '{filterType}',
+  //         filterType instanceof Function
+  //           ? ''
+  //           : // @ts-ignore
+  //             localization[
+  //               `filter${
+  //                 filterType.charAt(0).toUpperCase() + filterType.slice(1)
+  //               }`
+  //             ],
+  //       )
+  //       .replace(
+  //         '{filterValue}',
+  //         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,39 +1,17 @@
-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
@@ -41,63 +19,19 @@ export const MRT_TableHeadRow: FC<Props> = ({ headerGroup }) => {
       : 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 ? (
-          <MRT_SelectCheckbox selectAll />
-        ) : (
-          <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>
   );
 };