material-react-table 1.6.2 → 1.6.4

package/dist/esm/types/column.utils.d.ts

@@ -106,6 +106,8 @@ export declare const getLeadingDisplayColumnIds: <TData extends Record<string, a
 export declare const getTrailingDisplayColumnIds: <TData extends Record<string, any> = {}>(props: MaterialReactTableProps<TData>) => (string | false | undefined)[];
 export declare const getDefaultColumnOrderIds: <TData extends Record<string, any> = {}>(props: MaterialReactTableProps<TData>) => string[];
 export declare const getDefaultColumnFilterFn: <TData extends Record<string, any> = {}>(columnDef: MRT_ColumnDef<TData>) => MRT_FilterOption;
+export declare const getIsFirstColumn: (column: MRT_Column, table: MRT_TableInstance) => boolean;
+export declare const getIsLastColumn: (column: MRT_Column, table: MRT_TableInstance) => boolean;
 export declare const getIsLastLeftPinnedColumn: (table: MRT_TableInstance, column: MRT_Column) => boolean;
 export declare const getIsFirstRightPinnedColumn: (column: MRT_Column) => boolean;
 export declare const getTotalRight: (table: MRT_TableInstance, column: MRT_Column) => number;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.6.2",
+  "version": "1.6.4",
   "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/body/MRT_TableBody.tsx

@@ -35,7 +35,9 @@ export const MRT_TableBody: FC<Props> = ({
       enableRowVirtualization,
       layoutMode,
       localization,
+      manualExpanding,
       manualFiltering,
+      manualGrouping,
       manualPagination,
       manualSorting,
       memoMode,
@@ -47,8 +49,15 @@ export const MRT_TableBody: FC<Props> = ({
     },
     refs: { tableContainerRef, tablePaperRef },
   } = table;
-  const { columnFilters, density, globalFilter, pagination, sorting } =
-    getState();
+  const {
+    columnFilters,
+    density,
+    expanded,
+    globalFilter,
+    globalFilterFn,
+    pagination,
+    sorting,
+  } = getState();
 
   const tableBodyProps =
     muiTableBodyProps instanceof Function
@@ -65,30 +74,43 @@ export const MRT_TableBody: FC<Props> = ({
       ? rowVirtualizerProps({ table })
       : rowVirtualizerProps;
 
-  const rows = useMemo(() => {
-    if (
-      enableGlobalFilterRankedResults &&
-      globalFilter &&
+  const shouldRankResults = useMemo(
+    () =>
+      !manualExpanding &&
       !manualFiltering &&
+      !manualGrouping &&
       !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;
+      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 = useMemo(() => {
+    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,
   ]);

package/src/body/MRT_TableBodyCell.tsx

@@ -15,7 +15,11 @@ import { MRT_EditCellTextField } from '../inputs/MRT_EditCellTextField';
 import { MRT_CopyButton } from '../buttons/MRT_CopyButton';
 import { MRT_TableBodyRowGrabHandle } from './MRT_TableBodyRowGrabHandle';
 import { MRT_TableBodyCellValue } from './MRT_TableBodyCellValue';
-import { getCommonCellStyles } from '../column.utils';
+import {
+  getCommonCellStyles,
+  getIsFirstColumn,
+  getIsLastColumn,
+} from '../column.utils';
 import type { VirtualItem } from '@tanstack/react-virtual';
 import type { MRT_Cell, MRT_TableInstance } from '..';
 
@@ -61,9 +65,11 @@ export const MRT_TableBodyCell: FC<Props> = ({
   } = table;
   const {
     draggingColumn,
+    draggingRow,
     editingCell,
     editingRow,
     hoveredColumn,
+    hoveredRow,
     density,
     isLoading,
     showSkeletons,
@@ -108,27 +114,44 @@ export const MRT_TableBodyCell: FC<Props> = ({
     [],
   );
 
-  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(() => {
+    const isDraggingColumn = draggingColumn?.id === column.id;
+    const isHoveredColumn = hoveredColumn?.id === column.id;
+    const isDraggingRow = draggingRow?.id === row.id;
+    const isHoveredRow = hoveredRow?.id === row.id;
+    const isFirstColumn = getIsFirstColumn(column, table);
+    const isLastColumn = getIsLastColumn(column, table);
+    const isLastRow = rowIndex === numRows - 1;
 
-  const draggingBorders = useMemo(
-    () =>
-      draggingBorder
-        ? {
-            borderLeft: draggingBorder,
-            borderRight: draggingBorder,
-            borderBottom: rowIndex === numRows - 1 ? draggingBorder : undefined,
-          }
-        : undefined,
-    [draggingBorder, numRows],
-  );
+    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) &&

package/src/body/MRT_TableBodyRow.tsx

@@ -1,6 +1,6 @@
-import React, { DragEvent, FC, memo, useMemo, useRef } from 'react';
+import React, { DragEvent, FC, memo, useRef } from 'react';
 import TableRow from '@mui/material/TableRow';
-import { darken, lighten, useTheme } from '@mui/material/styles';
+import { darken, lighten } from '@mui/material/styles';
 import { Memo_MRT_TableBodyCell, MRT_TableBodyCell } from './MRT_TableBodyCell';
 import { MRT_TableDetailPanel } from './MRT_TableDetailPanel';
 import type { VirtualItem, Virtualizer } from '@tanstack/react-virtual';
@@ -31,7 +31,6 @@ export const MRT_TableBodyRow: FC<Props> = ({
   virtualPaddingRight,
   virtualRow,
 }) => {
-  const theme = useTheme();
   const {
     getIsSomeColumnsPinned,
     getState,
@@ -60,22 +59,6 @@ export const MRT_TableBodyRow: FC<Props> = ({
 
   const rowRef = useRef<HTMLTableRowElement | null>(null);
 
-  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
-    ? {
-        border: draggingBorder,
-      }
-    : undefined;
-
   return (
     <>
       <TableRow
@@ -113,7 +96,6 @@ export const MRT_TableBodyRow: FC<Props> = ({
           ...(tableRowProps?.sx instanceof Function
             ? tableRowProps.sx(theme)
             : (tableRowProps?.sx as any)),
-          ...draggingBorders,
         })}
       >
         {virtualPaddingLeft ? (

package/src/column.utils.ts

@@ -205,6 +205,21 @@ export const getDefaultColumnFilterFn = <
   return 'fuzzy';
 };
 
+export const getIsFirstColumn = (
+  column: MRT_Column,
+  table: MRT_TableInstance,
+) => {
+  return table.getVisibleLeafColumns()[0].id === column.id;
+};
+
+export const getIsLastColumn = (
+  column: MRT_Column,
+  table: MRT_TableInstance,
+) => {
+  const columns = table.getVisibleLeafColumns();
+  return columns[columns.length - 1].id === column.id;
+};
+
 export const getIsLastLeftPinnedColumn = (
   table: MRT_TableInstance,
   column: MRT_Column,