material-react-table 1.6.2 → 1.6.4

package/dist/cjs/index.js

@@ -295,6 +295,13 @@ const getDefaultColumnFilterFn = (columnDef) => {
         return 'equals';
     return 'fuzzy';
 };
+const getIsFirstColumn = (column, table) => {
+    return table.getVisibleLeafColumns()[0].id === column.id;
+};
+const getIsLastColumn = (column, table) => {
+    const columns = table.getVisibleLeafColumns();
+    return columns[columns.length - 1].id === column.id;
+};
 const getIsLastLeftPinnedColumn = (table, column) => {
     return (column.getIsPinned() === 'left' &&
         table.getLeftLeafHeaders().length - 1 === column.getPinnedIndex());
@@ -2281,7 +2288,7 @@ const MRT_TableBodyCell = ({ cell, enableHover, measureElement, numRows, rowInde
     var _a, _b;
     const theme = styles.useTheme();
     const { getState, options: { editingMode, enableClickToCopy, enableColumnOrdering, enableEditing, enableGrouping, enableRowNumbers, layoutMode, muiTableBodyCellProps, muiTableBodyCellSkeletonProps, rowNumberMode, }, refs: { editInputRefs }, setEditingCell, setHoveredColumn, } = table;
-    const { draggingColumn, editingCell, editingRow, hoveredColumn, density, isLoading, showSkeletons, } = getState();
+    const { draggingColumn, draggingRow, editingCell, editingRow, hoveredColumn, hoveredRow, density, isLoading, showSkeletons, } = getState();
     const { column, row } = cell;
     const { columnDef } = column;
     const { columnDefType } = columnDef;
@@ -2302,18 +2309,38 @@ const MRT_TableBodyCell = ({ cell, enableHover, measureElement, numRows, rowInde
             : 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 draggingBorders = React.useMemo(() => {
+        const isDraggingColumn = (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id) === column.id;
+        const isHoveredColumn = (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === column.id;
+        const isDraggingRow = (draggingRow === null || draggingRow === void 0 ? void 0 : draggingRow.id) === row.id;
+        const isHoveredRow = (hoveredRow === null || hoveredRow === void 0 ? void 0 : hoveredRow.id) === row.id;
+        const isFirstColumn = getIsFirstColumn(column, table);
+        const isLastColumn = getIsLastColumn(column, table);
+        const isLastRow = rowIndex === numRows - 1;
+        const borderStyle = isDraggingColumn || isDraggingRow
+            ? `1px dashed ${theme.palette.text.secondary} !important`
+            : isHoveredColumn || isHoveredRow
+                ? `2px dashed ${theme.palette.primary.main} !important`
+                : undefined;
+        return borderStyle
+            ? {
+                borderLeft: isDraggingColumn ||
+                    isHoveredColumn ||
+                    ((isDraggingRow || isHoveredRow) && isFirstColumn)
+                    ? borderStyle
+                    : undefined,
+                borderRight: isDraggingColumn ||
+                    isHoveredColumn ||
+                    ((isDraggingRow || isHoveredRow) && isLastColumn)
+                    ? borderStyle
+                    : undefined,
+                borderBottom: isDraggingRow || isHoveredRow || isLastRow
+                    ? borderStyle
+                    : undefined,
+                borderTop: isDraggingRow || isHoveredRow ? borderStyle : undefined,
+            }
+            : undefined;
+    }, [draggingColumn, draggingRow, hoveredColumn, hoveredRow, rowIndex]);
     const isEditable = (enableEditing || columnDef.enableEditing) &&
         columnDef.enableEditing !== false;
     const isEditing = isEditable &&
@@ -2433,7 +2460,6 @@ const MRT_TableDetailPanel = ({ parentRowRef, row, table, virtualRow, }) => {
 };
 
 const MRT_TableBodyRow = ({ columnVirtualizer, measureElement, numRows, row, rowIndex, table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, virtualRow, }) => {
-    const theme = styles.useTheme();
     const { getIsSomeColumnsPinned, getState, options: { enableRowOrdering, layoutMode, memoMode, muiTableBodyRowProps, renderDetailPanel, }, setHoveredRow, } = table;
     const { draggingColumn, draggingRow, editingCell, editingRow, hoveredRow } = getState();
     const tableRowProps = muiTableBodyRowProps instanceof Function
@@ -2445,23 +2471,13 @@ const MRT_TableBodyRow = ({ columnVirtualizer, measureElement, numRows, row, row
         }
     };
     const rowRef = React.useRef(null);
-    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, [draggingRow, hoveredRow]);
-    const draggingBorders = draggingBorder
-        ? {
-            border: draggingBorder,
-        }
-        : undefined;
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement(TableRow__default["default"], Object.assign({ "data-index": virtualRow === null || virtualRow === void 0 ? void 0 : virtualRow.index, hover: true, onDragEnter: handleDragEnter, selected: row.getIsSelected(), ref: (node) => {
                 if (node) {
                     rowRef.current = node;
                     measureElement === null || measureElement === void 0 ? void 0 : measureElement(node);
                 }
-            } }, tableRowProps, { sx: (theme) => (Object.assign(Object.assign({ backgroundColor: styles.lighten(theme.palette.background.default, 0.06), display: layoutMode === 'grid' ? 'flex' : 'table-row', opacity: (draggingRow === null || draggingRow === void 0 ? void 0 : draggingRow.id) === row.id || (hoveredRow === null || hoveredRow === void 0 ? void 0 : hoveredRow.id) === row.id ? 0.5 : 1, position: virtualRow ? 'absolute' : undefined, top: virtualRow ? 0 : undefined, transform: virtualRow
+            } }, tableRowProps, { sx: (theme) => (Object.assign({ backgroundColor: styles.lighten(theme.palette.background.default, 0.06), display: layoutMode === 'grid' ? 'flex' : 'table-row', opacity: (draggingRow === null || draggingRow === void 0 ? void 0 : draggingRow.id) === row.id || (hoveredRow === null || hoveredRow === void 0 ? void 0 : hoveredRow.id) === row.id ? 0.5 : 1, position: virtualRow ? 'absolute' : undefined, top: virtualRow ? 0 : undefined, transform: virtualRow
                     ? `translateY(${virtualRow === null || virtualRow === void 0 ? void 0 : virtualRow.start}px)`
                     : undefined, transition: virtualRow ? 'none' : 'all 150ms ease-in-out', width: '100%', '&:hover td': {
                     backgroundColor: (tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.hover) !== false && getIsSomeColumnsPinned()
@@ -2471,7 +2487,7 @@ const MRT_TableBodyRow = ({ columnVirtualizer, measureElement, numRows, row, row
                         : 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)) }),
+                : tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx))) }),
             virtualPaddingLeft ? (React__default["default"].createElement("td", { style: { display: 'flex', width: virtualPaddingLeft } })) : null,
             (virtualColumns !== null && virtualColumns !== void 0 ? virtualColumns : row.getVisibleCells()).map((cellOrVirtualCell) => {
                 const cell = columnVirtualizer
@@ -2504,8 +2520,8 @@ const Memo_MRT_TableBodyRow = React.memo(MRT_TableBodyRow, (prev, next) => prev.
 
 const MRT_TableBody = ({ columnVirtualizer, table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, }) => {
     var _a, _b, _c;
-    const { getRowModel, getPrePaginationRowModel, getState, options: { enableGlobalFilterRankedResults, enablePagination, enableRowVirtualization, layoutMode, localization, manualFiltering, manualPagination, manualSorting, memoMode, muiTableBodyProps, rowVirtualizerInstanceRef, rowVirtualizerProps, virtualizerInstanceRef, virtualizerProps, }, refs: { tableContainerRef, tablePaperRef }, } = table;
-    const { columnFilters, density, globalFilter, pagination, sorting } = getState();
+    const { getRowModel, getPrePaginationRowModel, getState, options: { enableGlobalFilterRankedResults, enablePagination, enableRowVirtualization, layoutMode, localization, manualExpanding, manualFiltering, manualGrouping, manualPagination, manualSorting, memoMode, muiTableBodyProps, rowVirtualizerInstanceRef, rowVirtualizerProps, virtualizerInstanceRef, virtualizerProps, }, refs: { tableContainerRef, tablePaperRef }, } = table;
+    const { columnFilters, density, expanded, globalFilter, globalFilterFn, pagination, sorting, } = getState();
     const tableBodyProps = muiTableBodyProps instanceof Function
         ? muiTableBodyProps({ table })
         : muiTableBodyProps;
@@ -2515,26 +2531,37 @@ const MRT_TableBody = ({ columnVirtualizer, table, virtualColumns, virtualPaddin
     const vProps = rowVirtualizerProps instanceof Function
         ? rowVirtualizerProps({ table })
         : rowVirtualizerProps;
+    const shouldRankResults = React.useMemo(() => !manualExpanding &&
+        !manualFiltering &&
+        !manualGrouping &&
+        !manualSorting &&
+        enableGlobalFilterRankedResults &&
+        globalFilter &&
+        globalFilterFn === 'fuzzy' &&
+        expanded !== true &&
+        !Object.values(sorting).some(Boolean) &&
+        !Object.values(expanded).some(Boolean), [
+        enableGlobalFilterRankedResults,
+        expanded,
+        globalFilter,
+        manualExpanding,
+        manualFiltering,
+        manualGrouping,
+        manualSorting,
+        sorting,
+    ]);
     const rows = React.useMemo(() => {
-        if (enableGlobalFilterRankedResults &&
-            globalFilter &&
-            !manualFiltering &&
-            !manualSorting &&
-            !Object.values(sorting).some(Boolean)) {
-            const rankedRows = getPrePaginationRowModel().rows.sort((a, b) => rankGlobalFuzzy(a, b));
-            if (enablePagination && !manualPagination) {
-                const start = pagination.pageIndex * pagination.pageSize;
-                return rankedRows.slice(start, start + pagination.pageSize);
-            }
-            return rankedRows;
+        if (!shouldRankResults)
+            return getRowModel().rows;
+        const rankedRows = getPrePaginationRowModel().rows.sort((a, b) => rankGlobalFuzzy(a, b));
+        if (enablePagination && !manualPagination) {
+            const start = pagination.pageIndex * pagination.pageSize;
+            return rankedRows.slice(start, start + pagination.pageSize);
         }
-        return getRowModel().rows;
+        return rankedRows;
     }, [
-        enableGlobalFilterRankedResults,
-        (enableGlobalFilterRankedResults && globalFilter) || !enablePagination
-            ? getPrePaginationRowModel().rows
-            : getRowModel().rows,
-        globalFilter,
+        shouldRankResults,
+        shouldRankResults ? getPrePaginationRowModel().rows : getRowModel().rows,
         pagination.pageIndex,
         pagination.pageSize,
     ]);