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

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,
 });