material-react-table 0.24.1 → 0.25.0

package/dist/MaterialReactTable.d.ts

@@ -7,13 +7,6 @@ import { MRT_Icons } from './icons';
 import { MRT_FilterFns } from './filtersFns';
 import { MRT_SortingFns } from './sortingFns';
 declare type LiteralUnion<T extends U, U = string> = T | (U & Record<never, never>);
-export declare type MRT_TableOptions<TData extends Record<string, any> = {}> = Partial<Omit<TableOptions<TData>, 'columns' | 'data' | 'initialState' | 'state' | 'expandRowsFn'>> & {
-    columns: MRT_ColumnDef<TData>[];
-    data: TData[];
-    expandRowsFn?: (dataRow: TData) => TData[];
-    initialState?: Partial<MRT_TableState<TData>>;
-    state?: Partial<MRT_TableState<TData>>;
-};
 export interface MRT_RowModel<TData extends Record<string, any> = {}> {
     flatRows: MRT_Row<TData>[];
     rows: MRT_Row<TData>[];
@@ -114,7 +107,7 @@ export declare type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit
      *
      * @example accessorKey: 'username'
      */
-    accessorKey?: LiteralUnion<string & keyof TData>;
+    accessorKey?: string & keyof TData;
     /**
      * Specify what type of column this is. Either `data`, `display`, or `group`. Defaults to `data`.
      * Leave this blank if you are just creating a normal data column.
@@ -229,6 +222,7 @@ export declare type MRT_SortingOption = keyof typeof MRT_SortingFns;
 export declare type MRT_SortingFn<TData extends Record<string, any> = {}> = SortingFn<TData> | MRT_SortingOption;
 export declare type MRT_FilterOption = keyof typeof MRT_FilterFns;
 export declare type MRT_FilterFn<TData extends Record<string, any> = {}> = FilterFn<TData> | MRT_FilterOption;
+export declare type MRT_DisplayColumnIds = 'mrt-row-drag' | 'mrt-row-actions' | 'mrt-row-expand' | 'mrt-row-select' | 'mrt-row-numbers';
 /**
  * `columns` and `data` props are the only required props, but there are over 150 other optional props.
  *
@@ -238,7 +232,12 @@ export declare type MRT_FilterFn<TData extends Record<string, any> = {}> = Filte
  * See the full props list on the official docs site:
  * @link https://www.material-react-table.com/docs/api/props
  */
-export declare type MaterialReactTableProps<TData extends Record<string, any> = {}> = MRT_TableOptions<TData> & {
+export declare type MaterialReactTableProps<TData extends Record<string, any> = {}> = Omit<Partial<TableOptions<TData>>, 'columns' | 'data' | 'initialState' | 'state' | 'expandRowsFn'> & {
+    displayColumnDefOptions?: Partial<{
+        [key in MRT_DisplayColumnIds]: Partial<MRT_ColumnDef>;
+    }>;
+    columns: MRT_ColumnDef<TData>[];
+    data: TData[];
     editingMode?: 'table' | 'row' | 'cell';
     enableClickToCopy?: boolean;
     enableColumnActions?: boolean;
@@ -266,7 +265,9 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
     enableToolbarTop?: boolean;
     enabledColumnFilterOptions?: (MRT_FilterOption | string)[] | null;
     enabledGlobalFilterOptions?: (MRT_FilterOption | string)[] | null;
+    expandRowsFn?: (dataRow: TData) => TData[];
     icons?: Partial<MRT_Icons>;
+    initialState?: Partial<MRT_TableState<TData>>;
     localization?: Partial<MRT_Localization>;
     muiExpandAllButtonProps?: IconButtonProps | (({ table }: {
         table: MRT_TableInstance<TData>;
@@ -305,13 +306,13 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
         table: MRT_TableInstance<TData>;
         cell: MRT_Cell<TData>;
     }) => SkeletonProps);
+    muiTableBodyProps?: TableBodyProps | (({ table }: {
+        table: MRT_TableInstance<TData>;
+    }) => TableBodyProps);
     muiTableBodyRowDragHandleProps?: IconButtonProps | (({ table, row, }: {
         table: MRT_TableInstance<TData>;
         row: MRT_Row<TData>;
     }) => IconButtonProps);
-    muiTableBodyProps?: TableBodyProps | (({ table }: {
-        table: MRT_TableInstance<TData>;
-    }) => TableBodyProps);
     muiTableBodyRowProps?: TableRowProps | (({ table, row, }: {
         table: MRT_TableInstance<TData>;
         row: MRT_Row<TData>;
@@ -400,11 +401,11 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
     onCurrentGlobalFilterFnChange?: OnChangeFn<MRT_FilterOption>;
     onCurrentHoveredColumnChange?: OnChangeFn<MRT_Column<TData> | null>;
     onCurrentHoveredRowChange?: OnChangeFn<MRT_Row<TData> | null>;
+    onDensityChange?: OnChangeFn<boolean>;
     onEditRowSubmit?: ({ row, table, }: {
         row: MRT_Row<TData>;
         table: MRT_TableInstance<TData>;
     }) => Promise<void> | void;
-    onDensityChange?: OnChangeFn<boolean>;
     onIsFullScreenChange?: OnChangeFn<boolean>;
     onRowDrop?: ({ event, draggedRow, targetRow, }: {
         event: DragEvent<HTMLButtonElement>;
@@ -434,9 +435,6 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
     renderToolbarBottomCustomActions?: ({ table, }: {
         table: MRT_TableInstance<TData>;
     }) => ReactNode;
-    renderToolbarTopCustomActions?: ({ table, }: {
-        table: MRT_TableInstance<TData>;
-    }) => ReactNode;
     renderToolbarInternalActions?: ({ table, MRT_ToggleGlobalFilterButton, MRT_ToggleFiltersButton, MRT_ShowHideColumnsButton, MRT_ToggleDensePaddingButton, MRT_FullScreenToggleButton, }: {
         table: MRT_TableInstance<TData>;
         MRT_ToggleGlobalFilterButton: FC<IconButtonProps & {
@@ -455,9 +453,13 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
             table: MRT_TableInstance<TData>;
         }>;
     }) => ReactNode;
+    renderToolbarTopCustomActions?: ({ table, }: {
+        table: MRT_TableInstance<TData>;
+    }) => ReactNode;
     rowCount?: number;
     rowNumberMode?: 'original' | 'static';
     selectAllMode?: 'all' | 'page';
+    state?: Partial<MRT_TableState<TData>>;
     tableId?: string;
     virtualizerProps?: Partial<VirtualizerOptions<HTMLDivElement>>;
 };

package/dist/material-react-table.cjs.development.js

@@ -1148,8 +1148,8 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     sx: commonMenuItemStyles$1
   }, React__default.createElement(material.Box, {
     sx: commonListItemStyles
-  }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(PushPinIcon, null)), localization.unpin))], enableColumnResizing && [React__default.createElement(material.MenuItem, {
-    disabled: !column.getCanResize() || !columnSizing[column.id],
+  }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(PushPinIcon, null)), localization.unpin))], enableColumnResizing && column.getCanResize() && [React__default.createElement(material.MenuItem, {
+    disabled: !columnSizing[column.id],
     key: 0,
     onClick: handleResetColumnSize,
     sx: commonMenuItemStyles$1
@@ -1365,19 +1365,7 @@ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
   var _getState = getState(),
       density = _getState.density;
 
-  var handleSelectChange = function handleSelectChange(event) {
-    if (selectAll) {
-      if (selectAllMode === 'all') {
-        table.getToggleAllRowsSelectedHandler()(event);
-      } else if (selectAllMode === 'page') {
-        table.getToggleAllPageRowsSelectedHandler()(event);
-      }
-    } else if (row) {
-      row == null ? void 0 : row.getToggleSelectedHandler()(event);
-    }
-  };
-
-  var checkboxProps = selectAll ? muiSelectAllCheckboxProps instanceof Function ? muiSelectAllCheckboxProps({
+  var checkboxProps = !row ? muiSelectAllCheckboxProps instanceof Function ? muiSelectAllCheckboxProps({
     table: table
   }) : muiSelectAllCheckboxProps : muiSelectCheckboxProps instanceof Function ? muiSelectCheckboxProps({
     row: row,
@@ -1394,12 +1382,13 @@ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
     inputProps: {
       'aria-label': selectAll ? localization.toggleSelectAll : localization.toggleSelectRow
     },
-    onChange: handleSelectChange,
+    onChange: !row ? selectAllMode === 'all' ? table.getToggleAllRowsSelectedHandler() : table.getToggleAllPageRowsSelectedHandler() : row.getToggleSelectedHandler(),
     size: density === 'compact' ? 'small' : 'medium'
   }, checkboxProps, {
     sx: _extends({
-      height: density === 'compact' ? '1.75rem' : '2.25rem',
-      width: density === 'compact' ? '1.75rem' : '2.25rem'
+      height: density === 'compact' ? '1.5rem' : '2rem',
+      width: density === 'compact' ? '1.5rem' : '2rem',
+      m: '-1re.m'
     }, checkboxProps == null ? void 0 : checkboxProps.sx)
   })));
 };
@@ -2103,16 +2092,16 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
       setFilterValue = _useState2[1];
 
   var handleChangeDebounced = React.useCallback(material.debounce(function (event) {
+    var value = textFieldProps.type === 'date' ? new Date(event.target.value) : event.target.value;
+
     if (inputIndex !== undefined) {
       column.setFilterValue(function (old) {
         var newFilterValues = old != null ? old : ['', ''];
-        newFilterValues[inputIndex] = event.target.value;
+        newFilterValues[inputIndex] = value;
         return newFilterValues;
       });
     } else {
-      var _event$target$value;
-
-      column.setFilterValue((_event$target$value = event.target.value) != null ? _event$target$value : undefined);
+      column.setFilterValue(value != null ? value : undefined);
     }
   }, 200), []);
 
@@ -2519,11 +2508,6 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
 
   var tableCellProps = _extends({}, mTableHeadCellProps, mcTableHeadCellProps);
 
-  var headerElement = (_ref2 = (columnDef == null ? void 0 : columnDef.Header) instanceof Function ? columnDef == null ? void 0 : columnDef.Header == null ? void 0 : columnDef.Header({
-    header: header,
-    table: table
-  }) : columnDef == null ? void 0 : columnDef.Header) != null ? _ref2 : columnDef.header;
-
   var getIsLastLeftPinnedColumn = function getIsLastLeftPinnedColumn() {
     return column.getIsPinned() === 'left' && table.getLeftLeafHeaders().length - 1 === column.getPinnedIndex();
   };
@@ -2538,17 +2522,21 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
 
   var handleDragEnter = function handleDragEnter(_e) {
     if (enableColumnOrdering && currentDraggingColumn) {
-      setCurrentHoveredColumn(columnDefType === 'data' ? column : null);
+      setCurrentHoveredColumn(columnDef.enableColumnOrdering !== false ? column : null);
     }
   };
 
-  var tableHeadCellRef = React__default.useRef(null);
   var draggingBorder = (currentDraggingColumn == null ? void 0 : currentDraggingColumn.id) === column.id ? "1px dashed " + theme.palette.divider : (currentHoveredColumn == null ? void 0 : currentHoveredColumn.id) === column.id ? "2px dashed " + theme.palette.primary.main : undefined;
   var draggingBorders = draggingBorder ? {
     borderLeft: draggingBorder,
     borderRight: draggingBorder,
     borderTop: draggingBorder
   } : undefined;
+  var headerElement = (_ref2 = (columnDef == null ? void 0 : columnDef.Header) instanceof Function ? columnDef == null ? void 0 : columnDef.Header == null ? void 0 : columnDef.Header({
+    header: header,
+    table: table
+  }) : columnDef == null ? void 0 : columnDef.Header) != null ? _ref2 : columnDef.header;
+  var tableHeadCellRef = React__default.useRef(null);
   return React__default.createElement(material.TableCell, Object.assign({
     align: columnDefType === 'group' ? 'center' : 'left',
     colSpan: header.colSpan,
@@ -2573,7 +2561,7 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
         right: column.getIsPinned() === 'right' ? getTotalRight() + "px" : undefined,
         transition: "all " + (enableColumnResizing ? 0 : '0.2s') + " ease-in-out",
         userSelect: enableMultiSort && column.getCanSort() ? 'none' : undefined,
-        verticalAlign: 'text-top',
+        verticalAlign: 'top',
         zIndex: column.getIsResizing() || (currentDraggingColumn == null ? void 0 : currentDraggingColumn.id) === column.id ? 3 : column.getIsPinned() && columnDefType !== 'group' ? 2 : 1
       }, tableCellProps == null ? void 0 : tableCellProps.sx, draggingBorders, {
         maxWidth: "min(" + column.getSize() + "px, fit-content)",
@@ -2581,7 +2569,7 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
         width: header.getSize()
       });
     }
-  }), header.isPlaceholder ? null : columnDefType === 'display' ? headerElement : React__default.createElement(material.Box, {
+  }), header.isPlaceholder ? null : React__default.createElement(material.Box, {
     sx: {
       alignItems: 'flex-start',
       display: 'flex',
@@ -2598,27 +2586,27 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
       flexWrap: 'nowrap',
       whiteSpace: ((_columnDef$header$len = (_columnDef$header = columnDef.header) == null ? void 0 : _columnDef$header.length) != null ? _columnDef$header$len : 0) < 24 ? 'nowrap' : 'normal'
     }
-  }, headerElement, columnDefType === 'data' && column.getCanSort() && React__default.createElement(MRT_TableHeadCellSortLabel, {
+  }, headerElement, column.getCanSort() && React__default.createElement(MRT_TableHeadCellSortLabel, {
     header: header,
     table: table
-  }), columnDefType === 'data' && column.getCanFilter() && React__default.createElement(MRT_TableHeadCellFilterLabel, {
+  }), column.getCanFilter() && React__default.createElement(MRT_TableHeadCellFilterLabel, {
     header: header,
     table: table
-  })), React__default.createElement(material.Box, {
+  })), columnDefType !== 'group' && React__default.createElement(material.Box, {
     sx: {
       whiteSpace: 'nowrap'
     }
-  }, columnDefType === 'data' && (enableColumnDragging && columnDef.enableColumnDragging !== false || enableColumnOrdering && columnDef.enableColumnOrdering !== false || enableGrouping && columnDef.enableGrouping !== false) && React__default.createElement(MRT_TableHeadCellGrabHandle, {
+  }, (enableColumnDragging && columnDef.enableColumnDragging !== false || enableColumnOrdering && columnDef.enableColumnOrdering !== false || enableGrouping && columnDef.enableGrouping !== false) && React__default.createElement(MRT_TableHeadCellGrabHandle, {
     column: column,
     table: table,
     tableHeadCellRef: tableHeadCellRef
-  }), (enableColumnActions || columnDef.enableColumnActions) && columnDef.enableColumnActions !== false && columnDefType !== 'group' && React__default.createElement(MRT_TableHeadCellColumnActionsButton, {
+  }), (enableColumnActions || columnDef.enableColumnActions) && columnDef.enableColumnActions !== false && React__default.createElement(MRT_TableHeadCellColumnActionsButton, {
     header: header,
     table: table
   })), column.getCanResize() && React__default.createElement(MRT_TableHeadCellResizeHandle, {
     header: header,
     table: table
-  })), columnDefType === 'data' && column.getCanFilter() && React__default.createElement(MRT_TableHeadCellFilterContainer, {
+  })), column.getCanFilter() && React__default.createElement(MRT_TableHeadCellFilterContainer, {
     header: header,
     table: table
   }));
@@ -2929,7 +2917,7 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
 
   var handleDragEnter = function handleDragEnter(_e) {
     if (enableColumnOrdering && currentDraggingColumn) {
-      setCurrentHoveredColumn(columnDefType === 'data' ? column : null);
+      setCurrentHoveredColumn(columnDef.enableColumnOrdering !== false ? column : null);
     }
   };
 
@@ -3387,8 +3375,23 @@ var MRT_TablePaper = function MRT_TablePaper(_ref) {
   }));
 };
 
+var defaultDisplayColumnDefOptions = {
+  columnDefType: 'display',
+  enableClickToCopy: false,
+  enableColumnActions: false,
+  enableColumnDragging: false,
+  enableColumnFilter: false,
+  enableColumnOrdering: false,
+  enableEditing: false,
+  enableGlobalFilter: false,
+  enableGrouping: false,
+  enableHiding: false,
+  enablePinning: false,
+  enableResizing: false,
+  enableSorting: false
+};
 var MRT_TableRoot = function MRT_TableRoot(props) {
-  var _initialState$columnO, _initialState$current, _initialState$current2, _initialState$density, _initialState$isFullS, _props$initialState$s, _props$initialState2, _initialState$showCol, _initialState$showGlo, _props$state3, _props$state4, _MRT_FilterFns$curren, _props$onCurrentDragg, _props$onCurrentDragg2, _props$onCurrentEditi, _props$onCurrentEditi2, _props$onCurrentFilte, _props$onCurrentGloba, _props$onCurrentHover, _props$onCurrentHover2, _props$onDensityChang, _props$onIsFullScreen, _props$onShowAlertBan, _props$onShowFiltersC, _props$onShowGlobalFi;
+  var _initialState$columnO, _initialState$current, _initialState$current2, _initialState$current3, _initialState$current4, _initialState$current5, _initialState$current6, _initialState$density, _initialState$isFullS, _props$initialState$s, _props$initialState2, _initialState$showCol, _initialState$showGlo, _props$state3, _props$state4, _MRT_FilterFns$curren, _props$onCurrentDragg, _props$onCurrentDragg2, _props$onCurrentEditi, _props$onCurrentEditi2, _props$onCurrentFilte, _props$onCurrentGloba, _props$onCurrentHover, _props$onCurrentHover2, _props$onDensityChang, _props$onIsFullScreen, _props$onShowAlertBan, _props$onShowFiltersC, _props$onShowGlobalFi;
 
   var _useState = React.useState(props.tableId),
       tableId = _useState[0],
@@ -3411,27 +3414,27 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
       columnOrder = _useState2[0],
       setColumnOrder = _useState2[1];
 
-  var _useState3 = React.useState(null),
+  var _useState3 = React.useState((_initialState$current = initialState.currentDraggingColumn) != null ? _initialState$current : null),
       currentDraggingColumn = _useState3[0],
       setCurrentDraggingColumn = _useState3[1];
 
-  var _useState4 = React.useState(null),
+  var _useState4 = React.useState((_initialState$current2 = initialState.currentDraggingRow) != null ? _initialState$current2 : null),
       currentDraggingRow = _useState4[0],
       setCurrentDraggingRow = _useState4[1];
 
-  var _useState5 = React.useState((_initialState$current = initialState == null ? void 0 : initialState.currentEditingCell) != null ? _initialState$current : null),
+  var _useState5 = React.useState((_initialState$current3 = initialState.currentEditingCell) != null ? _initialState$current3 : null),
       currentEditingCell = _useState5[0],
       setCurrentEditingCell = _useState5[1];
 
-  var _useState6 = React.useState((_initialState$current2 = initialState == null ? void 0 : initialState.currentEditingRow) != null ? _initialState$current2 : null),
+  var _useState6 = React.useState((_initialState$current4 = initialState.currentEditingRow) != null ? _initialState$current4 : null),
       currentEditingRow = _useState6[0],
       setCurrentEditingRow = _useState6[1];
 
-  var _useState7 = React.useState(null),
+  var _useState7 = React.useState((_initialState$current5 = initialState.currentHoveredColumn) != null ? _initialState$current5 : null),
       currentHoveredColumn = _useState7[0],
       setCurrentHoveredColumn = _useState7[1];
 
-  var _useState8 = React.useState(null),
+  var _useState8 = React.useState((_initialState$current6 = initialState.currentHoveredRow) != null ? _initialState$current6 : null),
       currentHoveredRow = _useState8[0],
       setCurrentHoveredRow = _useState8[1];
 
@@ -3457,9 +3460,9 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
 
   var _useState14 = React.useState(function () {
     return Object.assign.apply(Object, [{}].concat(getAllLeafColumnDefs(props.columns).map(function (col) {
-      var _ref, _col$id$toString, _col$id, _col$accessorKey, _col$filterFn$name, _ref2, _col$filterFn, _initialState$current3, _ref3, _col$id$toString2, _col$id2, _col$accessorKey2, _col$filterSelectOpti, _ref4;
+      var _ref, _col$id$toString, _col$id, _col$accessorKey, _col$filterFn$name, _ref2, _col$filterFn, _initialState$current7, _ref3, _col$id$toString2, _col$id2, _col$accessorKey2, _col$filterSelectOpti, _ref4;
 
-      return _ref4 = {}, _ref4[(_ref = (_col$id$toString = (_col$id = col.id) == null ? void 0 : _col$id.toString()) != null ? _col$id$toString : (_col$accessorKey = col.accessorKey) == null ? void 0 : _col$accessorKey.toString()) != null ? _ref : ''] = col.filterFn instanceof Function ? (_col$filterFn$name = col.filterFn.name) != null ? _col$filterFn$name : 'custom' : (_ref2 = (_col$filterFn = col.filterFn) != null ? _col$filterFn : initialState == null ? void 0 : (_initialState$current3 = initialState.currentFilterFns) == null ? void 0 : _initialState$current3[(_ref3 = (_col$id$toString2 = (_col$id2 = col.id) == null ? void 0 : _col$id2.toString()) != null ? _col$id$toString2 : (_col$accessorKey2 = col.accessorKey) == null ? void 0 : _col$accessorKey2.toString()) != null ? _ref3 : '']) != null ? _ref2 : !!((_col$filterSelectOpti = col.filterSelectOptions) != null && _col$filterSelectOpti.length) ? 'equals' : 'fuzzy', _ref4;
+      return _ref4 = {}, _ref4[(_ref = (_col$id$toString = (_col$id = col.id) == null ? void 0 : _col$id.toString()) != null ? _col$id$toString : (_col$accessorKey = col.accessorKey) == null ? void 0 : _col$accessorKey.toString()) != null ? _ref : ''] = col.filterFn instanceof Function ? (_col$filterFn$name = col.filterFn.name) != null ? _col$filterFn$name : 'custom' : (_ref2 = (_col$filterFn = col.filterFn) != null ? _col$filterFn : initialState == null ? void 0 : (_initialState$current7 = initialState.currentFilterFns) == null ? void 0 : _initialState$current7[(_ref3 = (_col$id$toString2 = (_col$id2 = col.id) == null ? void 0 : _col$id2.toString()) != null ? _col$id$toString2 : (_col$accessorKey2 = col.accessorKey) == null ? void 0 : _col$accessorKey2.toString()) != null ? _ref3 : '']) != null ? _ref2 : !!((_col$filterSelectOpti = col.filterSelectOptions) != null && _col$filterSelectOpti.length) ? 'equals' : 'fuzzy', _ref4;
     })));
   }),
       currentFilterFns = _useState14[0],
@@ -3470,16 +3473,14 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
       setCurrentGlobalFilterFn = _useState15[1];
 
   var displayColumns = React.useMemo(function () {
-    var _props$localization, _props$localization2, _props$localization3, _props$localization4, _props$localization6;
+    var _props$localization, _props$displayColumnD, _props$localization2, _props$displayColumnD2, _props$localization3, _props$displayColumnD3, _props$localization4, _props$displayColumnD4, _props$localization6, _props$displayColumnD5;
 
-    return [columnOrder.includes('mrt-row-drag') && {
-      columnDefType: 'display',
+    return [columnOrder.includes('mrt-row-drag') && _extends({
       header: (_props$localization = props.localization) == null ? void 0 : _props$localization.move,
-      id: 'mrt-row-drag',
-      muiTableBodyCellProps: props.muiTableBodyCellProps,
-      muiTableHeadCellProps: props.muiTableHeadCellProps,
       size: 60
-    }, columnOrder.includes('mrt-row-actions') && {
+    }, defaultDisplayColumnDefOptions, (_props$displayColumnD = props.displayColumnDefOptions) == null ? void 0 : _props$displayColumnD['mrt-row-drag'], {
+      id: 'mrt-row-drag'
+    }), columnOrder.includes('mrt-row-actions') && _extends({
       Cell: function Cell(_ref5) {
         var cell = _ref5.cell;
         return React__default.createElement(MRT_ToggleRowActionMenuButton, {
@@ -3487,13 +3488,11 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
           table: table
         });
       },
-      columnDefType: 'display',
       header: (_props$localization2 = props.localization) == null ? void 0 : _props$localization2.actions,
-      id: 'mrt-row-actions',
-      muiTableBodyCellProps: props.muiTableBodyCellProps,
-      muiTableHeadCellProps: props.muiTableHeadCellProps,
       size: 70
-    }, columnOrder.includes('mrt-row-expand') && {
+    }, defaultDisplayColumnDefOptions, (_props$displayColumnD2 = props.displayColumnDefOptions) == null ? void 0 : _props$displayColumnD2['mrt-row-actions'], {
+      id: 'mrt-row-actions'
+    }), columnOrder.includes('mrt-row-expand') && _extends({
       Cell: function Cell(_ref6) {
         var cell = _ref6.cell;
         return React__default.createElement(MRT_ExpandButton, {
@@ -3506,13 +3505,11 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
           table: table
         }) : null;
       },
-      columnDefType: 'display',
       header: (_props$localization3 = props.localization) == null ? void 0 : _props$localization3.expand,
-      id: 'mrt-row-expand',
-      muiTableBodyCellProps: props.muiTableBodyCellProps,
-      muiTableHeadCellProps: props.muiTableHeadCellProps,
       size: 60
-    }, columnOrder.includes('mrt-row-select') && {
+    }, defaultDisplayColumnDefOptions, (_props$displayColumnD3 = props.displayColumnDefOptions) == null ? void 0 : _props$displayColumnD3['mrt-row-expand'], {
+      id: 'mrt-row-expand'
+    }), columnOrder.includes('mrt-row-select') && _extends({
       Cell: function Cell(_ref7) {
         var cell = _ref7.cell;
         return React__default.createElement(MRT_SelectCheckbox, {
@@ -3526,13 +3523,11 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
           table: table
         }) : null;
       },
-      columnDefType: 'display',
       header: (_props$localization4 = props.localization) == null ? void 0 : _props$localization4.select,
-      id: 'mrt-row-select',
-      muiTableBodyCellProps: props.muiTableBodyCellProps,
-      muiTableHeadCellProps: props.muiTableHeadCellProps,
       size: 60
-    }, columnOrder.includes('mrt-row-numbers') && {
+    }, defaultDisplayColumnDefOptions, (_props$displayColumnD4 = props.displayColumnDefOptions) == null ? void 0 : _props$displayColumnD4['mrt-row-select'], {
+      id: 'mrt-row-select'
+    }), columnOrder.includes('mrt-row-numbers') && _extends({
       Cell: function Cell(_ref8) {
         var cell = _ref8.cell;
         return cell.row.index + 1;
@@ -3542,14 +3537,12 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
 
         return (_props$localization5 = props.localization) == null ? void 0 : _props$localization5.rowNumber;
       },
-      columnDefType: 'display',
       header: (_props$localization6 = props.localization) == null ? void 0 : _props$localization6.rowNumbers,
-      id: 'mrt-row-numbers',
-      muiTableBodyCellProps: props.muiTableBodyCellProps,
-      muiTableHeadCellProps: props.muiTableHeadCellProps,
       size: 60
-    }].filter(Boolean);
-  }, [columnOrder, props.editingMode, props.enableEditing, props.enableExpandAll, props.enableExpanding, props.enableGrouping, props.enableRowActions, props.enableRowNumbers, props.enableRowOrdering, props.enableRowSelection, props.enableSelectAll, props.localization, props.muiTableBodyCellProps, props.muiTableHeadCellProps, props.positionActionsColumn]);
+    }, defaultDisplayColumnDefOptions, (_props$displayColumnD5 = props.displayColumnDefOptions) == null ? void 0 : _props$displayColumnD5['mrt-row-numbers'], {
+      id: 'mrt-row-numbers'
+    })].filter(Boolean);
+  }, [columnOrder, props.displayColumnDefOptions, props.editingMode, props.enableColumnDragging, props.enableColumnOrdering, props.enableEditing, props.enableExpandAll, props.enableExpanding, props.enableGrouping, props.enableRowActions, props.enableRowDragging, props.enableRowNumbers, props.enableRowOrdering, props.enableRowSelection, props.enableSelectAll, props.localization, props.muiTableBodyCellProps, props.muiTableHeadCellProps, props.positionActionsColumn]);
   var columnDefs = React.useMemo(function () {
     return prepareColumns([].concat(displayColumns, props.columns), currentFilterFns);
   }, [currentFilterFns, displayColumns, props.columns]);