material-react-table 0.24.1 → 0.26.1

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

@@ -60,6 +60,7 @@ var MRT_DefaultLocalization_EN = {
   expand: 'Expand',
   expandAll: 'Expand all',
   filterBetween: 'Between',
+  filterBetweenInclusive: 'Between Inclusive',
   filterByColumn: 'Filter by {column}',
   filterContains: 'Contains',
   filterEmpty: 'Empty',
@@ -67,7 +68,9 @@ var MRT_DefaultLocalization_EN = {
   filterEquals: 'Equals',
   filterFuzzy: 'Fuzzy',
   filterGreaterThan: 'Greater Than',
+  filterGreaterThanOrEqualTo: 'Greater Than Or Equal To',
   filterLessThan: 'Less Than',
+  filterLessThanOrEqualTo: 'Less Than Or Equal To',
   filterMode: 'Filter Mode: {filterType}',
   filterNotEmpty: 'Not Empty',
   filterNotEquals: 'Not Equals',
@@ -221,10 +224,12 @@ var MRT_ExpandButton = function MRT_ExpandButton(_ref) {
     disabled: !row.getCanExpand() && !renderDetailPanel,
     onClick: handleToggleExpand
   }, iconButtonProps, {
-    sx: _extends({
-      height: density === 'compact' ? '1.75rem' : '2.25rem',
-      width: density === 'compact' ? '1.75rem' : '2.25rem'
-    }, iconButtonProps == null ? void 0 : iconButtonProps.sx)
+    sx: function sx(theme) {
+      return _extends({
+        height: density === 'compact' ? '1.75rem' : '2.25rem',
+        width: density === 'compact' ? '1.75rem' : '2.25rem'
+      }, (iconButtonProps == null ? void 0 : iconButtonProps.sx) instanceof Function ? iconButtonProps.sx(theme) : iconButtonProps == null ? void 0 : iconButtonProps.sx);
+    }
   }), React__default.createElement(ExpandMoreIcon, {
     style: {
       transform: "rotate(" + (!row.getCanExpand() && !renderDetailPanel ? -90 : row.getIsExpanded() ? -180 : 0) + "deg)",
@@ -233,11 +238,6 @@ var MRT_ExpandButton = function MRT_ExpandButton(_ref) {
   }))));
 };
 
-var commonMenuItemStyles = {
-  py: '6px',
-  my: 0,
-  alignItems: 'center'
-};
 var MRT_FilterOptionMenu = function MRT_FilterOptionMenu(_ref) {
   var _columnDef$enabledCol;
 
@@ -269,46 +269,72 @@ var MRT_FilterOptionMenu = function MRT_FilterOptionMenu(_ref) {
   var filterOptions = React.useMemo(function () {
     return [{
       option: 'fuzzy',
+      symbol: '≈',
       label: localization.filterFuzzy,
       divider: false
     }, {
       option: 'contains',
+      symbol: '*',
       label: localization.filterContains,
       divider: false
     }, {
       option: 'startsWith',
+      symbol: 'a',
       label: localization.filterStartsWith,
       divider: false
     }, {
       option: 'endsWith',
+      symbol: 'z',
       label: localization.filterEndsWith,
       divider: true
     }, {
       option: 'equals',
+      symbol: '=',
       label: localization.filterEquals,
       divider: false
     }, {
       option: 'notEquals',
+      symbol: '≠',
       label: localization.filterNotEquals,
       divider: true
     }, {
       option: 'between',
+      symbol: '⇿',
       label: localization.filterBetween,
       divider: false
+    }, {
+      option: 'betweenInclusive',
+      symbol: '⬌',
+      label: localization.filterBetweenInclusive,
+      divider: true
     }, {
       option: 'greaterThan',
+      symbol: '>',
       label: localization.filterGreaterThan,
       divider: false
+    }, {
+      option: 'greaterThanOrEqualTo',
+      symbol: '≥',
+      label: localization.filterGreaterThanOrEqualTo,
+      divider: false
     }, {
       option: 'lessThan',
+      symbol: '<',
       label: localization.filterLessThan,
+      divider: false
+    }, {
+      option: 'lessThanOrEqualTo',
+      symbol: '≤',
+      label: localization.filterLessThanOrEqualTo,
       divider: true
     }, {
       option: 'empty',
+      symbol: '∅',
       label: localization.filterEmpty,
       divider: false
     }, {
       option: 'notEmpty',
+      symbol: '!∅',
       label: localization.filterNotEmpty,
       divider: false
     }].filter(function (filterType) {
@@ -356,7 +382,8 @@ var MRT_FilterOptionMenu = function MRT_FilterOptionMenu(_ref) {
   }, filterOptions.map(function (_ref4, index) {
     var option = _ref4.option,
         label = _ref4.label,
-        divider = _ref4.divider;
+        divider = _ref4.divider,
+        symbol = _ref4.symbol;
     return React__default.createElement(material.MenuItem, {
       divider: divider,
       key: index,
@@ -364,9 +391,20 @@ var MRT_FilterOptionMenu = function MRT_FilterOptionMenu(_ref) {
         return handleSelectFilterType(option);
       },
       selected: option === filterOption,
-      sx: commonMenuItemStyles,
+      sx: {
+        py: '6px',
+        my: 0,
+        alignItems: 'center',
+        display: 'flex',
+        gap: '2ch'
+      },
       value: option
-    }, label);
+    }, React__default.createElement(material.Box, {
+      sx: {
+        fontSize: '1.25rem',
+        width: '2ch'
+      }
+    }, symbol), label);
   }));
 };
 
@@ -512,21 +550,37 @@ notEquals.autoRemove = function (val) {
 };
 
 var greaterThan = function greaterThan(row, id, filterValue) {
-  return !isNaN(+filterValue) && !isNaN(+row.getValue(id)) ? +row.getValue(id) >= +filterValue : row.getValue(id).toString().toLowerCase().trim() > filterValue.toString().toLowerCase().trim();
+  return !isNaN(+filterValue) && !isNaN(+row.getValue(id)) ? +row.getValue(id) > +filterValue : row.getValue(id).toString().toLowerCase().trim() > filterValue.toString().toLowerCase().trim();
 };
 
 greaterThan.autoRemove = function (val) {
   return !val;
 };
 
+var greaterThanOrEqualTo = function greaterThanOrEqualTo(row, id, filterValue) {
+  return equals(row, id, filterValue) || greaterThan(row, id, filterValue);
+};
+
+greaterThanOrEqualTo.autoRemove = function (val) {
+  return !val;
+};
+
 var lessThan = function lessThan(row, id, filterValue) {
-  return !isNaN(+filterValue) && !isNaN(+row.getValue(id)) ? +row.getValue(id) <= +filterValue : row.getValue(id).toString().toLowerCase().trim() < filterValue.toString().toLowerCase().trim();
+  return !isNaN(+filterValue) && !isNaN(+row.getValue(id)) ? +row.getValue(id) < +filterValue : row.getValue(id).toString().toLowerCase().trim() < filterValue.toString().toLowerCase().trim();
 };
 
 lessThan.autoRemove = function (val) {
   return !val;
 };
 
+var lessThanOrEqualTo = function lessThanOrEqualTo(row, id, filterValue) {
+  return equals(row, id, filterValue) || lessThan(row, id, filterValue);
+};
+
+lessThanOrEqualTo.autoRemove = function (val) {
+  return !val;
+};
+
 var between = function between(row, id, filterValues) {
   return (['', undefined].includes(filterValues[0]) || greaterThan(row, id, filterValues[0])) && (!isNaN(+filterValues[0]) && !isNaN(+filterValues[1]) && +filterValues[0] > +filterValues[1] || ['', undefined].includes(filterValues[1]) || lessThan(row, id, filterValues[1]));
 };
@@ -535,6 +589,14 @@ between.autoRemove = function (val) {
   return !val;
 };
 
+var betweenInclusive = function betweenInclusive(row, id, filterValues) {
+  return (['', undefined].includes(filterValues[0]) || greaterThanOrEqualTo(row, id, filterValues[0])) && (!isNaN(+filterValues[0]) && !isNaN(+filterValues[1]) && +filterValues[0] > +filterValues[1] || ['', undefined].includes(filterValues[1]) || lessThanOrEqualTo(row, id, filterValues[1]));
+};
+
+betweenInclusive.autoRemove = function (val) {
+  return !val;
+};
+
 var empty = function empty(row, id, _filterValue) {
   return !row.getValue(id).toString().trim();
 };
@@ -553,13 +615,16 @@ notEmpty.autoRemove = function (val) {
 
 var MRT_FilterFns = /*#__PURE__*/_extends({}, reactTable.filterFns, {
   between: between,
+  betweenInclusive: betweenInclusive,
   contains: contains,
   empty: empty,
   endsWith: endsWith,
   equals: equals,
   fuzzy: fuzzy,
   greaterThan: greaterThan,
+  greaterThanOrEqualTo: greaterThanOrEqualTo,
   lessThan: lessThan,
+  lessThanOrEqualTo: lessThanOrEqualTo,
   notEmpty: notEmpty,
   notEquals: notEquals,
   startsWith: startsWith
@@ -911,7 +976,7 @@ var MRT_ShowHideColumnsMenu = function MRT_ShowHideColumnsMenu(_ref) {
   }));
 };
 
-var commonMenuItemStyles$1 = {
+var commonMenuItemStyles = {
   py: '6px',
   my: 0,
   justifyContent: 'space-between',
@@ -1055,14 +1120,14 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     disabled: !column.getIsSorted(),
     key: 0,
     onClick: handleClearSort,
-    sx: commonMenuItemStyles$1
+    sx: commonMenuItemStyles
   }, React__default.createElement(material.Box, {
     sx: commonListItemStyles
   }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(ClearAllIcon, null)), localization.clearSort)), React__default.createElement(material.MenuItem, {
     disabled: column.getIsSorted() === 'asc',
     key: 1,
     onClick: handleSortAsc,
-    sx: commonMenuItemStyles$1
+    sx: commonMenuItemStyles
   }, React__default.createElement(material.Box, {
     sx: commonListItemStyles
   }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(SortIcon, null)), (_localization$sortByC = localization.sortByColumnAsc) == null ? void 0 : _localization$sortByC.replace('{column}', String(columnDef.header)))), React__default.createElement(material.MenuItem, {
@@ -1070,7 +1135,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     key: 2,
     disabled: column.getIsSorted() === 'desc',
     onClick: handleSortDesc,
-    sx: commonMenuItemStyles$1
+    sx: commonMenuItemStyles
   }, React__default.createElement(material.Box, {
     sx: commonListItemStyles
   }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(SortIcon, {
@@ -1081,14 +1146,14 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     disabled: !column.getFilterValue(),
     key: 0,
     onClick: handleClearFilter,
-    sx: commonMenuItemStyles$1
+    sx: commonMenuItemStyles
   }, React__default.createElement(material.Box, {
     sx: commonListItemStyles
   }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(FilterListOffIcon, null)), localization.clearFilter)), React__default.createElement(material.MenuItem, {
     divider: enableGrouping || enableHiding,
     key: 1,
     onClick: handleFilterByColumn,
-    sx: commonMenuItemStyles$1
+    sx: commonMenuItemStyles
   }, React__default.createElement(material.Box, {
     sx: commonListItemStyles
   }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(FilterListIcon, null)), (_localization$filterB = localization.filterByColumn) == null ? void 0 : _localization$filterB.replace('{column}', String(columnDef.header))), showFilterModeSubMenu && React__default.createElement(material.IconButton, {
@@ -1109,7 +1174,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     divider: enablePinning,
     key: 0,
     onClick: handleGroupByColumn,
-    sx: commonMenuItemStyles$1
+    sx: commonMenuItemStyles
   }, React__default.createElement(material.Box, {
     sx: commonListItemStyles
   }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(DynamicFeedIcon, null)), (_localization = localization[column.getIsGrouped() ? 'ungroupByColumn' : 'groupByColumn']) == null ? void 0 : _localization.replace('{column}', String(columnDef.header))))], enablePinning && column.getCanPin() && [React__default.createElement(material.MenuItem, {
@@ -1118,7 +1183,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     onClick: function onClick() {
       return handlePinColumn('left');
     },
-    sx: commonMenuItemStyles$1
+    sx: commonMenuItemStyles
   }, React__default.createElement(material.Box, {
     sx: commonListItemStyles
   }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(PushPinIcon, {
@@ -1131,7 +1196,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     onClick: function onClick() {
       return handlePinColumn('right');
     },
-    sx: commonMenuItemStyles$1
+    sx: commonMenuItemStyles
   }, React__default.createElement(material.Box, {
     sx: commonListItemStyles
   }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(PushPinIcon, {
@@ -1145,21 +1210,21 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     onClick: function onClick() {
       return handlePinColumn(false);
     },
-    sx: commonMenuItemStyles$1
+    sx: commonMenuItemStyles
   }, 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
+    sx: commonMenuItemStyles
   }, React__default.createElement(material.Box, {
     sx: commonListItemStyles
   }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(RestartAltIcon, null)), localization.resetColumnSize))], enableHiding && [React__default.createElement(material.MenuItem, {
     disabled: columnDef.enableHiding === false,
     key: 0,
     onClick: handleHideColumn,
-    sx: commonMenuItemStyles$1
+    sx: commonMenuItemStyles
   }, React__default.createElement(material.Box, {
     sx: commonListItemStyles
   }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(VisibilityOffIcon, null)), (_localization$hideCol = localization.hideColumn) == null ? void 0 : _localization$hideCol.replace('{column}', String(columnDef.header)))), React__default.createElement(material.MenuItem, {
@@ -1168,7 +1233,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     }).length,
     key: 1,
     onClick: handleShowAllColumns,
-    sx: commonMenuItemStyles$1
+    sx: commonMenuItemStyles
   }, React__default.createElement(material.Box, {
     sx: commonListItemStyles
   }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(ViewColumnIcon, null)), (_localization$showAll = localization.showAllColumns) == null ? void 0 : _localization$showAll.replace('{column}', String(columnDef.header))), React__default.createElement(material.IconButton, {
@@ -1214,7 +1279,7 @@ var MRT_RowActionMenu = function MRT_RowActionMenu(_ref) {
     }
   }, enableEditing && React__default.createElement(material.MenuItem, {
     onClick: handleEdit,
-    sx: commonMenuItemStyles$1
+    sx: commonMenuItemStyles
   }, React__default.createElement(material.Box, {
     sx: commonListItemStyles
   }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(EditIcon, null)), localization.edit)), renderRowActionMenuItems == null ? void 0 : renderRowActionMenuItems({
@@ -1365,19 +1430,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,13 +1447,16 @@ 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'
-    }, checkboxProps == null ? void 0 : checkboxProps.sx)
+    sx: function sx(theme) {
+      return _extends({
+        height: density === 'compact' ? '1.5rem' : '2rem',
+        width: density === 'compact' ? '1.5rem' : '2rem',
+        m: '-1re.m'
+      }, (checkboxProps == null ? void 0 : checkboxProps.sx) instanceof Function ? checkboxProps.sx(theme) : checkboxProps == null ? void 0 : checkboxProps.sx);
+    }
   })));
 };
 
@@ -1751,12 +1807,14 @@ var MRT_TablePagination = function MRT_TablePagination(_ref) {
     showFirstButton: showFirstLastPageButtons,
     showLastButton: showFirstLastPageButtons
   }, tablePaginationProps, {
-    sx: _extends({
-      m: '0 0.5rem',
-      mt: position === 'top' && enableToolbarInternalActions && !showGlobalFilter ? '3.5rem' : undefined,
-      position: 'relative',
-      zIndex: 2
-    }, tablePaginationProps == null ? void 0 : tablePaginationProps.sx)
+    sx: function sx(theme) {
+      return _extends({
+        m: '0 0.5rem',
+        mt: position === 'top' && enableToolbarInternalActions && !showGlobalFilter ? '3.5rem' : undefined,
+        position: 'relative',
+        zIndex: 2
+      }, (tablePaginationProps == null ? void 0 : tablePaginationProps.sx) instanceof Function ? tablePaginationProps.sx(theme) : tablePaginationProps == null ? void 0 : tablePaginationProps.sx);
+    }
   }));
 };
 
@@ -1798,17 +1856,19 @@ var MRT_ToolbarAlertBanner = function MRT_ToolbarAlertBanner(_ref) {
     color: "info",
     icon: false
   }, alertProps, {
-    sx: _extends({
-      borderRadius: 0,
-      fontSize: '1rem',
-      left: 0,
-      p: 0,
-      position: 'relative',
-      right: 0,
-      top: 0,
-      width: '100%',
-      zIndex: 2
-    }, alertProps == null ? void 0 : alertProps.sx)
+    sx: function sx(theme) {
+      return _extends({
+        borderRadius: 0,
+        fontSize: '1rem',
+        left: 0,
+        p: 0,
+        position: 'relative',
+        right: 0,
+        top: 0,
+        width: '100%',
+        zIndex: 2
+      }, (alertProps == null ? void 0 : alertProps.sx) instanceof Function ? alertProps.sx(theme) : alertProps == null ? void 0 : alertProps.sx);
+    }
   }), (alertProps == null ? void 0 : alertProps.title) && React__default.createElement(material.AlertTitle, null, alertProps.title), React__default.createElement(material.Box, {
     sx: {
       p: '0.5rem 1rem'
@@ -1897,7 +1957,7 @@ var MRT_ToolbarTop = function MRT_ToolbarTop(_ref2) {
         top: isFullScreen ? '0' : undefined
       }, commonToolbarStyles({
         theme: theme
-      }), toolbarProps == null ? void 0 : toolbarProps.sx);
+      }), (toolbarProps == null ? void 0 : toolbarProps.sx) instanceof Function ? toolbarProps.sx(theme) : toolbarProps == null ? void 0 : toolbarProps.sx);
     }
   }), positionToolbarAlertBanner === 'top' && React__default.createElement(MRT_ToolbarAlertBanner, {
     stackAlertBanner: stackAlertBanner,
@@ -1963,7 +2023,7 @@ var MRT_ToolbarBottom = function MRT_ToolbarBottom(_ref) {
         left: 0,
         position: isFullScreen ? 'fixed' : 'relative',
         right: 0
-      }, toolbarProps == null ? void 0 : toolbarProps.sx);
+      }, (toolbarProps == null ? void 0 : toolbarProps.sx) instanceof Function ? toolbarProps.sx(theme) : toolbarProps == null ? void 0 : toolbarProps.sx);
     }
   }), React__default.createElement(MRT_LinearProgressBar, {
     isTopToolbar: false,
@@ -2038,16 +2098,18 @@ var MRT_TableHeadCellColumnActionsButton = function MRT_TableHeadCellColumnActio
     onClick: handleClick,
     size: "small"
   }, iconButtonProps, {
-    sx: _extends({
-      height: '2rem',
-      mt: '-0.2rem',
-      opacity: 0.5,
-      transition: 'opacity 0.2s',
-      width: '2rem',
-      '&:hover': {
-        opacity: 1
-      }
-    }, iconButtonProps.sx)
+    sx: function sx(theme) {
+      return _extends({
+        height: '2rem',
+        mt: '-0.2rem',
+        opacity: 0.5,
+        transition: 'opacity 0.2s',
+        width: '2rem',
+        '&:hover': {
+          opacity: 1
+        }
+      }, (iconButtonProps == null ? void 0 : iconButtonProps.sx) instanceof Function ? iconButtonProps.sx(theme) : iconButtonProps == null ? void 0 : iconButtonProps.sx);
+    }
   }), React__default.createElement(MoreVertIcon, null))), React__default.createElement(MRT_ColumnActionMenu, {
     anchorEl: anchorEl,
     header: header,
@@ -2103,16 +2165,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), []);
 
@@ -2232,15 +2294,17 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
       }, React__default.createElement(CloseIcon, null)))))
     }
   }, textFieldProps, {
-    sx: _extends({
-      m: '-0.25rem',
-      p: 0,
-      minWidth: !filterChipLabel ? '8rem' : 'auto',
-      width: 'calc(100% + 0.5rem)',
-      '&	.MuiSelect-icon': {
-        mr: '1.5rem'
-      }
-    }, textFieldProps == null ? void 0 : textFieldProps.sx)
+    sx: function sx(theme) {
+      return _extends({
+        m: '-0.25rem',
+        p: 0,
+        minWidth: !filterChipLabel ? '8rem' : 'auto',
+        width: 'calc(100% + 0.5rem)',
+        '&	.MuiSelect-icon': {
+          mr: '1.5rem'
+        }
+      }, (textFieldProps == null ? void 0 : textFieldProps.sx) instanceof Function ? textFieldProps.sx(theme) : textFieldProps == null ? void 0 : textFieldProps.sx);
+    }
   }), isSelectFilter && React__default.createElement(material.MenuItem, {
     divider: true,
     disabled: !filterValue,
@@ -2519,11 +2583,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 +2597,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,15 +2636,15 @@ 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, {
+      }, (tableCellProps == null ? void 0 : tableCellProps.sx) instanceof Function ? tableCellProps.sx(theme) : tableCellProps == null ? void 0 : tableCellProps.sx, draggingBorders, {
         maxWidth: "min(" + column.getSize() + "px, fit-content)",
         minWidth: "max(" + column.getSize() + "px, " + ((_columnDef$minSize = columnDef.minSize) != null ? _columnDef$minSize : 30) + "px)",
         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 +2661,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
   }));
@@ -2797,19 +2860,21 @@ var MRT_CopyButton = function MRT_CopyButton(_ref) {
     type: "button",
     variant: "text"
   }, buttonProps, {
-    sx: _extends({
-      backgroundColor: 'transparent',
-      border: 'none',
-      color: 'inherit',
-      cursor: 'copy',
-      fontFamily: 'inherit',
-      fontSize: 'inherit',
-      letterSpacing: 'inherit',
-      m: '-0.25rem',
-      minWidth: 'unset',
-      textAlign: 'inherit',
-      textTransform: 'inherit'
-    }, buttonProps == null ? void 0 : buttonProps.sx)
+    sx: function sx(theme) {
+      return _extends({
+        backgroundColor: 'transparent',
+        border: 'none',
+        color: 'inherit',
+        cursor: 'copy',
+        fontFamily: 'inherit',
+        fontSize: 'inherit',
+        letterSpacing: 'inherit',
+        m: '-0.25rem',
+        minWidth: 'unset',
+        textAlign: 'inherit',
+        textTransform: 'inherit'
+      }, (buttonProps == null ? void 0 : buttonProps.sx) instanceof Function ? buttonProps.sx(theme) : buttonProps == null ? void 0 : buttonProps.sx);
+    }
   }), children));
 };
 
@@ -2929,7 +2994,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);
     }
   };
 
@@ -2964,7 +3029,7 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
         '&:hover': {
           backgroundColor: enableHover && enableEditing && editingMode !== 'row' ? theme.palette.mode === 'dark' ? material.lighten(theme.palette.background["default"], 0.13) + " !important" : material.darken(theme.palette.background["default"], 0.07) + " !important" : undefined
         }
-      }, tableCellProps == null ? void 0 : tableCellProps.sx, draggingBorders, {
+      }, (tableCellProps == null ? void 0 : tableCellProps.sx) instanceof Function ? tableCellProps.sx(theme) : tableCellProps == null ? void 0 : tableCellProps.sx, draggingBorders, {
         maxWidth: "min(" + column.getSize() + "px, fit-content)",
         minWidth: "max(" + column.getSize() + "px, " + ((_columnDef$minSize = columnDef.minSize) != null ? _columnDef$minSize : 30) + "px)",
         width: column.getSize()
@@ -3015,13 +3080,15 @@ var MRT_TableDetailPanel = function MRT_TableDetailPanel(_ref) {
   return React__default.createElement(material.TableRow, Object.assign({}, tableRowProps), React__default.createElement(material.TableCell, Object.assign({
     colSpan: getVisibleLeafColumns().length
   }, tableCellProps, {
-    sx: _extends({
-      borderBottom: !row.getIsExpanded() ? 'none' : undefined,
-      pb: row.getIsExpanded() ? '1rem' : 0,
-      pt: row.getIsExpanded() ? '1rem' : 0,
-      transition: 'all 0.2s ease-in-out',
-      width: table.getTotalSize() + "px"
-    }, tableCellProps == null ? void 0 : tableCellProps.sx)
+    sx: function sx(theme) {
+      return _extends({
+        borderBottom: !row.getIsExpanded() ? 'none' : undefined,
+        pb: row.getIsExpanded() ? '1rem' : 0,
+        pt: row.getIsExpanded() ? '1rem' : 0,
+        transition: 'all 0.2s ease-in-out',
+        width: table.getTotalSize() + "px"
+      }, (tableCellProps == null ? void 0 : tableCellProps.sx) instanceof Function ? tableCellProps.sx(theme) : tableCellProps == null ? void 0 : tableCellProps.sx);
+    }
   }), renderDetailPanel && React__default.createElement(material.Collapse, {
     "in": row.getIsExpanded()
   }, renderDetailPanel({
@@ -3079,7 +3146,7 @@ var MRT_TableBodyRow = function MRT_TableBodyRow(_ref) {
         '&:hover td': {
           backgroundColor: (tableRowProps == null ? void 0 : tableRowProps.hover) !== false && getIsSomeColumnsPinned() ? theme.palette.mode === 'dark' ? "" + material.lighten(theme.palette.background["default"], 0.12) : "" + material.darken(theme.palette.background["default"], 0.05) : undefined
         }
-      }, tableRowProps == null ? void 0 : tableRowProps.sx, draggingBorders);
+      }, (tableRowProps == null ? void 0 : tableRowProps.sx) instanceof Function ? tableRowProps.sx(theme) : tableRowProps == null ? void 0 : tableRowProps.sx, draggingBorders);
     }
   }), row == null ? void 0 : (_row$getVisibleCells = row.getVisibleCells()) == null ? void 0 : _row$getVisibleCells.map == null ? void 0 : _row$getVisibleCells.map(function (cell) {
     return React__default.createElement(MRT_TableBodyCell, {
@@ -3215,7 +3282,7 @@ var MRT_TableFooterCell = function MRT_TableFooterCell(_ref) {
         transition: "all " + (enableColumnResizing ? '10ms' : '0.2s') + " ease-in-out",
         width: column.getSize(),
         verticalAlign: 'text-top'
-      }, tableCellProps == null ? void 0 : tableCellProps.sx);
+      }, (tableCellProps == null ? void 0 : tableCellProps.sx) instanceof Function ? tableCellProps.sx(theme) : tableCellProps == null ? void 0 : tableCellProps.sx);
     }
   }), React__default.createElement(React__default.Fragment, null, footer.isPlaceholder ? null : (_ref2 = (_ref3 = columnDef.Footer instanceof Function ? columnDef.Footer == null ? void 0 : columnDef.Footer({
     footer: footer,
@@ -3283,9 +3350,11 @@ var MRT_Table = function MRT_Table(_ref) {
   return React__default.createElement(material.Table, Object.assign({
     stickyHeader: enableStickyHeader || enableRowVirtualization || isFullScreen
   }, tableProps, {
-    sx: _extends({
-      tableLayout: enableColumnResizing || enableRowVirtualization ? 'fixed' : 'auto'
-    }, tableProps == null ? void 0 : tableProps.sx)
+    sx: function sx(theme) {
+      return _extends({
+        tableLayout: enableColumnResizing || enableRowVirtualization ? 'fixed' : 'auto'
+      }, (tableProps == null ? void 0 : tableProps.sx) instanceof Function ? tableProps.sx(theme) : tableProps == null ? void 0 : tableProps.sx);
+    }
   }), enableTableHead && React__default.createElement(MRT_TableHead, {
     table: table
   }), React__default.createElement(MRT_TableBody, {
@@ -3327,11 +3396,13 @@ var MRT_TableContainer = function MRT_TableContainer(_ref) {
   return React__default.createElement(material.TableContainer, Object.assign({
     ref: tableContainerRef
   }, tableContainerProps, {
-    sx: _extends({
-      maxWidth: '100%',
-      maxHeight: enableStickyHeader || enableRowVirtualization ? "clamp(350px, calc(100vh - " + totalToolbarHeight + "px), 9999px)" : undefined,
-      overflow: 'auto'
-    }, tableContainerProps == null ? void 0 : tableContainerProps.sx),
+    sx: function sx(theme) {
+      return _extends({
+        maxWidth: '100%',
+        maxHeight: enableStickyHeader || enableRowVirtualization ? "clamp(350px, calc(100vh - " + totalToolbarHeight + "px), 9999px)" : undefined,
+        overflow: 'auto'
+      }, (tableContainerProps == null ? void 0 : tableContainerProps.sx) instanceof Function ? tableContainerProps.sx(theme) : tableContainerProps == null ? void 0 : tableContainerProps.sx);
+    },
     style: _extends({
       maxHeight: isFullScreen ? "calc(100vh - " + totalToolbarHeight + "px)" : undefined
     }, tableContainerProps == null ? void 0 : tableContainerProps.style)
@@ -3387,8 +3458,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 +3497,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 +3543,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 +3556,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 +3571,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 +3588,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 +3606,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 +3620,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]);