material-react-table 2.7.0 → 2.9.0

package/src/{inputs → components/inputs}/MRT_SelectCheckbox.tsx

@@ -3,24 +3,23 @@ import Checkbox, { type CheckboxProps } from '@mui/material/Checkbox';
 import Radio, { type RadioProps } from '@mui/material/Radio';
 import Tooltip from '@mui/material/Tooltip';
 import { type Theme } 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 { getIsRowSelected } from '../../utils/row.utils';
+import { getCommonTooltipProps } from '../../utils/style.utils';
+import { parseFromValuesOrFunc } from '../../utils/utils';
 
 interface Props<TData extends MRT_RowData> extends CheckboxProps {
   row?: MRT_Row<TData>;
-  selectAll?: boolean;
   staticRowIndex?: number;
   table: MRT_TableInstance<TData>;
 }
 
 export const MRT_SelectCheckbox = <TData extends MRT_RowData>({
   row,
-  selectAll,
   staticRowIndex,
   table,
   ...rest
@@ -39,6 +38,8 @@ export const MRT_SelectCheckbox = <TData extends MRT_RowData>({
   } = table;
   const { density, isLoading } = getState();
 
+  const selectAll = !row;
+
   const checkboxProps = {
     ...(!row
       ? parseFromValuesOrFunc(muiSelectAllCheckboxProps, { table })
@@ -92,10 +93,7 @@ export const MRT_SelectCheckbox = <TData extends MRT_RowData>({
     'aria-label': selectAll
       ? localization.toggleSelectAll
       : localization.toggleSelectRow,
-    checked: selectAll
-      ? allRowsSelected
-      : row?.getIsSelected() ||
-        (row?.getIsAllSubRowsSelected() && row.getCanSelectSubRows()),
+    checked: selectAll ? allRowsSelected : getIsRowSelected({ row, table }),
     disabled:
       isLoading || (row && !row.getCanSelect()) || row?.id === 'mrt-row-create',
     inputProps: {

package/src/{menus → components/menus}/MRT_ColumnActionMenu.tsx

@@ -7,12 +7,12 @@ import Menu, { type MenuProps } from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import { useTheme } from '@mui/material/styles';
 import { MRT_FilterOptionMenu } from './MRT_FilterOptionMenu';
-import { getMRTTheme } from '../style.utils';
 import {
   type MRT_Header,
   type MRT_RowData,
   type MRT_TableInstance,
-} from '../types';
+} from '../../types';
+import { getMRTTheme } from '../../utils/style.utils';
 
 export const commonMenuItemStyles = {
   alignItems: 'center',
@@ -403,12 +403,12 @@ export const MRT_ColumnActionMenu = <TData extends MRT_RowData>({
 
   return (
     <Menu
-    MenuListProps={{
-      dense: density === 'compact',
-      sx: {
-        backgroundColor: menuBackgroundColor,
-      },
-    }}
+      MenuListProps={{
+        dense: density === 'compact',
+        sx: {
+          backgroundColor: menuBackgroundColor,
+        },
+      }}
       anchorEl={anchorEl}
       onClose={() => setAnchorEl(null)}
       open={!!anchorEl}

package/src/{menus → components/menus}/MRT_FilterOptionMenu.tsx

@@ -3,7 +3,6 @@ import Box from '@mui/material/Box';
 import Menu, { type MenuProps } from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import { useTheme } from '@mui/material/styles';
-import { getMRTTheme } from '../style.utils';
 import {
   type MRT_FilterOption,
   type MRT_Header,
@@ -11,7 +10,8 @@ import {
   type MRT_Localization,
   type MRT_RowData,
   type MRT_TableInstance,
-} from '../types';
+} from '../../types';
+import { getMRTTheme } from '../../utils/style.utils';
 
 export const mrtFilterOptions = (
   localization: MRT_Localization,

package/src/{menus → components/menus}/MRT_RowActionMenu.tsx

@@ -8,13 +8,13 @@ import {
   commonListItemStyles,
   commonMenuItemStyles,
 } from './MRT_ColumnActionMenu';
-import { parseFromValuesOrFunc } from '../column.utils';
-import { getMRTTheme } from '../style.utils';
 import {
   type MRT_Row,
   type MRT_RowData,
   type MRT_TableInstance,
-} from '../types';
+} from '../../types';
+import { getMRTTheme } from '../../utils/style.utils';
+import { parseFromValuesOrFunc } from '../../utils/utils';
 
 interface Props<TData extends MRT_RowData> extends Partial<MenuProps> {
   anchorEl: HTMLElement | null;
@@ -51,12 +51,12 @@ export const MRT_RowActionMenu = <TData extends MRT_RowData>({
 
   return (
     <Menu
-    MenuListProps={{
-      dense: density === 'compact',
-      sx: {
-        backgroundColor: menuBackgroundColor,
-      },
-    }}
+      MenuListProps={{
+        dense: density === 'compact',
+        sx: {
+          backgroundColor: menuBackgroundColor,
+        },
+      }}
       anchorEl={anchorEl}
       onClick={(event) => event.stopPropagation()}
       onClose={() => setAnchorEl(null)}

package/src/{menus → components/menus}/MRT_ShowHideColumnsMenu.tsx

@@ -1,17 +1,17 @@
 import { useMemo, useState } from 'react';
-import { useTheme } from '@mui/material';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import Divider from '@mui/material/Divider';
 import Menu, { type MenuProps } from '@mui/material/Menu';
+import { useTheme } from '@mui/material/styles';
 import { MRT_ShowHideColumnsMenuItems } from './MRT_ShowHideColumnsMenuItems';
-import { getDefaultColumnOrderIds } from '../column.utils';
-import { getMRTTheme } from '../style.utils';
 import {
   type MRT_Column,
   type MRT_RowData,
   type MRT_TableInstance,
-} from '../types';
+} from '../../types';
+import { getDefaultColumnOrderIds } from '../../utils/displayColumn.utils';
+import { getMRTTheme } from '../../utils/style.utils';
 
 interface Props<TData extends MRT_RowData> extends Partial<MenuProps> {
   anchorEl: HTMLElement | null;
@@ -114,9 +114,7 @@ export const MRT_ShowHideColumnsMenu = <TData extends MRT_RowData>({
         {enableColumnOrdering && (
           <Button
             onClick={() =>
-              table.setColumnOrder(
-                getDefaultColumnOrderIds(table.options as any),
-              )
+              table.setColumnOrder(getDefaultColumnOrderIds(table.options))
             }
           >
             {localization.resetOrder}

package/src/{menus → components/menus}/MRT_ShowHideColumnsMenuItems.tsx

@@ -11,15 +11,16 @@ import MenuItem, { type MenuItemProps } from '@mui/material/MenuItem';
 import Switch from '@mui/material/Switch';
 import Tooltip from '@mui/material/Tooltip';
 import Typography from '@mui/material/Typography';
-import { MRT_ColumnPinningButtons } from '../buttons/MRT_ColumnPinningButtons';
-import { MRT_GrabHandleButton } from '../buttons/MRT_GrabHandleButton';
-import { parseFromValuesOrFunc, reorderColumn } from '../column.utils';
-import { getCommonTooltipProps, getMRTTheme } from '../style.utils';
 import {
   type MRT_Column,
   type MRT_RowData,
   type MRT_TableInstance,
-} from '../types';
+} from '../../types';
+import { reorderColumn } from '../../utils/column.utils';
+import { getCommonTooltipProps, getMRTTheme } from '../../utils/style.utils';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+import { MRT_ColumnPinningButtons } from '../buttons/MRT_ColumnPinningButtons';
+import { MRT_GrabHandleButton } from '../buttons/MRT_GrabHandleButton';
 
 interface Props<TData extends MRT_RowData> extends MenuItemProps {
   allColumns: MRT_Column<TData>[];

package/src/{modals → components/modals}/MRT_EditRowModal.tsx

@@ -3,14 +3,14 @@ import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
 import Stack from '@mui/material/Stack';
-import { MRT_EditActionButtons } from '../buttons/MRT_EditActionButtons';
-import { parseFromValuesOrFunc } from '../column.utils';
-import { MRT_EditCellTextField } from '../inputs/MRT_EditCellTextField';
 import {
   type MRT_Row,
   type MRT_RowData,
   type MRT_TableInstance,
-} from '../types';
+} from '../../types';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+import { MRT_EditActionButtons } from '../buttons/MRT_EditActionButtons';
+import { MRT_EditCellTextField } from '../inputs/MRT_EditCellTextField';
 
 interface Props<TData extends MRT_RowData> extends Partial<DialogProps> {
   open: boolean;

package/src/{table → components/table}/MRT_Table.tsx

@@ -1,12 +1,12 @@
 import { useMemo } from 'react';
 import Table, { type TableProps } from '@mui/material/Table';
+import { useMRT_ColumnVirtualizer } from '../../hooks/useMRT_ColumnVirtualizer';
+import { type MRT_RowData, type MRT_TableInstance } from '../../types';
+import { parseCSSVarId } from '../../utils/style.utils';
+import { parseFromValuesOrFunc } from '../../utils/utils';
 import { MRT_TableBody, Memo_MRT_TableBody } from '../body/MRT_TableBody';
-import { parseFromValuesOrFunc } from '../column.utils';
 import { MRT_TableFooter } from '../footer/MRT_TableFooter';
 import { MRT_TableHead } from '../head/MRT_TableHead';
-import { useMRT_ColumnVirtualizer } from '../hooks/useMRT_ColumnVirtualizer';
-import { parseCSSVarId } from '../style.utils';
-import { type MRT_RowData, type MRT_TableInstance } from '../types';
 
 interface Props<TData extends MRT_RowData> extends TableProps {
   table: MRT_TableInstance<TData>;
@@ -27,6 +27,7 @@ export const MRT_Table = <TData extends MRT_RowData>({
       layoutMode,
       memoMode,
       muiTableProps,
+      renderCaption,
     },
   } = table;
   const { columnSizing, columnSizingInfo, columnVisibility, isFullScreen } =
@@ -37,6 +38,8 @@ export const MRT_Table = <TData extends MRT_RowData>({
     ...rest,
   };
 
+  const Caption = parseFromValuesOrFunc(renderCaption, { table });
+
   const columnSizeVars = useMemo(() => {
     const headers = getFlatHeaders();
     const colSizes: { [key: string]: number } = {};
@@ -67,6 +70,7 @@ export const MRT_Table = <TData extends MRT_RowData>({
         ...(parseFromValuesOrFunc(tableProps?.sx, theme) as any),
       })}
     >
+      {!!Caption && <caption>{Caption}</caption>}
       {enableTableHead && <MRT_TableHead {...commonTableGroupProps} />}
       {memoMode === 'table-body' || columnSizingInfo.isResizingColumn ? (
         <Memo_MRT_TableBody {...commonTableGroupProps} />

package/src/{table → components/table}/MRT_TableContainer.tsx

@@ -4,9 +4,9 @@ import TableContainer, {
 } from '@mui/material/TableContainer';
 import { MRT_Table } from './MRT_Table';
 import { MRT_TableLoadingOverlay } from './MRT_TableLoadingOverlay';
-import { parseFromValuesOrFunc } from '../column.utils';
+import { type MRT_RowData, type MRT_TableInstance } from '../../types';
+import { parseFromValuesOrFunc } from '../../utils/utils';
 import { MRT_EditRowModal } from '../modals/MRT_EditRowModal';
-import { type MRT_RowData, type MRT_TableInstance } from '../types';
 
 const useIsomorphicLayoutEffect =
   typeof window !== 'undefined' ? useLayoutEffect : useEffect;

package/src/{table → components/table}/MRT_TableLoadingOverlay.tsx

@@ -3,9 +3,9 @@ import CircularProgress, {
   type CircularProgressProps,
 } from '@mui/material/CircularProgress';
 import { alpha } from '@mui/material/styles';
-import { parseFromValuesOrFunc } from '../column.utils';
-import { getMRTTheme } from '../style.utils';
-import { type MRT_RowData, type MRT_TableInstance } from '../types';
+import { type MRT_RowData, type MRT_TableInstance } from '../../types';
+import { getMRTTheme } from '../../utils/style.utils';
+import { parseFromValuesOrFunc } from '../../utils/utils';
 
 interface Props<TData extends MRT_RowData> extends CircularProgressProps {
   table: MRT_TableInstance<TData>;

package/src/{table → components/table}/MRT_TablePaper.tsx

@@ -1,10 +1,10 @@
 import Paper, { type PaperProps } from '@mui/material/Paper';
 import { MRT_TableContainer } from './MRT_TableContainer';
-import { parseFromValuesOrFunc } from '../column.utils';
-import { getMRTTheme } from '../style.utils';
+import { type MRT_RowData, type MRT_TableInstance } from '../../types';
+import { getMRTTheme } from '../../utils/style.utils';
+import { parseFromValuesOrFunc } from '../../utils/utils';
 import { MRT_BottomToolbar } from '../toolbar/MRT_BottomToolbar';
 import { MRT_TopToolbar } from '../toolbar/MRT_TopToolbar';
-import { type MRT_RowData, type MRT_TableInstance } from '../types';
 
 interface Props<TData extends MRT_RowData> extends PaperProps {
   table: MRT_TableInstance<TData>;

package/src/{toolbar → components/toolbar}/MRT_BottomToolbar.tsx

@@ -5,9 +5,9 @@ import { MRT_LinearProgressBar } from './MRT_LinearProgressBar';
 import { MRT_TablePagination } from './MRT_TablePagination';
 import { MRT_ToolbarAlertBanner } from './MRT_ToolbarAlertBanner';
 import { MRT_ToolbarDropZone } from './MRT_ToolbarDropZone';
-import { parseFromValuesOrFunc } from '../column.utils';
-import { getCommonToolbarStyles } from '../style.utils';
-import { type MRT_RowData, type MRT_TableInstance } from '../types';
+import { type MRT_RowData, type MRT_TableInstance } from '../../types';
+import { getCommonToolbarStyles } from '../../utils/style.utils';
+import { parseFromValuesOrFunc } from '../../utils/utils';
 
 interface Props<TData extends MRT_RowData> extends BoxProps {
   table: MRT_TableInstance<TData>;

package/src/{toolbar → components/toolbar}/MRT_LinearProgressBar.tsx

@@ -2,8 +2,8 @@ import Collapse from '@mui/material/Collapse';
 import LinearProgress, {
   type LinearProgressProps,
 } from '@mui/material/LinearProgress';
-import { parseFromValuesOrFunc } from '../column.utils';
-import { type MRT_RowData, type MRT_TableInstance } from '../types';
+import { type MRT_RowData, type MRT_TableInstance } from '../../types';
+import { parseFromValuesOrFunc } from '../../utils/utils';
 
 interface Props<TData extends MRT_RowData> extends LinearProgressProps {
   isTopToolbar: boolean;

package/src/{toolbar → components/toolbar}/MRT_TablePagination.tsx

@@ -8,9 +8,9 @@ import Select, { type SelectProps } from '@mui/material/Select';
 import Tooltip from '@mui/material/Tooltip';
 import Typography from '@mui/material/Typography';
 import { useTheme } from '@mui/material/styles';
-import { parseFromValuesOrFunc } from '../column.utils';
-import { flipIconStyles, getCommonTooltipProps } from '../style.utils';
-import { type MRT_RowData, type MRT_TableInstance } from '../types';
+import { type MRT_RowData, type MRT_TableInstance } from '../../types';
+import { flipIconStyles, getCommonTooltipProps } from '../../utils/style.utils';
+import { parseFromValuesOrFunc } from '../../utils/utils';
 
 const defaultRowsPerPage = [5, 10, 15, 20, 25, 30, 50, 100];
 

package/src/{toolbar → components/toolbar}/MRT_ToolbarAlertBanner.tsx

@@ -5,9 +5,9 @@ import Box from '@mui/material/Box';
 import Chip from '@mui/material/Chip';
 import Collapse from '@mui/material/Collapse';
 import Stack from '@mui/material/Stack';
-import { parseFromValuesOrFunc } from '../column.utils';
+import { type MRT_RowData, type MRT_TableInstance } from '../../types';
+import { parseFromValuesOrFunc } from '../../utils/utils';
 import { MRT_SelectCheckbox } from '../inputs/MRT_SelectCheckbox';
-import { type MRT_RowData, type MRT_TableInstance } from '../types';
 
 interface Props<TData extends MRT_RowData> extends AlertProps {
   stackAlertBanner?: boolean;
@@ -139,7 +139,7 @@ export const MRT_ToolbarAlertBanner = <TData extends MRT_RowData>({
                 {enableRowSelection &&
                   enableSelectAll &&
                   positionToolbarAlertBanner === 'head-overlay' && (
-                    <MRT_SelectCheckbox selectAll table={table} />
+                    <MRT_SelectCheckbox table={table} />
                   )}{' '}
                 {selectedAlert}
               </Box>

package/src/{toolbar → components/toolbar}/MRT_ToolbarDropZone.tsx

@@ -3,8 +3,8 @@ import Box, { type BoxProps } from '@mui/material/Box';
 import Fade from '@mui/material/Fade';
 import Typography from '@mui/material/Typography';
 import { alpha } from '@mui/material/styles';
-import { parseFromValuesOrFunc } from '../column.utils';
-import { type MRT_RowData, type MRT_TableInstance } from '../types';
+import { type MRT_RowData, type MRT_TableInstance } from '../../types';
+import { parseFromValuesOrFunc } from '../../utils/utils';
 
 interface Props<TData extends MRT_RowData> extends BoxProps {
   table: MRT_TableInstance<TData>;

package/src/{toolbar → components/toolbar}/MRT_ToolbarInternalButtons.tsx

@@ -1,11 +1,11 @@
 import Box, { type BoxProps } from '@mui/material/Box';
+import { type MRT_RowData, type MRT_TableInstance } from '../../types';
+import { parseFromValuesOrFunc } from '../../utils/utils';
 import { MRT_ShowHideColumnsButton } from '../buttons/MRT_ShowHideColumnsButton';
 import { MRT_ToggleDensePaddingButton } from '../buttons/MRT_ToggleDensePaddingButton';
 import { MRT_ToggleFiltersButton } from '../buttons/MRT_ToggleFiltersButton';
 import { MRT_ToggleFullScreenButton } from '../buttons/MRT_ToggleFullScreenButton';
 import { MRT_ToggleGlobalFilterButton } from '../buttons/MRT_ToggleGlobalFilterButton';
-import { parseFromValuesOrFunc } from '../column.utils';
-import { type MRT_RowData, type MRT_TableInstance } from '../types';
 
 interface Props<TData extends MRT_RowData> extends BoxProps {
   table: MRT_TableInstance<TData>;

package/src/{toolbar → components/toolbar}/MRT_TopToolbar.tsx

@@ -5,10 +5,10 @@ import { MRT_TablePagination } from './MRT_TablePagination';
 import { MRT_ToolbarAlertBanner } from './MRT_ToolbarAlertBanner';
 import { MRT_ToolbarDropZone } from './MRT_ToolbarDropZone';
 import { MRT_ToolbarInternalButtons } from './MRT_ToolbarInternalButtons';
-import { parseFromValuesOrFunc } from '../column.utils';
+import { type MRT_RowData, type MRT_TableInstance } from '../../types';
+import { getCommonToolbarStyles } from '../../utils/style.utils';
+import { parseFromValuesOrFunc } from '../../utils/utils';
 import { MRT_GlobalFilterTextField } from '../inputs/MRT_GlobalFilterTextField';
-import { getCommonToolbarStyles } from '../style.utils';
-import { type MRT_RowData, type MRT_TableInstance } from '../types';
 
 interface Props<TData extends MRT_RowData> {
   table: MRT_TableInstance<TData>;

package/src/{filterFns.ts → fns/filterFns.ts}

@@ -4,7 +4,7 @@ import {
   rankings,
 } from '@tanstack/match-sorter-utils';
 import { type Row, filterFns } from '@tanstack/react-table';
-import { type MRT_RowData } from './types';
+import { type MRT_RowData } from '../types';
 
 const fuzzy = <TData extends MRT_RowData>(
   row: Row<TData>,

package/src/{sortingFns.ts → fns/sortingFns.ts}

@@ -1,6 +1,6 @@
 import { type RankingInfo, compareItems } from '@tanstack/match-sorter-utils';
 import { type Row, sortingFns } from '@tanstack/react-table';
-import { type MRT_Row, type MRT_RowData } from './types';
+import { type MRT_Row, type MRT_RowData } from '../types';
 
 const fuzzy = <TData extends MRT_RowData>(
   rowA: Row<TData>,

package/src/hooks/display-columns/getMRT_DisplayColumns.tsx

@@ -0,0 +1,26 @@
+import {
+  type MRT_ColumnDef,
+  type MRT_RowData,
+  type MRT_StatefulTableOptions,
+} from '../../types';
+import { getMRT_RowActionsColumnDef } from './getMRT_RowActionsColumnDef';
+import { getMRT_RowDragColumnDef } from './getMRT_RowDragColumnDef';
+import { getMRT_RowExpandColumnDef } from './getMRT_RowExpandColumnDef';
+import { getMRT_RowNumbersColumnDef } from './getMRT_RowNumbersColumnDef';
+import { getMRT_RowPinningColumnDef } from './getMRT_RowPinningColumnDef';
+import { getMRT_RowSelectColumnDef } from './getMRT_RowSelectColumnDef';
+import { getMRT_RowSpacerColumnDef } from './getMRT_RowSpacerColumnDef';
+
+export const getMRT_DisplayColumns = <TData extends MRT_RowData>(
+  tableOptions: MRT_StatefulTableOptions<TData>,
+): MRT_ColumnDef<TData>[] => {
+  return [
+    getMRT_RowNumbersColumnDef(tableOptions),
+    getMRT_RowSelectColumnDef(tableOptions),
+    getMRT_RowExpandColumnDef(tableOptions),
+    getMRT_RowActionsColumnDef(tableOptions),
+    getMRT_RowDragColumnDef(tableOptions),
+    getMRT_RowPinningColumnDef(tableOptions),
+    getMRT_RowSpacerColumnDef(tableOptions),
+  ].filter(Boolean) as MRT_ColumnDef<TData>[];
+};

package/src/hooks/display-columns/getMRT_RowActionsColumnDef.tsx

@@ -0,0 +1,35 @@
+import { MRT_ToggleRowActionMenuButton } from '../../components/buttons/MRT_ToggleRowActionMenuButton';
+import {
+  type MRT_ColumnDef,
+  type MRT_RowData,
+  type MRT_StatefulTableOptions,
+} from '../../types';
+import {
+  defaultDisplayColumnProps,
+  showRowActionsColumn,
+} from '../../utils/displayColumn.utils';
+
+export const getMRT_RowActionsColumnDef = <TData extends MRT_RowData>(
+  tableOptions: MRT_StatefulTableOptions<TData>,
+): MRT_ColumnDef<TData> | null => {
+  if (!showRowActionsColumn(tableOptions)) {
+    return null;
+  }
+
+  return {
+    Cell: ({ cell, row, staticRowIndex, table }) => (
+      <MRT_ToggleRowActionMenuButton
+        cell={cell}
+        row={row}
+        staticRowIndex={staticRowIndex}
+        table={table}
+      />
+    ),
+    ...defaultDisplayColumnProps({
+      header: 'actions',
+      id: 'mrt-row-actions',
+      size: 70,
+      tableOptions,
+    }),
+  };
+};

package/src/hooks/display-columns/getMRT_RowDragColumnDef.tsx

@@ -0,0 +1,36 @@
+import { type RefObject } from 'react';
+import { MRT_TableBodyRowGrabHandle } from '../../components/body/MRT_TableBodyRowGrabHandle';
+import {
+  type MRT_ColumnDef,
+  type MRT_RowData,
+  type MRT_StatefulTableOptions,
+} from '../../types';
+import {
+  defaultDisplayColumnProps,
+  showRowDragColumn,
+} from '../../utils/displayColumn.utils';
+
+export const getMRT_RowDragColumnDef = <TData extends MRT_RowData>(
+  tableOptions: MRT_StatefulTableOptions<TData>,
+): MRT_ColumnDef<TData> | null => {
+  if (!showRowDragColumn(tableOptions)) {
+    return null;
+  }
+
+  return {
+    Cell: ({ row, rowRef, table }) => (
+      <MRT_TableBodyRowGrabHandle
+        row={row}
+        rowRef={rowRef as RefObject<HTMLTableRowElement>}
+        table={table}
+      />
+    ),
+    grow: false,
+    ...defaultDisplayColumnProps({
+      header: 'move',
+      id: 'mrt-row-drag',
+      size: 60,
+      tableOptions,
+    }),
+  };
+};

package/src/hooks/display-columns/getMRT_RowExpandColumnDef.tsx

@@ -0,0 +1,98 @@
+import { type ReactNode } from 'react';
+import Stack from '@mui/material/Stack';
+import Tooltip from '@mui/material/Tooltip';
+import { MRT_ExpandAllButton } from '../../components/buttons/MRT_ExpandAllButton';
+import { MRT_ExpandButton } from '../../components/buttons/MRT_ExpandButton';
+import {
+  type MRT_ColumnDef,
+  type MRT_RowData,
+  type MRT_StatefulTableOptions,
+} from '../../types';
+import {
+  defaultDisplayColumnProps,
+  showRowExpandColumn,
+} from '../../utils/displayColumn.utils';
+import { getCommonTooltipProps } from '../../utils/style.utils';
+
+export const getMRT_RowExpandColumnDef = <TData extends MRT_RowData>(
+  tableOptions: MRT_StatefulTableOptions<TData>,
+): MRT_ColumnDef<TData> | null => {
+  if (!showRowExpandColumn(tableOptions)) {
+    return null;
+  }
+
+  const {
+    defaultColumn,
+    enableExpandAll,
+    groupedColumnMode,
+    positionExpandColumn,
+    renderDetailPanel,
+    state: { grouping },
+  } = tableOptions;
+
+  const alignProps =
+    positionExpandColumn === 'last'
+      ? ({
+          align: 'right',
+        } as const)
+      : undefined;
+
+  return {
+    Cell: ({ cell, column, row, staticRowIndex, table }) => {
+      const expandButtonProps = { row, staticRowIndex, table };
+      const subRowsLength = row.subRows?.length;
+      if (groupedColumnMode === 'remove' && row.groupingColumnId) {
+        return (
+          <Stack alignItems="center" flexDirection="row" gap="0.25rem">
+            <MRT_ExpandButton {...expandButtonProps} />
+            <Tooltip
+              {...getCommonTooltipProps('right')}
+              title={table.getColumn(row.groupingColumnId).columnDef.header}
+            >
+              <span>{row.groupingValue as ReactNode}</span>
+            </Tooltip>
+            {!!subRowsLength && <span>({subRowsLength})</span>}
+          </Stack>
+        );
+      } else {
+        return (
+          <>
+            <MRT_ExpandButton {...expandButtonProps} />
+            {column.columnDef.GroupedCell?.({ cell, column, row, table })}
+          </>
+        );
+      }
+    },
+    Header: enableExpandAll
+      ? ({ table }) => {
+          return (
+            <>
+              <MRT_ExpandAllButton table={table} />
+              {groupedColumnMode === 'remove' &&
+                grouping
+                  ?.map(
+                    (groupedColumnId) =>
+                      table.getColumn(groupedColumnId).columnDef.header,
+                  )
+                  ?.join(', ')}
+            </>
+          );
+        }
+      : undefined,
+    muiTableBodyCellProps: alignProps,
+    muiTableHeadCellProps: alignProps,
+    ...defaultDisplayColumnProps({
+      header: 'expand',
+      id: 'mrt-row-expand',
+      size:
+        groupedColumnMode === 'remove'
+          ? defaultColumn?.size ?? 180
+          : renderDetailPanel
+            ? enableExpandAll
+              ? 60
+              : 70
+            : 100,
+      tableOptions,
+    }),
+  };
+};