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

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

@@ -45,7 +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?: "row" | "cell" | "table-body" | undefined;
+    memoMode?: "rows" | "cells" | "table-body" | undefined;
     muiBottomToolbarProps?: import("@mui/material").ToolbarProps<"div", {}> | (({ table }: {
         table: MRT_TableInstance<TData>;
     }) => import("@mui/material").ToolbarProps<"div", {}>) | undefined;

package/dist/index.d.ts

@@ -564,7 +564,7 @@ declare type MaterialReactTableProps<TData extends Record<string, any> = {}> = O
      * @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';
+    memoMode?: 'cells' | 'rows' | 'table-body';
     muiBottomToolbarProps?: ToolbarProps | (({ table }: {
         table: MRT_TableInstance<TData>;
     }) => ToolbarProps);

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.1.0-beta.1",
+  "version": "1.1.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

@@ -680,7 +680,7 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
      * @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';
+    memoMode?: 'cells' | 'rows' | 'table-body';
     muiBottomToolbarProps?:
       | ToolbarProps
       | (({ table }: { table: MRT_TableInstance<TData> }) => ToolbarProps);

package/src/body/MRT_TableBody.tsx

@@ -151,6 +151,7 @@ export const MRT_TableBody: FC<Props> = ({ table }) => {
                 : (rowOrVirtualRow as MRT_Row);
               const props = {
                 key: row.id,
+                numRows: rows.length,
                 row,
                 rowIndex: enableRowVirtualization
                   ? rowOrVirtualRow.index
@@ -158,7 +159,7 @@ export const MRT_TableBody: FC<Props> = ({ table }) => {
                 table,
                 virtualRow: enableRowVirtualization ? rowOrVirtualRow : null,
               };
-              return memoMode === 'row' ? (
+              return memoMode === 'rows' ? (
                 <Memo_MRT_TableBodyRow {...props} />
               ) : (
                 <MRT_TableBodyRow {...props} />
@@ -176,4 +177,7 @@ export const MRT_TableBody: FC<Props> = ({ table }) => {
   );
 };
 
-export const Memo_MRT_TableBody = memo(MRT_TableBody, () => true);
+export const Memo_MRT_TableBody = memo(
+  MRT_TableBody,
+  (prev, next) => prev.table.options.data === next.table.options.data,
+);

package/src/body/MRT_TableBodyCell.tsx

@@ -5,6 +5,7 @@ import React, {
   MouseEvent,
   RefObject,
   useEffect,
+  useMemo,
   useState,
 } from 'react';
 import { darken, lighten, Skeleton, TableCell, useTheme } from '@mui/material';
@@ -18,6 +19,7 @@ import type { MRT_Cell, MRT_TableInstance } from '..';
 interface Props {
   cell: MRT_Cell;
   enableHover?: boolean;
+  numRows: number;
   rowIndex: number;
   rowRef: RefObject<HTMLTableRowElement>;
   table: MRT_TableInstance;
@@ -26,6 +28,7 @@ interface Props {
 export const MRT_TableBodyCell: FC<Props> = ({
   cell,
   enableHover,
+  numRows,
   rowIndex,
   rowRef,
   table,
@@ -39,7 +42,6 @@ export const MRT_TableBodyCell: FC<Props> = ({
       enableColumnOrdering,
       enableEditing,
       enableGrouping,
-      enablePagination,
       enableRowNumbers,
       muiTableBodyCellProps,
       muiTableBodyCellSkeletonProps,
@@ -82,17 +84,6 @@ export const MRT_TableBodyCell: FC<Props> = ({
       ? muiTableBodyCellSkeletonProps({ cell, column, row, table })
       : muiTableBodyCellSkeletonProps;
 
-  const isEditable =
-    (enableEditing || columnDef.enableEditing) &&
-    columnDef.enableEditing !== false;
-
-  const isEditing =
-    isEditable &&
-    editingMode !== 'modal' &&
-    (editingMode === 'table' ||
-      editingRow?.id === row.id ||
-      editingCell?.id === cell.id);
-
   const [skeletonWidth, setSkeletonWidth] = useState(0);
   useEffect(
     () =>
@@ -106,9 +97,42 @@ export const MRT_TableBodyCell: FC<Props> = ({
               )
           : 100,
       ),
-    [isLoading, showSkeletons],
+    [],
+  );
+
+  const draggingBorder = useMemo(
+    () =>
+      draggingColumn?.id === column.id
+        ? `1px dashed ${theme.palette.text.secondary}`
+        : hoveredColumn?.id === column.id
+        ? `2px dashed ${theme.palette.primary.main}`
+        : undefined,
+    [draggingColumn, hoveredColumn],
   );
 
+  const draggingBorders = useMemo(
+    () =>
+      draggingBorder
+        ? {
+            borderLeft: draggingBorder,
+            borderRight: draggingBorder,
+            borderBottom: rowIndex === numRows - 1 ? draggingBorder : undefined,
+          }
+        : undefined,
+    [draggingBorder, numRows],
+  );
+
+  const isEditable =
+    (enableEditing || columnDef.enableEditing) &&
+    columnDef.enableEditing !== false;
+
+  const isEditing =
+    isEditable &&
+    editingMode !== 'modal' &&
+    (editingMode === 'table' ||
+      editingRow?.id === row.id ||
+      editingCell?.id === cell.id);
+
   const handleDoubleClick = (event: MouseEvent<HTMLTableCellElement>) => {
     tableCellProps?.onDoubleClick?.(event);
     if (
@@ -139,29 +163,6 @@ export const MRT_TableBodyCell: FC<Props> = ({
     }
   };
 
-  const draggingBorder =
-    draggingColumn?.id === column.id
-      ? `1px dashed ${theme.palette.text.secondary}`
-      : hoveredColumn?.id === column.id
-      ? `2px dashed ${theme.palette.primary.main}`
-      : undefined;
-
-  const draggingBorders = draggingBorder
-    ? {
-        borderLeft: draggingBorder,
-        borderRight: draggingBorder,
-        borderBottom:
-          row.index ===
-          (enablePagination
-            ? table.getRowModel()
-            : table.getPrePaginationRowModel()
-          ).rows.length -
-            1
-            ? draggingBorder
-            : undefined,
-      }
-    : undefined;
-
   return (
     <TableCell
       {...tableCellProps}

package/src/body/MRT_TableBodyRow.tsx

@@ -1,10 +1,11 @@
-import React, { DragEvent, FC, memo, useRef } from 'react';
+import React, { DragEvent, FC, memo, useMemo, useRef } from 'react';
 import { darken, lighten, TableRow, useTheme } from '@mui/material';
 import { Memo_MRT_TableBodyCell, MRT_TableBodyCell } from './MRT_TableBodyCell';
 import { MRT_TableDetailPanel } from './MRT_TableDetailPanel';
 import type { MRT_Row, MRT_TableInstance } from '..';
 
 interface Props {
+  numRows: number;
   row: MRT_Row;
   rowIndex: number;
   table: MRT_TableInstance;
@@ -12,6 +13,7 @@ interface Props {
 }
 
 export const MRT_TableBodyRow: FC<Props> = ({
+  numRows,
   row,
   rowIndex,
   table,
@@ -45,12 +47,15 @@ export const MRT_TableBodyRow: FC<Props> = ({
 
   const rowRef = useRef<HTMLTableRowElement | null>(null);
 
-  const draggingBorder =
-    draggingRow?.id === row.id
-      ? `1px dashed ${theme.palette.text.secondary}`
-      : hoveredRow?.id === row.id
-      ? `2px dashed ${theme.palette.primary.main}`
-      : undefined;
+  const draggingBorder = useMemo(
+    () =>
+      draggingRow?.id === row.id
+        ? `1px dashed ${theme.palette.text.secondary}`
+        : hoveredRow?.id === row.id
+        ? `2px dashed ${theme.palette.primary.main}`
+        : undefined,
+    [draggingRow, hoveredRow],
+  );
 
   const draggingBorders = draggingBorder
     ? {
@@ -90,16 +95,17 @@ export const MRT_TableBodyRow: FC<Props> = ({
           ...draggingBorders,
         })}
       >
-        {row?.getVisibleCells()?.map?.((cell) => {
+        {row.getVisibleCells().map((cell) => {
           const props = {
             cell,
             enableHover: tableRowProps?.hover !== false,
             key: cell.id,
+            numRows,
             rowIndex,
             rowRef,
             table,
           };
-          return memoMode === 'cell' &&
+          return memoMode === 'cells' &&
             cell.column.columnDef.columnDefType === 'data' &&
             !draggingColumn &&
             !draggingRow &&

package/src/head/MRT_TableHeadCell.tsx

@@ -1,4 +1,4 @@
-import React, { DragEvent, FC, ReactNode } from 'react';
+import React, { DragEvent, FC, ReactNode, useMemo } from 'react';
 import { Box, TableCell, Theme, useTheme } from '@mui/material';
 import { MRT_TableHeadCellColumnActionsButton } from './MRT_TableHeadCellColumnActionsButton';
 import { MRT_TableHeadCellFilterContainer } from './MRT_TableHeadCellFilterContainer';
@@ -54,6 +54,24 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
     ...mcTableHeadCellProps,
   };
 
+  const draggingBorder = useMemo(
+    () =>
+      draggingColumn?.id === column.id
+        ? `1px dashed ${theme.palette.text.secondary}`
+        : hoveredColumn?.id === column.id
+        ? `2px dashed ${theme.palette.primary.main}`
+        : undefined,
+    [draggingColumn, hoveredColumn],
+  );
+
+  const draggingBorders = draggingBorder
+    ? {
+        borderLeft: draggingBorder,
+        borderRight: draggingBorder,
+        borderTop: draggingBorder,
+      }
+    : undefined;
+
   const handleDragEnter = (_e: DragEvent) => {
     if (enableGrouping && hoveredColumn?.id === 'drop-zone') {
       setHoveredColumn(null);
@@ -65,21 +83,6 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
     }
   };
 
-  const draggingBorder =
-    draggingColumn?.id === column.id
-      ? `1px dashed ${theme.palette.text.secondary}`
-      : hoveredColumn?.id === column.id
-      ? `2px dashed ${theme.palette.primary.main}`
-      : undefined;
-
-  const draggingBorders = draggingBorder
-    ? {
-        borderLeft: draggingBorder,
-        borderRight: draggingBorder,
-        borderTop: draggingBorder,
-      }
-    : undefined;
-
   const headerElement = ((columnDef?.Header instanceof Function
     ? columnDef?.Header?.({
         column,