material-react-table 2.5.2 → 2.6.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.5.2",
+  "version": "2.6.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.",
@@ -68,7 +68,7 @@
     "@faker-js/faker": "^8.3.1",
     "@mui/icons-material": "^5.15.4",
     "@mui/material": "^5.15.4",
-    "@mui/x-date-pickers": "^6.18.7",
+    "@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",
@@ -80,7 +80,7 @@
     "@storybook/react": "^7.6.7",
     "@storybook/react-vite": "^7.6.7",
     "@storybook/testing-library": "^0.2.2",
-    "@types/node": "^20.10.8",
+    "@types/node": "^20.11.0",
     "@types/react": "^18.2.47",
     "@types/react-dom": "^18.2.18",
     "@typescript-eslint/eslint-plugin": "^6.18.1",
@@ -114,7 +114,7 @@
   },
   "dependencies": {
     "@tanstack/match-sorter-utils": "8.11.3",
-    "@tanstack/react-table": "8.11.3",
+    "@tanstack/react-table": "8.11.4",
     "@tanstack/react-virtual": "3.0.1",
     "highlight-words": "1.2.2"
   }

package/src/body/MRT_TableBody.tsx

@@ -37,6 +37,7 @@ export const MRT_TableBody = <TData extends MRT_RowData>({
       localization,
       memoMode,
       muiTableBodyProps,
+      renderDetailPanel,
       renderEmptyRowsFallback,
       rowPinningDisplayMode,
     },
@@ -77,7 +78,11 @@ export const MRT_TableBody = <TData extends MRT_RowData>({
   };
 
   const CreatingRow = creatingRow && createDisplayMode === 'row' && (
-    <MRT_TableBodyRow {...commonRowProps} row={creatingRow} rowIndex={-1} />
+    <MRT_TableBodyRow
+      {...commonRowProps}
+      row={creatingRow}
+      staticRowIndex={-1}
+    />
   );
 
   return (
@@ -94,11 +99,11 @@ export const MRT_TableBody = <TData extends MRT_RowData>({
               ...(parseFromValuesOrFunc(tableBodyProps?.sx, theme) as any),
             })}
           >
-            {getTopRows().map((row, rowIndex) => {
+            {getTopRows().map((row, staticRowIndex) => {
               const props = {
                 ...commonRowProps,
                 row,
-                rowIndex,
+                staticRowIndex,
               };
               return memoMode === 'rows' ? (
                 <Memo_MRT_TableBodyRow key={row.id} {...props} />
@@ -167,16 +172,27 @@ export const MRT_TableBody = <TData extends MRT_RowData>({
             </tr>
           ) : (
             <>
-              {(virtualRows ?? rows).map((rowOrVirtualRow, rowIndex) => {
+              {(virtualRows ?? rows).map((rowOrVirtualRow, staticRowIndex) => {
+                if (rowVirtualizer) {
+                  if (renderDetailPanel) {
+                    if (rowOrVirtualRow.index % 2 === 1) {
+                      return null;
+                    } else {
+                      staticRowIndex = rowOrVirtualRow.index / 2;
+                    }
+                  } else {
+                    staticRowIndex = rowOrVirtualRow.index;
+                  }
+                }
                 const row = rowVirtualizer
-                  ? rows[rowOrVirtualRow.index]
+                  ? rows[staticRowIndex]
                   : (rowOrVirtualRow as MRT_Row<TData>);
                 const props = {
                   ...commonRowProps,
-                  measureElement: rowVirtualizer?.measureElement,
                   pinnedRowIds,
                   row,
-                  rowIndex: rowVirtualizer ? rowOrVirtualRow.index : rowIndex,
+                  rowVirtualizer,
+                  staticRowIndex,
                   virtualRow: rowVirtualizer
                     ? (rowOrVirtualRow as VirtualItem)
                     : undefined,
@@ -203,11 +219,11 @@ export const MRT_TableBody = <TData extends MRT_RowData>({
               ...(parseFromValuesOrFunc(tableBodyProps?.sx, theme) as any),
             })}
           >
-            {getBottomRows().map((row, rowIndex) => {
+            {getBottomRows().map((row, staticRowIndex) => {
               const props = {
                 ...commonRowProps,
                 row,
-                rowIndex,
+                staticRowIndex,
               };
               return memoMode === 'rows' ? (
                 <Memo_MRT_TableBodyRow key={row.id} {...props} />

package/src/body/MRT_TableBodyCell.tsx

@@ -29,8 +29,8 @@ interface Props<TData extends MRT_RowData> extends TableCellProps {
   cell: MRT_Cell<TData>;
   measureElement?: (element: HTMLTableCellElement) => void;
   numRows?: number;
-  rowIndex: number;
   rowRef: RefObject<HTMLTableRowElement>;
+  staticRowIndex: number;
   table: MRT_TableInstance<TData>;
   virtualColumnIndex?: number;
 }
@@ -39,8 +39,8 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
   cell,
   measureElement,
   numRows,
-  rowIndex,
   rowRef,
+  staticRowIndex,
   table,
   virtualColumnIndex,
   ...rest
@@ -60,6 +60,7 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
       layoutMode,
       muiSkeletonProps,
       muiTableBodyCellProps,
+      positionExpandColumn,
     },
     refs: { editInputRefs },
     setEditingCell,
@@ -116,7 +117,7 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
     const isHoveredRow = hoveredRow?.id === row.id;
     const isFirstColumn = getIsFirstColumn(column, table);
     const isLastColumn = getIsLastColumn(column, table);
-    const isLastRow = numRows && rowIndex === numRows - 1;
+    const isLastRow = numRows && staticRowIndex === numRows - 1;
     const isResizingColumn = columnSizingInfo.isResizingColumn === column.id;
     const showResizeBorder =
       isResizingColumn && columnResizeMode === 'onChange';
@@ -162,7 +163,7 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
     draggingRow,
     hoveredColumn,
     hoveredRow,
-    rowIndex,
+    staticRowIndex,
   ]);
 
   const isEditable =
@@ -214,6 +215,7 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
 
   return (
     <TableCell
+      align={theme.direction === 'rtl' ? 'right' : 'left'}
       data-index={virtualColumnIndex}
       ref={(node: HTMLTableCellElement) => {
         if (node) {
@@ -253,7 +255,9 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
                 ? '1rem 1.25rem'
                 : '1.5rem',
         textOverflow: columnDefType !== 'display' ? 'ellipsis' : undefined,
-        [theme.direction === 'rtl' ? 'pr' : 'pl']:
+        [theme.direction === 'rtl' || positionExpandColumn === 'last'
+          ? 'pr'
+          : 'pl']:
           column.id === 'mrt-row-expand'
             ? `${
                 row.depth +
@@ -299,7 +303,7 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
               renderedCellValue: cell.renderValue() as any,
               row,
               rowRef,
-              staticRowIndex: rowIndex,
+              staticRowIndex,
               table,
             })
           ) : isCreating || isEditing ? (

package/src/body/MRT_TableBodyRow.tsx

@@ -17,27 +17,28 @@ import {
   type MRT_ColumnVirtualizer,
   type MRT_Row,
   type MRT_RowData,
+  type MRT_RowVirtualizer,
   type MRT_TableInstance,
 } from '../types';
 
 interface Props<TData extends MRT_RowData> {
   columnVirtualizer?: MRT_ColumnVirtualizer;
-  measureElement?: (element: HTMLTableRowElement) => void;
   numRows?: number;
   pinnedRowIds?: string[];
   row: MRT_Row<TData>;
-  rowIndex: number;
+  rowVirtualizer?: MRT_RowVirtualizer;
+  staticRowIndex: number;
   table: MRT_TableInstance<TData>;
   virtualRow?: VirtualItem;
 }
 
 export const MRT_TableBodyRow = <TData extends MRT_RowData>({
   columnVirtualizer,
-  measureElement,
   numRows,
   pinnedRowIds,
   row,
-  rowIndex,
+  rowVirtualizer,
+  staticRowIndex,
   table,
   virtualRow,
 }: Props<TData>) => {
@@ -79,7 +80,7 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
 
   const tableRowProps = parseFromValuesOrFunc(muiTableBodyRowProps, {
     row,
-    staticRowIndex: rowIndex,
+    staticRowIndex,
     table,
   });
 
@@ -132,7 +133,7 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
   return (
     <>
       <TableRow
-        data-index={rowIndex}
+        data-index={renderDetailPanel ? staticRowIndex * 2 : staticRowIndex}
         data-pinned={!!isPinned || undefined}
         data-selected={
           row.getIsSelected() || row.getIsAllSubRowsSelected() || undefined
@@ -141,7 +142,7 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
         ref={(node: HTMLTableRowElement) => {
           if (node) {
             rowRef.current = node;
-            measureElement?.(node);
+            rowVirtualizer?.measureElement?.(node);
           }
         }}
         selected={row.getIsSelected()}
@@ -217,8 +218,8 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
                 ? columnVirtualizer?.measureElement
                 : undefined,
             numRows,
-            rowIndex,
             rowRef,
+            staticRowIndex,
             table,
             virtualColumnIndex: columnVirtualizer
               ? (cellOrVirtualCell as VirtualItem).index
@@ -245,7 +246,8 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
         <MRT_TableDetailPanel
           parentRowRef={rowRef}
           row={row}
-          rowIndex={rowIndex}
+          rowVirtualizer={rowVirtualizer}
+          staticRowIndex={staticRowIndex}
           table={table}
           virtualRow={virtualRow}
         />
@@ -256,5 +258,6 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
 
 export const Memo_MRT_TableBodyRow = memo(
   MRT_TableBodyRow,
-  (prev, next) => prev.row === next.row && prev.rowIndex === next.rowIndex,
+  (prev, next) =>
+    prev.row === next.row && prev.staticRowIndex === next.staticRowIndex,
 ) as typeof MRT_TableBodyRow;

package/src/body/MRT_TableDetailPanel.tsx

@@ -8,13 +8,15 @@ import { getMRTTheme } from '../style.utils';
 import {
   type MRT_Row,
   type MRT_RowData,
+  type MRT_RowVirtualizer,
   type MRT_TableInstance,
 } from '../types';
 
 interface Props<TData extends MRT_RowData> extends TableCellProps {
   parentRowRef: RefObject<HTMLTableRowElement>;
   row: MRT_Row<TData>;
-  rowIndex: number;
+  rowVirtualizer?: MRT_RowVirtualizer;
+  staticRowIndex: number;
   table: MRT_TableInstance<TData>;
   virtualRow?: VirtualItem;
 }
@@ -22,7 +24,8 @@ interface Props<TData extends MRT_RowData> extends TableCellProps {
 export const MRT_TableDetailPanel = <TData extends MRT_RowData>({
   parentRowRef,
   row,
-  rowIndex,
+  rowVirtualizer,
+  staticRowIndex,
   table,
   virtualRow,
   ...rest
@@ -31,6 +34,7 @@ export const MRT_TableDetailPanel = <TData extends MRT_RowData>({
     getState,
     getVisibleLeafColumns,
     options: {
+      enableRowVirtualization,
       layoutMode,
       muiDetailPanelProps,
       muiTableBodyRowProps,
@@ -42,7 +46,7 @@ export const MRT_TableDetailPanel = <TData extends MRT_RowData>({
   const tableRowProps = parseFromValuesOrFunc(muiTableBodyRowProps, {
     isDetailPanel: true,
     row,
-    staticRowIndex: rowIndex,
+    staticRowIndex,
     table,
   });
 
@@ -54,9 +58,17 @@ export const MRT_TableDetailPanel = <TData extends MRT_RowData>({
     ...rest,
   };
 
+  const DetailPanel = !isLoading && renderDetailPanel?.({ row, table });
+
   return (
     <TableRow
       className="Mui-TableBodyCell-DetailPanel"
+      data-index={renderDetailPanel ? staticRowIndex * 2 + 1 : staticRowIndex}
+      ref={(node: HTMLTableRowElement) => {
+        if (node) {
+          rowVirtualizer?.measureElement?.(node);
+        }
+      }}
       {...tableRowProps}
       sx={(theme) => ({
         display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
@@ -68,7 +80,6 @@ export const MRT_TableDetailPanel = <TData extends MRT_RowData>({
           ? `translateY(${virtualRow?.start}px)`
           : undefined,
         width: '100%',
-        zIndex: virtualRow ? 2 : undefined,
         ...(parseFromValuesOrFunc(tableRowProps?.sx, theme) as any),
       })}
     >
@@ -82,15 +93,19 @@ export const MRT_TableDetailPanel = <TData extends MRT_RowData>({
             : undefined,
           borderBottom: !row.getIsExpanded() ? 'none' : undefined,
           display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
-          py: row.getIsExpanded() ? '1rem' : 0,
-          transition: 'all 150ms ease-in-out',
-          width: `${table.getTotalSize()}px`,
+          py: !!DetailPanel && row.getIsExpanded() ? '1rem' : 0,
+          transition: !enableRowVirtualization
+            ? 'all 150ms ease-in-out'
+            : undefined,
+          width: `100%`,
           ...(parseFromValuesOrFunc(tableCellProps?.sx, theme) as any),
         })}
       >
-        {renderDetailPanel && (
-          <Collapse in={row.getIsExpanded()} mountOnEnter unmountOnExit>
-            {!isLoading && renderDetailPanel({ row, table })}
+        {enableRowVirtualization ? (
+          row.getIsExpanded() && DetailPanel
+        ) : (
+          <Collapse in={!!row.getIsExpanded()} mountOnEnter unmountOnExit>
+            {DetailPanel}
           </Collapse>
         )}
       </TableCell>

package/src/buttons/MRT_ExpandButton.tsx

@@ -1,6 +1,7 @@
 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 {
   type MRT_Row,
@@ -17,12 +18,14 @@ export const MRT_ExpandButton = <TData extends MRT_RowData>({
   row,
   table,
 }: Props<TData>) => {
+  const theme = useTheme();
   const {
     getState,
     options: {
       icons: { ExpandMoreIcon },
       localization,
       muiExpandButtonProps,
+      positionExpandColumn,
       renderDetailPanel,
     },
   } = table;
@@ -42,9 +45,11 @@ export const MRT_ExpandButton = <TData extends MRT_RowData>({
     iconButtonProps?.onClick?.(event);
   };
 
+  const detailPanel = !!renderDetailPanel?.({ row, table });
+
   return (
     <Tooltip
-      disableHoverListener={!canExpand && !renderDetailPanel}
+      disableHoverListener={!canExpand && !detailPanel}
       enterDelay={1000}
       enterNextDelay={1000}
       title={
@@ -55,12 +60,12 @@ export const MRT_ExpandButton = <TData extends MRT_RowData>({
       <span>
         <IconButton
           aria-label={localization.expand}
-          disabled={!canExpand && !renderDetailPanel}
+          disabled={!canExpand && !detailPanel}
           {...iconButtonProps}
           onClick={handleToggleExpand}
           sx={(theme) => ({
             height: density === 'compact' ? '1.75rem' : '2.25rem',
-            opacity: !canExpand && !renderDetailPanel ? 0.3 : 1,
+            opacity: !canExpand && !detailPanel ? 0.3 : 1,
             width: density === 'compact' ? '1.75rem' : '2.25rem',
             ...(parseFromValuesOrFunc(iconButtonProps?.sx, theme) as any),
           })}
@@ -70,7 +75,14 @@ export const MRT_ExpandButton = <TData extends MRT_RowData>({
             <ExpandMoreIcon
               style={{
                 transform: `rotate(${
-                  !canExpand && !renderDetailPanel ? -90 : isExpanded ? -180 : 0
+                  !canExpand && !renderDetailPanel
+                    ? positionExpandColumn === 'last' ||
+                      theme.direction === 'rtl'
+                      ? 90
+                      : -90
+                    : isExpanded
+                      ? -180
+                      : 0
                 }deg)`,
                 transition: 'transform 150ms',
               }}

package/src/footer/MRT_TableFooterCell.tsx

@@ -1,4 +1,5 @@
 import TableCell, { type TableCellProps } from '@mui/material/TableCell';
+import { useTheme } from '@mui/material/styles';
 import { parseFromValuesOrFunc } from '../column.utils';
 import { getCommonMRTCellStyles } from '../style.utils';
 import {
@@ -17,6 +18,7 @@ export const MRT_TableFooterCell = <TData extends MRT_RowData>({
   table,
   ...rest
 }: Props<TData>) => {
+  const theme = useTheme();
   const {
     getState,
     options: { layoutMode, muiTableFooterCellProps },
@@ -35,9 +37,15 @@ export const MRT_TableFooterCell = <TData extends MRT_RowData>({
 
   return (
     <TableCell
-      align={columnDefType === 'group' ? 'center' : 'left'}
+      align={
+        columnDefType === 'group'
+          ? 'center'
+          : theme.direction === 'rtl'
+            ? 'right'
+            : 'left'
+      }
       colSpan={footer.colSpan}
-      variant="head"
+      variant="footer"
       {...tableCellProps}
       sx={(theme) => ({
         display: layoutMode?.startsWith('grid') ? 'grid' : undefined,

package/src/head/MRT_TableHeadCell.tsx

@@ -130,7 +130,7 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
     }
   };
 
-  const headerElement =
+  const HeaderElement =
     parseFromValuesOrFunc(columnDef.Header, {
       column,
       header,
@@ -139,7 +139,13 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
 
   return (
     <TableCell
-      align={columnDefType === 'group' ? 'center' : 'left'}
+      align={
+        columnDefType === 'group'
+          ? 'center'
+          : theme.direction === 'rtl'
+            ? 'right'
+            : 'left'
+      }
       colSpan={header.colSpan}
       onDragEnter={handleDragEnter}
       ref={(node: HTMLTableCellElement) => {
@@ -255,7 +261,7 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
                     columnDefType === 'data' ? columnDef.header : undefined
                   }
                 >
-                  {headerElement}
+                  {HeaderElement}
                 </Box>
                 {column.getCanFilter() && (
                   <MRT_TableHeadCellFilterLabel header={header} table={table} />

package/src/head/MRT_TableHeadRow.tsx

@@ -1,5 +1,5 @@
-import { alpha } from '@mui/material';
 import TableRow, { type TableRowProps } from '@mui/material/TableRow';
+import { alpha } from '@mui/material/styles';
 import { MRT_TableHeadCell } from './MRT_TableHeadCell';
 import { parseFromValuesOrFunc } from '../column.utils';
 import { getMRTTheme } from '../style.utils';

package/src/hooks/useMRT_DisplayColumns.tsx

@@ -68,6 +68,7 @@ export const useMRT_DisplayColumns = <TData extends MRT_RowData>(
       tableOptions.groupedColumnMode,
       tableOptions.localization,
       tableOptions.positionActionsColumn,
+      tableOptions.positionExpandColumn,
       tableOptions.renderDetailPanel,
       tableOptions.renderRowActionMenuItems,
       tableOptions.renderRowActions,
@@ -160,6 +161,13 @@ function makeRowExpandColumn<TData extends MRT_RowData>(
     order.includes(id) &&
     showExpandColumn(tableOptions, tableOptions.state?.grouping ?? grouping)
   ) {
+    const alignProps =
+      tableOptions.positionExpandColumn === 'last'
+        ? ({
+            align: 'right',
+          } as const)
+        : undefined;
+
     return {
       Cell: ({ cell, column, row, table }) => {
         const expandButtonProps = { row, table };
@@ -207,6 +215,8 @@ function makeRowExpandColumn<TData extends MRT_RowData>(
             );
           }
         : undefined,
+      muiTableBodyCellProps: alignProps,
+      muiTableHeadCellProps: alignProps,
       ...defaultDisplayColumnProps(
         tableOptions,
         id,

package/src/hooks/useMRT_RowVirtualizer.ts

@@ -24,22 +24,32 @@ export const useMRT_RowVirtualizer = <
     getState,
     options: {
       enableRowVirtualization,
+      renderDetailPanel,
       rowVirtualizerInstanceRef,
       rowVirtualizerOptions,
     },
     refs: { tableContainerRef },
   } = table;
-  const { density, draggingRow } = getState();
+  const { density, draggingRow, expanded } = getState();
 
   const rowVirtualizerProps = parseFromValuesOrFunc(rowVirtualizerOptions, {
     table,
   });
 
+  const rowCount = rows?.length ?? getRowModel().rows.length;
+
+  const normalRowHeight =
+    density === 'compact' ? 37 : density === 'comfortable' ? 58 : 73;
+
   const rowVirtualizer = enableRowVirtualization
     ? (useVirtualizer({
-        count: rows?.length ?? getRowModel().rows.length,
-        estimateSize: () =>
-          density === 'compact' ? 37 : density === 'comfortable' ? 58 : 73,
+        count: renderDetailPanel ? rowCount * 2 : rowCount,
+        estimateSize: (index) =>
+          renderDetailPanel && index % 2 === 1
+            ? expanded === true
+              ? 100
+              : 0
+            : normalRowHeight,
         getScrollElement: () => tableContainerRef.current,
         measureElement:
           typeof window !== 'undefined' &&

package/src/hooks/useMRT_TableOptions.ts

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { useTheme } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
 import { MRT_AggregationFns } from '../aggregationFns';
 import { MRT_FilterFns } from '../filterFns';
 import { MRT_Default_Icons } from '../icons';

package/src/inputs/MRT_SelectCheckbox.tsx

@@ -62,7 +62,7 @@ export const MRT_SelectCheckbox = <TData extends MRT_RowData>({
     event: ChangeEvent<HTMLInputElement>,
     row: MRT_Row<TData>,
   ) => {
-    if (row.getIsAllSubRowsSelected()) {
+    if (row.getIsAllSubRowsSelected() && row.getCanSelectSubRows()) {
       row.subRows?.forEach((r) => r.toggleSelected(false));
     }
     row.getToggleSelectedHandler()(event);
@@ -93,7 +93,8 @@ export const MRT_SelectCheckbox = <TData extends MRT_RowData>({
       : localization.toggleSelectRow,
     checked: selectAll
       ? allRowsSelected
-      : row?.getIsSelected() || row?.getIsAllSubRowsSelected(),
+      : row?.getIsSelected() ||
+        (row?.getIsAllSubRowsSelected() && row.getCanSelectSubRows()),
     disabled:
       isLoading || (row && !row.getCanSelect()) || row?.id === 'mrt-row-create',
     inputProps: {
@@ -139,7 +140,7 @@ export const MRT_SelectCheckbox = <TData extends MRT_RowData>({
           indeterminate={
             selectAll
               ? table.getIsSomeRowsSelected() && !allRowsSelected
-              : row?.getIsSomeSelected()
+              : row?.getIsSomeSelected() && row.getCanSelectSubRows()
           }
           {...commonProps}
         />

package/src/style.utils.ts

@@ -57,7 +57,7 @@ export const getCommonMRTCellStyles = <TData extends MRT_RowData>({
     )}-size) * 1px), ${column.columnDef.minSize ?? 30}px)`,
     width: `calc(var(--${header ? 'header' : 'col'}-${parseCSSVarId(
       header?.id ?? column.id,
-    )}-size) * 1px)`,
+    )}-size) * 1px${header ? ` + ${header?.subHeaders?.length ?? 0}rem` : ''})`,
   };
 
   if (layoutMode === 'grid') {
@@ -128,3 +128,8 @@ export const getCommonToolbarStyles = <TData extends MRT_RowData>({
   transition: 'all 150ms ease-in-out',
   zIndex: 1,
 });
+
+export const flipIconStyles = (theme: Theme) =>
+  theme.direction === 'rtl'
+    ? { style: { transform: 'scaleX(-1)' } }
+    : undefined;

package/src/table/MRT_Table.tsx

@@ -42,9 +42,7 @@ export const MRT_Table = <TData extends MRT_RowData>({
     const colSizes: { [key: string]: number } = {};
     for (let i = 0; i < headers.length; i++) {
       const header = headers[i];
-      let colSize = header.getSize();
-      if (header.subHeaders?.length)
-        colSize = colSize * 1.05 + header.subHeaders.length * 2;
+      const colSize = header.getSize();
       colSizes[`--header-${parseCSSVarId(header.id)}-size`] = colSize;
       colSizes[`--col-${parseCSSVarId(header.column.id)}-size`] = colSize;
     }

package/src/toolbar/MRT_BottomToolbar.tsx

@@ -1,5 +1,5 @@
-import { alpha } from '@mui/material';
 import Box, { type BoxProps } from '@mui/material/Box';
+import { alpha } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import { MRT_LinearProgressBar } from './MRT_LinearProgressBar';
 import { MRT_TablePagination } from './MRT_TablePagination';