material-react-table 1.0.11 → 1.1.0-beta.0

package/dist/esm/table/MRT_TableRoot.d.ts

@@ -45,6 +45,7 @@ export declare const MRT_TableRoot: <TData extends Record<string, any> = {}>(pro
     icons?: Partial<import("..").MRT_Icons> | undefined;
     initialState?: Partial<MRT_TableState<TData>> | undefined;
     localization?: Partial<MRT_Localization> | undefined;
+    memoMode?: "cell" | "row" | "table-body" | undefined;
     muiBottomToolbarProps?: import("@mui/material").ToolbarProps<"div", {}> | (({ table }: {
         table: MRT_TableInstance<TData>;
     }) => import("@mui/material").ToolbarProps<"div", {}>) | undefined;
@@ -65,10 +66,10 @@ export declare const MRT_TableRoot: <TData extends Record<string, any> = {}>(pro
     muiSelectAllCheckboxProps?: import("@mui/material").CheckboxProps | (({ table }: {
         table: MRT_TableInstance<TData>;
     }) => import("@mui/material").CheckboxProps) | undefined;
-    muiSelectCheckboxProps?: import("@mui/material").CheckboxProps | (({ table, row, }: {
+    muiSelectCheckboxProps?: import("@mui/material").CheckboxProps | import("@mui/material").RadioProps | (({ table, row, }: {
         table: MRT_TableInstance<TData>;
         row: MRT_Row<TData>;
-    }) => import("@mui/material").CheckboxProps) | undefined;
+    }) => import("@mui/material").CheckboxProps | import("@mui/material").RadioProps) | undefined;
     muiTableBodyCellCopyButtonProps?: import("@mui/material").ButtonProps<"button", {}> | (({ cell, column, row, table, }: {
         cell: MRT_Cell<TData>;
         column: MRT_Column<TData>;

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { MutableRefObject, Dispatch, SetStateAction, ReactNode } from 'react';
-import { ButtonProps, TextFieldProps, TableCellProps, IconButtonProps, CheckboxProps, ToolbarProps, LinearProgressProps, SkeletonProps, TableBodyProps, TableRowProps, TableContainerProps, TableFooterProps, TableHeadProps, TablePaginationProps, PaperProps, TableProps, ChipProps, AlertProps } from '@mui/material';
+import { ButtonProps, TextFieldProps, TableCellProps, IconButtonProps, CheckboxProps, ToolbarProps, LinearProgressProps, RadioProps, SkeletonProps, TableBodyProps, TableRowProps, TableContainerProps, TableFooterProps, TableHeadProps, TablePaginationProps, PaperProps, TableProps, ChipProps, AlertProps } from '@mui/material';
 import { Row, Table, TableState, ColumnDef, DeepKeys, Column, Header, HeaderGroup, Cell, SortingFn, FilterFn, TableOptions, OnChangeFn } from '@tanstack/react-table';
 import { Options, VirtualItem } from 'react-virtual';
 import * as _tanstack_table_core from '@tanstack/table-core';
@@ -558,6 +558,13 @@ declare type MaterialReactTableProps<TData extends Record<string, any> = {}> = O
      * @link https://www.material-react-table.com/docs/guides/localization
      */
     localization?: Partial<MRT_Localization>;
+    /**
+     * Memoize cells, rows, or the entire table body to potentially improve render performance.
+     *
+     * @warning This will break some dynamic rendering features. See the memoization guide for more info:
+     * @link https://www.material-react-table.com/docs/guides/memoize-components
+     */
+    memoMode?: 'cell' | 'row' | 'table-body';
     muiBottomToolbarProps?: ToolbarProps | (({ table }: {
         table: MRT_TableInstance<TData>;
     }) => ToolbarProps);
@@ -578,10 +585,10 @@ declare type MaterialReactTableProps<TData extends Record<string, any> = {}> = O
     muiSelectAllCheckboxProps?: CheckboxProps | (({ table }: {
         table: MRT_TableInstance<TData>;
     }) => CheckboxProps);
-    muiSelectCheckboxProps?: CheckboxProps | (({ table, row, }: {
+    muiSelectCheckboxProps?: (CheckboxProps | RadioProps) | (({ table, row, }: {
         table: MRT_TableInstance<TData>;
         row: MRT_Row<TData>;
-    }) => CheckboxProps);
+    }) => CheckboxProps | RadioProps);
     muiTableBodyCellCopyButtonProps?: ButtonProps | (({ cell, column, row, table, }: {
         cell: MRT_Cell<TData>;
         column: MRT_Column<TData>;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.11",
+  "version": "1.1.0-beta.0",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript.",

package/src/MaterialReactTable.tsx

@@ -13,6 +13,7 @@ import type {
   IconButtonProps,
   LinearProgressProps,
   PaperProps,
+  RadioProps,
   SkeletonProps,
   TableBodyProps,
   TableCellProps,
@@ -668,11 +669,18 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
     initialState?: Partial<MRT_TableState<TData>>;
     /**
      * Pass in either a locale imported from `material-react-table/locales/*` or a custom locale object.
-     * 
+     *
      * See the localization (i18n) guide for more info:
      * @link https://www.material-react-table.com/docs/guides/localization
      */
     localization?: Partial<MRT_Localization>;
+    /**
+     * Memoize cells, rows, or the entire table body to potentially improve render performance.
+     * 
+     * @warning This will break some dynamic rendering features. See the memoization guide for more info:
+     * @link https://www.material-react-table.com/docs/guides/memoize-components
+     */
+    memoMode?: 'cell' | 'row' | 'table-body';
     muiBottomToolbarProps?:
       | ToolbarProps
       | (({ table }: { table: MRT_TableInstance<TData> }) => ToolbarProps);
@@ -704,14 +712,14 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
       | CheckboxProps
       | (({ table }: { table: MRT_TableInstance<TData> }) => CheckboxProps);
     muiSelectCheckboxProps?:
-      | CheckboxProps
+      | (CheckboxProps | RadioProps)
       | (({
           table,
           row,
         }: {
           table: MRT_TableInstance<TData>;
           row: MRT_Row<TData>;
-        }) => CheckboxProps);
+        }) => CheckboxProps | RadioProps);
     muiTableBodyCellCopyButtonProps?:
       | ButtonProps
       | (({

package/src/body/MRT_TableBody.tsx

@@ -1,8 +1,8 @@
-import React, { FC, useMemo } from 'react';
+import React, { FC, memo, useMemo } from 'react';
 import { useVirtual } from 'react-virtual'; //stuck on v2 for now
 // import { useVirtualizer, Virtualizer } from '@tanstack/react-virtual';
 import { TableBody, Typography } from '@mui/material';
-import { MRT_TableBodyRow } from './MRT_TableBodyRow';
+import { Memo_MRT_TableBodyRow, MRT_TableBodyRow } from './MRT_TableBodyRow';
 import { rankGlobalFuzzy } from '../sortingFns';
 import type { MRT_Row, MRT_TableInstance } from '..';
 
@@ -22,6 +22,7 @@ export const MRT_TableBody: FC<Props> = ({ table }) => {
       localization,
       manualFiltering,
       manualSorting,
+      memoMode,
       muiTableBodyProps,
       virtualizerInstanceRef,
       virtualizerProps,
@@ -148,16 +149,19 @@ export const MRT_TableBody: FC<Props> = ({ table }) => {
               const row = enableRowVirtualization
                 ? (rows[rowOrVirtualRow.index] as MRT_Row)
                 : (rowOrVirtualRow as MRT_Row);
-              return (
-                <MRT_TableBodyRow
-                  key={row.id}
-                  row={row}
-                  rowIndex={
-                    enableRowVirtualization ? rowOrVirtualRow.index : rowIndex
-                  }
-                  table={table}
-                  virtualRow={enableRowVirtualization ? rowOrVirtualRow : null}
-                />
+              const props = {
+                key: row.id,
+                row,
+                rowIndex: enableRowVirtualization
+                  ? rowOrVirtualRow.index
+                  : rowIndex,
+                table,
+                virtualRow: enableRowVirtualization ? rowOrVirtualRow : null,
+              };
+              return memoMode === 'row' ? (
+                <Memo_MRT_TableBodyRow {...props} />
+              ) : (
+                <MRT_TableBodyRow {...props} />
               );
             },
           )}
@@ -171,3 +175,5 @@ export const MRT_TableBody: FC<Props> = ({ table }) => {
     </TableBody>
   );
 };
+
+export const Memo_MRT_TableBody = memo(MRT_TableBody, () => true);

package/src/body/MRT_TableBodyCell.tsx

@@ -1,6 +1,7 @@
 import React, {
   DragEvent,
   FC,
+  memo,
   MouseEvent,
   RefObject,
   useEffect,
@@ -167,7 +168,7 @@ export const MRT_TableBodyCell: FC<Props> = ({
       onDragEnter={handleDragEnter}
       onDoubleClick={handleDoubleClick}
       sx={(theme) => ({
-        cursor: isEditable && editingMode === 'cell' ? 'pointer' : 'text',
+        cursor: isEditable && editingMode === 'cell' ? 'pointer' : 'inherit',
         overflow: 'hidden',
         p:
           density === 'compact'
@@ -251,3 +252,8 @@ export const MRT_TableBodyCell: FC<Props> = ({
     </TableCell>
   );
 };
+
+export const Memo_MRT_TableBodyCell = memo(
+  MRT_TableBodyCell,
+  (prev, next) => next.cell === prev.cell,
+);

package/src/body/MRT_TableBodyRow.tsx

@@ -1,6 +1,6 @@
-import React, { DragEvent, FC, useRef } from 'react';
+import React, { DragEvent, FC, memo, useRef } from 'react';
 import { darken, lighten, TableRow, useTheme } from '@mui/material';
-import { MRT_TableBodyCell } from './MRT_TableBodyCell';
+import { Memo_MRT_TableBodyCell, MRT_TableBodyCell } from './MRT_TableBodyCell';
 import { MRT_TableDetailPanel } from './MRT_TableDetailPanel';
 import type { MRT_Row, MRT_TableInstance } from '..';
 
@@ -21,10 +21,16 @@ export const MRT_TableBodyRow: FC<Props> = ({
   const {
     getIsSomeColumnsPinned,
     getState,
-    options: { enableRowOrdering, muiTableBodyRowProps, renderDetailPanel },
+    options: {
+      enableRowOrdering,
+      memoMode,
+      muiTableBodyRowProps,
+      renderDetailPanel,
+    },
     setHoveredRow,
   } = table;
-  const { draggingRow, hoveredRow } = getState();
+  const { draggingColumn, draggingRow, editingCell, editingRow, hoveredRow } =
+    getState();
 
   const tableRowProps =
     muiTableBodyRowProps instanceof Function
@@ -69,7 +75,7 @@ export const MRT_TableBodyRow: FC<Props> = ({
           backgroundColor: lighten(theme.palette.background.default, 0.06),
           opacity:
             draggingRow?.id === row.id || hoveredRow?.id === row.id ? 0.5 : 1,
-          transition: 'all 0.1s ease-in-out',
+          transition: 'all 150ms ease-in-out',
           '&:hover td': {
             backgroundColor:
               tableRowProps?.hover !== false && getIsSomeColumnsPinned()
@@ -84,16 +90,26 @@ export const MRT_TableBodyRow: FC<Props> = ({
           ...draggingBorders,
         })}
       >
-        {row?.getVisibleCells()?.map?.((cell) => (
-          <MRT_TableBodyCell
-            cell={cell}
-            enableHover={tableRowProps?.hover !== false}
-            key={cell.id}
-            rowIndex={rowIndex}
-            rowRef={rowRef}
-            table={table}
-          />
-        ))}
+        {row?.getVisibleCells()?.map?.((cell) => {
+          const props = {
+            cell,
+            enableHover: tableRowProps?.hover !== false,
+            key: cell.id,
+            rowIndex,
+            rowRef,
+            table,
+          };
+          return memoMode === 'cell' &&
+            cell.column.columnDef.columnDefType === 'data' &&
+            !draggingColumn &&
+            !draggingRow &&
+            editingCell?.id !== cell.id &&
+            editingRow?.id !== row.id ? (
+            <Memo_MRT_TableBodyCell {...props} />
+          ) : (
+            <MRT_TableBodyCell {...props} />
+          );
+        })}
       </TableRow>
       {renderDetailPanel && !row.getIsGrouped() && (
         <MRT_TableDetailPanel row={row} table={table} />
@@ -101,3 +117,8 @@ export const MRT_TableBodyRow: FC<Props> = ({
     </>
   );
 };
+
+export const Memo_MRT_TableBodyRow = memo(
+  MRT_TableBodyRow,
+  (prev, next) => prev.row === next.row,
+);

package/src/body/MRT_TableDetailPanel.tsx

@@ -36,7 +36,7 @@ export const MRT_TableDetailPanel: FC<Props> = ({ row, table }) => {
           borderBottom: !row.getIsExpanded() ? 'none' : undefined,
           pb: row.getIsExpanded() ? '1rem' : 0,
           pt: row.getIsExpanded() ? '1rem' : 0,
-          transition: 'all 0.1s ease-in-out',
+          transition: 'all 150ms ease-in-out',
           width: `${table.getTotalSize()}px`,
           ...(tableCellProps?.sx instanceof Function
             ? tableCellProps.sx(theme)

package/src/buttons/MRT_ExpandAllButton.tsx

@@ -59,7 +59,7 @@ export const MRT_ExpandAllButton: FC<Props> = ({ table }) => {
                   ? -90
                   : 0
               }deg)`,
-              transition: 'transform 0.1s',
+              transition: 'transform 150ms',
             }}
           />
         </IconButton>

package/src/buttons/MRT_ExpandButton.tsx

@@ -61,7 +61,7 @@ export const MRT_ExpandButton: FC<Props> = ({ row, table }) => {
                   ? -180
                   : 0
               }deg)`,
-              transition: 'transform 0.1s',
+              transition: 'transform 150ms',
             }}
           />
         </IconButton>

package/src/buttons/MRT_GrabHandleButton.tsx

@@ -46,7 +46,7 @@ export const MRT_GrabHandleButton = <TData extends Record<string, any> = {}>({
           m: 0,
           opacity: 0.5,
           p: '2px',
-          transition: 'all 0.1s ease-in-out',
+          transition: 'all 150ms ease-in-out',
           '&:hover': {
             backgroundColor: 'transparent',
             opacity: 1,

package/src/buttons/MRT_ToggleRowActionMenuButton.tsx

@@ -8,7 +8,7 @@ const commonIconButtonStyles = {
   height: '2rem',
   ml: '10px',
   opacity: 0.5,
-  transition: 'opacity 0.1s',
+  transition: 'opacity 150ms',
   width: '2rem',
   '&:hover': {
     opacity: 1,

package/src/column.utils.ts

@@ -234,7 +234,7 @@ export const getCommonCellStyles = ({
     column.getIsPinned() === 'right'
       ? `${getTotalRight(table, column)}px`
       : undefined,
-  transition: `all ${column.getIsResizing() ? 0 : '0.1s'} ease-in-out`,
+  transition: `all ${column.getIsResizing() ? 0 : '150ms'} ease-in-out`,
   ...(tableCellProps?.sx instanceof Function
     ? tableCellProps.sx(theme)
     : (tableCellProps?.sx as any)),

package/src/head/MRT_TableHeadCellColumnActionsButton.tsx

@@ -66,7 +66,7 @@ export const MRT_TableHeadCellColumnActionsButton: FC<Props> = ({
             height: '2rem',
             mt: '-0.2rem',
             opacity: 0.5,
-            transition: 'opacity 0.1s',
+            transition: 'opacity 150ms',
             width: '2rem',
             '&:hover': {
               opacity: 1,
@@ -80,12 +80,14 @@ export const MRT_TableHeadCellColumnActionsButton: FC<Props> = ({
           <MoreVertIcon />
         </IconButton>
       </Tooltip>
-      <MRT_ColumnActionMenu
-        anchorEl={anchorEl}
-        header={header}
-        setAnchorEl={setAnchorEl}
-        table={table}
-      />
+      {anchorEl && (
+        <MRT_ColumnActionMenu
+          anchorEl={anchorEl}
+          header={header}
+          setAnchorEl={setAnchorEl}
+          table={table}
+        />
+      )}
     </>
   );
 };

package/src/head/MRT_TableHeadCellResizeHandle.tsx

@@ -32,7 +32,9 @@ export const MRT_TableHeadCellResizeHandle: FC<Props> = ({ header, table }) => {
         position: 'absolute',
         right: '1px',
         touchAction: 'none',
-        transition: column.getIsResizing() ? undefined : 'all 0.1s ease-in-out',
+        transition: column.getIsResizing()
+          ? undefined
+          : 'all 150ms ease-in-out',
         userSelect: 'none',
         zIndex: 4,
         '&:active': {

package/src/inputs/MRT_SelectCheckbox.tsx

@@ -1,5 +1,5 @@
-import React, { FC } from 'react';
-import { Checkbox, Tooltip } from '@mui/material';
+import React, { FC, MouseEvent } from 'react';
+import { Checkbox, Tooltip, Radio, Theme } from '@mui/material';
 import type { MRT_Row, MRT_TableInstance } from '..';
 
 interface Props {
@@ -13,6 +13,7 @@ export const MRT_SelectCheckbox: FC<Props> = ({ row, selectAll, table }) => {
     getState,
     options: {
       localization,
+      enableMultiRowSelection,
       muiSelectCheckboxProps,
       muiSelectAllCheckboxProps,
       selectAllMode,
@@ -28,6 +29,39 @@ export const MRT_SelectCheckbox: FC<Props> = ({ row, selectAll, table }) => {
     ? muiSelectCheckboxProps({ row, table })
     : muiSelectCheckboxProps;
 
+  const commonProps = {
+    checked: selectAll
+      ? selectAllMode === 'page'
+        ? table.getIsAllPageRowsSelected()
+        : table.getIsAllRowsSelected()
+      : row?.getIsSelected(),
+    inputProps: {
+      'aria-label': selectAll
+        ? localization.toggleSelectAll
+        : localization.toggleSelectRow,
+    },
+    onChange: row
+      ? row.getToggleSelectedHandler()
+      : selectAllMode === 'all'
+      ? table.getToggleAllRowsSelectedHandler()
+      : table.getToggleAllPageRowsSelectedHandler(),
+    size: (density === 'compact' ? 'small' : 'medium') as 'small' | 'medium',
+    ...checkboxProps,
+    onClick: (e: MouseEvent<HTMLButtonElement>) => {
+      e.stopPropagation();
+      checkboxProps?.onClick?.(e);
+    },
+    sx: (theme: Theme) => ({
+      height: density === 'compact' ? '1.75rem' : '2.5rem',
+      width: density === 'compact' ? '1.75rem' : '2.5rem',
+      m: density !== 'compact' ? '-0.4rem' : undefined,
+      ...(checkboxProps?.sx instanceof Function
+        ? checkboxProps.sx(theme)
+        : (checkboxProps?.sx as any)),
+    }),
+    title: undefined,
+  };
+
   return (
     <Tooltip
       arrow
@@ -40,50 +74,21 @@ export const MRT_SelectCheckbox: FC<Props> = ({ row, selectAll, table }) => {
           : localization.toggleSelectRow)
       }
     >
-      <Checkbox
-        checked={
-          selectAll
-            ? selectAllMode === 'page'
-              ? table.getIsAllPageRowsSelected()
-              : table.getIsAllRowsSelected()
-            : row?.getIsSelected()
-        }
-        indeterminate={
-          selectAll
-            ? table.getIsSomeRowsSelected() &&
-              !(selectAllMode === 'page'
-                ? table.getIsAllPageRowsSelected()
-                : table.getIsAllRowsSelected())
-            : row?.getIsSomeSelected()
-        }
-        inputProps={{
-          'aria-label': selectAll
-            ? localization.toggleSelectAll
-            : localization.toggleSelectRow,
-        }}
-        onChange={
-          row
-            ? row.getToggleSelectedHandler()
-            : selectAllMode === 'all'
-            ? table.getToggleAllRowsSelectedHandler()
-            : table.getToggleAllPageRowsSelectedHandler()
-        }
-        size={density === 'compact' ? 'small' : 'medium'}
-        {...checkboxProps}
-        onClick={(e) => {
-          e.stopPropagation();
-          checkboxProps?.onClick?.(e);
-        }}
-        sx={(theme) => ({
-          height: density === 'compact' ? '1.75rem' : '2.5rem',
-          width: density === 'compact' ? '1.75rem' : '2.5rem',
-          m: density !== 'compact' ? '-0.4rem' : undefined,
-          ...(checkboxProps?.sx instanceof Function
-            ? checkboxProps.sx(theme)
-            : (checkboxProps?.sx as any)),
-        })}
-        title={undefined}
-      />
+      {enableMultiRowSelection === false ? (
+        <Radio {...commonProps} />
+      ) : (
+        <Checkbox
+          indeterminate={
+            selectAll
+              ? table.getIsSomeRowsSelected() &&
+                !(selectAllMode === 'page'
+                  ? table.getIsAllPageRowsSelected()
+                  : table.getIsAllRowsSelected())
+              : row?.getIsSomeSelected()
+          }
+          {...commonProps}
+        />
+      )}
     </Tooltip>
   );
 };

package/src/table/MRT_Table.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
 import { Table } from '@mui/material';
 import { MRT_TableHead } from '../head/MRT_TableHead';
-import { MRT_TableBody } from '../body/MRT_TableBody';
+import { Memo_MRT_TableBody, MRT_TableBody } from '../body/MRT_TableBody';
 import { MRT_TableFooter } from '../footer/MRT_TableFooter';
 import { MRT_TableInstance } from '..';
 
@@ -18,6 +18,7 @@ export const MRT_Table: FC<Props> = ({ table }) => {
       enableStickyHeader,
       enableTableFooter,
       enableTableHead,
+      memoMode,
       muiTableProps,
     },
   } = table;
@@ -43,7 +44,11 @@ export const MRT_Table: FC<Props> = ({ table }) => {
       })}
     >
       {enableTableHead && <MRT_TableHead table={table} />}
-      <MRT_TableBody table={table} />
+      {memoMode === 'table-body' ? (
+        <Memo_MRT_TableBody table={table} />
+      ) : (
+        <MRT_TableBody table={table} />
+      )}
       {enableTableFooter && <MRT_TableFooter table={table} />}
     </Table>
   );

package/src/table/MRT_TablePaper.tsx

@@ -40,7 +40,7 @@ export const MRT_TablePaper: FC<Props> = ({ table }) => {
         }
       }}
       sx={(theme) => ({
-        transition: 'all 0.1s ease-in-out',
+        transition: 'all 150ms ease-in-out',
         ...(tablePaperProps?.sx instanceof Function
           ? tablePaperProps?.sx(theme)
           : (tablePaperProps?.sx as any)),

package/src/table/MRT_TableRoot.tsx

@@ -164,7 +164,7 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
               <MRT_SelectCheckbox row={row as any} table={table as any} />
             ),
             Header: () =>
-              props.enableSelectAll ? (
+              props.enableSelectAll && props.enableMultiRowSelection ? (
                 <MRT_SelectCheckbox selectAll table={table as any} />
               ) : null,
             header: props.localization.select,

package/src/toolbar/MRT_TopToolbar.tsx

@@ -17,7 +17,7 @@ export const commonToolbarStyles = ({ theme }: { theme: Theme }) => ({
   minHeight: '3.5rem',
   overflow: 'hidden',
   p: '0 !important',
-  transition: 'all 0.1s ease-in-out',
+  transition: 'all 150ms ease-in-out',
   zIndex: 1,
 });