material-react-table 0.17.1 → 0.19.0-alpha.1

package/src/body/MRT_TableBody.tsx

@@ -6,11 +6,11 @@ import type { MRT_Row, MRT_TableInstance } from '..';
 import { rankGlobalFuzzy } from '../sortingFns';
 
 interface Props {
-  instance: MRT_TableInstance;
+  table: MRT_TableInstance;
   tableContainerRef: RefObject<HTMLDivElement>;
 }
 
-export const MRT_TableBody: FC<Props> = ({ instance, tableContainerRef }) => {
+export const MRT_TableBody: FC<Props> = ({ table, tableContainerRef }) => {
   const {
     getRowModel,
     getPrePaginationRowModel,
@@ -22,13 +22,12 @@ export const MRT_TableBody: FC<Props> = ({ instance, tableContainerRef }) => {
       muiTableBodyProps,
       virtualizerProps,
     },
-  } = instance;
-
+  } = table;
   const { density, globalFilter, pagination, sorting } = getState();
 
   const tableBodyProps =
     muiTableBodyProps instanceof Function
-      ? muiTableBodyProps({ instance })
+      ? muiTableBodyProps({ table })
       : muiTableBodyProps;
 
   const getIsSomeColumnsSorted = () => {
@@ -97,7 +96,7 @@ export const MRT_TableBody: FC<Props> = ({ instance, tableContainerRef }) => {
               rowIndex={
                 enableRowVirtualization ? rowOrVirtualRow.index : rowIndex
               }
-              instance={instance}
+              table={table}
             />
           );
         },

package/src/body/MRT_TableBodyCell.tsx

@@ -10,14 +10,14 @@ interface Props {
   cell: MRT_Cell;
   enableHover?: boolean;
   rowIndex: number;
-  instance: MRT_TableInstance;
+  table: MRT_TableInstance;
 }
 
 export const MRT_TableBodyCell: FC<Props> = ({
   cell,
   enableHover,
   rowIndex,
-  instance,
+  table,
 }) => {
   const {
     getState,
@@ -29,15 +29,12 @@ export const MRT_TableBodyCell: FC<Props> = ({
       enableRowNumbers,
       muiTableBodyCellProps,
       muiTableBodyCellSkeletonProps,
-      onCellClick,
-      onRowClick,
       rowNumberMode,
       tableId,
     },
     setColumnOrder,
     setCurrentEditingCell,
-  } = instance;
-
+  } = table;
   const {
     columnOrder,
     currentEditingCell,
@@ -46,10 +43,9 @@ export const MRT_TableBodyCell: FC<Props> = ({
     isLoading,
     showSkeletons,
   } = getState();
-
   const { column, row } = cell;
-
-  const { columnDef, columnDefType } = column;
+  const { columnDef } = column;
+  const { columnDefType } = columnDef;
 
   const [, dropRef] = useDrop({
     accept: 'column',
@@ -61,12 +57,12 @@ export const MRT_TableBodyCell: FC<Props> = ({
 
   const mTableCellBodyProps =
     muiTableBodyCellProps instanceof Function
-      ? muiTableBodyCellProps({ cell, instance })
+      ? muiTableBodyCellProps({ cell, table })
       : muiTableBodyCellProps;
 
   const mcTableCellBodyProps =
     columnDef.muiTableBodyCellProps instanceof Function
-      ? columnDef.muiTableBodyCellProps({ cell, instance })
+      ? columnDef.muiTableBodyCellProps({ cell, table })
       : columnDef.muiTableBodyCellProps;
 
   const tableCellProps = {
@@ -80,7 +76,7 @@ export const MRT_TableBodyCell: FC<Props> = ({
         ? column.getSize() / 2
         : Math.random() * (column.getSize() - column.getSize() / 3) +
           column.getSize() / 3,
-    [columnDefType, column.getSize()],
+    [],
   );
 
   const isEditable =
@@ -115,7 +111,7 @@ export const MRT_TableBodyCell: FC<Props> = ({
   const getIsLastLeftPinnedColumn = () => {
     return (
       column.getIsPinned() === 'left' &&
-      instance.getLeftLeafHeaders().length - 1 === column.getPinnedIndex()
+      table.getLeftLeafHeaders().length - 1 === column.getPinnedIndex()
     );
   };
 
@@ -125,16 +121,12 @@ export const MRT_TableBodyCell: FC<Props> = ({
 
   const getTotalRight = () => {
     return (
-      (instance.getRightLeafHeaders().length - 1 - column.getPinnedIndex()) *
-      150
+      (table.getRightLeafHeaders().length - 1 - column.getPinnedIndex()) * 150
     );
   };
 
   return (
     <TableCell
-      onClick={(event: MouseEvent<HTMLTableCellElement>) =>
-        onCellClick?.({ event, cell, instance })
-      }
       onDoubleClick={handleDoubleClick}
       {...tableCellProps}
       ref={
@@ -149,10 +141,7 @@ export const MRT_TableBodyCell: FC<Props> = ({
           : getIsFirstRightPinnedColumn()
           ? `-4px 0 4px -2px ${alpha(theme.palette.common.black, 0.1)}`
           : undefined,
-        cursor:
-          (isEditable && editingMode === 'cell') || onRowClick || onCellClick
-            ? 'pointer'
-            : 'text',
+        cursor: isEditable && editingMode === 'cell' ? 'pointer' : 'text',
         left:
           column.getIsPinned() === 'left'
             ? `${column.getStart('left')}px`
@@ -206,7 +195,7 @@ export const MRT_TableBodyCell: FC<Props> = ({
       })}
     >
       <>
-        {isLoading || showSkeletons ? (
+        {cell.getIsPlaceholder() ? null : isLoading || showSkeletons ? (
           <Skeleton
             animation="wave"
             height={20}
@@ -218,27 +207,21 @@ export const MRT_TableBodyCell: FC<Props> = ({
           column.id === 'mrt-row-numbers' ? (
           rowIndex + 1
         ) : columnDefType === 'display' ? (
-          columnDef.Cell?.({ cell, instance })
-        ) : cell.getIsPlaceholder() ||
-          (row.getIsGrouped() &&
-            column.id !==
-              row.groupingColumnId) ? null : cell.getIsAggregated() ? (
-          columnDef.AggregatedCell?.({ cell, instance }) ??
-          cell.renderAggregatedCell()
+          columnDef.Cell?.({ cell, table })
         ) : isEditing ? (
-          <MRT_EditCellTextField cell={cell} instance={instance} />
+          <MRT_EditCellTextField cell={cell} table={table} />
         ) : (enableClickToCopy || columnDef.enableClickToCopy) &&
           columnDef.enableClickToCopy !== false ? (
           <>
-            <MRT_CopyButton cell={cell} instance={instance}>
-              <>{columnDef?.Cell?.({ cell, instance }) ?? cell.renderCell()}</>
+            <MRT_CopyButton cell={cell} table={table}>
+              <>{columnDef?.Cell?.({ cell, table }) ?? cell.renderValue()}</>
             </MRT_CopyButton>
-            {row.getIsGrouped() && <> ({row.subRows?.length})</>}
+            {cell.getIsGrouped() && <> ({row.subRows?.length})</>}
           </>
         ) : (
           <>
-            {columnDef?.Cell?.({ cell, instance }) ?? cell.renderCell()}
-            {row.getIsGrouped() && <> ({row.subRows?.length ?? ''})</>}
+            {columnDef?.Cell?.({ cell, table }) ?? cell.renderValue()}
+            {cell.getIsGrouped() && <> ({row.subRows?.length ?? ''})</>}
           </>
         )}
       </>

package/src/body/MRT_TableBodyRow.tsx

@@ -1,4 +1,4 @@
-import React, { FC, MouseEvent } from 'react';
+import React, { FC } from 'react';
 import { darken, lighten, TableRow } from '@mui/material';
 import { MRT_TableBodyCell } from './MRT_TableBodyCell';
 import { MRT_TableDetailPanel } from './MRT_TableDetailPanel';
@@ -7,27 +7,24 @@ import type { MRT_Row, MRT_TableInstance } from '..';
 interface Props {
   row: MRT_Row;
   rowIndex: number;
-  instance: MRT_TableInstance;
+  table: MRT_TableInstance;
 }
 
-export const MRT_TableBodyRow: FC<Props> = ({ row, rowIndex, instance }) => {
+export const MRT_TableBodyRow: FC<Props> = ({ row, rowIndex, table }) => {
   const {
     getIsSomeColumnsPinned,
-    options: { muiTableBodyRowProps, onRowClick, renderDetailPanel },
-  } = instance;
+    options: { muiTableBodyRowProps, renderDetailPanel },
+  } = table;
 
   const tableRowProps =
     muiTableBodyRowProps instanceof Function
-      ? muiTableBodyRowProps({ row, instance })
+      ? muiTableBodyRowProps({ row, table })
       : muiTableBodyRowProps;
 
   return (
     <>
       <TableRow
         hover
-        onClick={(event: MouseEvent<HTMLTableRowElement>) =>
-          onRowClick?.({ event, row, instance })
-        }
         selected={row.getIsSelected()}
         {...tableRowProps}
         sx={(theme) => ({
@@ -44,18 +41,18 @@ export const MRT_TableBodyRow: FC<Props> = ({ row, rowIndex, instance }) => {
           ...(tableRowProps?.sx as any),
         })}
       >
-        {row.getVisibleCells().map((cell) => (
+        {row?.getVisibleCells()?.map?.((cell) => (
           <MRT_TableBodyCell
             cell={cell}
             key={cell.id}
             enableHover={tableRowProps?.hover !== false}
             rowIndex={rowIndex}
-            instance={instance}
+            table={table}
           />
         ))}
       </TableRow>
       {renderDetailPanel && !row.getIsGrouped() && (
-        <MRT_TableDetailPanel row={row} instance={instance} />
+        <MRT_TableDetailPanel row={row} table={table} />
       )}
     </>
   );

package/src/body/MRT_TableDetailPanel.tsx

@@ -1,53 +1,49 @@
-import React, { FC, MouseEvent } from 'react';
+import React, { FC } from 'react';
 import { Collapse, TableCell, TableRow } from '@mui/material';
 import type { MRT_Row, MRT_TableInstance } from '..';
 
 interface Props {
   row: MRT_Row;
-  instance: MRT_TableInstance;
+  table: MRT_TableInstance;
 }
 
-export const MRT_TableDetailPanel: FC<Props> = ({ row, instance }) => {
+export const MRT_TableDetailPanel: FC<Props> = ({ row, table }) => {
   const {
     getVisibleLeafColumns,
     options: {
       muiTableBodyRowProps,
       muiTableDetailPanelProps,
-      onDetailPanelClick,
       renderDetailPanel,
     },
-  } = instance;
+  } = table;
 
   const tableRowProps =
     muiTableBodyRowProps instanceof Function
-      ? muiTableBodyRowProps({ row, instance })
+      ? muiTableBodyRowProps({ row, table })
       : muiTableBodyRowProps;
 
   const tableCellProps =
     muiTableDetailPanelProps instanceof Function
-      ? muiTableDetailPanelProps({ row, instance })
+      ? muiTableDetailPanelProps({ row, table })
       : muiTableDetailPanelProps;
 
   return (
     <TableRow {...tableRowProps}>
       <TableCell
         colSpan={getVisibleLeafColumns().length}
-        onClick={(event: MouseEvent<HTMLTableCellElement>) =>
-          onDetailPanelClick?.({ event, row, instance })
-        }
         {...tableCellProps}
         sx={{
           borderBottom: !row.getIsExpanded() ? 'none' : undefined,
           pb: row.getIsExpanded() ? '1rem' : 0,
           pt: row.getIsExpanded() ? '1rem' : 0,
           transition: 'all 0.2s ease-in-out',
-          width: `${instance.getTotalSize()}px`,
+          width: `${table.getTotalSize()}px`,
           ...tableCellProps?.sx,
         }}
       >
         {renderDetailPanel && (
           <Collapse in={row.getIsExpanded()}>
-            {renderDetailPanel({ row, instance })}
+            {renderDetailPanel({ row, table })}
           </Collapse>
         )}
       </TableCell>

package/src/buttons/MRT_ColumnPinningButtons.tsx

@@ -4,16 +4,16 @@ import type { MRT_Column, MRT_TableInstance } from '..';
 
 interface Props {
   column: MRT_Column;
-  instance: MRT_TableInstance;
+  table: MRT_TableInstance;
 }
 
-export const MRT_ColumnPinningButtons: FC<Props> = ({ column, instance }) => {
+export const MRT_ColumnPinningButtons: FC<Props> = ({ column, table }) => {
   const {
     options: {
       icons: { PushPinIcon },
       localization,
     },
-  } = instance;
+  } = table;
 
   const handlePinColumn = (pinDirection: 'left' | 'right' | false) => {
     column.pin(pinDirection);

package/src/buttons/MRT_CopyButton.tsx

@@ -5,16 +5,14 @@ import { MRT_Cell, MRT_TableInstance } from '..';
 interface Props {
   cell: MRT_Cell;
   children: ReactNode;
-  instance: MRT_TableInstance;
+  table: MRT_TableInstance;
 }
 
-export const MRT_CopyButton: FC<Props> = ({ cell, children, instance }) => {
+export const MRT_CopyButton: FC<Props> = ({ cell, children, table }) => {
   const {
     options: { localization, muiTableBodyCellCopyButtonProps },
-  } = instance;
-
+  } = table;
   const { column } = cell;
-
   const { columnDef } = column;
 
   const [copied, setCopied] = useState(false);
@@ -27,14 +25,14 @@ export const MRT_CopyButton: FC<Props> = ({ cell, children, instance }) => {
 
   const mTableBodyCellCopyButtonProps =
     muiTableBodyCellCopyButtonProps instanceof Function
-      ? muiTableBodyCellCopyButtonProps({ cell, instance })
+      ? muiTableBodyCellCopyButtonProps({ cell, table })
       : muiTableBodyCellCopyButtonProps;
 
   const mcTableBodyCellCopyButtonProps =
     columnDef.muiTableBodyCellCopyButtonProps instanceof Function
       ? columnDef.muiTableBodyCellCopyButtonProps({
           cell,
-          instance,
+          table,
         })
       : columnDef.muiTableBodyCellCopyButtonProps;
 

package/src/buttons/MRT_EditActionButtons.tsx

@@ -4,10 +4,10 @@ import type { MRT_Row, MRT_TableInstance } from '..';
 
 interface Props {
   row: MRT_Row;
-  instance: MRT_TableInstance;
+  table: MRT_TableInstance;
 }
 
-export const MRT_EditActionButtons: FC<Props> = ({ row, instance }) => {
+export const MRT_EditActionButtons: FC<Props> = ({ row, table }) => {
   const {
     getState,
     options: {
@@ -16,8 +16,7 @@ export const MRT_EditActionButtons: FC<Props> = ({ row, instance }) => {
       onEditRowSubmit,
     },
     setCurrentEditingRow,
-  } = instance;
-
+  } = table;
   const { currentEditingRow } = getState();
 
   const handleCancel = () => {
@@ -26,7 +25,7 @@ export const MRT_EditActionButtons: FC<Props> = ({ row, instance }) => {
   };
 
   const handleSave = () => {
-    onEditRowSubmit?.({ row: currentEditingRow ?? row, instance });
+    onEditRowSubmit?.({ row: currentEditingRow ?? row, table });
     setCurrentEditingRow(null);
   };
 

package/src/buttons/MRT_ExpandAllButton.tsx

@@ -3,10 +3,10 @@ import { IconButton, Tooltip } from '@mui/material';
 import { MRT_TableInstance } from '..';
 
 interface Props {
-  instance: MRT_TableInstance;
+  table: MRT_TableInstance;
 }
 
-export const MRT_ExpandAllButton: FC<Props> = ({ instance }) => {
+export const MRT_ExpandAllButton: FC<Props> = ({ table }) => {
   const {
     getIsAllRowsExpanded,
     getIsSomeRowsExpanded,
@@ -19,13 +19,12 @@ export const MRT_ExpandAllButton: FC<Props> = ({ instance }) => {
       renderDetailPanel,
     },
     toggleAllRowsExpanded,
-  } = instance;
-
+  } = table;
   const { density } = getState();
 
   const iconButtonProps =
     muiExpandAllButtonProps instanceof Function
-      ? muiExpandAllButtonProps({ instance })
+      ? muiExpandAllButtonProps({ table })
       : muiExpandAllButtonProps;
 
   return (

package/src/buttons/MRT_ExpandButton.tsx

@@ -1,34 +1,31 @@
-import React, { FC, MouseEvent } from 'react';
+import React, { FC } from 'react';
 import { IconButton, Tooltip } from '@mui/material';
 import type { MRT_Row, MRT_TableInstance } from '..';
 
 interface Props {
   row: MRT_Row;
-  instance: MRT_TableInstance;
+  table: MRT_TableInstance;
 }
 
-export const MRT_ExpandButton: FC<Props> = ({ row, instance }) => {
+export const MRT_ExpandButton: FC<Props> = ({ row, table }) => {
   const {
     getState,
     options: {
       icons: { ExpandMoreIcon },
       localization,
       muiExpandButtonProps,
-      onExpandChanged,
       renderDetailPanel,
     },
-  } = instance;
-
+  } = table;
   const { density } = getState();
 
   const iconButtonProps =
     muiExpandButtonProps instanceof Function
-      ? muiExpandButtonProps({ instance, row })
+      ? muiExpandButtonProps({ table, row })
       : muiExpandButtonProps;
 
-  const handleToggleExpand = (event: MouseEvent<HTMLButtonElement>) => {
+  const handleToggleExpand = () => {
     row.toggleExpanded();
-    onExpandChanged?.({ event, row, instance });
   };
 
   return (

package/src/buttons/MRT_FullScreenToggleButton.tsx

@@ -1,33 +1,23 @@
-import React, { FC, MouseEvent } from 'react';
+import React, { FC } from 'react';
 import { IconButton, IconButtonProps, Tooltip } from '@mui/material';
 import { MRT_TableInstance } from '..';
 
 interface Props extends IconButtonProps {
-  instance: MRT_TableInstance;
+  table: MRT_TableInstance;
 }
 
-export const MRT_FullScreenToggleButton: FC<Props> = ({
-  instance,
-  ...rest
-}) => {
+export const MRT_FullScreenToggleButton: FC<Props> = ({ table, ...rest }) => {
   const {
     getState,
     options: {
       icons: { FullscreenExitIcon, FullscreenIcon },
       localization,
-      onIsFullScreenChanged,
     },
     setIsFullScreen,
-  } = instance;
-
+  } = table;
   const { isFullScreen } = getState();
 
-  const handleToggleFullScreen = (event: MouseEvent<HTMLButtonElement>) => {
-    onIsFullScreenChanged?.({
-      event,
-      isFullScreen: !isFullScreen,
-      instance,
-    });
+  const handleToggleFullScreen = () => {
     setIsFullScreen(!isFullScreen);
   };
 

package/src/buttons/MRT_GrabHandleButton.tsx

@@ -4,48 +4,46 @@ import { MRT_TableInstance } from '..';
 
 interface Props {
   ref: Ref<HTMLButtonElement>;
-  instance: MRT_TableInstance;
+  table: MRT_TableInstance;
 }
 
-export const MRT_GrabHandleButton: FC<Props> = forwardRef(
-  ({ instance }, ref) => {
-    const {
-      options: {
-        icons: { DragHandleIcon },
-        localization,
-      },
-    } = instance;
+export const MRT_GrabHandleButton: FC<Props> = forwardRef(({ table }, ref) => {
+  const {
+    options: {
+      icons: { DragHandleIcon },
+      localization,
+    },
+  } = table;
 
-    return (
-      <Tooltip
-        arrow
-        enterDelay={1000}
-        enterNextDelay={1000}
-        placement="top"
-        title={localization.grab}
+  return (
+    <Tooltip
+      arrow
+      enterDelay={1000}
+      enterNextDelay={1000}
+      placement="top"
+      title={localization.grab}
+    >
+      <IconButton
+        disableRipple
+        ref={ref}
+        size="small"
+        sx={{
+          cursor: 'grab',
+          m: 0,
+          opacity: 0.5,
+          p: '2px',
+          transition: 'all 0.2s ease-in-out',
+          '&:hover': {
+            backgroundColor: 'transparent',
+            opacity: 1,
+          },
+          '&:active': {
+            cursor: 'grabbing',
+          },
+        }}
       >
-        <IconButton
-          disableRipple
-          ref={ref}
-          size="small"
-          sx={{
-            cursor: 'grab',
-            m: 0,
-            opacity: 0.5,
-            p: '2px',
-            transition: 'all 0.2s ease-in-out',
-            '&:hover': {
-              backgroundColor: 'transparent',
-              opacity: 1,
-            },
-            '&:active': {
-              cursor: 'grabbing',
-            },
-          }}
-        >
-          <DragHandleIcon />
-        </IconButton>
-      </Tooltip>
-    );
-  },
-);
+        <DragHandleIcon />
+      </IconButton>
+    </Tooltip>
+  );
+});

package/src/buttons/MRT_ShowHideColumnsButton.tsx

@@ -4,16 +4,16 @@ import { MRT_ShowHideColumnsMenu } from '../menus/MRT_ShowHideColumnsMenu';
 import { MRT_TableInstance } from '..';
 
 interface Props extends IconButtonProps {
-  instance: MRT_TableInstance;
+  table: MRT_TableInstance;
 }
 
-export const MRT_ShowHideColumnsButton: FC<Props> = ({ instance, ...rest }) => {
+export const MRT_ShowHideColumnsButton: FC<Props> = ({ table, ...rest }) => {
   const {
     options: {
       icons: { ViewColumnIcon },
       localization,
     },
-  } = instance;
+  } = table;
 
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
 
@@ -35,7 +35,7 @@ export const MRT_ShowHideColumnsButton: FC<Props> = ({ instance, ...rest }) => {
       <MRT_ShowHideColumnsMenu
         anchorEl={anchorEl}
         setAnchorEl={setAnchorEl}
-        instance={instance}
+        table={table}
       />
     </>
   );

package/src/buttons/MRT_ToggleDensePaddingButton.tsx

@@ -1,39 +1,29 @@
-import React, { FC, MouseEvent } from 'react';
+import React, { FC } from 'react';
 import { IconButton, IconButtonProps, Tooltip } from '@mui/material';
 import { MRT_TableInstance } from '..';
 
 interface Props extends IconButtonProps {
-  instance: MRT_TableInstance;
+  table: MRT_TableInstance;
 }
 
-export const MRT_ToggleDensePaddingButton: FC<Props> = ({
-  instance,
-  ...rest
-}) => {
+export const MRT_ToggleDensePaddingButton: FC<Props> = ({ table, ...rest }) => {
   const {
     getState,
     options: {
       icons: { DensityLargeIcon, DensityMediumIcon, DensitySmallIcon },
       localization,
-      onDensityChanged,
     },
     setDensity,
-  } = instance;
-
+  } = table;
   const { density } = getState();
 
-  const handleToggleDensePadding = (event: MouseEvent<HTMLButtonElement>) => {
+  const handleToggleDensePadding = () => {
     const nextDensity =
       density === 'comfortable'
         ? 'compact'
         : density === 'compact'
         ? 'spacious'
         : 'comfortable';
-    onDensityChanged?.({
-      event,
-      density: nextDensity,
-      instance,
-    });
     setDensity(nextDensity);
   };