material-react-table 2.0.6 → 2.2.0

package/locales/fr/index.esm.js

@@ -49,7 +49,7 @@ const MRT_Localization_FR = {
     groupByColumn: 'Grouper par {column}',
     groupedBy: 'Groupé par ',
     hideAll: 'Cacher tout',
-    hideColumn: 'Cacher {column} colonne',
+    hideColumn: 'Cacher colonne {column}',
     max: 'Max',
     min: 'Min',
     move: 'Déplacer',

package/locales/fr/index.js

@@ -53,7 +53,7 @@ const MRT_Localization_FR = {
     groupByColumn: 'Grouper par {column}',
     groupedBy: 'Groupé par ',
     hideAll: 'Cacher tout',
-    hideColumn: 'Cacher {column} colonne',
+    hideColumn: 'Cacher colonne {column}',
     max: 'Max',
     min: 'Min',
     move: 'Déplacer',

package/{dist/types/locales/he.d.ts → locales/he/index.d.ts}

@@ -1,2 +1,3 @@
-import { type MRT_Localization } from '..';
+import { type MRT_Localization } from '../..';
 export declare const MRT_Localization_HE: MRT_Localization;
+  

package/locales/he/index.esm.d.ts

@@ -0,0 +1,3 @@
+import { type MRT_Localization } from '../..';
+export declare const MRT_Localization_HE: MRT_Localization;
+  

package/locales/he/index.esm.js

@@ -0,0 +1,93 @@
+const MRT_Localization_HE = {
+    actions: 'פעולות',
+    and: 'ו',
+    cancel: 'ביטול',
+    changeFilterMode: 'שינוי מצב סינון',
+    changeSearchMode: 'שינוי מצב חיפוש',
+    clearFilter: 'נקה סינון',
+    clearSearch: 'נקה חיפוש',
+    clearSort: 'נקה מיון',
+    clickToCopy: 'לחץ להעתקה',
+    collapse: 'צמצום',
+    collapseAll: 'צמצום הכל',
+    columnActions: 'פעולות עמודה',
+    copiedToClipboard: 'הועתק ללוח',
+    dropToGroupBy: 'גרור לקיבוץ לפי {column}',
+    edit: 'ערוך',
+    expand: 'הרחב',
+    expandAll: 'הרחב הכל',
+    filterArrIncludes: 'כולל',
+    filterArrIncludesAll: 'כולל הכל',
+    filterArrIncludesSome: 'כולל',
+    filterBetween: 'בין',
+    filterBetweenInclusive: 'בין כולל',
+    filterByColumn: 'סנן לפי {column}',
+    filterContains: 'מכיל',
+    filterEmpty: 'ריק',
+    filterEndsWith: 'מסתיים ב',
+    filterEquals: 'שווה',
+    filterEqualsString: 'שווה',
+    filterFuzzy: 'פעיל',
+    filterGreaterThan: 'גדול מ',
+    filterGreaterThanOrEqualTo: 'גדול או שווה ל',
+    filterInNumberRange: 'בין',
+    filterIncludesString: 'מכיל',
+    filterIncludesStringSensitive: 'מכיל',
+    filterLessThan: 'קטן מ',
+    filterLessThanOrEqualTo: 'קטן או שווה ל',
+    filterMode: 'מצב סינון: {filterType}',
+    filterNotEmpty: 'לא ריק',
+    filterNotEquals: 'לא שווה',
+    filterStartsWith: 'מתחיל ב',
+    filterWeakEquals: 'שווה',
+    filteringByColumn: 'מסנן לפי {column} - {filterType} {filterValue}',
+    goToFirstPage: 'לדף הראשון',
+    goToLastPage: 'לדף האחרון',
+    goToNextPage: 'לדף הבא',
+    goToPreviousPage: 'לדף הקודם',
+    grab: 'תפוס',
+    groupByColumn: 'קיבוץ לפי {column}',
+    groupedBy: 'קובץ לפי',
+    hideAll: 'הסתר הכל',
+    hideColumn: 'הסתר עמודה {column}',
+    max: 'מקסימום',
+    min: 'מינימום',
+    move: 'הזז',
+    noRecordsToDisplay: 'אין רשומות להצגה',
+    noResultsFound: 'לא נמצאו תוצאות',
+    of: 'מתוך',
+    or: 'או',
+    pin: 'נעץ',
+    pinToLeft: 'נעץ לשמאל',
+    pinToRight: 'נעץ לימין',
+    resetColumnSize: 'איפוס גודל עמודה',
+    resetOrder: 'איפוס סדר',
+    rowActions: 'פעולות שורה',
+    rowNumber: '#',
+    rowNumbers: 'מספרי שורות',
+    rowsPerPage: 'שורות לעמוד',
+    save: 'שמור',
+    search: 'חיפוש',
+    selectedCountOfRowCountRowsSelected: '{selectedCount} מתוך {rowCount} שורות נבחרו',
+    select: 'בחר',
+    showAll: 'הצג הכל',
+    showAllColumns: 'הצג את כל העמודות',
+    showHideColumns: 'הצג/הסתר עמודות',
+    showHideFilters: 'הצג/הסתר סינונים',
+    showHideSearch: 'הצג/הסתר חיפוש',
+    sortByColumnAsc: 'מיין לפי {column} בסדר עולה',
+    sortByColumnDesc: 'מיין לפי {column} בסדר יורד',
+    sortedByColumnAsc: 'ממוין לפי {column} בסדר עולה',
+    sortedByColumnDesc: 'ממוין לפי {column} בסדר יורד',
+    thenBy: ', ואז לפי ',
+    toggleDensity: 'שנה צפיפות',
+    toggleFullScreen: 'מסך מלא',
+    toggleSelectAll: 'בחר/בטל בחירת הכל',
+    toggleSelectRow: 'בחר/בטל בחירת שורה',
+    toggleVisibility: 'הצג/הסתר',
+    ungroupByColumn: 'בטל קיבוץ לפי {column}',
+    unpin: 'בטל נעיצה',
+    unpinAll: 'בטל נעיצת הכל',
+};
+
+export { MRT_Localization_HE };

package/locales/he/index.js

@@ -0,0 +1,97 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const MRT_Localization_HE = {
+    actions: 'פעולות',
+    and: 'ו',
+    cancel: 'ביטול',
+    changeFilterMode: 'שינוי מצב סינון',
+    changeSearchMode: 'שינוי מצב חיפוש',
+    clearFilter: 'נקה סינון',
+    clearSearch: 'נקה חיפוש',
+    clearSort: 'נקה מיון',
+    clickToCopy: 'לחץ להעתקה',
+    collapse: 'צמצום',
+    collapseAll: 'צמצום הכל',
+    columnActions: 'פעולות עמודה',
+    copiedToClipboard: 'הועתק ללוח',
+    dropToGroupBy: 'גרור לקיבוץ לפי {column}',
+    edit: 'ערוך',
+    expand: 'הרחב',
+    expandAll: 'הרחב הכל',
+    filterArrIncludes: 'כולל',
+    filterArrIncludesAll: 'כולל הכל',
+    filterArrIncludesSome: 'כולל',
+    filterBetween: 'בין',
+    filterBetweenInclusive: 'בין כולל',
+    filterByColumn: 'סנן לפי {column}',
+    filterContains: 'מכיל',
+    filterEmpty: 'ריק',
+    filterEndsWith: 'מסתיים ב',
+    filterEquals: 'שווה',
+    filterEqualsString: 'שווה',
+    filterFuzzy: 'פעיל',
+    filterGreaterThan: 'גדול מ',
+    filterGreaterThanOrEqualTo: 'גדול או שווה ל',
+    filterInNumberRange: 'בין',
+    filterIncludesString: 'מכיל',
+    filterIncludesStringSensitive: 'מכיל',
+    filterLessThan: 'קטן מ',
+    filterLessThanOrEqualTo: 'קטן או שווה ל',
+    filterMode: 'מצב סינון: {filterType}',
+    filterNotEmpty: 'לא ריק',
+    filterNotEquals: 'לא שווה',
+    filterStartsWith: 'מתחיל ב',
+    filterWeakEquals: 'שווה',
+    filteringByColumn: 'מסנן לפי {column} - {filterType} {filterValue}',
+    goToFirstPage: 'לדף הראשון',
+    goToLastPage: 'לדף האחרון',
+    goToNextPage: 'לדף הבא',
+    goToPreviousPage: 'לדף הקודם',
+    grab: 'תפוס',
+    groupByColumn: 'קיבוץ לפי {column}',
+    groupedBy: 'קובץ לפי',
+    hideAll: 'הסתר הכל',
+    hideColumn: 'הסתר עמודה {column}',
+    max: 'מקסימום',
+    min: 'מינימום',
+    move: 'הזז',
+    noRecordsToDisplay: 'אין רשומות להצגה',
+    noResultsFound: 'לא נמצאו תוצאות',
+    of: 'מתוך',
+    or: 'או',
+    pin: 'נעץ',
+    pinToLeft: 'נעץ לשמאל',
+    pinToRight: 'נעץ לימין',
+    resetColumnSize: 'איפוס גודל עמודה',
+    resetOrder: 'איפוס סדר',
+    rowActions: 'פעולות שורה',
+    rowNumber: '#',
+    rowNumbers: 'מספרי שורות',
+    rowsPerPage: 'שורות לעמוד',
+    save: 'שמור',
+    search: 'חיפוש',
+    selectedCountOfRowCountRowsSelected: '{selectedCount} מתוך {rowCount} שורות נבחרו',
+    select: 'בחר',
+    showAll: 'הצג הכל',
+    showAllColumns: 'הצג את כל העמודות',
+    showHideColumns: 'הצג/הסתר עמודות',
+    showHideFilters: 'הצג/הסתר סינונים',
+    showHideSearch: 'הצג/הסתר חיפוש',
+    sortByColumnAsc: 'מיין לפי {column} בסדר עולה',
+    sortByColumnDesc: 'מיין לפי {column} בסדר יורד',
+    sortedByColumnAsc: 'ממוין לפי {column} בסדר עולה',
+    sortedByColumnDesc: 'ממוין לפי {column} בסדר יורד',
+    thenBy: ', ואז לפי ',
+    toggleDensity: 'שנה צפיפות',
+    toggleFullScreen: 'מסך מלא',
+    toggleSelectAll: 'בחר/בטל בחירת הכל',
+    toggleSelectRow: 'בחר/בטל בחירת שורה',
+    toggleVisibility: 'הצג/הסתר',
+    ungroupByColumn: 'בטל קיבוץ לפי {column}',
+    unpin: 'בטל נעיצה',
+    unpinAll: 'בטל נעיצת הכל',
+};
+
+exports.MRT_Localization_HE = MRT_Localization_HE;

package/locales/he/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "index.js",
+  "module": "index.esm.js",
+  "sideEffects": false,
+  "types": "index.d.ts"
+}

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.0.6",
+  "version": "2.2.0",
   "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.",
@@ -61,32 +61,32 @@
     "storybook:dev": "storybook dev -p 6006"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.6",
+    "@babel/core": "^7.23.7",
     "@babel/preset-react": "^7.23.3",
-    "@emotion/react": "^11.11.1",
+    "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
     "@faker-js/faker": "^8.3.1",
-    "@mui/icons-material": "^5.15.0",
-    "@mui/material": "^5.15.0",
-    "@mui/x-date-pickers": "^6.18.4",
+    "@mui/icons-material": "^5.15.2",
+    "@mui/material": "^5.15.2",
+    "@mui/x-date-pickers": "^6.18.6",
     "@rollup/plugin-typescript": "^11.1.5",
     "@size-limit/preset-small-lib": "^11.0.1",
-    "@storybook/addon-a11y": "^7.5.3",
-    "@storybook/addon-essentials": "^7.5.3",
-    "@storybook/addon-interactions": "^7.5.3",
-    "@storybook/addon-links": "^7.5.3",
-    "@storybook/addon-storysource": "^7.5.3",
-    "@storybook/blocks": "^7.5.3",
-    "@storybook/react": "^7.5.3",
-    "@storybook/react-vite": "^7.5.3",
+    "@storybook/addon-a11y": "^7.6.7",
+    "@storybook/addon-essentials": "^7.6.7",
+    "@storybook/addon-interactions": "^7.6.7",
+    "@storybook/addon-links": "^7.6.7",
+    "@storybook/addon-storysource": "^7.6.7",
+    "@storybook/blocks": "^7.6.7",
+    "@storybook/react": "^7.6.7",
+    "@storybook/react-vite": "^7.6.7",
     "@storybook/testing-library": "^0.2.2",
-    "@types/node": "^20.10.4",
-    "@types/react": "^18.2.45",
-    "@types/react-dom": "^18.2.17",
-    "@typescript-eslint/eslint-plugin": "^6.14.0",
-    "@typescript-eslint/parser": "^6.14.0",
+    "@types/node": "^20.10.6",
+    "@types/react": "^18.2.46",
+    "@types/react-dom": "^18.2.18",
+    "@typescript-eslint/eslint-plugin": "^6.17.0",
+    "@typescript-eslint/parser": "^6.17.0",
     "@vitejs/plugin-react": "^4.2.1",
-    "eslint": "^8.55.0",
+    "eslint": "^8.56.0",
     "eslint-plugin-mui-path-imports": "^0.0.15",
     "eslint-plugin-perfectionist": "^2.5.0",
     "prop-types": "^15.8.1",
@@ -97,11 +97,11 @@
     "rollup-plugin-dts": "^6.1.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "size-limit": "^11.0.1",
-    "storybook": "^7.5.3",
-    "storybook-dark-mode": "^3.0.1",
+    "storybook": "^7.6.7",
+    "storybook-dark-mode": "^3.0.3",
     "tslib": "^2.6.2",
     "typescript": "^5.3.3",
-    "vite": "^5.0.8"
+    "vite": "^5.0.10"
   },
   "peerDependencies": {
     "@emotion/react": ">=11.11",
@@ -114,7 +114,7 @@
   },
   "dependencies": {
     "@tanstack/match-sorter-utils": "8.8.4",
-    "@tanstack/react-table": "8.10.7",
+    "@tanstack/react-table": "8.11.2",
     "@tanstack/react-virtual": "3.0.1",
     "highlight-words": "1.2.2"
   }

package/src/body/MRT_TableBody.tsx

@@ -1,19 +1,11 @@
-import { memo, useCallback, useMemo } from 'react';
-import {
-  type Range,
-  type VirtualItem,
-  type Virtualizer,
-  useVirtualizer,
-} from '@tanstack/react-virtual';
+import { memo, useMemo } from 'react';
+import { type VirtualItem, type Virtualizer } from '@tanstack/react-virtual';
 import TableBody, { type TableBodyProps } from '@mui/material/TableBody';
 import Typography from '@mui/material/Typography';
 import { MRT_TableBodyRow, Memo_MRT_TableBodyRow } from './MRT_TableBodyRow';
-import {
-  extraIndexRangeExtractor,
-  getCanRankRows,
-  parseFromValuesOrFunc,
-} from '../column.utils';
-import { rankGlobalFuzzy } from '../sortingFns';
+import { parseFromValuesOrFunc } from '../column.utils';
+import { useMRT_RowVirtualizer } from '../hooks';
+import { useMRT_Rows } from '../hooks/useMRT_Rows';
 import {
   type MRT_Row,
   type MRT_RowData,
@@ -38,56 +30,30 @@ export const MRT_TableBody = <TData extends MRT_RowData>({
 }: Props<TData>) => {
   const {
     getBottomRows,
-    getCenterRows,
     getIsSomeRowsPinned,
-    getPrePaginationRowModel,
     getRowModel,
     getState,
     getTopRows,
     options: {
       createDisplayMode,
-      enableGlobalFilterRankedResults,
-      enablePagination,
-      enableRowPinning,
-      enableRowVirtualization,
       enableStickyFooter,
       enableStickyHeader,
       layoutMode,
       localization,
-      manualExpanding,
-      manualFiltering,
-      manualGrouping,
-      manualPagination,
-      manualSorting,
       memoMode,
       muiTableBodyProps,
       renderEmptyRowsFallback,
       rowPinningDisplayMode,
-      rowVirtualizerInstanceRef,
-      rowVirtualizerOptions,
     },
-    refs: { tableContainerRef, tableFooterRef, tableHeadRef, tablePaperRef },
+    refs: { tableFooterRef, tableHeadRef, tablePaperRef },
   } = table;
-  const {
-    columnFilters,
-    creatingRow,
-    density,
-    draggingRow,
-    expanded,
-    globalFilter,
-    isFullScreen,
-    pagination,
-    rowPinning,
-    sorting,
-  } = getState();
+  const { columnFilters, creatingRow, globalFilter, isFullScreen, rowPinning } =
+    getState();
 
   const tableBodyProps = {
     ...parseFromValuesOrFunc(muiTableBodyProps, { table }),
     ...rest,
   };
-  const rowVirtualizerProps = parseFromValuesOrFunc(rowVirtualizerOptions, {
-    table,
-  });
 
   const tableHeadHeight =
     ((enableStickyHeader || isFullScreen) &&
@@ -96,23 +62,6 @@ export const MRT_TableBody = <TData extends MRT_RowData>({
   const tableFooterHeight =
     (enableStickyFooter && tableFooterRef.current?.clientHeight) || 0;
 
-  const shouldRankRows = useMemo(
-    () =>
-      getCanRankRows(table) &&
-      !Object.values(sorting).some(Boolean) &&
-      globalFilter,
-    [
-      enableGlobalFilterRankedResults,
-      expanded,
-      globalFilter,
-      manualExpanding,
-      manualFiltering,
-      manualGrouping,
-      manualSorting,
-      sorting,
-    ],
-  );
-
   const pinnedRowIds = useMemo(
     () =>
       getRowModel()
@@ -121,66 +70,9 @@ export const MRT_TableBody = <TData extends MRT_RowData>({
     [rowPinning, table.getRowModel().rows],
   );
 
-  const rows = useMemo(() => {
-    let rows: MRT_Row<TData>[] = [];
-    if (!shouldRankRows) {
-      rows =
-        !enableRowPinning || rowPinningDisplayMode?.includes('sticky')
-          ? getRowModel().rows
-          : getCenterRows();
-    } else {
-      rows = getPrePaginationRowModel().rows.sort((a, b) =>
-        rankGlobalFuzzy(a, b),
-      );
-      if (enablePagination && !manualPagination) {
-        const start = pagination.pageIndex * pagination.pageSize;
-        rows = rows.slice(start, start + pagination.pageSize);
-      }
-    }
-    if (enableRowPinning && rowPinningDisplayMode?.includes('sticky')) {
-      rows = [
-        ...getTopRows().filter((row) => !pinnedRowIds.includes(row.id)),
-        ...rows,
-        ...getBottomRows().filter((row) => !pinnedRowIds.includes(row.id)),
-      ];
-    }
-
-    return rows;
-  }, [
-    shouldRankRows,
-    shouldRankRows ? getPrePaginationRowModel().rows : getRowModel().rows,
-    pagination.pageIndex,
-    pagination.pageSize,
-    rowPinning,
-  ]);
-
-  const rowVirtualizer:
-    | Virtualizer<HTMLDivElement, HTMLTableRowElement>
-    | undefined = enableRowVirtualization
-    ? useVirtualizer({
-        count: rows.length,
-        estimateSize: () =>
-          density === 'compact' ? 37 : density === 'comfortable' ? 58 : 73,
-        getScrollElement: () => tableContainerRef.current,
-        measureElement:
-          typeof window !== 'undefined' &&
-          navigator.userAgent.indexOf('Firefox') === -1
-            ? (element) => element?.getBoundingClientRect().height
-            : undefined,
-        overscan: 4,
-        rangeExtractor: useCallback(
-          (range: Range) => {
-            return extraIndexRangeExtractor(range, draggingRow?.index ?? 0);
-          },
-          [draggingRow],
-        ),
-        ...rowVirtualizerProps,
-      })
-    : undefined;
+  const rows = useMRT_Rows(table);
 
-  if (rowVirtualizerInstanceRef && rowVirtualizer) {
-    rowVirtualizerInstanceRef.current = rowVirtualizer;
-  }
+  const rowVirtualizer = useMRT_RowVirtualizer(table);
 
   const virtualRows = rowVirtualizer
     ? rowVirtualizer.getVirtualItems()
@@ -227,9 +119,10 @@ export const MRT_TableBody = <TData extends MRT_RowData>({
         {...tableBodyProps}
         sx={(theme) => ({
           display: layoutMode?.startsWith('grid') ? 'grid' : undefined,
-          height: rowVirtualizer
-            ? `${rowVirtualizer.getTotalSize()}px`
-            : 'inherit',
+          height:
+            rowVirtualizer
+              ? `${rowVirtualizer.getTotalSize()}px`
+              : undefined,
           minHeight: !rows.length ? '100px' : undefined,
           position: 'relative',
           ...(parseFromValuesOrFunc(tableBodyProps?.sx, theme) as any),
@@ -289,11 +182,11 @@ export const MRT_TableBody = <TData extends MRT_RowData>({
                 };
                 return memoMode === 'rows' ? (
                   <Memo_MRT_TableBodyRow
-                    key={`${row.id}${row.index}`}
+                    key={`${row.id}-${row.index}`}
                     {...props}
                   />
                 ) : (
-                  <MRT_TableBodyRow key={`${row.id}${row.index}`} {...props} />
+                  <MRT_TableBodyRow key={`${row.id}-${row.index}`} {...props} />
                 );
               })}
             </>

package/src/body/MRT_TableBodyCell.tsx

@@ -33,7 +33,7 @@ interface Props<TData extends MRT_RowData> extends TableCellProps {
   rowIndex: number;
   rowRef: RefObject<HTMLTableRowElement>;
   table: MRT_TableInstance<TData>;
-  virtualIndex?: number;
+  virtualColumnIndex?: number;
 }
 
 export const MRT_TableBodyCell = <TData extends MRT_RowData>({
@@ -43,13 +43,14 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
   rowIndex,
   rowRef,
   table,
-  virtualIndex,
+  virtualColumnIndex,
   ...rest
 }: Props<TData>) => {
   const theme = useTheme();
   const {
     getState,
     options: {
+      columnResizeDirection,
       columnResizeMode,
       createDisplayMode,
       editDisplayMode,
@@ -119,28 +120,28 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
     const isFirstColumn = getIsFirstColumn(column, table);
     const isLastColumn = getIsLastColumn(column, table);
     const isLastRow = numRows && rowIndex === numRows - 1;
+    const isResizingColumn = columnSizingInfo.isResizingColumn === column.id;
     const showResizeBorder =
-      columnSizingInfo.isResizingColumn === column.id &&
-      columnResizeMode === 'onChange';
+      isResizingColumn && columnResizeMode === 'onChange';
 
     const borderStyle = showResizeBorder
       ? `2px solid ${draggingBorderColor} !important`
       : isDraggingColumn || isDraggingRow
         ? `1px dashed ${theme.palette.grey[500]} !important`
-        : isHoveredColumn ||
-            isHoveredRow ||
-            columnSizingInfo.isResizingColumn === column.id
+        : isHoveredColumn || isHoveredRow || isResizingColumn
           ? `2px dashed ${draggingBorderColor} !important`
           : undefined;
 
     if (showResizeBorder) {
-      return { borderRight: borderStyle };
+      return columnResizeDirection === 'ltr'
+        ? { borderRight: borderStyle }
+        : { borderLeft: borderStyle };
     }
 
     return borderStyle
       ? {
           borderBottom:
-            isDraggingRow || isHoveredRow || isLastRow
+            isDraggingRow || isHoveredRow || (isLastRow && !isResizingColumn)
               ? borderStyle
               : undefined,
           borderLeft:
@@ -211,7 +212,7 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
 
   return (
     <TableCell
-      data-index={virtualIndex}
+      data-index={virtualColumnIndex}
       ref={(node: HTMLTableCellElement) => {
         if (node) {
           measureElement?.(node);

package/src/body/MRT_TableBodyRow.tsx

@@ -106,10 +106,14 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
 
   const sx = parseFromValuesOrFunc(tableRowProps?.sx, theme as any);
 
-  const rowHeight =
+  const defaultRowHeight =
+    density === 'compact' ? 37 : density === 'comfortable' ? 53 : 69;
+
+  const customRowHeight =
     // @ts-ignore
-    parseInt(tableRowProps?.style?.height ?? sx?.height, 10) ||
-    (density === 'compact' ? 37 : density === 'comfortable' ? 53 : 69);
+    parseInt(tableRowProps?.style?.height ?? sx?.height, 10) || undefined;
+
+  const rowHeight = customRowHeight || defaultRowHeight;
 
   const handleDragEnter = (_e: DragEvent) => {
     if (enableRowOrdering && draggingRow) {
@@ -128,7 +132,7 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
   return (
     <>
       <TableRow
-        data-index={virtualRow?.index}
+        data-index={rowIndex}
         data-pinned={!!isPinned || undefined}
         data-selected={row.getIsSelected() || undefined}
         onDragEnter={handleDragEnter}
@@ -142,7 +146,7 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
         {...tableRowProps}
         style={{
           transform: virtualRow
-            ? `translateY(${virtualRow?.start}px)`
+            ? `translateY(${virtualRow.start}px)`
             : undefined,
           ...tableRowProps?.style,
         }}

package/src/head/MRT_TableHeadCell.tsx

@@ -32,6 +32,7 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
     getState,
     options: {
       columnFilterDisplayMode,
+      columnResizeDirection,
       columnResizeMode,
       enableColumnActions,
       enableColumnDragging,
@@ -103,7 +104,9 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
           : undefined;
 
     if (showResizeBorder) {
-      return { borderRight: borderStyle };
+      return columnResizeDirection === 'ltr'
+        ? { borderRight: borderStyle }
+        : { borderLeft: borderStyle };
     }
     const draggingBorders = borderStyle
       ? {