material-react-table 2.7.0 → 2.9.0

package/locales/ja/index.esm.js

@@ -75,10 +75,10 @@ const MRT_Localization_JA = {
     showHideColumns: '列の表示状態',
     showHideFilters: '検索バーを表示',
     showHideSearch: '検索',
-    sortByColumnAsc: '{column}を昇順でを並べ替え',
-    sortByColumnDesc: '{column}を降順でを並べ替え',
-    sortedByColumnAsc: '{column}を昇順でを並べ替え',
-    sortedByColumnDesc: '{column}を降順でを並べ替え',
+    sortByColumnAsc: '{column}を昇順で並べ替え',
+    sortByColumnDesc: '{column}を降順で並べ替え',
+    sortedByColumnAsc: '{column}を昇順で並べ替え',
+    sortedByColumnDesc: '{column}を降順で並べ替え',
     thenBy: 'さらに',
     toggleDensity: 'テーブルの高さを変更',
     toggleFullScreen: 'フルスクリーン切り替え',

package/locales/ja/index.js

@@ -79,10 +79,10 @@ const MRT_Localization_JA = {
     showHideColumns: '列の表示状態',
     showHideFilters: '検索バーを表示',
     showHideSearch: '検索',
-    sortByColumnAsc: '{column}を昇順でを並べ替え',
-    sortByColumnDesc: '{column}を降順でを並べ替え',
-    sortedByColumnAsc: '{column}を昇順でを並べ替え',
-    sortedByColumnDesc: '{column}を降順でを並べ替え',
+    sortByColumnAsc: '{column}を昇順で並べ替え',
+    sortByColumnDesc: '{column}を降順で並べ替え',
+    sortedByColumnAsc: '{column}を昇順で並べ替え',
+    sortedByColumnDesc: '{column}を降順で並べ替え',
     thenBy: 'さらに',
     toggleDensity: 'テーブルの高さを変更',
     toggleFullScreen: 'フルスクリーン切り替え',

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.7.0",
+  "version": "2.9.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.",
@@ -50,8 +50,8 @@
     "build-locales": "pnpm lib:build-locales",
     "build-lib": "pnpm lib:build-lib",
     "dev": "pnpm lib:dev",
-    "lib:build": "rm -rf dist && pnpm build-lib && pnpm build-locales && rm -rf dist/types",
-    "lib:build-locales": "rm -rf locales && node build-locales.mjs",
+    "lib:build": "pnpm build-lib && pnpm build-locales",
+    "lib:build-locales": "node build-locales.mjs",
     "lib:build-lib": "rm -rf dist && rollup -c rollup.config.mjs && size-limit",
     "lib:dev": "rollup -c rollup.config.mjs --watch",
     "lint": "eslint .",
@@ -66,25 +66,25 @@
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
     "@faker-js/faker": "^8.3.1",
-    "@mui/icons-material": "^5.15.4",
-    "@mui/material": "^5.15.4",
+    "@mui/icons-material": "^5.15.5",
+    "@mui/material": "^5.15.5",
     "@mui/x-date-pickers": "^6.19.0",
     "@rollup/plugin-typescript": "^11.1.6",
-    "@size-limit/preset-small-lib": "^11.0.1",
-    "@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",
+    "@size-limit/preset-small-lib": "^11.0.2",
+    "@storybook/addon-a11y": "^7.6.10",
+    "@storybook/addon-essentials": "^7.6.10",
+    "@storybook/addon-interactions": "^7.6.10",
+    "@storybook/addon-links": "^7.6.10",
+    "@storybook/addon-storysource": "^7.6.10",
+    "@storybook/blocks": "^7.6.10",
+    "@storybook/react": "^7.6.10",
+    "@storybook/react-vite": "^7.6.10",
     "@storybook/testing-library": "^0.2.2",
-    "@types/node": "^20.11.0",
-    "@types/react": "^18.2.47",
+    "@types/node": "^20.11.5",
+    "@types/react": "^18.2.48",
     "@types/react-dom": "^18.2.18",
-    "@typescript-eslint/eslint-plugin": "^6.18.1",
-    "@typescript-eslint/parser": "^6.18.1",
+    "@typescript-eslint/eslint-plugin": "^6.19.0",
+    "@typescript-eslint/parser": "^6.19.0",
     "@vitejs/plugin-react": "^4.2.1",
     "eslint": "^8.56.0",
     "eslint-plugin-mui-path-imports": "^0.0.15",
@@ -94,14 +94,16 @@
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
     "rollup": "^2.79.1",
+    "rollup-plugin-copy": "^3.5.0",
+    "rollup-plugin-delete": "^2.0.0",
     "rollup-plugin-dts": "^6.1.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
-    "size-limit": "^11.0.1",
-    "storybook": "^7.6.7",
+    "size-limit": "^11.0.2",
+    "storybook": "^7.6.10",
     "storybook-dark-mode": "^3.0.3",
     "tslib": "^2.6.2",
     "typescript": "^5.3.3",
-    "vite": "^5.0.11"
+    "vite": "^5.0.12"
   },
   "peerDependencies": {
     "@emotion/react": ">=11.11",
@@ -115,7 +117,7 @@
   "dependencies": {
     "@tanstack/match-sorter-utils": "8.11.3",
     "@tanstack/react-table": "8.11.6",
-    "@tanstack/react-virtual": "3.0.1",
+    "@tanstack/react-virtual": "3.0.2",
     "highlight-words": "1.2.2"
   }
-} 
+}

package/src/{MaterialReactTable.tsx → components/MaterialReactTable.tsx}

@@ -1,11 +1,11 @@
-import { MRT_TablePaper } from './table/MRT_TablePaper';
+import { useMaterialReactTable } from '../hooks/useMaterialReactTable';
 import {
   type MRT_RowData,
   type MRT_TableInstance,
   type MRT_TableOptions,
   type Xor,
-} from './types';
-import { useMaterialReactTable } from './useMaterialReactTable';
+} from '../types';
+import { MRT_TablePaper } from './table/MRT_TablePaper';
 
 type TableInstanceProp<TData extends MRT_RowData> = {
   table: MRT_TableInstance<TData>;

package/src/{body → components/body}/MRT_TableBody.tsx

@@ -3,15 +3,15 @@ import { type VirtualItem } 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 { parseFromValuesOrFunc } from '../column.utils';
-import { useMRT_RowVirtualizer } from '../hooks/useMRT_RowVirtualizer';
-import { useMRT_Rows } from '../hooks/useMRT_Rows';
+import { useMRT_RowVirtualizer } from '../../hooks/useMRT_RowVirtualizer';
+import { useMRT_Rows } from '../../hooks/useMRT_Rows';
 import {
   type MRT_ColumnVirtualizer,
   type MRT_Row,
   type MRT_RowData,
   type MRT_TableInstance,
-} from '../types';
+} from '../../types';
+import { parseFromValuesOrFunc } from '../../utils/utils';
 
 interface Props<TData extends MRT_RowData> extends TableBodyProps {
   columnVirtualizer?: MRT_ColumnVirtualizer;
@@ -151,6 +151,7 @@ export const MRT_TableBody = <TData extends MRT_RowData>({
           ) : (
             <>
               {(virtualRows ?? rows).map((rowOrVirtualRow, staticRowIndex) => {
+                let row = rowOrVirtualRow as MRT_Row<TData>;
                 if (rowVirtualizer) {
                   if (renderDetailPanel) {
                     if (rowOrVirtualRow.index % 2 === 1) {
@@ -161,10 +162,8 @@ export const MRT_TableBody = <TData extends MRT_RowData>({
                   } else {
                     staticRowIndex = rowOrVirtualRow.index;
                   }
+                  row = rows[staticRowIndex];
                 }
-                const row = rowVirtualizer
-                  ? rows[staticRowIndex]
-                  : (rowOrVirtualRow as MRT_Row<TData>);
                 const props = {
                   ...commonRowProps,
                   pinnedRowIds,

package/src/{body → components/body}/MRT_TableBodyCell.tsx

@@ -11,28 +11,25 @@ import Skeleton from '@mui/material/Skeleton';
 import TableCell, { type TableCellProps } from '@mui/material/TableCell';
 import { useTheme } from '@mui/material/styles';
 import { MRT_TableBodyCellValue } from './MRT_TableBodyCellValue';
-import { MRT_CopyButton } from '../buttons/MRT_CopyButton';
-import {
-  getIsFirstColumn,
-  getIsLastColumn,
-  parseFromValuesOrFunc,
-} from '../column.utils';
-import { MRT_EditCellTextField } from '../inputs/MRT_EditCellTextField';
-import { getCommonMRTCellStyles, getMRTTheme } from '../style.utils';
 import {
   type MRT_Cell,
   type MRT_RowData,
   type MRT_TableInstance,
-} from '../types';
+} from '../../types';
+import { getIsFirstColumn, getIsLastColumn } from '../../utils/column.utils';
+import { getCommonMRTCellStyles, getMRTTheme } from '../../utils/style.utils';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+import { MRT_CopyButton } from '../buttons/MRT_CopyButton';
+import { MRT_EditCellTextField } from '../inputs/MRT_EditCellTextField';
 
 interface Props<TData extends MRT_RowData> extends TableCellProps {
   cell: MRT_Cell<TData>;
   measureElement?: (element: HTMLTableCellElement) => void;
   numRows?: number;
   rowRef: RefObject<HTMLTableRowElement>;
+  staticColumnIndex?: number;
   staticRowIndex: number;
   table: MRT_TableInstance<TData>;
-  virtualColumnIndex?: number;
 }
 
 export const MRT_TableBodyCell = <TData extends MRT_RowData>({
@@ -40,9 +37,9 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
   measureElement,
   numRows,
   rowRef,
+  staticColumnIndex,
   staticRowIndex,
   table,
-  virtualColumnIndex,
   ...rest
 }: Props<TData>) => {
   const theme = useTheme();
@@ -55,12 +52,12 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
       editDisplayMode,
       enableClickToCopy,
       enableColumnOrdering,
+      enableColumnPinning,
       enableEditing,
       enableGrouping,
       layoutMode,
       muiSkeletonProps,
       muiTableBodyCellProps,
-      positionExpandColumn,
     },
     refs: { editInputRefs },
     setEditingCell,
@@ -166,6 +163,11 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
     staticRowIndex,
   ]);
 
+  const isColumnPinned =
+    enableColumnPinning &&
+    columnDef.columnDefType !== 'group' &&
+    column.getIsPinned();
+
   const isEditable =
     !cell.getIsPlaceholder() &&
     parseFromValuesOrFunc(enableEditing, row) &&
@@ -216,7 +218,8 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
   return (
     <TableCell
       align={theme.direction === 'rtl' ? 'right' : 'left'}
-      data-index={virtualColumnIndex}
+      data-index={staticColumnIndex}
+      data-pinned={!!isColumnPinned || undefined}
       ref={(node: HTMLTableCellElement) => {
         if (node) {
           measureElement?.(node);
@@ -255,19 +258,6 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
                 ? '1rem 1.25rem'
                 : '1.5rem',
         textOverflow: columnDefType !== 'display' ? 'ellipsis' : undefined,
-        [theme.direction === 'rtl' || positionExpandColumn === 'last'
-          ? 'pr'
-          : 'pl']:
-          column.id === 'mrt-row-expand'
-            ? `${
-                row.depth +
-                (density === 'compact'
-                  ? 0.5
-                  : density === 'comfortable'
-                    ? 0.75
-                    : 1.25)
-              }rem`
-            : undefined,
         whiteSpace:
           row.getIsPinned() || density === 'compact' ? 'nowrap' : 'normal',
         zIndex:

package/src/{body → components/body}/MRT_TableBodyCellValue.tsx

@@ -1,11 +1,11 @@
 import { type ReactNode, type RefObject } from 'react';
 import Box from '@mui/material/Box';
-import { getMRTTheme } from '../style.utils';
 import {
   type MRT_Cell,
   type MRT_RowData,
   type MRT_TableInstance,
-} from '../types';
+} from '../../types';
+import { getMRTTheme } from '../../utils/style.utils';
 import highlightWords from 'highlight-words';
 
 const allowedTypes = ['string', 'number'];

package/src/{body → components/body}/MRT_TableBodyRow.tsx

@@ -10,8 +10,6 @@ import {
 } from '@mui/material/styles';
 import { MRT_TableBodyCell, Memo_MRT_TableBodyCell } from './MRT_TableBodyCell';
 import { MRT_TableDetailPanel } from './MRT_TableDetailPanel';
-import { parseFromValuesOrFunc } from '../column.utils';
-import { getMRTTheme } from '../style.utils';
 import {
   type MRT_Cell,
   type MRT_ColumnVirtualizer,
@@ -19,7 +17,15 @@ import {
   type MRT_RowData,
   type MRT_RowVirtualizer,
   type MRT_TableInstance,
-} from '../types';
+  type MRT_VirtualItem,
+} from '../../types';
+import { getIsRowSelected } from '../../utils/row.utils';
+import {
+  getCommonPinnedCellStyles,
+  getMRTTheme,
+  pinnedBeforeAfterStyles,
+} from '../../utils/style.utils';
+import { parseFromValuesOrFunc } from '../../utils/utils';
 
 interface Props<TData extends MRT_RowData> {
   columnVirtualizer?: MRT_ColumnVirtualizer;
@@ -71,10 +77,13 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
     rowPinning,
   } = getState();
 
+  const visibleCells = row.getVisibleCells();
+
   const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } =
     columnVirtualizer ?? {};
 
-  const isPinned = enableRowPinning && row.getIsPinned();
+  const isRowSelected = getIsRowSelected({ row, table });
+  const isRowPinned = enableRowPinning && row.getIsPinned();
   const isDraggingRow = draggingRow?.id === row.id;
   const isHoveredRow = hoveredRow?.id === row.id;
 
@@ -130,16 +139,27 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
     selectedRowBackgroundColor,
   } = getMRTTheme(table, theme);
 
+  const cellHighlightColor = isRowSelected
+    ? selectedRowBackgroundColor
+    : isRowPinned
+      ? pinnedRowBackgroundColor
+      : undefined;
+
+  const cellHighlightColorHover =
+    tableRowProps?.hover !== false
+      ? isRowSelected
+        ? cellHighlightColor
+        : theme.palette.mode === 'dark'
+          ? `${lighten(baseBackgroundColor, 0.3)}`
+          : `${darken(baseBackgroundColor, 0.3)}`
+      : undefined;
+
   return (
     <>
       <TableRow
         data-index={renderDetailPanel ? staticRowIndex * 2 : staticRowIndex}
-        data-pinned={!!isPinned || undefined}
-        data-selected={
-          row?.getIsSelected() ||
-          (row?.getIsAllSubRowsSelected() && row.getCanSelectSubRows()) ||
-          undefined
-        }
+        data-pinned={!!isRowPinned || undefined}
+        data-selected={isRowSelected || undefined}
         onDragEnter={handleDragEnter}
         ref={(node: HTMLTableRowElement) => {
           if (node) {
@@ -147,7 +167,7 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
             rowVirtualizer?.measureElement(node);
           }
         }}
-        selected={row.getIsSelected()}
+        selected={isRowSelected}
         {...tableRowProps}
         style={{
           transform: virtualRow
@@ -157,18 +177,16 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
         }}
         sx={(theme: Theme) => ({
           '&:hover td': {
-            backgroundColor:
-              tableRowProps?.hover !== false
-                ? row.getIsSelected()
-                  ? `${alpha(selectedRowBackgroundColor, 0.3)}`
-                  : theme.palette.mode === 'dark'
-                    ? `${lighten(baseBackgroundColor, 0.05)}`
-                    : `${darken(baseBackgroundColor, 0.05)}`
+            '&:after': {
+              backgroundColor: cellHighlightColorHover
+                ? alpha(cellHighlightColorHover, 0.3)
                 : undefined,
+              ...pinnedBeforeAfterStyles,
+            },
           },
           backgroundColor: `${baseBackgroundColor} !important`,
           bottom:
-            !virtualRow && bottomPinnedIndex !== undefined && isPinned
+            !virtualRow && bottomPinnedIndex !== undefined && isRowPinned
               ? `${
                   bottomPinnedIndex * rowHeight +
                   (enableStickyFooter ? tableFooterHeight - 1 : 0)
@@ -176,22 +194,22 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
               : undefined,
           boxSizing: 'border-box',
           display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
-          opacity: isPinned ? 0.97 : isDraggingRow || isHoveredRow ? 0.5 : 1,
+          opacity: isRowPinned ? 0.97 : isDraggingRow || isHoveredRow ? 0.5 : 1,
           position: virtualRow
             ? 'absolute'
-            : rowPinningDisplayMode?.includes('sticky') && isPinned
+            : rowPinningDisplayMode?.includes('sticky') && isRowPinned
               ? 'sticky'
               : undefined,
           td: {
-            backgroundColor: row.getIsSelected()
-              ? selectedRowBackgroundColor
-              : isPinned
-                ? pinnedRowBackgroundColor
-                : undefined,
+            '&:after': {
+              backgroundColor: cellHighlightColor,
+              ...pinnedBeforeAfterStyles,
+            },
+            ...getCommonPinnedCellStyles({ table, theme }),
           },
           top: virtualRow
             ? 0
-            : topPinnedIndex !== undefined && isPinned
+            : topPinnedIndex !== undefined && isRowPinned
               ? `${
                   topPinnedIndex * rowHeight +
                   (enableStickyHeader || isFullScreen ? tableHeadHeight - 1 : 0)
@@ -200,7 +218,7 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
           transition: virtualRow ? 'none' : 'all 150ms ease-in-out',
           width: '100%',
           zIndex:
-            rowPinningDisplayMode?.includes('sticky') && isPinned
+            rowPinningDisplayMode?.includes('sticky') && isRowPinned
               ? 2
               : undefined,
           ...(sx as any),
@@ -209,37 +227,39 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
         {virtualPaddingLeft ? (
           <td style={{ display: 'flex', width: virtualPaddingLeft }} />
         ) : null}
-        {(virtualColumns ?? row.getVisibleCells()).map((cellOrVirtualCell) => {
-          const cell = columnVirtualizer
-            ? row.getVisibleCells()[(cellOrVirtualCell as VirtualItem).index]
-            : (cellOrVirtualCell as MRT_Cell<TData>);
-          const props = {
-            cell,
-            measureElement:
-              !isDraggingRow && !isHoveredRow
-                ? columnVirtualizer?.measureElement
-                : undefined,
-            numRows,
-            rowRef,
-            staticRowIndex,
-            table,
-            virtualColumnIndex: columnVirtualizer
-              ? (cellOrVirtualCell as VirtualItem).index
-              : undefined,
-          };
-          return cell ? (
-            memoMode === 'cells' &&
-            cell.column.columnDef.columnDefType === 'data' &&
-            !draggingColumn &&
-            !draggingRow &&
-            editingCell?.id !== cell.id &&
-            editingRow?.id !== row.id ? (
-              <Memo_MRT_TableBodyCell key={cell.id} {...props} />
-            ) : (
-              <MRT_TableBodyCell key={cell.id} {...props} />
-            )
-          ) : null;
-        })}
+        {(virtualColumns ?? visibleCells).map(
+          (cellOrVirtualCell, staticColumnIndex) => {
+            let cell = cellOrVirtualCell as MRT_Cell<TData>;
+            if (columnVirtualizer) {
+              staticColumnIndex = (cellOrVirtualCell as MRT_VirtualItem).index;
+              cell = visibleCells[staticColumnIndex];
+            }
+            const props = {
+              cell,
+              measureElement:
+                !isDraggingRow && !isHoveredRow
+                  ? columnVirtualizer?.measureElement
+                  : undefined,
+              numRows,
+              rowRef,
+              staticColumnIndex,
+              staticRowIndex,
+              table,
+            };
+            return cell ? (
+              memoMode === 'cells' &&
+              cell.column.columnDef.columnDefType === 'data' &&
+              !draggingColumn &&
+              !draggingRow &&
+              editingCell?.id !== cell.id &&
+              editingRow?.id !== row.id ? (
+                <Memo_MRT_TableBodyCell key={cell.id} {...props} />
+              ) : (
+                <MRT_TableBodyCell key={cell.id} {...props} />
+              )
+            ) : null;
+          },
+        )}
         {virtualPaddingRight ? (
           <td style={{ display: 'flex', width: virtualPaddingRight }} />
         ) : null}

package/src/{body → components/body}/MRT_TableBodyRowGrabHandle.tsx

@@ -1,12 +1,12 @@
 import { type DragEvent, type RefObject } from 'react';
 import { type IconButtonProps } from '@mui/material/IconButton';
-import { MRT_GrabHandleButton } from '../buttons/MRT_GrabHandleButton';
-import { parseFromValuesOrFunc } from '../column.utils';
 import {
   type MRT_Row,
   type MRT_RowData,
   type MRT_TableInstance,
-} from '../types';
+} from '../../types';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+import { MRT_GrabHandleButton } from '../buttons/MRT_GrabHandleButton';
 
 interface Props<TData extends MRT_RowData> extends IconButtonProps {
   row: MRT_Row<TData>;

package/src/{body → components/body}/MRT_TableBodyRowPinButton.tsx

@@ -1,12 +1,12 @@
 import Box from '@mui/material/Box';
 import { type IconButtonProps } from '@mui/material/IconButton';
-import { MRT_RowPinButton } from '../buttons/MRT_RowPinButton';
-import { parseFromValuesOrFunc } from '../column.utils';
 import {
   type MRT_Row,
   type MRT_RowData,
   type MRT_TableInstance,
-} from '../types';
+} from '../../types';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+import { MRT_RowPinButton } from '../buttons/MRT_RowPinButton';
 
 interface Props<TData extends MRT_RowData> extends IconButtonProps {
   row: MRT_Row<TData>;

package/src/{body → components/body}/MRT_TableDetailPanel.tsx

@@ -2,15 +2,15 @@ import { type RefObject } from 'react';
 import Collapse from '@mui/material/Collapse';
 import TableCell, { type TableCellProps } from '@mui/material/TableCell';
 import TableRow from '@mui/material/TableRow';
-import { parseFromValuesOrFunc } from '../column.utils';
-import { getMRTTheme } from '../style.utils';
 import {
   type MRT_Row,
   type MRT_RowData,
   type MRT_RowVirtualizer,
   type MRT_TableInstance,
   type MRT_VirtualItem,
-} from '../types';
+} from '../../types';
+import { getMRTTheme } from '../../utils/style.utils';
+import { parseFromValuesOrFunc } from '../../utils/utils';
 
 interface Props<TData extends MRT_RowData> extends TableCellProps {
   parentRowRef: RefObject<HTMLTableRowElement>;

package/src/{buttons → components/buttons}/MRT_ColumnPinningButtons.tsx

@@ -1,12 +1,12 @@
 import Box, { type BoxProps } from '@mui/material/Box';
 import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
-import { parseFromValuesOrFunc } from '../column.utils';
 import {
   type MRT_Column,
   type MRT_RowData,
   type MRT_TableInstance,
-} from '../types';
+} from '../../types';
+import { parseFromValuesOrFunc } from '../../utils/utils';
 
 interface Props<TData extends MRT_RowData> extends BoxProps {
   column: MRT_Column<TData>;

package/src/{buttons → components/buttons}/MRT_CopyButton.tsx

@@ -1,13 +1,13 @@
 import { type MouseEvent, useState } from 'react';
 import Button, { type ButtonProps } from '@mui/material/Button';
 import Tooltip from '@mui/material/Tooltip';
-import { parseFromValuesOrFunc } from '../column.utils';
-import { getCommonTooltipProps } from '../style.utils';
 import {
   type MRT_Cell,
   type MRT_RowData,
   type MRT_TableInstance,
-} from '../types';
+} from '../../types';
+import { getCommonTooltipProps } from '../../utils/style.utils';
+import { parseFromValuesOrFunc } from '../../utils/utils';
 
 interface Props<TData extends MRT_RowData> extends ButtonProps {
   cell: MRT_Cell<TData>;

package/src/{buttons → components/buttons}/MRT_EditActionButtons.tsx

@@ -3,12 +3,12 @@ import Button from '@mui/material/Button';
 import CircularProgress from '@mui/material/CircularProgress';
 import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
-import { parseFromValuesOrFunc } from '../column.utils';
 import {
   type MRT_Row,
   type MRT_RowData,
   type MRT_TableInstance,
-} from '../types';
+} from '../../types';
+import { parseFromValuesOrFunc } from '../../utils/utils';
 
 interface Props<TData extends MRT_RowData> extends BoxProps {
   row: MRT_Row<TData>;

package/src/{buttons → components/buttons}/MRT_ExpandAllButton.tsx

@@ -1,8 +1,8 @@
 import IconButton, { type IconButtonProps } from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
-import { parseFromValuesOrFunc } from '../column.utils';
-import { getCommonTooltipProps } from '../style.utils';
-import { type MRT_RowData, type MRT_TableInstance } from '../types';
+import { type MRT_RowData, type MRT_TableInstance } from '../../types';
+import { getCommonTooltipProps } from '../../utils/style.utils';
+import { parseFromValuesOrFunc } from '../../utils/utils';
 
 interface Props<TData extends MRT_RowData> extends IconButtonProps {
   table: MRT_TableInstance<TData>;

package/src/{buttons → components/buttons}/MRT_ExpandButton.tsx

@@ -2,13 +2,13 @@ import { type MouseEvent } from 'react';
 import IconButton, { type IconButtonProps } from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import { useTheme } from '@mui/material/styles';
-import { parseFromValuesOrFunc } from '../column.utils';
-import { getCommonTooltipProps } from '../style.utils';
 import {
   type MRT_Row,
   type MRT_RowData,
   type MRT_TableInstance,
-} from '../types';
+} from '../../types';
+import { getCommonTooltipProps } from '../../utils/style.utils';
+import { parseFromValuesOrFunc } from '../../utils/utils';
 
 interface Props<TData extends MRT_RowData> extends IconButtonProps {
   row: MRT_Row<TData>;
@@ -69,6 +69,9 @@ export const MRT_ExpandButton = <TData extends MRT_RowData>({
           sx={(theme) => ({
             height: density === 'compact' ? '1.75rem' : '2.25rem',
             opacity: !canExpand && !detailPanel ? 0.3 : 1,
+            [theme.direction === 'rtl' || positionExpandColumn === 'last'
+              ? 'mr'
+              : 'ml']: `${row.depth * 16}px`,
             width: density === 'compact' ? '1.75rem' : '2.25rem',
             ...(parseFromValuesOrFunc(iconButtonProps?.sx, theme) as any),
           })}