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

package/dist/cjs/MaterialReactTable.d.ts

@@ -454,7 +454,7 @@ export declare 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/dist/cjs/body/MRT_TableBodyCell.d.ts

@@ -3,6 +3,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;

package/dist/cjs/body/MRT_TableBodyRow.d.ts

@@ -1,6 +1,7 @@
 import React, { FC } from 'react';
 import type { MRT_Row, MRT_TableInstance } from '..';
 interface Props {
+    numRows: number;
     row: MRT_Row;
     rowIndex: number;
     table: MRT_TableInstance;

package/dist/cjs/index.js

@@ -1760,19 +1760,11 @@ const MRT_TableHeadCell = ({ header, table }) => {
         ? columnDef.muiTableHeadCellProps({ column, table })
         : columnDef.muiTableHeadCellProps;
     const tableCellProps = Object.assign(Object.assign({}, mTableHeadCellProps), mcTableHeadCellProps);
-    const handleDragEnter = (_e) => {
-        if (enableGrouping && (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === 'drop-zone') {
-            setHoveredColumn(null);
-        }
-        if (enableColumnOrdering && draggingColumn && columnDefType !== 'group') {
-            setHoveredColumn(columnDef.enableColumnOrdering !== false ? column : null);
-        }
-    };
-    const draggingBorder = (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id) === column.id
+    const draggingBorder = React.useMemo(() => (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id) === column.id
         ? `1px dashed ${theme.palette.text.secondary}`
         : (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === column.id
             ? `2px dashed ${theme.palette.primary.main}`
-            : undefined;
+            : undefined, [draggingColumn, hoveredColumn]);
     const draggingBorders = draggingBorder
         ? {
             borderLeft: draggingBorder,
@@ -1780,6 +1772,14 @@ const MRT_TableHeadCell = ({ header, table }) => {
             borderTop: draggingBorder,
         }
         : undefined;
+    const handleDragEnter = (_e) => {
+        if (enableGrouping && (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === 'drop-zone') {
+            setHoveredColumn(null);
+        }
+        if (enableColumnOrdering && draggingColumn && columnDefType !== 'group') {
+            setHoveredColumn(columnDef.enableColumnOrdering !== false ? column : null);
+        }
+    };
     const headerElement = ((_b = ((columnDef === null || columnDef === void 0 ? void 0 : columnDef.Header) instanceof Function
         ? (_a = columnDef === null || columnDef === void 0 ? void 0 : columnDef.Header) === null || _a === void 0 ? void 0 : _a.call(columnDef, {
             column,
@@ -2018,10 +2018,10 @@ const MRT_TableBodyCellValue = ({ cell, table }) => {
                 : (_b = (_a = columnDef === null || columnDef === void 0 ? void 0 : columnDef.Cell) === null || _a === void 0 ? void 0 : _a.call(columnDef, { cell, column, row, table })) !== null && _b !== void 0 ? _b : cell.renderValue()));
 };
 
-const MRT_TableBodyCell = ({ cell, enableHover, rowIndex, rowRef, table, }) => {
+const MRT_TableBodyCell = ({ cell, enableHover, numRows, rowIndex, rowRef, table, }) => {
     var _a, _b;
     const theme = material.useTheme();
-    const { getState, options: { editingMode, enableClickToCopy, enableColumnOrdering, enableEditing, enableGrouping, enablePagination, enableRowNumbers, muiTableBodyCellProps, muiTableBodyCellSkeletonProps, rowNumberMode, }, refs: { editInputRefs }, setEditingCell, setHoveredColumn, } = table;
+    const { getState, options: { editingMode, enableClickToCopy, enableColumnOrdering, enableEditing, enableGrouping, enableRowNumbers, muiTableBodyCellProps, muiTableBodyCellSkeletonProps, rowNumberMode, }, refs: { editInputRefs }, setEditingCell, setHoveredColumn, } = table;
     const { draggingColumn, editingCell, editingRow, hoveredColumn, density, isLoading, showSkeletons, } = getState();
     const { column, row } = cell;
     const { columnDef } = column;
@@ -2036,6 +2036,25 @@ const MRT_TableBodyCell = ({ cell, enableHover, rowIndex, rowRef, table, }) => {
     const skeletonProps = muiTableBodyCellSkeletonProps instanceof Function
         ? muiTableBodyCellSkeletonProps({ cell, column, row, table })
         : muiTableBodyCellSkeletonProps;
+    const [skeletonWidth, setSkeletonWidth] = React.useState(0);
+    React.useEffect(() => setSkeletonWidth(isLoading || showSkeletons
+        ? columnDefType === 'display'
+            ? column.getSize() / 2
+            : Math.round(Math.random() * (column.getSize() - column.getSize() / 3) +
+                column.getSize() / 3)
+        : 100), []);
+    const draggingBorder = React.useMemo(() => (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id) === column.id
+        ? `1px dashed ${theme.palette.text.secondary}`
+        : (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === column.id
+            ? `2px dashed ${theme.palette.primary.main}`
+            : undefined, [draggingColumn, hoveredColumn]);
+    const draggingBorders = React.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 &&
@@ -2043,13 +2062,6 @@ const MRT_TableBodyCell = ({ cell, enableHover, rowIndex, rowRef, table, }) => {
         (editingMode === 'table' ||
             (editingRow === null || editingRow === void 0 ? void 0 : editingRow.id) === row.id ||
             (editingCell === null || editingCell === void 0 ? void 0 : editingCell.id) === cell.id);
-    const [skeletonWidth, setSkeletonWidth] = React.useState(0);
-    React.useEffect(() => setSkeletonWidth(isLoading || showSkeletons
-        ? columnDefType === 'display'
-            ? column.getSize() / 2
-            : Math.round(Math.random() * (column.getSize() - column.getSize() / 3) +
-                column.getSize() / 3)
-        : 100), [isLoading, showSkeletons]);
     const handleDoubleClick = (event) => {
         var _a;
         (_a = tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.onDoubleClick) === null || _a === void 0 ? void 0 : _a.call(tableCellProps, event);
@@ -2076,24 +2088,6 @@ const MRT_TableBodyCell = ({ cell, enableHover, rowIndex, rowRef, table, }) => {
             setHoveredColumn(columnDef.enableColumnOrdering !== false ? column : null);
         }
     };
-    const draggingBorder = (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id) === column.id
-        ? `1px dashed ${theme.palette.text.secondary}`
-        : (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : 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 (React__default["default"].createElement(material.TableCell, Object.assign({}, tableCellProps, { onDragEnter: handleDragEnter, onDoubleClick: handleDoubleClick, sx: (theme) => (Object.assign(Object.assign({ cursor: isEditable && editingMode === 'cell' ? 'pointer' : 'inherit', overflow: 'hidden', p: density === 'compact'
                 ? columnDefType === 'display'
                     ? '0 0.5rem'
@@ -2150,8 +2144,7 @@ const MRT_TableDetailPanel = ({ row, table }) => {
                 : tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx))) }), renderDetailPanel && (React__default["default"].createElement(material.Collapse, { in: row.getIsExpanded() }, renderDetailPanel({ row, table }))))));
 };
 
-const MRT_TableBodyRow = ({ row, rowIndex, table, virtualRow, }) => {
-    var _a, _b;
+const MRT_TableBodyRow = ({ numRows, row, rowIndex, table, virtualRow, }) => {
     const theme = material.useTheme();
     const { getIsSomeColumnsPinned, getState, options: { enableRowOrdering, memoMode, muiTableBodyRowProps, renderDetailPanel, }, setHoveredRow, } = table;
     const { draggingColumn, draggingRow, editingCell, editingRow, hoveredRow } = getState();
@@ -2164,11 +2157,11 @@ const MRT_TableBodyRow = ({ row, rowIndex, table, virtualRow, }) => {
         }
     };
     const rowRef = React.useRef(null);
-    const draggingBorder = (draggingRow === null || draggingRow === void 0 ? void 0 : draggingRow.id) === row.id
+    const draggingBorder = React.useMemo(() => (draggingRow === null || draggingRow === void 0 ? void 0 : draggingRow.id) === row.id
         ? `1px dashed ${theme.palette.text.secondary}`
         : (hoveredRow === null || hoveredRow === void 0 ? void 0 : hoveredRow.id) === row.id
             ? `2px dashed ${theme.palette.primary.main}`
-            : undefined;
+            : undefined, [draggingRow, hoveredRow]);
     const draggingBorders = draggingBorder
         ? {
             border: draggingBorder,
@@ -2188,16 +2181,17 @@ const MRT_TableBodyRow = ({ row, rowIndex, table, virtualRow, }) => {
                         : undefined,
                 } }, ((tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx) instanceof Function
                 ? tableRowProps.sx(theme)
-                : tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx)), draggingBorders)) }), (_b = (_a = row === null || row === void 0 ? void 0 : row.getVisibleCells()) === null || _a === void 0 ? void 0 : _a.map) === null || _b === void 0 ? void 0 : _b.call(_a, (cell) => {
+                : tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx)), draggingBorders)) }), row.getVisibleCells().map((cell) => {
             const props = {
                 cell,
                 enableHover: (tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.hover) !== false,
                 key: cell.id,
+                numRows,
                 rowIndex,
                 rowRef,
                 table,
             };
-            return memoMode === 'cell' &&
+            return memoMode === 'cells' &&
                 cell.column.columnDef.columnDefType === 'data' &&
                 !draggingColumn &&
                 !draggingRow &&
@@ -2296,6 +2290,7 @@ const MRT_TableBody = ({ table }) => {
                 : rowOrVirtualRow;
             const props = {
                 key: row.id,
+                numRows: rows.length,
                 row,
                 rowIndex: enableRowVirtualization
                     ? rowOrVirtualRow.index
@@ -2303,12 +2298,12 @@ const MRT_TableBody = ({ table }) => {
                 table,
                 virtualRow: enableRowVirtualization ? rowOrVirtualRow : null,
             };
-            return memoMode === 'row' ? (React__default["default"].createElement(Memo_MRT_TableBodyRow, Object.assign({}, props))) : (React__default["default"].createElement(MRT_TableBodyRow, Object.assign({}, props)));
+            return memoMode === 'rows' ? (React__default["default"].createElement(Memo_MRT_TableBodyRow, Object.assign({}, props))) : (React__default["default"].createElement(MRT_TableBodyRow, Object.assign({}, props)));
         }),
         enableRowVirtualization && paddingBottom > 0 && (React__default["default"].createElement("tr", null,
             React__default["default"].createElement("td", { style: { height: `${paddingBottom}px` } })))))));
 };
-const Memo_MRT_TableBody = React.memo(MRT_TableBody, () => true);
+const Memo_MRT_TableBody = React.memo(MRT_TableBody, (prev, next) => prev.table.options.data === next.table.options.data);
 
 const MRT_TableFooterCell = ({ footer, table }) => {
     var _a, _b, _c;