material-react-table 0.8.0-alpha.2 → 0.8.0

package/dist/material-react-table.esm.js

@@ -28,7 +28,7 @@ import SortIcon from '@mui/icons-material/Sort';
 import ViewColumnIcon from '@mui/icons-material/ViewColumn';
 import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
 import { createTable, useTableInstance, getCoreRowModel, getExpandedRowModel, getFacetedRowModel, getFilteredRowModel, getGroupedRowModel, getPaginationRowModel, getSortedRowModel, functionalUpdate } from '@tanstack/react-table';
-import { Tooltip, IconButton, Menu, MenuItem, Box, FormControlLabel, Switch, Button, Divider, ListItemIcon, Checkbox, debounce, Collapse, TextField, InputAdornment, TablePagination, useMediaQuery, Chip, Alert, LinearProgress, Toolbar, lighten, alpha, TableCell, TableSortLabel, TableRow, TableHead, darken, Skeleton, TableBody, TableFooter, Table, TableContainer, Paper, Dialog, Grow } from '@mui/material';
+import { Tooltip, IconButton, Menu, MenuItem, Box, FormControlLabel, Switch, Button, Divider, ListItemIcon, Checkbox, debounce, Collapse, TextField, InputAdornment, TablePagination, Chip, Alert, LinearProgress, useMediaQuery, Toolbar, lighten, alpha, TableCell, TableSortLabel, TableRow, TableHead, darken, Skeleton, TableBody, TableFooter, Table, TableContainer, Paper, Dialog, Grow } from '@mui/material';
 import { rankItem, rankings } from '@tanstack/match-sorter-utils';
 
 function _extends() {
@@ -164,10 +164,12 @@ var MRT_ExpandAllButton = function MRT_ExpandAllButton(_ref) {
   var tableInstance = _ref.tableInstance;
   var getIsAllRowsExpanded = tableInstance.getIsAllRowsExpanded,
       getIsSomeRowsExpanded = tableInstance.getIsSomeRowsExpanded,
+      getCanSomeRowsExpand = tableInstance.getCanSomeRowsExpand,
       getState = tableInstance.getState,
       _tableInstance$option = tableInstance.options,
       DoubleArrowDownIcon = _tableInstance$option.icons.DoubleArrowDownIcon,
       localization = _tableInstance$option.localization,
+      renderDetailPanel = _tableInstance$option.renderDetailPanel,
       toggleAllRowsExpanded = tableInstance.toggleAllRowsExpanded;
 
   var _getState = getState(),
@@ -180,6 +182,7 @@ var MRT_ExpandAllButton = function MRT_ExpandAllButton(_ref) {
     title: localization.expandAll
   }, React.createElement(IconButton, {
     "aria-label": localization.expandAll,
+    disabled: !getCanSomeRowsExpand() && !renderDetailPanel,
     onClick: function onClick() {
       return toggleAllRowsExpanded(!getIsAllRowsExpanded());
     },
@@ -1208,101 +1211,6 @@ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
   })));
 };
 
-var MRT_SearchTextField = function MRT_SearchTextField(_ref) {
-  var tableInstance = _ref.tableInstance;
-  var getState = tableInstance.getState,
-      setGlobalFilter = tableInstance.setGlobalFilter,
-      _tableInstance$option = tableInstance.options,
-      _tableInstance$option2 = _tableInstance$option.icons,
-      SearchIcon = _tableInstance$option2.SearchIcon,
-      CloseIcon = _tableInstance$option2.CloseIcon,
-      idPrefix = _tableInstance$option.idPrefix,
-      localization = _tableInstance$option.localization,
-      muiSearchTextFieldProps = _tableInstance$option.muiSearchTextFieldProps,
-      onGlobalSearchFilterChange = _tableInstance$option.onGlobalSearchFilterChange;
-
-  var _getState = getState(),
-      globalFilter = _getState.globalFilter,
-      showGlobalFilter = _getState.showGlobalFilter;
-
-  var _useState = useState(null),
-      anchorEl = _useState[0],
-      setAnchorEl = _useState[1];
-
-  var _useState2 = useState(globalFilter != null ? globalFilter : ''),
-      searchValue = _useState2[0],
-      setSearchValue = _useState2[1];
-
-  var handleChange = useCallback(debounce(function (event) {
-    var _event$target$value;
-
-    setGlobalFilter((_event$target$value = event.target.value) != null ? _event$target$value : undefined);
-    onGlobalSearchFilterChange == null ? void 0 : onGlobalSearchFilterChange({
-      event: event,
-      tableInstance: tableInstance
-    });
-  }, 200), []);
-
-  var handleGlobalFilterMenuOpen = function handleGlobalFilterMenuOpen(event) {
-    setAnchorEl(event.currentTarget);
-  };
-
-  var handleClear = function handleClear() {
-    setSearchValue('');
-    setGlobalFilter(undefined);
-  };
-
-  var textFieldProps = muiSearchTextFieldProps instanceof Function ? muiSearchTextFieldProps({
-    tableInstance: tableInstance
-  }) : muiSearchTextFieldProps;
-  return React.createElement(Collapse, {
-    "in": showGlobalFilter,
-    orientation: "horizontal"
-  }, React.createElement(TextField, Object.assign({
-    id: "mrt-" + idPrefix + "-search-text-field",
-    placeholder: localization.search,
-    onChange: function onChange(event) {
-      setSearchValue(event.target.value);
-      handleChange(event);
-    },
-    value: searchValue != null ? searchValue : '',
-    variant: "standard",
-    InputProps: {
-      startAdornment: React.createElement(InputAdornment, {
-        position: "start"
-      }, React.createElement(Tooltip, {
-        arrow: true,
-        title: localization.changeSearchMode
-      }, React.createElement("span", null, React.createElement(IconButton, {
-        "aria-label": localization.changeSearchMode,
-        onClick: handleGlobalFilterMenuOpen,
-        size: "small",
-        sx: {
-          height: '1.75rem',
-          width: '1.75rem'
-        }
-      }, React.createElement(SearchIcon, null))))),
-      endAdornment: React.createElement(InputAdornment, {
-        position: "end"
-      }, React.createElement(IconButton, {
-        "aria-label": localization.clearSearch,
-        disabled: (searchValue == null ? void 0 : searchValue.length) === 0,
-        onClick: handleClear,
-        size: "small",
-        title: localization.clearSearch
-      }, React.createElement(CloseIcon, null)))
-    }
-  }, textFieldProps, {
-    sx: _extends({
-      justifySelf: 'end'
-    }, textFieldProps == null ? void 0 : textFieldProps.sx)
-  })), React.createElement(MRT_FilterOptionMenu, {
-    anchorEl: anchorEl,
-    setAnchorEl: setAnchorEl,
-    tableInstance: tableInstance
-  }));
-};
-
 var _excluded = ["tableInstance"];
 var MRT_FullScreenToggleButton = function MRT_FullScreenToggleButton(_ref) {
   var tableInstance = _ref.tableInstance,
@@ -1483,7 +1391,104 @@ var MRT_ToggleGlobalFilterButton = function MRT_ToggleGlobalFilterButton(_ref) {
   }, rest), showGlobalFilter ? React.createElement(SearchOffIcon, null) : React.createElement(SearchIcon, null)));
 };
 
+var MRT_SearchTextField = function MRT_SearchTextField(_ref) {
+  var tableInstance = _ref.tableInstance;
+  var getState = tableInstance.getState,
+      setGlobalFilter = tableInstance.setGlobalFilter,
+      _tableInstance$option = tableInstance.options,
+      _tableInstance$option2 = _tableInstance$option.icons,
+      SearchIcon = _tableInstance$option2.SearchIcon,
+      CloseIcon = _tableInstance$option2.CloseIcon,
+      idPrefix = _tableInstance$option.idPrefix,
+      localization = _tableInstance$option.localization,
+      muiSearchTextFieldProps = _tableInstance$option.muiSearchTextFieldProps,
+      onGlobalSearchFilterChange = _tableInstance$option.onGlobalSearchFilterChange;
+
+  var _getState = getState(),
+      globalFilter = _getState.globalFilter,
+      showGlobalFilter = _getState.showGlobalFilter;
+
+  var _useState = useState(null),
+      anchorEl = _useState[0],
+      setAnchorEl = _useState[1];
+
+  var _useState2 = useState(globalFilter != null ? globalFilter : ''),
+      searchValue = _useState2[0],
+      setSearchValue = _useState2[1];
+
+  var handleChange = useCallback(debounce(function (event) {
+    var _event$target$value;
+
+    setGlobalFilter((_event$target$value = event.target.value) != null ? _event$target$value : undefined);
+    onGlobalSearchFilterChange == null ? void 0 : onGlobalSearchFilterChange({
+      event: event,
+      tableInstance: tableInstance
+    });
+  }, 200), []);
+
+  var handleGlobalFilterMenuOpen = function handleGlobalFilterMenuOpen(event) {
+    setAnchorEl(event.currentTarget);
+  };
+
+  var handleClear = function handleClear() {
+    setSearchValue('');
+    setGlobalFilter(undefined);
+  };
+
+  var textFieldProps = muiSearchTextFieldProps instanceof Function ? muiSearchTextFieldProps({
+    tableInstance: tableInstance
+  }) : muiSearchTextFieldProps;
+  return React.createElement(Collapse, {
+    "in": showGlobalFilter,
+    orientation: "horizontal"
+  }, React.createElement(TextField, Object.assign({
+    id: "mrt-" + idPrefix + "-search-text-field",
+    placeholder: localization.search,
+    onChange: function onChange(event) {
+      setSearchValue(event.target.value);
+      handleChange(event);
+    },
+    value: searchValue != null ? searchValue : '',
+    variant: "standard",
+    InputProps: {
+      startAdornment: React.createElement(InputAdornment, {
+        position: "start"
+      }, React.createElement(Tooltip, {
+        arrow: true,
+        title: localization.changeSearchMode
+      }, React.createElement("span", null, React.createElement(IconButton, {
+        "aria-label": localization.changeSearchMode,
+        onClick: handleGlobalFilterMenuOpen,
+        size: "small",
+        sx: {
+          height: '1.75rem',
+          width: '1.75rem'
+        }
+      }, React.createElement(SearchIcon, null))))),
+      endAdornment: React.createElement(InputAdornment, {
+        position: "end"
+      }, React.createElement(IconButton, {
+        "aria-label": localization.clearSearch,
+        disabled: (searchValue == null ? void 0 : searchValue.length) === 0,
+        onClick: handleClear,
+        size: "small",
+        title: localization.clearSearch
+      }, React.createElement(CloseIcon, null)))
+    }
+  }, textFieldProps, {
+    sx: _extends({
+      justifySelf: 'end'
+    }, textFieldProps == null ? void 0 : textFieldProps.sx)
+  })), React.createElement(MRT_FilterOptionMenu, {
+    anchorEl: anchorEl,
+    setAnchorEl: setAnchorEl,
+    tableInstance: tableInstance
+  }));
+};
+
 var MRT_ToolbarInternalButtons = function MRT_ToolbarInternalButtons(_ref) {
+  var _renderToolbarInterna;
+
   var tableInstance = _ref.tableInstance;
   var _tableInstance$option = tableInstance.options,
       enableColumnFilters = _tableInstance$option.enableColumnFilters,
@@ -1493,24 +1498,22 @@ var MRT_ToolbarInternalButtons = function MRT_ToolbarInternalButtons(_ref) {
       enableGlobalFilter = _tableInstance$option.enableGlobalFilter,
       enableHiding = _tableInstance$option.enableHiding,
       renderToolbarInternalActions = _tableInstance$option.renderToolbarInternalActions;
-
-  if (renderToolbarInternalActions) {
-    return React.createElement(React.Fragment, null, renderToolbarInternalActions({
-      MRT_FullScreenToggleButton: MRT_FullScreenToggleButton,
-      MRT_ShowHideColumnsButton: MRT_ShowHideColumnsButton,
-      MRT_ToggleDensePaddingButton: MRT_ToggleDensePaddingButton,
-      MRT_ToggleFiltersButton: MRT_ToggleFiltersButton,
-      MRT_ToggleGlobalFilterButton: MRT_ToggleGlobalFilterButton,
-      tableInstance: tableInstance
-    }));
-  }
-
   return React.createElement(Box, {
     sx: {
       display: 'flex',
-      alignItems: 'center'
+      alignItems: 'center',
+      zIndex: 3
     }
-  }, enableFilters && enableGlobalFilter && React.createElement(MRT_ToggleGlobalFilterButton, {
+  }, (_renderToolbarInterna = renderToolbarInternalActions == null ? void 0 : renderToolbarInternalActions({
+    MRT_FullScreenToggleButton: MRT_FullScreenToggleButton,
+    MRT_ShowHideColumnsButton: MRT_ShowHideColumnsButton,
+    MRT_ToggleDensePaddingButton: MRT_ToggleDensePaddingButton,
+    MRT_ToggleFiltersButton: MRT_ToggleFiltersButton,
+    MRT_ToggleGlobalFilterButton: MRT_ToggleGlobalFilterButton,
+    tableInstance: tableInstance
+  })) != null ? _renderToolbarInterna : React.createElement(React.Fragment, null, enableGlobalFilter && React.createElement(MRT_SearchTextField, {
+    tableInstance: tableInstance
+  }), enableFilters && enableGlobalFilter && React.createElement(MRT_ToggleGlobalFilterButton, {
     tableInstance: tableInstance
   }), enableFilters && enableColumnFilters && React.createElement(MRT_ToggleFiltersButton, {
     tableInstance: tableInstance
@@ -1520,7 +1523,7 @@ var MRT_ToolbarInternalButtons = function MRT_ToolbarInternalButtons(_ref) {
     tableInstance: tableInstance
   }), enableFullScreenToggle && React.createElement(MRT_FullScreenToggleButton, {
     tableInstance: tableInstance
-  }));
+  })));
 };
 
 var MRT_TablePagination = function MRT_TablePagination(_ref) {
@@ -1581,44 +1584,36 @@ var MRT_TablePagination = function MRT_TablePagination(_ref) {
 var MRT_ToolbarAlertBanner = function MRT_ToolbarAlertBanner(_ref) {
   var _localization$selecte, _localization$selecte2;
 
-  var tableInstance = _ref.tableInstance;
+  var stackAlertBanner = _ref.stackAlertBanner,
+      tableInstance = _ref.tableInstance;
   var getPrePaginationRowModel = tableInstance.getPrePaginationRowModel,
       getSelectedRowModel = tableInstance.getSelectedRowModel,
       getState = tableInstance.getState,
       _tableInstance$option = tableInstance.options,
       localization = _tableInstance$option.localization,
-      muiTableToolbarAlertBannerProps = _tableInstance$option.muiTableToolbarAlertBannerProps,
-      positionToolbarActions = _tableInstance$option.positionToolbarActions,
-      positionToolbarAlertBanner = _tableInstance$option.positionToolbarAlertBanner,
-      renderToolbarCustomActions = _tableInstance$option.renderToolbarCustomActions;
+      muiTableToolbarAlertBannerProps = _tableInstance$option.muiTableToolbarAlertBannerProps;
 
   var _getState = getState(),
       grouping = _getState.grouping;
 
-  var isMobile = useMediaQuery('(max-width:720px)');
   var alertProps = muiTableToolbarAlertBannerProps instanceof Function ? muiTableToolbarAlertBannerProps({
     tableInstance: tableInstance
   }) : muiTableToolbarAlertBannerProps;
   var selectMessage = getSelectedRowModel().rows.length > 0 ? (_localization$selecte = localization.selectedCountOfRowCountRowsSelected) == null ? void 0 : (_localization$selecte2 = _localization$selecte.replace('{selectedCount}', getSelectedRowModel().rows.length.toString())) == null ? void 0 : _localization$selecte2.replace('{rowCount}', getPrePaginationRowModel().rows.length.toString()) : null;
   var groupedByMessage = grouping.length > 0 ? React.createElement("span", null, localization.groupedBy, ' ', grouping.map(function (columnId, index) {
-    var _tableInstance$getAll;
-
     return React.createElement(Fragment, {
       key: index + "-" + columnId
     }, index > 0 ? localization.thenBy : '', React.createElement(Chip, {
       color: "secondary",
-      label: (_tableInstance$getAll = tableInstance.getAllColumns().find(function (column) {
-        return column.id === columnId;
-      })) == null ? void 0 : _tableInstance$getAll.header,
+      label: tableInstance.getColumn(columnId).columnDef.header,
       onDelete: function onDelete() {
         return tableInstance.getColumn(columnId).toggleGrouping();
       }
     }));
   })) : null;
-  var displayAbsolute = !(isMobile || positionToolbarAlertBanner === 'bottom' && positionToolbarActions === 'bottom' || positionToolbarAlertBanner === 'top' && !!renderToolbarCustomActions);
   return React.createElement(Collapse, {
     "in": !!selectMessage || !!groupedByMessage,
-    timeout: displayAbsolute ? 0 : 200
+    timeout: stackAlertBanner ? 200 : 0
   }, React.createElement(Alert, Object.assign({
     color: "info",
     icon: false,
@@ -1627,9 +1622,8 @@ var MRT_ToolbarAlertBanner = function MRT_ToolbarAlertBanner(_ref) {
       fontSize: '1rem',
       left: 0,
       p: 0,
-      position: displayAbsolute ? 'absolute' : 'relative',
+      position: 'relative',
       right: 0,
-      minHeight: '3.5rem',
       top: 0,
       width: '100%',
       zIndex: 2
@@ -1638,7 +1632,7 @@ var MRT_ToolbarAlertBanner = function MRT_ToolbarAlertBanner(_ref) {
     sx: {
       p: '0.5rem 1rem'
     }
-  }, selectMessage, React.createElement("br", null), groupedByMessage)));
+  }, selectMessage, selectMessage && groupedByMessage && React.createElement("br", null), groupedByMessage)));
 };
 
 var MRT_LinearProgressBar = function MRT_LinearProgressBar(_ref) {
@@ -1669,6 +1663,8 @@ var commonToolbarStyles = function commonToolbarStyles(_ref) {
     backgroundColor: lighten(theme.palette.background["default"], 0.04),
     backgroundImage: 'none',
     display: 'grid',
+    minHeight: '3.5rem',
+    overflow: 'hidden',
     p: '0 !important',
     transition: 'all 0.2s ease-in-out',
     width: '100%',
@@ -1681,7 +1677,6 @@ var MRT_ToolbarTop = function MRT_ToolbarTop(_ref2) {
   var tableInstance = _ref2.tableInstance;
   var getState = tableInstance.getState,
       _tableInstance$option = tableInstance.options,
-      enableGlobalFilter = _tableInstance$option.enableGlobalFilter,
       enablePagination = _tableInstance$option.enablePagination,
       enableToolbarInternalActions = _tableInstance$option.enableToolbarInternalActions,
       idPrefix = _tableInstance$option.idPrefix,
@@ -1694,9 +1689,11 @@ var MRT_ToolbarTop = function MRT_ToolbarTop(_ref2) {
   var _getState = getState(),
       isFullScreen = _getState.isFullScreen;
 
+  var isMobile = useMediaQuery('(max-width:720px)');
   var toolbarProps = muiTableToolbarTopProps instanceof Function ? muiTableToolbarTopProps({
     tableInstance: tableInstance
   }) : muiTableToolbarTopProps;
+  var stackAlertBanner = isMobile || positionToolbarAlertBanner === 'top' && !!renderToolbarCustomActions;
   return React.createElement(Toolbar, Object.assign({
     id: "mrt-" + idPrefix + "-toolbar-top",
     variant: "dense"
@@ -1710,27 +1707,23 @@ var MRT_ToolbarTop = function MRT_ToolbarTop(_ref2) {
       }), toolbarProps == null ? void 0 : toolbarProps.sx);
     }
   }), positionToolbarAlertBanner === 'top' && React.createElement(MRT_ToolbarAlertBanner, {
+    stackAlertBanner: stackAlertBanner,
     tableInstance: tableInstance
   }), React.createElement(Box, {
     sx: {
-      p: '0.5rem',
       display: 'flex',
-      justifyContent: 'space-between'
+      justifyContent: 'space-between',
+      p: '0.5rem',
+      position: stackAlertBanner ? 'relative' : 'absolute',
+      right: 0,
+      top: 0,
+      width: 'calc(100% - 1rem)'
     }
   }, (_renderToolbarCustomA = renderToolbarCustomActions == null ? void 0 : renderToolbarCustomActions({
     tableInstance: tableInstance
-  })) != null ? _renderToolbarCustomA : React.createElement("span", null), React.createElement(Box, {
-    sx: {
-      display: 'flex',
-      gap: '0.5rem',
-      position: 'relative',
-      zIndex: 3
-    }
-  }, enableGlobalFilter && React.createElement(MRT_SearchTextField, {
-    tableInstance: tableInstance
-  }), enableToolbarInternalActions && positionToolbarActions === 'top' && React.createElement(MRT_ToolbarInternalButtons, {
+  })) != null ? _renderToolbarCustomA : React.createElement("span", null), enableToolbarInternalActions && positionToolbarActions === 'top' && React.createElement(MRT_ToolbarInternalButtons, {
     tableInstance: tableInstance
-  }))), React.createElement("div", null, enablePagination && ['top', 'both'].includes(positionPagination != null ? positionPagination : '') && React.createElement(MRT_TablePagination, {
+  })), React.createElement("div", null, enablePagination && ['top', 'both'].includes(positionPagination != null ? positionPagination : '') && React.createElement(MRT_TablePagination, {
     tableInstance: tableInstance
   })), React.createElement(MRT_LinearProgressBar, {
     tableInstance: tableInstance
@@ -1747,14 +1740,17 @@ var MRT_ToolbarBottom = function MRT_ToolbarBottom(_ref) {
       muiTableToolbarBottomProps = _tableInstance$option.muiTableToolbarBottomProps,
       positionPagination = _tableInstance$option.positionPagination,
       positionToolbarActions = _tableInstance$option.positionToolbarActions,
-      positionToolbarAlertBanner = _tableInstance$option.positionToolbarAlertBanner;
+      positionToolbarAlertBanner = _tableInstance$option.positionToolbarAlertBanner,
+      renderToolbarCustomActions = _tableInstance$option.renderToolbarCustomActions;
 
   var _getState = getState(),
       isFullScreen = _getState.isFullScreen;
 
+  var isMobile = useMediaQuery('(max-width:720px)');
   var toolbarProps = muiTableToolbarBottomProps instanceof Function ? muiTableToolbarBottomProps({
     tableInstance: tableInstance
   }) : muiTableToolbarBottomProps;
+  var stackAlertBanner = isMobile || positionToolbarAlertBanner === 'bottom' && positionToolbarActions === 'bottom' || positionToolbarAlertBanner === 'bottom' && !!renderToolbarCustomActions && positionToolbarActions === 'bottom';
   return React.createElement(Toolbar, Object.assign({
     id: "mrt-" + idPrefix + "-toolbar-bottom",
     variant: "dense"
@@ -1770,17 +1766,20 @@ var MRT_ToolbarBottom = function MRT_ToolbarBottom(_ref) {
     }
   }), React.createElement(MRT_LinearProgressBar, {
     tableInstance: tableInstance
+  }), positionToolbarAlertBanner === 'bottom' && React.createElement(MRT_ToolbarAlertBanner, {
+    tableInstance: tableInstance
   }), React.createElement(Box, {
     sx: {
       display: 'flex',
       justifyContent: 'space-between',
-      width: '100%'
+      width: '100%',
+      position: stackAlertBanner ? 'relative' : 'absolute',
+      right: 0,
+      top: 0
     }
   }, enableToolbarInternalActions && positionToolbarActions === 'bottom' ? React.createElement(MRT_ToolbarInternalButtons, {
     tableInstance: tableInstance
-  }) : React.createElement("span", null), positionToolbarAlertBanner === 'bottom' && React.createElement(MRT_ToolbarAlertBanner, {
-    tableInstance: tableInstance
-  }), enablePagination && ['bottom', 'both'].includes(positionPagination != null ? positionPagination : '') && React.createElement(MRT_TablePagination, {
+  }) : React.createElement("span", null), enablePagination && ['bottom', 'both'].includes(positionPagination != null ? positionPagination : '') && React.createElement(MRT_TablePagination, {
     tableInstance: tableInstance
   })));
 };
@@ -2077,7 +2076,7 @@ var MRT_FilterRangeFields = function MRT_FilterRangeFields(_ref) {
 };
 
 var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
-  var _getState2, _getState2$currentFil, _column$columnDef$Hea, _column$columnDef, _column$columnDef$hea, _column$columnDef$hea2;
+  var _getState2, _getState2$currentFil, _column$columnDef$Hea, _column$columnDef, _column$minSize, _column$columnDef$hea, _column$columnDef$hea2;
 
   var header = _ref.header,
       tableInstance = _ref.tableInstance;
@@ -2143,8 +2142,6 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
         fontWeight: 'bold',
         height: '100%',
         left: column.getIsPinned() === 'left' ? column.getStart('left') + "px" : undefined,
-        maxWidth: "min(" + column.getSize() + "px, fit-content)",
-        minWidth: "max(" + column.getSize() + "px, " + column.minSize + "px)",
         overflow: 'visible',
         p: isDensePadding ? column.columnDefType === 'display' ? '0 0.5rem' : '0.5rem' : column.columnDefType === 'display' ? '0.5rem 0.75rem' : '1rem',
         pb: column.columnDefType === 'display' ? 0 : undefined,
@@ -2153,9 +2150,13 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
         right: column.getIsPinned() === 'right' ? getTotalRight() + "px" : undefined,
         transition: "all " + (enableColumnResizing ? 0 : '0.2s') + " ease-in-out",
         verticalAlign: 'text-top',
-        width: header.getSize(),
         zIndex: column.getIsResizing() ? 3 : column.getIsPinned() && column.columnDefType !== 'group' ? 2 : 1
       }, tableCellProps == null ? void 0 : tableCellProps.sx);
+    },
+    style: {
+      maxWidth: "min(" + column.getSize() + "px, fit-content)",
+      minWidth: "max(" + column.getSize() + "px, " + ((_column$minSize = column.minSize) != null ? _column$minSize : 30) + "px)",
+      width: header.getSize()
     }
   }), header.isPlaceholder ? null : column.columnDefType === 'display' ? headerElement : React.createElement(Box, {
     sx: {
@@ -2207,7 +2208,7 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
   }, showFilters && !column.getFilterValue() ? React.createElement(FilterAltOff, null) : React.createElement(FilterAltIcon, null)))), (enableColumnActions || column.enableColumnActions) && column.enableColumnActions !== false && column.columnDefType !== 'group' && React.createElement(MRT_ToggleColumnActionMenuButton, {
     header: header,
     tableInstance: tableInstance
-  }), column.getCanResize() && React.createElement(Divider, Object.assign({
+  }), column.getCanResize() && React.createElement(Divider, {
     flexItem: true,
     orientation: "vertical",
     onDoubleClick: function onDoubleClick() {
@@ -2223,7 +2224,7 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
         position: 'absolute',
         right: '1px',
         touchAction: 'none',
-        transition: 'all 0.2s ease-in-out',
+        transition: column.getIsResizing() ? undefined : 'all 0.2s ease-in-out',
         userSelect: 'none',
         zIndex: 2000,
         '&:active': {
@@ -2231,15 +2232,13 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
           opacity: 1
         }
       };
-    }
-  }, {
-    onMouseDown: header.getResizeHandler,
-    onTouchStart: header.getResizeHandler
-  }, {
+    },
+    onMouseDown: header.getResizeHandler(),
+    onTouchStart: header.getResizeHandler(),
     style: {
       transform: column.getIsResizing() ? "translateX(" + getState().columnSizingInfo.deltaOffset + "px)" : 'none'
     }
-  }))), column.columnDefType === 'data' && column.getCanFilter() && React.createElement(Collapse, {
+  })), column.columnDefType === 'data' && column.getCanFilter() && React.createElement(Collapse, {
     "in": showFilters,
     mountOnEnter: true,
     unmountOnExit: true
@@ -2419,7 +2418,9 @@ var MRT_CopyButton = function MRT_CopyButton(_ref) {
     onClick: function onClick() {
       return handleCopy(cell.getValue());
     },
-    size: "small"
+    size: "small",
+    type: "button",
+    variant: "text"
   }, buttonProps, {
     sx: _extends({
       backgroundColor: 'transparent',
@@ -2433,13 +2434,12 @@ var MRT_CopyButton = function MRT_CopyButton(_ref) {
       minWidth: 'unset',
       textAlign: 'inherit',
       textTransform: 'inherit'
-    }, buttonProps == null ? void 0 : buttonProps.sx),
-    variant: "text"
+    }, buttonProps == null ? void 0 : buttonProps.sx)
   }), children));
 };
 
 var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
-  var _cell$column$columnDe, _cell$column$columnDe2, _row$subRows, _cell$column$columnDe3, _cell$column$columnDe4, _row$subRows$length, _row$subRows2;
+  var _column$minSize, _cell$column$columnDe, _cell$column$columnDe2, _row$subRows, _cell$column$columnDe3, _cell$column$columnDe4, _row$subRows$length, _row$subRows2;
 
   var cell = _ref.cell,
       enableHover = _ref.enableHover,
@@ -2523,20 +2523,22 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
         boxShadow: getIsLastLeftPinnedColumn() ? "4px 0 4px -2px " + alpha(theme.palette.common.black, 0.1) : getIsFirstRightPinnedColumn() ? "-4px 0 4px -2px " + alpha(theme.palette.common.black, 0.1) : undefined,
         cursor: isEditable && editingMode === 'cell' ? 'pointer' : 'text',
         left: column.getIsPinned() === 'left' ? column.getStart('left') + "px" : undefined,
-        maxWidth: "min(" + column.getSize() + "px, fit-content)",
-        minWidth: "max" + column.getSize() + "px, " + column.minSize + "px",
         p: isDensePadding ? column.columnDefType === 'display' ? '0 0.5rem' : '0.5rem' : column.columnDefType === 'display' ? '0.5rem 0.75rem' : '1rem',
         pl: column.id === 'mrt-expand' ? row.depth + (isDensePadding ? 0.5 : 0.75) + "rem" : undefined,
         position: column.getIsPinned() ? 'sticky' : 'relative',
         right: column.getIsPinned() === 'right' ? getTotalRight() + "px" : undefined,
         transition: 'all 0.2s ease-in-out',
         whiteSpace: isDensePadding ? 'nowrap' : 'normal',
-        width: column.getSize(),
         zIndex: column.getIsPinned() ? 1 : undefined,
         '&:hover': {
           backgroundColor: enableHover ? theme.palette.mode === 'dark' ? lighten(theme.palette.background["default"], 0.13) + " !important" : darken(theme.palette.background["default"], 0.07) + " !important" : undefined
         }
       }, tableCellProps == null ? void 0 : tableCellProps.sx);
+    },
+    style: {
+      maxWidth: "min(" + column.getSize() + "px, fit-content)",
+      minWidth: "max(" + column.getSize() + "px, " + ((_column$minSize = column.minSize) != null ? _column$minSize : 30) + "px)",
+      width: column.getSize()
     }
   }), React.createElement(React.Fragment, null, isLoading || showSkeletons ? React.createElement(Skeleton, Object.assign({
     animation: "wave",
@@ -2666,7 +2668,7 @@ var MRT_TableBody = function MRT_TableBody(_ref) {
 };
 
 var MRT_TableFooterCell = function MRT_TableFooterCell(_ref) {
-  var _ref2, _column$columnDef$Foo;
+  var _ref2, _ref3, _column$columnDef$Foo;
 
   var footer = _ref.footer,
       tableInstance = _ref.tableInstance;
@@ -2708,10 +2710,10 @@ var MRT_TableFooterCell = function MRT_TableFooterCell(_ref) {
         verticalAlign: 'text-top'
       }, tableCellProps == null ? void 0 : tableCellProps.sx);
     }
-  }), React.createElement(React.Fragment, null, footer.isPlaceholder ? null : (_ref2 = (_column$columnDef$Foo = column.columnDef.Footer == null ? void 0 : column.columnDef.Footer({
+  }), React.createElement(React.Fragment, null, footer.isPlaceholder ? null : (_ref2 = (_ref3 = (_column$columnDef$Foo = column.columnDef.Footer == null ? void 0 : column.columnDef.Footer({
     footer: footer,
     tableInstance: tableInstance
-  })) != null ? _column$columnDef$Foo : footer.renderFooter()) != null ? _ref2 : null));
+  })) != null ? _column$columnDef$Foo : column.columnDef.footer) != null ? _ref3 : footer.renderFooter()) != null ? _ref2 : null));
 };
 
 var MRT_TableFooterRow = function MRT_TableFooterRow(_ref) {
@@ -3164,12 +3166,18 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
   }));
 };
 
-var _excluded$5 = ["autoResetExpanded", "columnResizeMode", "editingMode", "enableColumnActions", "enableColumnFilters", "enableColumnResizing", "enableDensePaddingToggle", "enableExpandAll", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableHiding", "enableMultiRowSelection", "enablePagination", "enablePinning", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarBottom", "enableToolbarInternalActions", "enableToolbarTop", "icons", "localization", "persistentStateMode", "positionActionsColumn", "positionPagination", "positionToolbarActions", "positionToolbarAlertBanner"];
+var _excluded$5 = ["autoResetExpanded", "columnResizeMode", "defaultColumn", "editingMode", "enableColumnActions", "enableColumnFilters", "enableColumnResizing", "enableDensePaddingToggle", "enableExpandAll", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableHiding", "enableMultiRowSelection", "enablePagination", "enablePinning", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarBottom", "enableToolbarInternalActions", "enableToolbarTop", "icons", "localization", "persistentStateMode", "positionActionsColumn", "positionPagination", "positionToolbarActions", "positionToolbarAlertBanner"];
 var MaterialReactTable = (function (_ref) {
   var _ref$autoResetExpande = _ref.autoResetExpanded,
       autoResetExpanded = _ref$autoResetExpande === void 0 ? false : _ref$autoResetExpande,
       _ref$columnResizeMode = _ref.columnResizeMode,
       columnResizeMode = _ref$columnResizeMode === void 0 ? 'onEnd' : _ref$columnResizeMode,
+      _ref$defaultColumn = _ref.defaultColumn,
+      defaultColumn = _ref$defaultColumn === void 0 ? {
+    minSize: 50,
+    maxSize: 1000,
+    size: 150
+  } : _ref$defaultColumn,
       _ref$editingMode = _ref.editingMode,
       editingMode = _ref$editingMode === void 0 ? 'row' : _ref$editingMode,
       _ref$enableColumnActi = _ref.enableColumnActions,
@@ -3229,6 +3237,7 @@ var MaterialReactTable = (function (_ref) {
   return React.createElement(MRT_TableRoot, Object.assign({
     autoResetExpanded: autoResetExpanded,
     columnResizeMode: columnResizeMode,
+    defaultColumn: defaultColumn,
     editingMode: editingMode,
     enableColumnActions: enableColumnActions,
     enableColumnFilters: enableColumnFilters,