material-react-table 0.8.12 → 0.8.15

package/dist/menus/MRT_ShowHideColumnsMenuItems.d.ts

@@ -1,6 +1,7 @@
 import { FC } from 'react';
 import type { MRT_Column, MRT_TableInstance } from '..';
 interface Props {
+    allColumns: MRT_Column[];
     column: MRT_Column;
     isSubMenu?: boolean;
     tableInstance: MRT_TableInstance;

package/dist/table/MRT_TableRoot.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { MaterialReactTableProps } from '../MaterialReactTable';
 export declare const MRT_TableRoot: <D extends Record<string, any> = {}>(props: MaterialReactTableProps<D>) => JSX.Element;

package/dist/utils.d.ts

@@ -1,5 +1,5 @@
-import { ColumnDef, Table } from '@tanstack/react-table';
-import { MRT_ColumnDef, MRT_FilterFn } from '.';
+import { ColumnDef, ColumnOrderState, Table, Updater } from '@tanstack/react-table';
+import { MRT_Column, MRT_ColumnDef, MRT_FilterFn } from '.';
 export declare const getAllLeafColumnDefs: (columns: MRT_ColumnDef[]) => MRT_ColumnDef[];
 export declare const createGroup: <D extends Record<string, any> = {}>(table: Table<D>, column: MRT_ColumnDef<D>, currentFilterFns: {
     [key: string]: MRT_FilterFn<{}>;
@@ -7,6 +7,7 @@ export declare const createGroup: <D extends Record<string, any> = {}>(table: Ta
 export declare const createDataColumn: <D extends Record<string, any> = {}>(table: Table<D>, column: MRT_ColumnDef<D>, currentFilterFns: {
     [key: string]: MRT_FilterFn<{}>;
 }) => ColumnDef<D>;
-export declare const createDisplayColumn: <D extends Record<string, any> = {}>(table: Table<D>, column: Pick<MRT_ColumnDef<D>, "footer" | "columns" | "filterFn" | "id" | "accessorKey" | "accessorFn" | "cell" | "meta" | "enableHiding" | "enablePinning" | "enableColumnFilter" | "enableGlobalFilter" | "sortingFn" | "sortDescFirst" | "enableSorting" | "enableMultiSort" | "invertSorting" | "sortUndefined" | "aggregationFn" | "aggregatedCell" | "enableGrouping" | "enableResizing" | "size" | "minSize" | "maxSize" | "Edit" | "Filter" | "Footer" | "Header" | "Cell" | "enableClickToCopy" | "enableColumnActions" | "enableColumnOrdering" | "enableEditing" | "enabledColumnFilterOptions" | "filterSelectOptions" | "muiTableBodyCellCopyButtonProps" | "muiTableBodyCellEditTextFieldProps" | "muiTableBodyCellProps" | "muiTableFooterCellProps" | "muiTableHeadCellColumnActionsButtonProps" | "muiTableHeadCellFilterTextFieldProps" | "muiTableHeadCellProps" | "onCellEditBlur" | "onCellEditChange" | "onColumnFilterValueChange"> & {
+export declare const createDisplayColumn: <D extends Record<string, any> = {}>(table: Table<D>, column: Pick<MRT_ColumnDef<D>, "accessorFN" | "footer" | "columns" | "filterFn" | "id" | "accessorKey" | "accessorFn" | "cell" | "meta" | "enableHiding" | "enablePinning" | "enableColumnFilter" | "enableGlobalFilter" | "sortingFn" | "sortDescFirst" | "enableSorting" | "enableMultiSort" | "invertSorting" | "sortUndefined" | "aggregationFn" | "aggregatedCell" | "enableGrouping" | "enableResizing" | "size" | "minSize" | "maxSize" | "Edit" | "Filter" | "Footer" | "Header" | "Cell" | "enableClickToCopy" | "enableColumnActions" | "enableColumnOrdering" | "enableEditing" | "enabledColumnFilterOptions" | "filterSelectOptions" | "muiTableBodyCellCopyButtonProps" | "muiTableBodyCellEditTextFieldProps" | "muiTableBodyCellProps" | "muiTableFooterCellProps" | "muiTableHeadCellColumnActionsButtonProps" | "muiTableHeadCellFilterTextFieldProps" | "muiTableHeadCellProps" | "onCellEditBlur" | "onCellEditChange" | "onColumnFilterValueChange"> & {
     header?: string | undefined;
 }) => ColumnDef<D>;
+export declare const reorderColumn: (movingColumn: MRT_Column, receivingColumn: MRT_Column, columnOrder: ColumnOrderState, setColumnOrder: (updater: Updater<ColumnOrderState>) => void) => void;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.8.12",
+  "version": "0.8.15",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material UI implementation of TanStack React Table, inspired by material-table and the MUI X DataGrid, written from the ground up in TypeScript.",

package/src/MaterialReactTable.tsx

@@ -80,11 +80,14 @@ export type MRT_TableInstance<D extends Record<string, any> = {}> = Omit<
   | 'getAllColumns'
   | 'getAllFlatColumns'
   | 'getAllLeafColumns'
+  | 'getCenterLeafColumns'
   | 'getColumn'
   | 'getExpandedRowModel'
   | 'getFlatHeaders'
+  | 'getLeftLeafColumns'
   | 'getPaginationRowModel'
   | 'getPrePaginationRowModel'
+  | 'getRightLeafColumns'
   | 'getRowModel'
   | 'getSelectedRowModel'
   | 'getState'
@@ -93,11 +96,14 @@ export type MRT_TableInstance<D extends Record<string, any> = {}> = Omit<
   getAllColumns: () => MRT_Column<D>[];
   getAllFlatColumns: () => MRT_Column<D>[];
   getAllLeafColumns: () => MRT_Column<D>[];
+  getCenterLeafColumns: () => MRT_Column<D>[];
   getColumn: (columnId: string) => MRT_Column<D>;
   getExpandedRowModel: () => MRT_RowModel<D>;
   getFlatHeaders: () => MRT_Header<D>[];
+  getLeftLeafColumns: () => MRT_Column<D>[];
   getPaginationRowModel: () => MRT_RowModel<D>;
   getPrePaginationRowModel: () => MRT_RowModel<D>;
+  getRightLeafColumns: () => MRT_Column<D>[];
   getRowModel: () => MRT_RowModel<D>;
   getSelectedRowModel: () => MRT_RowModel<D>;
   getState: () => MRT_TableState<D>;
@@ -760,6 +766,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
         IconButtonProps & { tableInstance: MRT_TableInstance<D> }
       >;
     }) => ReactNode;
+    selectAllMode?: 'all' | 'page';
   };
 
 export default <D extends Record<string, any> = {}>({
@@ -796,6 +803,7 @@ export default <D extends Record<string, any> = {}>({
   positionPagination = 'bottom',
   positionToolbarActions = 'top',
   positionToolbarAlertBanner = 'top',
+  selectAllMode = 'all',
   ...rest
 }: MaterialReactTableProps<D>) => (
   <MRT_TableRoot
@@ -832,6 +840,7 @@ export default <D extends Record<string, any> = {}>({
     positionPagination={positionPagination}
     positionToolbarActions={positionToolbarActions}
     positionToolbarAlertBanner={positionToolbarAlertBanner}
+    selectAllMode={selectAllMode}
     {...rest}
   />
 );

package/src/body/MRT_TableBodyCell.tsx

@@ -1,8 +1,10 @@
 import React, { FC, MouseEvent, useMemo } from 'react';
+import { useDrop } from 'react-dnd';
 import { alpha, darken, lighten, Skeleton, TableCell } from '@mui/material';
 import { MRT_EditCellTextField } from '../inputs/MRT_EditCellTextField';
-import type { MRT_Cell, MRT_TableInstance } from '..';
 import { MRT_CopyButton } from '../buttons/MRT_CopyButton';
+import { reorderColumn } from '../utils';
+import type { MRT_Cell, MRT_Column, MRT_TableInstance } from '..';
 
 interface Props {
   cell: MRT_Cell;
@@ -20,16 +22,19 @@ export const MRT_TableBodyCell: FC<Props> = ({
     options: {
       editingMode,
       enableClickToCopy,
+      enableColumnOrdering,
       enableEditing,
       idPrefix,
       muiTableBodyCellProps,
       muiTableBodyCellSkeletonProps,
       onCellClick,
     },
+    setColumnOrder,
     setCurrentEditingCell,
   } = tableInstance;
 
   const {
+    columnOrder,
     currentEditingCell,
     currentEditingRow,
     isDensePadding,
@@ -41,6 +46,12 @@ export const MRT_TableBodyCell: FC<Props> = ({
 
   const { columnDef, columnDefType } = column;
 
+  const [, dropRef] = useDrop({
+    accept: 'column',
+    drop: (movingColumn: MRT_Column) =>
+      reorderColumn(movingColumn, column, columnOrder, setColumnOrder),
+  });
+
   const mTableCellBodyProps =
     muiTableBodyCellProps instanceof Function
       ? muiTableBodyCellProps({ cell, tableInstance })
@@ -121,6 +132,9 @@ export const MRT_TableBodyCell: FC<Props> = ({
       }
       onDoubleClick={handleDoubleClick}
       {...tableCellProps}
+      ref={
+        columnDefType === 'data' && enableColumnOrdering ? dropRef : undefined
+      }
       sx={(theme) => ({
         backgroundColor: column.getIsPinned()
           ? alpha(lighten(theme.palette.background.default, 0.04), 0.95)

package/src/buttons/MRT_ColumnPinningButtons.tsx

@@ -23,7 +23,7 @@ export const MRT_ColumnPinningButtons: FC<Props> = ({
   };
 
   return (
-    <Box sx={{ mr: '8px' }}>
+    <Box sx={{ minWidth: '70px', textAlign: 'center' }}>
       {column.getIsPinned() ? (
         <Tooltip arrow title={localization.unpin}>
           <IconButton onClick={() => handlePinColumn(false)} size="small">

package/src/{head/MRT_TableHeadCellGrabHandle.tsx → buttons/MRT_GrabHandleButton.tsx}

@@ -1,14 +1,13 @@
 import { IconButton, Tooltip } from '@mui/material';
 import React, { FC, forwardRef, Ref } from 'react';
-import { MRT_Header, MRT_TableInstance } from '..';
+import { MRT_TableInstance } from '..';
 
 interface Props {
-  header: MRT_Header;
   ref: Ref<HTMLButtonElement>;
   tableInstance: MRT_TableInstance;
 }
 
-export const MRT_TableHeadCellGrabHandle: FC<Props> = forwardRef(
+export const MRT_GrabHandleButton: FC<Props> = forwardRef(
   ({ tableInstance }, ref) => {
     const {
       options: {

package/src/footer/MRT_TableFooterCell.tsx

@@ -59,12 +59,12 @@ export const MRT_TableFooterCell: FC<Props> = ({ footer, tableInstance }) => {
       <>
         {footer.isPlaceholder
           ? null
-          : columnDef.Footer instanceof Function
-          ? columnDef.Footer?.({
-              footer,
-              tableInstance,
-            })
-          : columnDef.Footer ??
+          : (columnDef.Footer instanceof Function
+              ? columnDef.Footer?.({
+                  footer,
+                  tableInstance,
+                })
+              : columnDef.Footer) ??
             columnDef.footer ??
             footer.renderFooter() ??
             null}

package/src/head/MRT_DraggableTableHeadCell.tsx

@@ -1,7 +1,8 @@
 import React, { FC } from 'react';
 import { useDrag, useDrop } from 'react-dnd';
 import { MRT_TableHeadCell } from './MRT_TableHeadCell';
-import type { MRT_Header, MRT_TableInstance } from '..';
+import type { MRT_Column, MRT_Header, MRT_TableInstance } from '..';
+import { reorderColumn } from '../utils';
 
 interface Props {
   header: MRT_Header;
@@ -20,30 +21,20 @@ export const MRT_DraggableTableHeadCell: FC<Props> = ({
 
   const { columnOrder } = getState();
 
-  const reorder = (movingHeader: MRT_Header, receivingHeader: MRT_Header) => {
-    if (movingHeader.column.getCanPin()) {
-      movingHeader.column.pin(receivingHeader.column.getIsPinned());
-    }
-    const { index: currentIndex } = movingHeader;
-    columnOrder.splice(
-      receivingHeader.index,
-      0,
-      columnOrder.splice(currentIndex, 1)[0],
-    );
-    setColumnOrder([...columnOrder]);
-  };
+  const { column } = header;
 
   const [, dropRef] = useDrop({
-    accept: 'header',
-    drop: (movingHeader: MRT_Header) => reorder(movingHeader, header),
+    accept: 'column',
+    drop: (movingColumn: MRT_Column) =>
+      reorderColumn(movingColumn, column, columnOrder, setColumnOrder),
   });
 
   const [{ isDragging }, dragRef, previewRef] = useDrag({
     collect: (monitor) => ({
       isDragging: monitor.isDragging(),
     }),
-    item: () => header,
-    type: 'header',
+    item: () => column,
+    type: 'column',
   });
 
   return (

package/src/head/MRT_TableHeadCell.tsx

@@ -2,7 +2,7 @@ import React, { FC, ReactNode, Ref } from 'react';
 import { Box, TableCell, Theme, alpha, lighten } from '@mui/material';
 import { MRT_TableHeadCellFilterContainer } from './MRT_TableHeadCellFilterContainer';
 import { MRT_TableHeadCellFilterLabel } from './MRT_TableHeadCellFilterLabel';
-import { MRT_TableHeadCellGrabHandle } from './MRT_TableHeadCellGrabHandle';
+import { MRT_GrabHandleButton } from '../buttons/MRT_GrabHandleButton';
 import { MRT_TableHeadCellResizeHandle } from './MRT_TableHeadCellResizeHandle';
 import { MRT_TableHeadCellSortLabel } from './MRT_TableHeadCellSortLabel';
 import { MRT_ToggleColumnActionMenuButton } from '../buttons/MRT_ToggleColumnActionMenuButton';
@@ -58,14 +58,14 @@ export const MRT_TableHeadCell: FC<Props> = ({
     ...mcTableHeadCellProps,
   };
 
-  const headerElement = (
-    columnDef?.Header instanceof Function
-      ? columnDef?.Header?.({
-          header,
-          tableInstance,
-        })
-      : columnDef?.Header ?? header.renderHeader()
-  ) as ReactNode;
+  const headerElement = ((columnDef?.Header instanceof Function
+    ? columnDef?.Header?.({
+        header,
+        tableInstance,
+      })
+    : columnDef?.Header) ??
+    header.renderHeader() ??
+    columnDef.header) as ReactNode;
 
   const getIsLastLeftPinnedColumn = () => {
     return (
@@ -92,7 +92,9 @@ export const MRT_TableHeadCell: FC<Props> = ({
       align={columnDefType === 'group' ? 'center' : 'left'}
       colSpan={header.colSpan}
       {...tableCellProps}
-      ref={columnDefType === 'data' ? dropRef : undefined}
+      ref={
+        columnDefType === 'data' && enableColumnOrdering ? dropRef : undefined
+      }
       sx={(theme: Theme) => ({
         backgroundColor:
           column.getIsPinned() && columnDefType !== 'group'
@@ -123,7 +125,7 @@ export const MRT_TableHeadCell: FC<Props> = ({
           column.getIsPinned() && columnDefType !== 'group'
             ? 'sticky'
             : undefined,
-        pt: columnDefType !== 'data' ? 0 : isDensePadding ? '0.25' : '.5rem',
+        pt: columnDefType !== 'data' ? 0 : isDensePadding ? '0.25' : '.75rem',
         right:
           column.getIsPinned() === 'right' ? `${getTotalRight()}px` : undefined,
         transition: `all ${enableColumnResizing ? 0 : '0.2s'} ease-in-out`,
@@ -190,8 +192,7 @@ export const MRT_TableHeadCell: FC<Props> = ({
               ((enableColumnOrdering &&
                 columnDef.enableColumnOrdering !== false) ||
                 (enableGrouping && columnDef.enableGrouping !== false)) && (
-                <MRT_TableHeadCellGrabHandle
-                  header={header}
+                <MRT_GrabHandleButton
                   ref={dragRef as Ref<HTMLButtonElement>}
                   tableInstance={tableInstance}
                 />

package/src/inputs/MRT_SelectCheckbox.tsx

@@ -22,6 +22,7 @@ export const MRT_SelectCheckbox: FC<Props> = ({
       muiSelectCheckboxProps,
       onSelectChange,
       onSelectAllChange,
+      selectAllMode,
     },
   } = tableInstance;
 
@@ -29,7 +30,11 @@ export const MRT_SelectCheckbox: FC<Props> = ({
 
   const handleSelectChange = (event: ChangeEvent<HTMLInputElement>) => {
     if (selectAll) {
-      tableInstance.getToggleAllRowsSelectedHandler()(event as any);
+      if (selectAllMode === 'all') {
+        tableInstance.getToggleAllRowsSelectedHandler()(event as any);
+      } else if (selectAllMode === 'page') {
+        tableInstance.getToggleAllPageRowsSelectedHandler()(event as any);
+      }
       onSelectAllChange?.({
         event,
         selectedRows: event.target.checked ? getRowModel().flatRows : [],

package/src/menus/MRT_ShowHideColumnsMenu.tsx

@@ -19,9 +19,12 @@ export const MRT_ShowHideColumnsMenu: FC<Props> = ({
   const {
     getAllColumns,
     getAllLeafColumns,
+    getCenterLeafColumns,
     getIsAllColumnsVisible,
     getIsSomeColumnsPinned,
     getIsSomeColumnsVisible,
+    getLeftLeafColumns,
+    getRightLeafColumns,
     getState,
     toggleAllColumnsVisible,
     options: { localization, enablePinning, enableColumnOrdering },
@@ -41,13 +44,23 @@ export const MRT_ShowHideColumnsMenu: FC<Props> = ({
       columnOrder.length > 0 &&
       !columns.some((col) => col.columnDefType === 'group')
     ) {
-      return (
-        columnOrder.map((colId) => columns.find((col) => col.id === colId)) ??
-        columns
-      );
+      return [
+        ...getLeftLeafColumns(),
+        ...[...new Set(columnOrder)].map((colId) =>
+          getCenterLeafColumns().find((col) => col?.id === colId),
+        ),
+        ...getRightLeafColumns(),
+      ].filter(Boolean);
     }
     return columns;
-  }, [getAllColumns(), columnOrder, columnPinning]) as MRT_Column[];
+  }, [
+    columnOrder,
+    columnPinning,
+    getAllColumns(),
+    getCenterLeafColumns(),
+    getLeftLeafColumns(),
+    getRightLeafColumns(),
+  ]) as MRT_Column[];
 
   return (
     <Menu
@@ -97,6 +110,7 @@ export const MRT_ShowHideColumnsMenu: FC<Props> = ({
       <Divider />
       {allColumns.map((column, index) => (
         <MRT_ShowHideColumnsMenuItems
+          allColumns={allColumns}
           column={column}
           isSubMenu={isSubMenu}
           key={`${index}-${column.id}`}

package/src/menus/MRT_ShowHideColumnsMenuItems.tsx

@@ -1,28 +1,48 @@
-import React, { FC } from 'react';
-import { FormControlLabel, MenuItem, Switch } from '@mui/material';
+import React, { FC, Ref } from 'react';
+import { useDrag, useDrop } from 'react-dnd';
+import { Box, FormControlLabel, MenuItem, Switch } from '@mui/material';
 import { MRT_ColumnPinningButtons } from '../buttons/MRT_ColumnPinningButtons';
+import { MRT_GrabHandleButton } from '../buttons/MRT_GrabHandleButton';
+import { reorderColumn } from '../utils';
 import type { MRT_Column, MRT_TableInstance } from '..';
 
 interface Props {
+  allColumns: MRT_Column[];
   column: MRT_Column;
   isSubMenu?: boolean;
   tableInstance: MRT_TableInstance;
 }
 
 export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
+  allColumns,
   column,
   isSubMenu,
   tableInstance,
 }) => {
   const {
     getState,
-    options: { onToggleColumnVisibility },
+    options: { enableColumnOrdering, onToggleColumnVisibility },
+    setColumnOrder,
   } = tableInstance;
 
-  const { columnVisibility } = getState();
+  const { columnOrder, columnVisibility } = getState();
 
   const { columnDef, columnDefType } = column;
 
+  const [, dropRef] = useDrop({
+    accept: 'column',
+    drop: (movingColumn: MRT_Column) =>
+      reorderColumn(movingColumn, column, columnOrder, setColumnOrder),
+  });
+
+  const [, dragRef, previewRef] = useDrag({
+    collect: (monitor) => ({
+      isDragging: monitor.isDragging(),
+    }),
+    item: () => column,
+    type: 'column',
+  });
+
   const switchChecked =
     (columnDefType !== 'group' && column.getIsVisible()) ||
     (columnDefType === 'group' &&
@@ -46,6 +66,7 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
   return (
     <>
       <MenuItem
+        ref={columnDefType === 'data' ? dropRef : undefined}
         sx={{
           alignItems: 'center',
           justifyContent: 'flex-start',
@@ -54,30 +75,53 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
           py: '6px',
         }}
       >
-        {!isSubMenu && column.getCanPin() && (
-          <MRT_ColumnPinningButtons
-            column={column}
-            tableInstance={tableInstance}
-          />
-        )}
-        <FormControlLabel
-          componentsProps={{
-            typography: {
-              sx: {
-                marginBottom: 0,
-                opacity: columnDefType !== 'display' ? 1 : 0.5,
-              },
-            },
+        <Box
+          ref={previewRef}
+          sx={{
+            display: 'flex',
+            flexWrap: 'nowrap',
+            gap: '8px',
           }}
-          checked={switchChecked}
-          control={<Switch />}
-          disabled={(isSubMenu && switchChecked) || !column.getCanHide()}
-          label={columnDef.header}
-          onChange={() => handleToggleColumnHidden(column)}
-        />
+        >
+          {columnDefType !== 'group' &&
+            enableColumnOrdering &&
+            columnDef.enableColumnOrdering !== false &&
+            !allColumns.some((col) => col.columnDefType === 'group') && (
+              <MRT_GrabHandleButton
+                ref={dragRef as Ref<HTMLButtonElement>}
+                tableInstance={tableInstance}
+              />
+            )}
+          {!isSubMenu && column.getCanPin() && (
+            <MRT_ColumnPinningButtons
+              column={column}
+              tableInstance={tableInstance}
+            />
+          )}
+          <FormControlLabel
+            componentsProps={{
+              typography: {
+                sx: {
+                  mb: 0,
+                  opacity: columnDefType !== 'display' ? 1 : 0.5,
+                },
+              },
+            }}
+            checked={switchChecked}
+            control={<Switch />}
+            disabled={
+              (isSubMenu && switchChecked) ||
+              !column.getCanHide() ||
+              column.getIsGrouped()
+            }
+            label={columnDef.header}
+            onChange={() => handleToggleColumnHidden(column)}
+          />
+        </Box>
       </MenuItem>
       {column.columns?.map((c: MRT_Column, i) => (
         <MRT_ShowHideColumnsMenuItems
+          allColumns={allColumns}
           key={`${i}-${c.id}`}
           column={c}
           isSubMenu={isSubMenu}

package/src/table/MRT_TableRoot.tsx

@@ -12,6 +12,7 @@ import {
   ReactTableGenerics,
   getFacetedRowModel,
   TableState,
+  Table,
 } from '@tanstack/react-table';
 import {
   MRT_Cell,
@@ -57,7 +58,8 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
     const initState = props.initialState ?? {};
 
     initState.columnOrder =
-      initState?.columnOrder ?? props.enableColumnOrdering
+      initState?.columnOrder ??
+      (props.enableColumnOrdering || props.enableGrouping)
         ? ([
             showActionColumn && 'mrt-row-actions',
             showExpandColumn && 'mrt-expand',
@@ -133,7 +135,25 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
     MRT_FILTER_OPTION | FilterFn<ReactTableGenerics> | string | number | symbol
   >(props.globalFilterFn ?? MRT_FILTER_OPTION.FUZZY);
 
-  const table = useMemo(() => createTable(), []);
+  const table = useMemo(
+    () =>
+      // @ts-ignore
+      createTable().setOptions({
+        //@ts-ignore
+        filterFns: defaultFilterFNs,
+        getCoreRowModel: getCoreRowModel(),
+        getExpandedRowModel: getExpandedRowModel(),
+        getFacetedRowModel: getFacetedRowModel(),
+        getFilteredRowModel: getFilteredRowModel(),
+        getGroupedRowModel: getGroupedRowModel(),
+        getPaginationRowModel: getPaginationRowModel(),
+        getSortedRowModel: getSortedRowModel(),
+        getSubRows: (row) => (row as MRT_Row)?.subRows,
+        idPrefix,
+        initialState,
+      }) as Table<D>,
+    [],
+  );
 
   const displayColumns = useMemo(
     () =>
@@ -148,6 +168,8 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
             ),
             header: props.localization?.actions,
             id: 'mrt-row-actions',
+            muiTableBodyCellProps: props.muiTableBodyCellProps,
+            muiTableHeadCellProps: props.muiTableHeadCellProps,
             size: 60,
           }),
         showExpandColumn &&
@@ -164,6 +186,8 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
               ) : null,
             header: props.localization?.expand,
             id: 'mrt-expand',
+            muiTableBodyCellProps: props.muiTableBodyCellProps,
+            muiTableHeadCellProps: props.muiTableHeadCellProps,
             size: 50,
           }),
         props.enableRowSelection &&
@@ -180,6 +204,8 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
               ) : null,
             header: props.localization?.select,
             id: 'mrt-select',
+            muiTableBodyCellProps: props.muiTableBodyCellProps,
+            muiTableHeadCellProps: props.muiTableHeadCellProps,
             size: 50,
           }),
         props.enableRowNumbers &&
@@ -188,6 +214,8 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
             Header: () => props.localization?.rowNumber,
             header: props.localization?.rowNumbers,
             id: 'mrt-row-numbers',
+            muiTableBodyCellProps: props.muiTableBodyCellProps,
+            muiTableHeadCellProps: props.muiTableHeadCellProps,
             size: 50,
           }),
       ].filter(Boolean),
@@ -238,24 +266,14 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
 
   //@ts-ignore
   const tableInstance = {
+    //@ts-ignore
     ...useTableInstance(table, {
-      filterFns: defaultFilterFNs,
-      getCoreRowModel: getCoreRowModel(),
-      getExpandedRowModel: getExpandedRowModel(),
-      getFacetedRowModel: getFacetedRowModel(),
-      getFilteredRowModel: getFilteredRowModel(),
-      getGroupedRowModel: getGroupedRowModel(),
-      getPaginationRowModel: getPaginationRowModel(),
-      getSortedRowModel: getSortedRowModel(),
-      getSubRows: (row) => (row as MRT_Row)?.subRows,
-      //@ts-ignore
-      globalFilterFn: currentGlobalFilterFn,
       ...props,
       //@ts-ignore
       columns,
       data,
-      idPrefix,
-      initialState,
+      //@ts-ignore
+      globalFilterFn: currentGlobalFilterFn,
       state: {
         currentEditingCell,
         currentEditingRow,

package/src/utils.ts

@@ -1,5 +1,10 @@
-import { ColumnDef, Table } from '@tanstack/react-table';
-import { MRT_ColumnDef, MRT_FilterFn } from '.';
+import {
+  ColumnDef,
+  ColumnOrderState,
+  Table,
+  Updater,
+} from '@tanstack/react-table';
+import { MRT_Column, MRT_ColumnDef, MRT_FilterFn, } from '.';
 import { MRT_FILTER_OPTION } from './enums';
 import { defaultFilterFNs } from './filtersFNs';
 
@@ -52,3 +57,20 @@ export const createDisplayColumn = <D extends Record<string, any> = {}>(
   table: Table<D>,
   column: Omit<MRT_ColumnDef<D>, 'header'> & { header?: string },
 ): ColumnDef<D> => table.createDisplayColumn(column as ColumnDef<D>);
+
+export const reorderColumn = (
+  movingColumn: MRT_Column,
+  receivingColumn: MRT_Column,
+  columnOrder: ColumnOrderState,
+  setColumnOrder: (updater: Updater<ColumnOrderState>) => void,
+) => {
+  if (movingColumn.getCanPin()) {
+    movingColumn.pin(receivingColumn.getIsPinned());
+  }
+  columnOrder.splice(
+    columnOrder.indexOf(receivingColumn.id),
+    0,
+    columnOrder.splice(columnOrder.indexOf(movingColumn.id), 1)[0],
+  );
+  setColumnOrder([...columnOrder]);
+};

package/dist/head/MRT_TableHeadCellGrabHandle.d.ts

@@ -1,9 +0,0 @@
-import { FC, Ref } from 'react';
-import { MRT_Header, MRT_TableInstance } from '..';
-interface Props {
-    header: MRT_Header;
-    ref: Ref<HTMLButtonElement>;
-    tableInstance: MRT_TableInstance;
-}
-export declare const MRT_TableHeadCellGrabHandle: FC<Props>;
-export {};