material-react-table 0.6.10 → 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,60 +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 ? (
-        enableClickToCopy && !cell.column.disableClickToCopy ? (
-          <MRT_CopyButton cell={cell}>
-            {cell.render('Aggregated')}
+      ) : 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>
-        ) : (
-          cell.render('Aggregated')
-        )
-      ) : cell.isGrouped ? (
-        <span>
-          {cell.render('Cell')} ({cell.row.subRows.length})
-        </span>
-      ) : enableClickToCopy && !cell.column.disableClickToCopy ? (
-        <MRT_CopyButton cell={cell}>{cell.render('Cell')}</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,37 +1,29 @@
 import React, { FC, MouseEvent } from 'react';
-import { TableCell, TableRow } from '@mui/material';
-import {
-  commonTableBodyButtonCellStyles,
-  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,
-    tableInstance: {
-      state: { densePadding },
-    },
-  } = useMRT();
+    options: { muiTableBodyRowProps, onRowClick, renderDetailPanel },
+  } = tableInstance;
+
+  const {
+    getCenterVisibleCells,
+    getIsGrouped,
+    getIsSelected,
+    getLeftVisibleCells,
+    getRightVisibleCells,
+    getRowProps,
+    getVisibleCells,
+  } = row;
 
   const mTableBodyRowProps =
     muiTableBodyRowProps instanceof Function
@@ -39,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 (
@@ -54,53 +49,19 @@ export const MRT_TableBodyRow: FC<Props> = ({ row }) => {
         onClick={(event: MouseEvent<HTMLTableRowElement>) =>
           onRowClick?.(event, row)
         }
-        selected={row.isSelected}
+        selected={getIsSelected()}
         {...tableRowProps}
       >
-        {(enableRowActions || enableRowEditing) &&
-          positionActionsColumn === 'first' && (
-            <MRT_ToggleRowActionMenuButton row={row} />
-          )}
-        {(anyRowsCanExpand || renderDetailPanel) && (
-          <TableCell
-            size="small"
-            sx={{
-              ...commonTableBodyButtonCellStyles(densePadding),
-              pl: `${row.depth + 0.5}rem`,
-              textAlign: 'left',
-            }}
-          >
-            <MRT_ExpandButton row={row} />
-          </TableCell>
-        )}
-        {enableSelection && (
-          <TableCell
-            sx={{
-              ...commonTableBodyButtonCellStyles(
-                tableInstance.state.densePadding,
-              ),
-              maxWidth: '3rem',
-              width: '3rem',
-            }}
-          >
-            <MRT_SelectCheckbox row={row} />
-          </TableCell>
-        )}
-        {enableRowNumbers && (
-          <TableCell sx={{ ...commonTableBodyCellStyles(densePadding) }}>
-            {row.index + 1}
-          </TableCell>
-        )}
-        {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,19 +1,26 @@
-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, children }) => {
-  const { localization, muiTableBodyCellCopyButtonProps } = 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);
   };

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,26 +1,41 @@
 import React, { FC } from 'react';
 import { IconButton } from '@mui/material';
-import { useMRT } from '../useMRT';
+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 (
     <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',
+      }}
     >
       <DoubleArrowDownIcon
         style={{
           transform: `rotate(${
-            tableInstance.isAllRowsExpanded ? -180 : anyRowsExpanded ? -90 : 0
+            getIsAllRowsExpanded() ? -180 : getIsSomeRowsExpanded() ? -90 : 0
           }deg)`,
           transition: 'transform 0.2s',
         }}

package/src/buttons/MRT_ExpandButton.tsx

@@ -1,40 +1,47 @@
 import React, { FC, MouseEvent } from 'react';
 import { IconButton } 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_ExpandButton: FC<Props> = ({ row }) => {
+export const MRT_ExpandButton: FC<Props> = ({ row, tableInstance }) => {
   const {
-    icons: { ExpandMoreIcon },
-    localization,
-    onRowExpandChange,
-    renderDetailPanel,
-  } = useMRT();
+    getState,
+    options: {
+      icons: { ExpandMoreIcon },
+      localization,
+      onRowExpandChange,
+      renderDetailPanel,
+    },
+  } = tableInstance;
+
+  const { isDensePadding } = getState();
 
   const handleToggleExpand = (event: MouseEvent<HTMLButtonElement>) => {
-    // @ts-ignore
-    row.getToggleRowExpandedProps()?.onClick(event);
+    row.toggleExpanded();
     onRowExpandChange?.(event, row);
   };
 
   return (
     <IconButton
       aria-label={localization.expand}
-      disabled={!row.canExpand && !renderDetailPanel}
+      disabled={!row.getCanExpand() && !renderDetailPanel}
       title={localization.expand}
-      {...row.getToggleRowExpandedProps()}
       onClick={handleToggleExpand}
+      sx={{
+        height: isDensePadding ? '1.75rem' : '2.25rem',
+        width: isDensePadding ? '1.75rem' : '2.25rem',
+      }}
     >
       <ExpandMoreIcon
         style={{
           transform: `rotate(${
-            !row.canExpand && !renderDetailPanel
+            !row.getCanExpand() && !renderDetailPanel
               ? -90
-              : row.isExpanded
+              : row.getIsExpanded()
               ? -180
               : 0
           }deg)`,

package/src/buttons/MRT_FullScreenToggleButton.tsx

@@ -1,28 +1,35 @@
 import React, { FC } from 'react';
 import { IconButton, IconButtonProps, Tooltip } from '@mui/material';
-import { useMRT } from '../useMRT';
+import { MRT_TableInstance } from '..';
 
-interface Props extends IconButtonProps {}
+interface Props extends IconButtonProps {
+  tableInstance: MRT_TableInstance;
+}
 
-export const MRT_FullScreenToggleButton: FC<Props> = ({ ...rest }) => {
+export const MRT_FullScreenToggleButton: FC<Props> = ({
+  tableInstance,
+  ...rest
+}) => {
   const {
-    icons: { FullscreenExitIcon, FullscreenIcon },
-    localization,
-    setFullScreen,
-    tableInstance: {
-      state: { fullScreen },
+    getState,
+    options: {
+      icons: { FullscreenExitIcon, FullscreenIcon },
+      localization,
+      setIsFullScreen,
     },
-  } = useMRT();
+  } = tableInstance;
+
+  const { isFullScreen } = getState();
 
   return (
     <Tooltip arrow title={localization.toggleFullScreen}>
       <IconButton
         aria-label={localization.showHideFilters}
-        onClick={() => setFullScreen(!fullScreen)}
+        onClick={() => setIsFullScreen(!isFullScreen)}
         size="small"
         {...rest}
       >
-        {fullScreen ? <FullscreenExitIcon /> : <FullscreenIcon />}
+        {isFullScreen ? <FullscreenExitIcon /> : <FullscreenIcon />}
       </IconButton>
     </Tooltip>
   );