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

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,