material-react-table 2.6.0 → 2.7.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.6.0",
+  "version": "2.7.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.",
@@ -114,7 +114,7 @@
   },
   "dependencies": {
     "@tanstack/match-sorter-utils": "8.11.3",
-    "@tanstack/react-table": "8.11.4",
+    "@tanstack/react-table": "8.11.6",
     "@tanstack/react-virtual": "3.0.1",
     "highlight-words": "1.2.2"
   }

package/src/body/MRT_TableBody.tsx

@@ -4,7 +4,7 @@ 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';
+import { useMRT_RowVirtualizer } from '../hooks/useMRT_RowVirtualizer';
 import { useMRT_Rows } from '../hooks/useMRT_Rows';
 import {
   type MRT_ColumnVirtualizer,
@@ -30,7 +30,6 @@ export const MRT_TableBody = <TData extends MRT_RowData>({
     getState,
     getTopRows,
     options: {
-      createDisplayMode,
       enableStickyFooter,
       enableStickyHeader,
       layoutMode,
@@ -43,8 +42,7 @@ export const MRT_TableBody = <TData extends MRT_RowData>({
     },
     refs: { tableFooterRef, tableHeadRef, tablePaperRef },
   } = table;
-  const { columnFilters, creatingRow, globalFilter, isFullScreen, rowPinning } =
-    getState();
+  const { columnFilters, globalFilter, isFullScreen, rowPinning } = getState();
 
   const tableBodyProps = {
     ...parseFromValuesOrFunc(muiTableBodyProps, { table }),
@@ -77,14 +75,6 @@ export const MRT_TableBody = <TData extends MRT_RowData>({
     table,
   };
 
-  const CreatingRow = creatingRow && createDisplayMode === 'row' && (
-    <MRT_TableBodyRow
-      {...commonRowProps}
-      row={creatingRow}
-      staticRowIndex={-1}
-    />
-  );
-
   return (
     <>
       {!rowPinningDisplayMode?.includes('sticky') &&
@@ -113,17 +103,6 @@ export const MRT_TableBody = <TData extends MRT_RowData>({
             })}
           </TableBody>
         )}
-      {rowVirtualizer && CreatingRow && (
-        <TableBody
-          {...tableBodyProps}
-          sx={(theme) => ({
-            display: layoutMode?.startsWith('grid') ? 'grid' : undefined,
-            ...(parseFromValuesOrFunc(tableBodyProps?.sx, theme) as any),
-          })}
-        >
-          {CreatingRow}
-        </TableBody>
-      )}
       <TableBody
         {...tableBodyProps}
         sx={(theme) => ({
@@ -136,9 +115,8 @@ export const MRT_TableBody = <TData extends MRT_RowData>({
           ...(parseFromValuesOrFunc(tableBodyProps?.sx, theme) as any),
         })}
       >
-        {!rowVirtualizer && CreatingRow}
         {tableBodyProps?.children ??
-          (!rows.length && !CreatingRow ? (
+          (!rows.length ? (
             <tr
               style={{
                 display: layoutMode?.startsWith('grid') ? 'grid' : undefined,

package/src/body/MRT_TableBodyRow.tsx

@@ -136,13 +136,15 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
         data-index={renderDetailPanel ? staticRowIndex * 2 : staticRowIndex}
         data-pinned={!!isPinned || undefined}
         data-selected={
-          row.getIsSelected() || row.getIsAllSubRowsSelected() || undefined
+          row?.getIsSelected() ||
+          (row?.getIsAllSubRowsSelected() && row.getCanSelectSubRows()) ||
+          undefined
         }
         onDragEnter={handleDragEnter}
         ref={(node: HTMLTableRowElement) => {
           if (node) {
             rowRef.current = node;
-            rowVirtualizer?.measureElement?.(node);
+            rowVirtualizer?.measureElement(node);
           }
         }}
         selected={row.getIsSelected()}

package/src/body/MRT_TableDetailPanel.tsx

@@ -1,5 +1,4 @@
 import { type RefObject } from 'react';
-import { type VirtualItem } from '@tanstack/react-virtual';
 import Collapse from '@mui/material/Collapse';
 import TableCell, { type TableCellProps } from '@mui/material/TableCell';
 import TableRow from '@mui/material/TableRow';
@@ -10,6 +9,7 @@ import {
   type MRT_RowData,
   type MRT_RowVirtualizer,
   type MRT_TableInstance,
+  type MRT_VirtualItem,
 } from '../types';
 
 interface Props<TData extends MRT_RowData> extends TableCellProps {
@@ -18,7 +18,7 @@ interface Props<TData extends MRT_RowData> extends TableCellProps {
   rowVirtualizer?: MRT_RowVirtualizer;
   staticRowIndex: number;
   table: MRT_TableInstance<TData>;
-  virtualRow?: VirtualItem;
+  virtualRow?: MRT_VirtualItem;
 }
 
 export const MRT_TableDetailPanel = <TData extends MRT_RowData>({
@@ -104,7 +104,7 @@ export const MRT_TableDetailPanel = <TData extends MRT_RowData>({
         {enableRowVirtualization ? (
           row.getIsExpanded() && DetailPanel
         ) : (
-          <Collapse in={!!row.getIsExpanded()} mountOnEnter unmountOnExit>
+          <Collapse in={row.getIsExpanded()} mountOnEnter unmountOnExit>
             {DetailPanel}
           </Collapse>
         )}

package/src/buttons/MRT_CopyButton.tsx

@@ -2,6 +2,7 @@ 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,
@@ -51,9 +52,7 @@ export const MRT_CopyButton = <TData extends MRT_RowData>({
 
   return (
     <Tooltip
-      enterDelay={1000}
-      enterNextDelay={1000}
-      placement="top"
+      {...getCommonTooltipProps('top')}
       title={
         buttonProps?.title ??
         (copied ? localization.copiedToClipboard : localization.clickToCopy)

package/src/buttons/MRT_ExpandAllButton.tsx

@@ -1,6 +1,7 @@
 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';
 
 interface Props<TData extends MRT_RowData> extends IconButtonProps {
@@ -37,8 +38,7 @@ export const MRT_ExpandAllButton = <TData extends MRT_RowData>({
 
   return (
     <Tooltip
-      enterDelay={1000}
-      enterNextDelay={1000}
+      {...getCommonTooltipProps()}
       title={
         iconButtonProps?.title ??
         (isAllRowsExpanded ? localization.collapseAll : localization.expandAll)

package/src/buttons/MRT_ExpandButton.tsx

@@ -3,6 +3,7 @@ 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,
@@ -11,11 +12,13 @@ import {
 
 interface Props<TData extends MRT_RowData> extends IconButtonProps {
   row: MRT_Row<TData>;
+  staticRowIndex?: number;
   table: MRT_TableInstance<TData>;
 }
 
 export const MRT_ExpandButton = <TData extends MRT_RowData>({
   row,
+  staticRowIndex,
   table,
 }: Props<TData>) => {
   const theme = useTheme();
@@ -33,6 +36,7 @@ export const MRT_ExpandButton = <TData extends MRT_RowData>({
 
   const iconButtonProps = parseFromValuesOrFunc(muiExpandButtonProps, {
     row,
+    staticRowIndex,
     table,
   });
 
@@ -50,8 +54,7 @@ export const MRT_ExpandButton = <TData extends MRT_RowData>({
   return (
     <Tooltip
       disableHoverListener={!canExpand && !detailPanel}
-      enterDelay={1000}
-      enterNextDelay={1000}
+      {...getCommonTooltipProps()}
       title={
         iconButtonProps?.title ??
         (isExpanded ? localization.collapse : localization.expand)

package/src/buttons/MRT_GrabHandleButton.tsx

@@ -2,6 +2,7 @@ import { type DragEventHandler } from 'react';
 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';
 
 interface Props<TData extends MRT_RowData> extends IconButtonProps {
@@ -31,9 +32,7 @@ export const MRT_GrabHandleButton = <TData extends MRT_RowData>({
 
   return (
     <Tooltip
-      enterDelay={1000}
-      enterNextDelay={1000}
-      placement="top"
+      {...getCommonTooltipProps('top')}
       title={_iconButtonProps?.title ?? localization.move}
     >
       <IconButton

package/src/buttons/MRT_RowPinButton.tsx

@@ -3,6 +3,7 @@ import { type RowPinningPosition } from '@tanstack/react-table';
 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_Row,
   type MRT_RowData,
@@ -41,8 +42,7 @@ export const MRT_RowPinButton = <TData extends MRT_RowData>({
 
   return (
     <Tooltip
-      enterDelay={1000}
-      enterNextDelay={1000}
+      {...getCommonTooltipProps()}
       open={tooltipOpened}
       title={isPinned ? localization.unpin : localization.pin}
     >

package/src/buttons/MRT_ToggleRowActionMenuButton.tsx

@@ -4,6 +4,7 @@ import Tooltip from '@mui/material/Tooltip';
 import { MRT_EditActionButtons } from './MRT_EditActionButtons';
 import { parseFromValuesOrFunc } from '../column.utils';
 import { MRT_RowActionMenu } from '../menus/MRT_RowActionMenu';
+import { getCommonTooltipProps } from '../style.utils';
 import {
   type MRT_Cell,
   type MRT_Row,
@@ -25,12 +26,14 @@ const commonIconButtonStyles = {
 interface Props<TData extends MRT_RowData> extends IconButtonProps {
   cell: MRT_Cell<TData>;
   row: MRT_Row<TData>;
+  staticRowIndex?: number;
   table: MRT_TableInstance<TData>;
 }
 
 export const MRT_ToggleRowActionMenuButton = <TData extends MRT_RowData>({
   cell,
   row,
+  staticRowIndex,
   table,
   ...rest
 }: Props<TData>) => {
@@ -74,7 +77,7 @@ export const MRT_ToggleRowActionMenuButton = <TData extends MRT_RowData>({
   return (
     <>
       {renderRowActions && !showEditActionButtons ? (
-        renderRowActions({ cell, row, table })
+        renderRowActions({ cell, row, staticRowIndex, table })
       ) : showEditActionButtons ? (
         <MRT_EditActionButtons row={row} table={table} />
       ) : !renderRowActionMenuItems &&
@@ -92,11 +95,7 @@ export const MRT_ToggleRowActionMenuButton = <TData extends MRT_RowData>({
         </Tooltip>
       ) : renderRowActionMenuItems ? (
         <>
-          <Tooltip
-            enterDelay={1000}
-            enterNextDelay={1000}
-            title={localization.rowActions}
-          >
+          <Tooltip {...getCommonTooltipProps()} title={localization.rowActions}>
             <IconButton
               aria-label={localization.rowActions}
               onClick={handleOpenRowActionMenu}
@@ -112,6 +111,7 @@ export const MRT_ToggleRowActionMenuButton = <TData extends MRT_RowData>({
             handleEdit={handleStartEditMode}
             row={row}
             setAnchorEl={setAnchorEl}
+            staticRowIndex={staticRowIndex}
             table={table}
           />
         </>

package/src/column.utils.ts

@@ -6,15 +6,13 @@ import {
   type Row,
 } from '@tanstack/react-table';
 import { type Range, defaultRangeExtractor } from '@tanstack/react-virtual';
-import { type MRT_AggregationFns } from './aggregationFns';
-import { type MRT_FilterFns } from './filterFns';
-import { type MRT_SortingFns } from './sortingFns';
 import {
   type MRT_Column,
   type MRT_ColumnDef,
   type MRT_ColumnHelper,
   type MRT_ColumnOrderState,
   type MRT_DefinedColumnDef,
+  type MRT_DefinedTableOptions,
   type MRT_DisplayColumnDef,
   type MRT_DisplayColumnIds,
   type MRT_FilterOption,
@@ -49,42 +47,30 @@ export const getAllLeafColumnDefs = <TData extends MRT_RowData>(
 };
 
 export const prepareColumns = <TData extends MRT_RowData>({
-  aggregationFns,
   columnDefs,
-  columnFilterFns,
-  defaultDisplayColumn,
-  filterFns,
-  sortingFns,
+  tableOptions,
 }: {
-  aggregationFns: typeof MRT_AggregationFns &
-    MRT_TableOptions<TData>['aggregationFns'];
   columnDefs: MRT_ColumnDef<TData>[];
-  columnFilterFns: { [key: string]: MRT_FilterOption };
-  defaultDisplayColumn: Partial<MRT_ColumnDef<TData>>;
-  filterFns: typeof MRT_FilterFns & MRT_TableOptions<TData>['filterFns'];
-  sortingFns: typeof MRT_SortingFns & MRT_TableOptions<TData>['sortingFns'];
-}): MRT_DefinedColumnDef<TData>[] =>
-  columnDefs.map((columnDef) => {
+  tableOptions: MRT_DefinedTableOptions<TData>;
+}): MRT_DefinedColumnDef<TData>[] => {
+  const {
+    aggregationFns = {},
+    defaultDisplayColumn,
+    filterFns = {},
+    sortingFns = {},
+    state: { columnFilterFns = {} } = {},
+  } = tableOptions;
+  return columnDefs.map((columnDef) => {
     //assign columnId
     if (!columnDef.id) columnDef.id = getColumnId(columnDef);
-    if (process.env.NODE_ENV !== 'production' && !columnDef.id) {
-      console.error(
-        'Column definitions must have a valid `accessorKey` or `id` property',
-      );
-    }
-
     //assign columnDefType
     if (!columnDef.columnDefType) columnDef.columnDefType = 'data';
     if (columnDef.columns?.length) {
       columnDef.columnDefType = 'group';
       //recursively prepare columns if this is a group column
       columnDef.columns = prepareColumns({
-        aggregationFns,
         columnDefs: columnDef.columns,
-        columnFilterFns,
-        defaultDisplayColumn,
-        filterFns,
-        sortingFns,
+        tableOptions,
       });
     } else if (columnDef.columnDefType === 'data') {
       //assign aggregationFns if multiple aggregationFns are provided
@@ -121,6 +107,7 @@ export const prepareColumns = <TData extends MRT_RowData>({
     }
     return columnDef;
   }) as MRT_DefinedColumnDef<TData>[];
+};
 
 export const reorderColumn = <TData extends MRT_RowData>(
   draggedColumn: MRT_Column<TData>,
@@ -297,6 +284,10 @@ export const flexRender = _flexRender as (
 export const createRow = <TData extends MRT_RowData>(
   table: MRT_TableInstance<TData>,
   originalRow?: TData,
+  rowIndex = -1,
+  depth = 0,
+  subRows?: MRT_Row<TData>[],
+  parentId?: string,
 ): MRT_Row<TData> =>
   _createRow(
     table as any,
@@ -308,8 +299,10 @@ export const createRow = <TData extends MRT_RowData>(
           [getColumnId(col)]: '',
         })),
       ),
-    -1,
-    0,
+    rowIndex,
+    depth,
+    subRows as any,
+    parentId,
   ) as MRT_Row<TData>;
 
 export const extraIndexRangeExtractor = (

package/src/head/MRT_TableHead.tsx

@@ -1,7 +1,7 @@
 import TableHead, { type TableHeadProps } from '@mui/material/TableHead';
 import { MRT_TableHeadRow } from './MRT_TableHeadRow';
 import { parseFromValuesOrFunc } from '../column.utils';
-import { MRT_ToolbarAlertBanner } from '../toolbar';
+import { MRT_ToolbarAlertBanner } from '../toolbar/MRT_ToolbarAlertBanner';
 import {
   type MRT_ColumnVirtualizer,
   type MRT_RowData,

package/src/head/MRT_TableHeadCellColumnActionsButton.tsx

@@ -3,6 +3,7 @@ import IconButton, { type IconButtonProps } from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import { parseFromValuesOrFunc } from '../column.utils';
 import { MRT_ColumnActionMenu } from '../menus/MRT_ColumnActionMenu';
+import { getCommonTooltipProps } from '../style.utils';
 import {
   type MRT_Header,
   type MRT_RowData,
@@ -54,9 +55,7 @@ export const MRT_TableHeadCellColumnActionsButton = <
   return (
     <>
       <Tooltip
-        enterDelay={1000}
-        enterNextDelay={1000}
-        placement="top"
+        {...getCommonTooltipProps('top')}
         title={iconButtonProps?.title ?? localization.columnActions}
       >
         <IconButton

package/src/hooks/useMRT_DisplayColumns.tsx

@@ -1,37 +1,28 @@
 import { type ReactNode, type RefObject, useMemo } from 'react';
 import Stack from '@mui/material/Stack';
 import Tooltip from '@mui/material/Tooltip';
-import { MRT_TableBodyRowGrabHandle } from '../body';
+import { MRT_TableBodyRowGrabHandle } from '../body/MRT_TableBodyRowGrabHandle';
 import { MRT_TableBodyRowPinButton } from '../body/MRT_TableBodyRowPinButton';
 import { MRT_ExpandAllButton } from '../buttons/MRT_ExpandAllButton';
 import { MRT_ExpandButton } from '../buttons/MRT_ExpandButton';
 import { MRT_ToggleRowActionMenuButton } from '../buttons/MRT_ToggleRowActionMenuButton';
 import { showExpandColumn } from '../column.utils';
 import { MRT_SelectCheckbox } from '../inputs/MRT_SelectCheckbox';
+import { getCommonTooltipProps } from '../style.utils';
 import {
   type MRT_ColumnDef,
-  type MRT_ColumnOrderState,
   type MRT_DefinedTableOptions,
   type MRT_DisplayColumnIds,
-  type MRT_GroupingState,
   type MRT_Localization,
-  type MRT_Row,
   type MRT_RowData,
 } from '../types';
-import { MRT_DefaultDisplayColumn } from '.';
-
-interface Params<TData extends MRT_RowData> {
-  columnOrder: MRT_ColumnOrderState;
-  creatingRow: MRT_Row<TData> | null;
-  grouping: MRT_GroupingState;
-  tableOptions: MRT_DefinedTableOptions<TData>;
-}
+import { MRT_DefaultDisplayColumn } from './useMRT_TableOptions';
 
 export const useMRT_DisplayColumns = <TData extends MRT_RowData>(
-  params: Params<TData>,
+  tableOptions: MRT_DefinedTableOptions<TData>,
 ): MRT_ColumnDef<TData>[] => {
-  const { columnOrder, creatingRow, grouping, tableOptions } = params;
-  const order = tableOptions.state?.columnOrder ?? columnOrder;
+  const { columnOrder, creatingRow, grouping, pagination } =
+    tableOptions.state!;
 
   return useMemo(
     () =>
@@ -44,12 +35,13 @@ export const useMRT_DisplayColumns = <TData extends MRT_RowData>(
         makeRowNumbersColumn,
         makeSpacerColumn,
       ]
-        .map((makeCol) => makeCol(params, order))
+        .map((makeCol) => makeCol(tableOptions))
         .filter(Boolean) as MRT_ColumnDef<TData>[],
     [
       columnOrder,
       creatingRow,
       grouping,
+      pagination,
       tableOptions.displayColumnDefOptions,
       tableOptions.editDisplayMode,
       tableOptions.enableColumnDragging,
@@ -72,8 +64,6 @@ export const useMRT_DisplayColumns = <TData extends MRT_RowData>(
       tableOptions.renderDetailPanel,
       tableOptions.renderRowActionMenuItems,
       tableOptions.renderRowActions,
-      tableOptions.state?.columnOrder,
-      tableOptions.state?.grouping,
     ],
   );
 };
@@ -98,11 +88,11 @@ function defaultDisplayColumnProps<TData extends MRT_RowData>(
 }
 
 function makeRowPinColumn<TData extends MRT_RowData>(
-  { tableOptions }: Params<TData>,
-  order: MRT_ColumnOrderState,
+  tableOptions: MRT_DefinedTableOptions<TData>,
 ): MRT_ColumnDef<TData> | null {
   const id: MRT_DisplayColumnIds = 'mrt-row-pin';
-  if (order.includes(id)) {
+  const { columnOrder } = tableOptions.state!;
+  if (columnOrder?.includes(id)) {
     return {
       Cell: ({ row, table }) => (
         <MRT_TableBodyRowPinButton row={row} table={table} />
@@ -114,11 +104,11 @@ function makeRowPinColumn<TData extends MRT_RowData>(
 }
 
 function makeRowDragColumn<TData extends MRT_RowData>(
-  { tableOptions }: Params<TData>,
-  order: MRT_ColumnOrderState,
+  tableOptions: MRT_DefinedTableOptions<TData>,
 ): MRT_ColumnDef<TData> | null {
   const id: MRT_DisplayColumnIds = 'mrt-row-drag';
-  if (order.includes(id)) {
+  const { columnOrder } = tableOptions.state!;
+  if (columnOrder?.includes(id)) {
     return {
       Cell: ({ row, rowRef, table }) => (
         <MRT_TableBodyRowGrabHandle
@@ -134,17 +124,22 @@ function makeRowDragColumn<TData extends MRT_RowData>(
 }
 
 function makeRowActionsColumn<TData extends MRT_RowData>(
-  { creatingRow, tableOptions }: Params<TData>,
-  order: MRT_ColumnOrderState,
+  tableOptions: MRT_DefinedTableOptions<TData>,
 ): MRT_ColumnDef<TData> | null {
   const id: MRT_DisplayColumnIds = 'mrt-row-actions';
+  const { columnOrder, creatingRow } = tableOptions.state!;
   if (
-    order.includes(id) ||
+    columnOrder?.includes(id) ||
     (creatingRow && tableOptions.createDisplayMode === 'row')
   ) {
     return {
-      Cell: ({ cell, row, table }) => (
-        <MRT_ToggleRowActionMenuButton cell={cell} row={row} table={table} />
+      Cell: ({ cell, row, staticRowIndex, table }) => (
+        <MRT_ToggleRowActionMenuButton
+          cell={cell}
+          row={row}
+          staticRowIndex={staticRowIndex}
+          table={table}
+        />
       ),
       ...defaultDisplayColumnProps(tableOptions, id, 'actions'),
     };
@@ -153,14 +148,11 @@ function makeRowActionsColumn<TData extends MRT_RowData>(
 }
 
 function makeRowExpandColumn<TData extends MRT_RowData>(
-  { grouping, tableOptions }: Params<TData>,
-  order: MRT_ColumnOrderState,
+  tableOptions: MRT_DefinedTableOptions<TData>,
 ): MRT_ColumnDef<TData> | null {
   const id: MRT_DisplayColumnIds = 'mrt-row-expand';
-  if (
-    order.includes(id) &&
-    showExpandColumn(tableOptions, tableOptions.state?.grouping ?? grouping)
-  ) {
+  const { columnOrder, grouping } = tableOptions.state!;
+  if (columnOrder?.includes(id) && showExpandColumn(tableOptions, grouping)) {
     const alignProps =
       tableOptions.positionExpandColumn === 'last'
         ? ({
@@ -169,8 +161,8 @@ function makeRowExpandColumn<TData extends MRT_RowData>(
         : undefined;
 
     return {
-      Cell: ({ cell, column, row, table }) => {
-        const expandButtonProps = { row, table };
+      Cell: ({ cell, column, row, staticRowIndex, table }) => {
+        const expandButtonProps = { row, staticRowIndex, table };
         const subRowsLength = row.subRows?.length;
         if (
           tableOptions.groupedColumnMode === 'remove' &&
@@ -180,9 +172,7 @@ function makeRowExpandColumn<TData extends MRT_RowData>(
             <Stack alignItems="center" flexDirection="row" gap="0.25rem">
               <MRT_ExpandButton {...expandButtonProps} />
               <Tooltip
-                enterDelay={1000}
-                enterNextDelay={1000}
-                placement="right"
+                {...getCommonTooltipProps('right')}
                 title={table.getColumn(row.groupingColumnId).columnDef.header}
               >
                 <span>{row.groupingValue as ReactNode}</span>
@@ -206,11 +196,11 @@ function makeRowExpandColumn<TData extends MRT_RowData>(
                 <MRT_ExpandAllButton table={table} />
                 {tableOptions.groupedColumnMode === 'remove' &&
                   grouping
-                    .map(
+                    ?.map(
                       (groupedColumnId) =>
                         table.getColumn(groupedColumnId).columnDef.header,
                     )
-                    .join(', ')}
+                    ?.join(', ')}
               </>
             );
           }
@@ -231,11 +221,11 @@ function makeRowExpandColumn<TData extends MRT_RowData>(
 }
 
 function makeRowSelectColumn<TData extends MRT_RowData>(
-  { tableOptions }: Params<TData>,
-  order: MRT_ColumnOrderState,
+  tableOptions: MRT_DefinedTableOptions<TData>,
 ): MRT_ColumnDef<TData> | null {
   const id: MRT_DisplayColumnIds = 'mrt-row-select';
-  if (order.includes(id)) {
+  const { columnOrder } = tableOptions.state!;
+  if (columnOrder?.includes(id)) {
     return {
       Cell: ({ row, staticRowIndex, table }) => (
         <MRT_SelectCheckbox
@@ -255,15 +245,16 @@ function makeRowSelectColumn<TData extends MRT_RowData>(
 }
 
 function makeRowNumbersColumn<TData extends MRT_RowData>(
-  { tableOptions }: Params<TData>,
-  order: MRT_ColumnOrderState,
+  tableOptions: MRT_DefinedTableOptions<TData>,
 ): MRT_ColumnDef<TData> | null {
   const id: MRT_DisplayColumnIds = 'mrt-row-numbers';
-  if (order.includes(id) || tableOptions.enableRowNumbers)
+  const { columnOrder, pagination } = tableOptions.state!;
+  if (columnOrder?.includes(id) || tableOptions.enableRowNumbers)
     return {
       Cell: ({ row, staticRowIndex }) =>
         ((tableOptions.rowNumberDisplayMode === 'static'
-          ? staticRowIndex
+          ? (staticRowIndex || 0) +
+            (pagination?.pageSize || 0) * (pagination?.pageIndex || 0)
           : row.index) ?? 0) + 1,
       Header: () => tableOptions.localization.rowNumber,
       ...defaultDisplayColumnProps(tableOptions, id, 'rowNumbers'),
@@ -282,11 +273,11 @@ const blankColProps = {
 };
 
 function makeSpacerColumn<TData extends MRT_RowData>(
-  { tableOptions }: Params<TData>,
-  order: MRT_ColumnOrderState,
+  tableOptions: MRT_DefinedTableOptions<TData>,
 ): MRT_ColumnDef<TData> | null {
   const id: MRT_DisplayColumnIds = 'mrt-row-spacer';
-  if (order.includes(id)) {
+  const { columnOrder } = tableOptions.state!;
+  if (columnOrder?.includes(id)) {
     return {
       ...defaultDisplayColumnProps(tableOptions, id, undefined, 0),
       ...MRT_DefaultDisplayColumn,