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

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

@@ -1364,7 +1364,7 @@ const MRT_TableHeadCellColumnActionsButton = ({ header, table, }) => {
     const iconButtonProps = Object.assign(Object.assign({}, mTableHeadCellColumnActionsButtonProps), mcTableHeadCellColumnActionsButtonProps);
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement(material.Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : localization.columnActions },
-            React__default["default"].createElement(material.IconButton, Object.assign({ "aria-label": localization.columnActions, onClick: handleClick, size: "small" }, iconButtonProps, { sx: (theme) => (Object.assign({ height: '2rem', mt: '-0.2rem', opacity: 0.5, transition: 'opacity 150ms', width: '2rem', '&:hover': {
+            React__default["default"].createElement(material.IconButton, Object.assign({ "aria-label": localization.columnActions, onClick: handleClick, size: "small" }, iconButtonProps, { sx: (theme) => (Object.assign({ height: '2rem', m: '-0.2rem', opacity: 0.5, transition: 'opacity 150ms', width: '2rem', '&:hover': {
                         opacity: 1,
                     } }, ((iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx) instanceof Function
                     ? iconButtonProps.sx(theme)
@@ -1539,7 +1539,7 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
                     ? '100px'
                     : !filterChipLabel
                         ? '120px'
-                        : 'auto', width: '100%', '& .MuiSelect-icon': {
+                        : 'auto', width: 'calc(100% + 4px)', mx: '-2px', '& .MuiSelect-icon': {
                     mr: '1.5rem',
                 } }, ((textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.sx) instanceof Function
                 ? textFieldProps.sx(theme)
@@ -1698,31 +1698,36 @@ const MRT_TableHeadCellResizeHandle = ({ header, table }) => {
     const { column } = header;
     const { columnDef } = column;
     const { columnDefType } = columnDef;
-    return (React__default["default"].createElement(material.Divider, { flexItem: true, orientation: "vertical", onDoubleClick: () => column.resetSize(), sx: (theme) => ({
-            borderRadius: '2px',
-            borderRightWidth: '2px',
+    return (React__default["default"].createElement(material.Box, { onDoubleClick: () => column.resetSize(), onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), sx: (theme) => ({
             cursor: 'col-resize',
-            height: showColumnFilters && columnDefType === 'data' ? '4rem' : '2rem',
             mr: density === 'compact' ? '-0.5rem' : '-1rem',
-            opacity: 0.8,
             position: 'absolute',
             right: '1px',
-            touchAction: 'none',
-            transition: column.getIsResizing()
-                ? undefined
-                : 'all 150ms ease-in-out',
-            userSelect: 'none',
-            zIndex: 4,
-            '&:active': {
+            px: '4px',
+            '&:active > hr': {
                 backgroundColor: theme.palette.info.main,
                 opacity: 1,
             },
-        }), onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), style: {
+        }), style: {
             transform: column.getIsResizing()
                 ? `translateX(${((_a = getState().columnSizingInfo.deltaOffset) !== null && _a !== void 0 ? _a : 0) /
                     (columnResizeMode === 'onChange' ? 16 : 1)}px)`
-                : 'none',
-        } }));
+                : undefined,
+        } },
+        React__default["default"].createElement(material.Divider, { flexItem: true, orientation: "vertical", sx: {
+                borderRadius: '2px',
+                borderWidth: '2px',
+                height: showColumnFilters && columnDefType === 'data'
+                    ? '3.5rem'
+                    : '1.75rem',
+                opacity: 0.8,
+                touchAction: 'none',
+                transition: column.getIsResizing()
+                    ? undefined
+                    : 'all 150ms ease-in-out',
+                userSelect: 'none',
+                zIndex: 4,
+            } })));
 };
 
 const MRT_TableHeadCellSortLabel = ({ header, table, tableCellProps, }) => {
@@ -1760,19 +1765,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 +1777,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 +2023,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 +2041,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 +2067,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 +2093,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 +2149,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 +2162,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 +2186,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 +2295,7 @@ const MRT_TableBody = ({ table }) => {
                 : rowOrVirtualRow;
             const props = {
                 key: row.id,
+                numRows: rows.length,
                 row,
                 rowIndex: enableRowVirtualization
                     ? rowOrVirtualRow.index
@@ -2303,12 +2303,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;
@@ -2328,7 +2328,7 @@ const MRT_TableFooterCell = ({ footer, table }) => {
                 ? '0.5rem'
                 : density === 'comfortable'
                     ? '1rem'
-                    : '1.5rem', verticalAlign: 'top' }, getCommonCellStyles({ column, table, theme, tableCellProps }))) }),
+                    : '1.5rem', verticalAlign: 'top', zIndex: column.getIsPinned() && columnDefType !== 'group' ? 2 : 1 }, getCommonCellStyles({ column, table, theme, tableCellProps }))) }),
         React__default["default"].createElement(React__default["default"].Fragment, null, footer.isPlaceholder
             ? null
             : (_c = (_b = (columnDef.Footer instanceof Function