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

package/src/body/MRT_TableBody.tsx

@@ -1,15 +1,24 @@
 import React, { FC } from 'react';
 import { TableBody } from '@mui/material';
 import { MRT_TableBodyRow } from './MRT_TableBodyRow';
-import { useMRT } from '../useMRT';
-import type { MRT_Row } from '..';
+import { MRT_TableInstance } from '..';
 
-interface Props {}
+interface Props {
+  pinned: 'left' | 'center' | 'right' | 'none';
+  tableInstance: MRT_TableInstance;
+}
 
-export const MRT_TableBody: FC<Props> = () => {
-  const { tableInstance, muiTableBodyProps, manualPagination } = useMRT();
+export const MRT_TableBody: FC<Props> = ({ pinned, tableInstance }) => {
+  const {
+    getPaginationRowModel,
+    getPrePaginationRowModel,
+    getTableBodyProps,
+    options: { enablePagination, muiTableBodyProps },
+  } = tableInstance;
 
-  const rows = manualPagination ? tableInstance.rows : tableInstance.page;
+  const rows = enablePagination
+    ? getPaginationRowModel().rows
+    : getPrePaginationRowModel().rows;
 
   const mTableBodyProps =
     muiTableBodyProps instanceof Function
@@ -17,25 +26,20 @@ export const MRT_TableBody: FC<Props> = () => {
       : muiTableBodyProps;
 
   const tableBodyProps = {
+    ...getTableBodyProps(),
     ...mTableBodyProps,
-    ...tableInstance.getTableBodyProps(),
-    style: {
-      ...tableInstance.getTableBodyProps().style,
-      ...mTableBodyProps?.style,
-    },
   };
 
   return (
-    <TableBody
-      {...tableBodyProps}
-      sx={{
-        ...tableBodyProps?.sx,
-      }}
-    >
-      {rows.map((row: MRT_Row) => {
-        tableInstance.prepareRow(row);
-        return <MRT_TableBodyRow key={row.getRowProps().key} row={row} />;
-      })}
+    <TableBody {...tableBodyProps}>
+      {rows.map((row) => (
+        <MRT_TableBodyRow
+          key={row.getRowProps().key}
+          pinned={pinned}
+          row={row}
+          tableInstance={tableInstance}
+        />
+      ))}
     </TableBody>
   );
 };

package/src/body/MRT_TableBodyCell.tsx

@@ -1,37 +1,31 @@
-import React, { FC, MouseEvent } from 'react';
-import { Skeleton, TableCell, TableCellProps } from '@mui/material';
-import { useMRT } from '../useMRT';
+import React, { FC, MouseEvent, useMemo } from 'react';
+import { Skeleton, TableCell } from '@mui/material';
 import { MRT_EditCellTextField } from '../inputs/MRT_EditCellTextField';
-import type { MRT_Cell } from '..';
+import type { MRT_Cell, MRT_TableInstance } from '..';
 import { MRT_CopyButton } from '../buttons/MRT_CopyButton';
 
-export const commonTableBodyCellStyles = (densePadding: boolean) => ({
-  p: densePadding ? '0.5rem' : '1rem',
-  transition: 'all 0.2s ease-in-out',
-  whiteSpace: densePadding ? 'nowrap' : 'normal',
-});
-
-export const commonTableBodyButtonCellStyles = (densePadding: boolean) => ({
-  p: densePadding ? '1px' : '0.6rem',
-  textAlign: 'center',
-  transition: 'all 0.2s ease-in-out',
-});
-
 interface Props {
   cell: MRT_Cell;
+  tableInstance: MRT_TableInstance;
 }
 
-export const MRT_TableBodyCell: FC<Props> = ({ cell }) => {
+export const MRT_TableBodyCell: FC<Props> = ({ cell, tableInstance }) => {
   const {
-    enableClickToCopy,
-    isLoading,
-    muiTableBodyCellProps,
-    muiTableBodyCellSkeletonProps,
-    onCellClick,
-    tableInstance: {
-      state: { currentEditingRow, densePadding },
+    getIsSomeColumnsPinned,
+    getState,
+    options: {
+      enableClickToCopy,
+      enableColumnPinning,
+      isLoading,
+      muiTableBodyCellProps,
+      muiTableBodyCellSkeletonProps,
+      onCellClick,
     },
-  } = useMRT();
+  } = tableInstance;
+
+  const { currentEditingRow, isDensePadding } = getState();
+
+  const { column, row } = cell;
 
   const mTableCellBodyProps =
     muiTableBodyCellProps instanceof Function
@@ -39,54 +33,81 @@ export const MRT_TableBodyCell: FC<Props> = ({ cell }) => {
       : muiTableBodyCellProps;
 
   const mcTableCellBodyProps =
-    cell.column.muiTableBodyCellProps instanceof Function
-      ? cell.column.muiTableBodyCellProps(cell)
-      : cell.column.muiTableBodyCellProps;
+    column.muiTableBodyCellProps instanceof Function
+      ? column.muiTableBodyCellProps(cell)
+      : column.muiTableBodyCellProps;
 
   const tableCellProps = {
+    ...cell.getCellProps(),
     ...mTableCellBodyProps,
     ...mcTableCellBodyProps,
-    ...cell.getCellProps(),
-    style: {
-      ...cell.getCellProps().style,
-      ...mTableCellBodyProps?.style,
-      ...mcTableCellBodyProps?.style,
-    },
   };
 
+  const skeletonWidth = useMemo(
+    () =>
+      column.columnDefType === 'display'
+        ? column.getWidth() / 2
+        : Math.random() * (column.getWidth() - column.getWidth() / 3) +
+          column.getWidth() / 3,
+    [column.columnDefType, column.getWidth()],
+  );
+
   return (
     <TableCell
       onClick={(event: MouseEvent<HTMLTableCellElement>) =>
         onCellClick?.(event, cell)
       }
       {...tableCellProps}
-      sx={
-        {
-          ...commonTableBodyCellStyles(densePadding),
-          ...tableCellProps?.sx,
-        } as TableCellProps['sx']
-      }
+      sx={{
+        p: isDensePadding
+          ? column.columnDefType === 'display'
+            ? '0 0.5rem'
+            : '0.5rem'
+          : column.columnDefType === 'display'
+          ? '0.5rem 0.75rem'
+          : '1rem',
+        pl:
+          column.id === 'mrt-expand'
+            ? `${row.depth + (isDensePadding ? 0.5 : 0.75)}rem`
+            : undefined,
+        transition: 'all 0.2s ease-in-out',
+        whiteSpace:
+          isDensePadding || (enableColumnPinning && getIsSomeColumnsPinned())
+            ? 'nowrap'
+            : 'normal',
+        //@ts-ignore
+        ...tableCellProps?.sx,
+      }}
     >
       {isLoading ? (
         <Skeleton
           animation="wave"
           height={20}
-          width={Math.random() * (120 - 60) + 60}
+          width={skeletonWidth}
           {...muiTableBodyCellSkeletonProps}
         />
-      ) : !cell.column.disableEditing &&
-        currentEditingRow?.id === cell.row.id ? (
-        <MRT_EditCellTextField cell={cell} />
-      ) : cell.isPlaceholder ? null : cell.isAggregated ? (
-        cell.render('Aggregated')
-      ) : cell.isGrouped ? (
-        <span>
-          {cell.render('Cell')} ({cell.row.subRows.length})
-        </span>
-      ) : enableClickToCopy && !cell.column.disableClickToCopy ? (
-        <MRT_CopyButton cell={cell} />
+      ) : column.columnDefType === 'display' ? (
+        column.Cell?.({ cell, tableInstance })
+      ) : cell.getIsPlaceholder() ||
+        (row.getIsGrouped() &&
+          column.id !==
+            row.groupingColumnId) ? null : cell.getIsAggregated() ? (
+        cell.renderAggregatedCell()
+      ) : column.enableEditing && currentEditingRow?.id === row.id ? (
+        <MRT_EditCellTextField cell={cell} tableInstance={tableInstance} />
+      ) : (enableClickToCopy || column.enableClickToCopy) &&
+        column.enableClickToCopy !== false ? (
+        <>
+          <MRT_CopyButton cell={cell} tableInstance={tableInstance}>
+            {cell.renderCell()}
+          </MRT_CopyButton>
+          {row.getIsGrouped() && <> ({row.subRows?.length})</>}
+        </>
       ) : (
-        cell.render('Cell')
+        <>
+          {cell.renderCell()}
+          {row.getIsGrouped() && <> ({row.subRows?.length})</>}
+        </>
       )}
     </TableCell>
   );

package/src/body/MRT_TableBodyRow.tsx

@@ -1,35 +1,29 @@
 import React, { FC, MouseEvent } from 'react';
-import { TableCell, TableRow } from '@mui/material';
-import {
-  commonTableBodyCellStyles,
-  MRT_TableBodyCell,
-} from './MRT_TableBodyCell';
-import { useMRT } from '../useMRT';
+import { TableRow } from '@mui/material';
+import { MRT_TableBodyCell } from './MRT_TableBodyCell';
 import { MRT_TableDetailPanel } from './MRT_TableDetailPanel';
-import { MRT_ExpandButton } from '../buttons/MRT_ExpandButton';
-import { MRT_SelectCheckbox } from '../inputs/MRT_SelectCheckbox';
-import { MRT_ToggleRowActionMenuButton } from '../buttons/MRT_ToggleRowActionMenuButton';
-import type { MRT_Cell, MRT_Row } from '..';
+import type { MRT_Row, MRT_TableInstance } from '..';
 
 interface Props {
+  pinned: 'left' | 'center' | 'right' | 'none';
   row: MRT_Row;
+  tableInstance: MRT_TableInstance;
 }
 
-export const MRT_TableBodyRow: FC<Props> = ({ row }) => {
+export const MRT_TableBodyRow: FC<Props> = ({ pinned, row, tableInstance }) => {
   const {
-    anyRowsCanExpand,
-    enableRowActions,
-    enableRowEditing,
-    enableRowNumbers,
-    enableSelection,
-    muiTableBodyRowProps,
-    onRowClick,
-    positionActionsColumn,
-    renderDetailPanel,
-    tableInstance: {
-      state: { densePadding },
-    },
-  } = useMRT();
+    options: { muiTableBodyRowProps, onRowClick, renderDetailPanel },
+  } = tableInstance;
+
+  const {
+    getCenterVisibleCells,
+    getIsGrouped,
+    getIsSelected,
+    getLeftVisibleCells,
+    getRightVisibleCells,
+    getRowProps,
+    getVisibleCells,
+  } = row;
 
   const mTableBodyRowProps =
     muiTableBodyRowProps instanceof Function
@@ -37,12 +31,15 @@ export const MRT_TableBodyRow: FC<Props> = ({ row }) => {
       : muiTableBodyRowProps;
 
   const tableRowProps = {
+    ...getRowProps(),
     ...mTableBodyRowProps,
-    ...row.getRowProps(),
-    style: {
-      ...row.getRowProps().style,
-      ...mTableBodyRowProps?.style,
-    },
+  };
+
+  const getVisibleCellsMap = {
+    center: getCenterVisibleCells,
+    left: getLeftVisibleCells,
+    none: getVisibleCells,
+    right: getRightVisibleCells,
   };
 
   return (
@@ -52,32 +49,19 @@ export const MRT_TableBodyRow: FC<Props> = ({ row }) => {
         onClick={(event: MouseEvent<HTMLTableRowElement>) =>
           onRowClick?.(event, row)
         }
-        selected={row.isSelected}
+        selected={getIsSelected()}
         {...tableRowProps}
       >
-        {enableRowNumbers && (
-          <TableCell sx={{ ...commonTableBodyCellStyles(densePadding) }}>
-            {row.index + 1}
-          </TableCell>
-        )}
-        {(enableRowActions || enableRowEditing) &&
-          positionActionsColumn === 'first' && (
-            <MRT_ToggleRowActionMenuButton row={row} />
-          )}
-        {(anyRowsCanExpand || renderDetailPanel) && (
-          <MRT_ExpandButton row={row} />
-        )}
-        {enableSelection && <MRT_SelectCheckbox row={row} />}
-        {row.cells.map((cell: MRT_Cell) => (
-          <MRT_TableBodyCell key={cell.getCellProps().key} cell={cell} />
+        {getVisibleCellsMap[pinned]().map((cell) => (
+          <MRT_TableBodyCell
+            cell={cell}
+            key={cell.getCellProps().key}
+            tableInstance={tableInstance}
+          />
         ))}
-        {(enableRowActions || enableRowEditing) &&
-          positionActionsColumn === 'last' && (
-            <MRT_ToggleRowActionMenuButton row={row} />
-          )}
       </TableRow>
-      {renderDetailPanel && !row.isGrouped && (
-        <MRT_TableDetailPanel row={row} />
+      {renderDetailPanel && !getIsGrouped() && (
+        <MRT_TableDetailPanel row={row} tableInstance={tableInstance} />
       )}
     </>
   );

package/src/body/MRT_TableDetailPanel.tsx

@@ -1,20 +1,22 @@
 import React, { FC, MouseEvent } from 'react';
 import { Collapse, TableCell, TableRow } from '@mui/material';
-import { useMRT } from '../useMRT';
-import type { MRT_Row } from '..';
+import type { MRT_Row, MRT_TableInstance } from '..';
 
 interface Props {
   row: MRT_Row;
+  tableInstance: MRT_TableInstance;
 }
 
-export const MRT_TableDetailPanel: FC<Props> = ({ row }) => {
+export const MRT_TableDetailPanel: FC<Props> = ({ row, tableInstance }) => {
   const {
-    muiTableBodyRowProps,
-    muiTableDetailPanelProps,
-    onDetailPanelClick,
-    renderDetailPanel,
-    tableInstance,
-  } = useMRT();
+    getVisibleFlatColumns,
+    options: {
+      muiTableBodyRowProps,
+      muiTableDetailPanelProps,
+      onDetailPanelClick,
+      renderDetailPanel,
+    },
+  } = tableInstance;
 
   const tableRowProps =
     muiTableBodyRowProps instanceof Function
@@ -29,20 +31,20 @@ export const MRT_TableDetailPanel: FC<Props> = ({ row }) => {
   return (
     <TableRow {...tableRowProps}>
       <TableCell
-        colSpan={tableInstance.visibleColumns.length + 10}
+        colSpan={getVisibleFlatColumns().length + 10}
         onClick={(event: MouseEvent<HTMLTableCellElement>) =>
           onDetailPanelClick?.(event, row)
         }
         {...tableCellProps}
         sx={{
-          borderBottom: !row.isExpanded ? 'none' : undefined,
-          pb: row.isExpanded ? '1rem' : 0,
-          pt: row.isExpanded ? '1rem' : 0,
+          borderBottom: !row.getIsExpanded() ? 'none' : undefined,
+          pb: row.getIsExpanded() ? '1rem' : 0,
+          pt: row.getIsExpanded() ? '1rem' : 0,
           transition: 'all 0.2s ease-in-out',
           ...tableCellProps?.sx,
         }}
       >
-        <Collapse in={row.isExpanded}>{renderDetailPanel?.(row)}</Collapse>
+        <Collapse in={row.getIsExpanded()}>{renderDetailPanel?.(row)}</Collapse>
       </TableCell>
     </TableRow>
   );

package/src/buttons/MRT_CopyButton.tsx

@@ -1,23 +1,45 @@
-import React, { FC, useState } from 'react';
+import React, { FC, ReactNode, useState } from 'react';
 import { Button, Tooltip } from '@mui/material';
-import { useMRT } from '../useMRT';
-import { MRT_Cell } from '..';
+import { MRT_Cell, MRT_TableInstance } from '..';
 
 interface Props {
   cell: MRT_Cell;
+  children: ReactNode;
+  tableInstance: MRT_TableInstance;
 }
 
-export const MRT_CopyButton: FC<Props> = ({ cell }) => {
-  const { localization } = useMRT();
+export const MRT_CopyButton: FC<Props> = ({
+  cell,
+  children,
+  tableInstance,
+}) => {
+  const {
+    options: { localization, muiTableBodyCellCopyButtonProps },
+  } = tableInstance;
 
   const [copied, setCopied] = useState(false);
 
-  const handleCopy = (text: string) => {
-    navigator.clipboard.writeText(text);
+  const handleCopy = (text: unknown) => {
+    navigator.clipboard.writeText(text as string);
     setCopied(true);
     setTimeout(() => setCopied(false), 4000);
   };
 
+  const mTableBodyCellCopyButtonProps =
+    muiTableBodyCellCopyButtonProps instanceof Function
+      ? muiTableBodyCellCopyButtonProps(cell)
+      : muiTableBodyCellCopyButtonProps;
+
+  const mcTableBodyCellCopyButtonProps =
+    cell.column.muiTableBodyCellCopyButtonProps instanceof Function
+      ? cell.column.muiTableBodyCellCopyButtonProps(cell)
+      : cell.column.muiTableBodyCellCopyButtonProps;
+
+  const buttonProps = {
+    ...mTableBodyCellCopyButtonProps,
+    ...mcTableBodyCellCopyButtonProps,
+  };
+
   return (
     <Tooltip
       arrow
@@ -30,20 +52,23 @@ export const MRT_CopyButton: FC<Props> = ({ cell }) => {
         aria-label={localization.clickToCopy}
         onClick={() => handleCopy(cell.value)}
         size="small"
+        {...buttonProps}
         sx={{
           backgroundColor: 'transparent',
+          border: 'none',
           color: 'inherit',
-          letterSpacing: 'inherit',
           fontFamily: 'inherit',
           fontSize: 'inherit',
+          letterSpacing: 'inherit',
           m: '-0.25rem',
-          textTransform: 'inherit',
-          textAlign: 'inherit',
           minWidth: 'unset',
+          textAlign: 'inherit',
+          textTransform: 'inherit',
+          ...buttonProps?.sx,
         }}
         variant="text"
       >
-        {cell.render('Cell')}
+        {children}
       </Button>
     </Tooltip>
   );

package/src/buttons/MRT_EditActionButtons.tsx

@@ -1,30 +1,31 @@
 import React, { FC } from 'react';
 import { Box, IconButton, Tooltip } from '@mui/material';
-import { useMRT } from '../useMRT';
-import type { MRT_Row } from '..';
+import type { MRT_Row, MRT_TableInstance } from '..';
+import { RowValues } from '@tanstack/react-table';
 
 interface Props {
   row: MRT_Row;
+  tableInstance: MRT_TableInstance;
 }
 
-export const MRT_EditActionButtons: FC<Props> = ({ row }) => {
+export const MRT_EditActionButtons: FC<Props> = ({ row, tableInstance }) => {
   const {
-    icons: { CancelIcon, SaveIcon },
-    localization,
-    onRowEditSubmit,
-    setCurrentEditingRow,
-    tableInstance: {
-      state: { currentEditingRow },
+    getState,
+    options: {
+      icons: { CancelIcon, SaveIcon },
+      localization,
+      onRowEditSubmit,
+      setCurrentEditingRow,
     },
-  } = useMRT();
+  } = tableInstance;
 
   const handleCancel = () => {
-    row.values = row.original;
+    row.values = (row.original as RowValues) ?? {};
     setCurrentEditingRow(null);
   };
 
   const handleSave = async () => {
-    await onRowEditSubmit?.(currentEditingRow ?? row);
+    await onRowEditSubmit?.(getState().currentEditingRow ?? row);
     setCurrentEditingRow(null);
   };
 

package/src/buttons/MRT_ExpandAllButton.tsx

@@ -1,37 +1,45 @@
 import React, { FC } from 'react';
-import { IconButton, TableCell } from '@mui/material';
-import { useMRT } from '../useMRT';
-import { commonTableBodyButtonCellStyles } from '../body/MRT_TableBodyCell';
+import { IconButton } from '@mui/material';
+import { MRT_TableInstance } from '..';
 
-interface Props {}
+interface Props {
+  tableInstance: MRT_TableInstance;
+}
 
-export const MRT_ExpandAllButton: FC<Props> = () => {
+export const MRT_ExpandAllButton: FC<Props> = ({ tableInstance }) => {
   const {
-    anyRowsExpanded,
-    icons: { DoubleArrowDownIcon },
-    localization,
-    tableInstance,
-  } = useMRT();
+    getIsAllRowsExpanded,
+    getIsSomeRowsExpanded,
+    getState,
+    options: {
+      icons: { DoubleArrowDownIcon },
+      isLoading,
+      localization,
+    },
+    toggleAllRowsExpanded,
+  } = tableInstance;
+
+  const { isDensePadding } = getState();
 
   return (
-    <TableCell
-      size="small"
-      {...tableInstance.getToggleAllRowsExpandedProps()}
-      sx={commonTableBodyButtonCellStyles(tableInstance.state.densePadding)}
+    <IconButton
+      aria-label={localization.expandAll}
+      disabled={isLoading}
+      title={localization.expandAll}
+      onClick={() => toggleAllRowsExpanded(!getIsAllRowsExpanded())}
+      sx={{
+        height: isDensePadding ? '1.75rem' : '2.25rem',
+        width: isDensePadding ? '1.75rem' : '2.25rem',
+      }}
     >
-      <IconButton
-        aria-label={localization.expandAll}
-        title={localization.expandAll}
-      >
-        <DoubleArrowDownIcon
-          style={{
-            transform: `rotate(${
-              tableInstance.isAllRowsExpanded ? -180 : anyRowsExpanded ? -90 : 0
-            }deg)`,
-            transition: 'transform 0.2s',
-          }}
-        />
-      </IconButton>
-    </TableCell>
+      <DoubleArrowDownIcon
+        style={{
+          transform: `rotate(${
+            getIsAllRowsExpanded() ? -180 : getIsSomeRowsExpanded() ? -90 : 0
+          }deg)`,
+          transition: 'transform 0.2s',
+        }}
+      />
+    </IconButton>
   );
 };