material-react-table 0.13.2 → 0.14.1

package/README.md

@@ -1,17 +1,20 @@
 # Material React Table
 
+<a href="https://npmjs.com/package/material-react-table" target="_blank_">
+  <img alt="" src="https://badgen.net/npm/v/material-react-table" />
+</a>
 <a href="https://bundlephobia.com/result?p=material-react-table" target="_blank_">
   <img alt="" src="https://badgen.net/bundlephobia/minzip/material-react-table@latest" />
 </a>
-
 <a href="https://npmjs.com/package/material-react-table" target="_blank_">
   <img alt="" src="https://img.shields.io/npm/dm/material-react-table.svg" />
 </a>
-
 <a href="https://github.com/KevinVandy/material-react-table" target="_blank_">
   <img alt="" src="https://img.shields.io/github/stars/KevinVandy/material-react-table.svg?style=social&label=Star" />
 </a>
 
+---
+
 > This Project is based on `@tanstack/react-table` v8, which itself is still in beta, so therefore this package is also still in alpha/beta
 
 - A fully featured Material UI V5 implementation of Tanstack React Table v8 (beta)
@@ -31,6 +34,8 @@ View the [github source code](https://github.com/KevinVandy/material-react-table
 
 Join the [discord](https://discord.gg/5wqyRx6fnm) server to join in on the development discussion or ask questions
 
+---
+
 ### Features (All Features work and are MVP, but are still being polished)
 
 _All features can easily be enabled/disabled_
@@ -65,6 +70,8 @@ _All features can easily be enabled/disabled_
 - [x] Tree Data / Expanding Sub-rows
 - [x] Virtualization (react-virtual)
 
+---
+
 ### Installation
 
 1. Install Peer Dependencies (Material UI v5)
@@ -79,4 +86,14 @@ npm install @mui/material @mui/icons-material @emotion/react @emotion/styled
 npm install material-react-table
 ```
 
-_`@tanstack/react-table`, `react-virtual` and `react-dnd`_ are internal dependencies, so you don't need to install them yourself.
+_`@tanstack/react-table`, `react-virtual` and `react-dnd`_ are internal dependencies, so you don't need to install them yourself.
+
+---
+
+### Contributors
+
+<a href="https://github.com/kevinvandy/material-react-table/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=kevinvandy/material-react-table" />
+</a>
+
+PRs are Welcome, but please discuss in [GitHub Discussions](https://github.com/KevinVandy/material-react-table/discussions) or the [Discord Server](https://discord.gg/5wqyRx6fnm) first!

package/dist/MaterialReactTable.d.ts

@@ -260,7 +260,7 @@ export declare type MaterialReactTableProps<D extends Record<string, any> = {}>
         instance: MRT_TableInstance<D>;
         column: MRT_Column<D>;
     }) => TableCellProps);
-    muiTableFooterProps?: TableFooterProps | (({ instance }: {
+    muiTableFooterProps?: TableFooterProps | (({ instance, }: {
         instance: MRT_TableInstance<D>;
     }) => TableFooterProps);
     muiTableFooterRowProps?: TableRowProps | (({ instance, footerGroup, }: {
@@ -408,7 +408,6 @@ export declare type MaterialReactTableProps<D extends Record<string, any> = {}>
     positionActionsColumn?: 'first' | 'last';
     positionGlobalFilter?: 'left' | 'right';
     positionPagination?: 'bottom' | 'top' | 'both';
-    positionToolbarActions?: 'bottom' | 'top';
     positionToolbarAlertBanner?: 'bottom' | 'top';
     renderDetailPanel?: ({ row, instance, }: {
         row: MRT_Row<D>;
@@ -423,7 +422,10 @@ export declare type MaterialReactTableProps<D extends Record<string, any> = {}>
         row: MRT_Row<D>;
         instance: MRT_TableInstance<D>;
     }) => ReactNode;
-    renderToolbarCustomActions?: ({ instance, }: {
+    renderToolbarBottomCustomActions?: ({ instance, }: {
+        instance: MRT_TableInstance<D>;
+    }) => ReactNode;
+    renderToolbarTopCustomActions?: ({ instance, }: {
         instance: MRT_TableInstance<D>;
     }) => ReactNode;
     renderToolbarInternalActions?: ({ instance, MRT_ToggleGlobalFilterButton, MRT_ToggleFiltersButton, MRT_ShowHideColumnsButton, MRT_ToggleDensePaddingButton, MRT_FullScreenToggleButton, }: {
@@ -449,5 +451,5 @@ export declare type MaterialReactTableProps<D extends Record<string, any> = {}>
     tableId?: string;
     virtualizerProps?: VirtualizerOptions<HTMLDivElement>;
 };
-declare const _default: <D extends Record<string, any> = {}>({ autoResetExpanded, columnResizeMode, defaultColumn, editingMode, enableColumnActions, enableColumnFilters, enableColumnOrdering, enableColumnResizing, enableDensityToggle, enableExpandAll, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableGrouping, enableHiding, enableMultiRowSelection, enablePagination, enablePinning, enableSelectAll, enableSorting, enableStickyHeader, enableTableFooter, enableTableHead, enableToolbarBottom, enableToolbarInternalActions, enableToolbarTop, icons, localization, persistentStateMode, positionActionsColumn, positionPagination, positionGlobalFilter, positionToolbarActions, positionToolbarAlertBanner, rowNumberMode, selectAllMode, ...rest }: MaterialReactTableProps<D>) => JSX.Element;
+declare const _default: <D extends Record<string, any> = {}>({ autoResetExpanded, columnResizeMode, defaultColumn, editingMode, enableColumnActions, enableColumnFilters, enableColumnOrdering, enableColumnResizing, enableDensityToggle, enableExpandAll, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableGrouping, enableHiding, enableMultiRowSelection, enablePagination, enablePinning, enableRowSelection, enableSelectAll, enableSorting, enableStickyHeader, enableTableFooter, enableTableHead, enableToolbarBottom, enableToolbarInternalActions, enableToolbarTop, icons, localization, persistentStateMode, positionActionsColumn, positionGlobalFilter, positionPagination, positionToolbarAlertBanner, rowNumberMode, selectAllMode, ...rest }: MaterialReactTableProps<D>) => JSX.Element;
 export default _default;

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

@@ -3412,6 +3412,17 @@ var reorderColumn = function reorderColumn(movingColumn, receivingColumn, column
   columnOrder.splice(columnOrder.indexOf(receivingColumn.id), 0, columnOrder.splice(columnOrder.indexOf(movingColumn.id), 1)[0]);
   setColumnOrder([].concat(columnOrder));
 };
+var getLeadingDisplayColumnIds = function getLeadingDisplayColumnIds(props) {
+  return [(props.positionActionsColumn === 'first' && props.enableRowActions || props.enableEditing && props.editingMode === 'row') && 'mrt-row-actions', (props.enableExpanding || props.enableGrouping) && 'mrt-expand', props.enableRowSelection && 'mrt-select', props.enableRowNumbers && 'mrt-row-numbers'].filter(Boolean);
+};
+var getTrailingDisplayColumnIds = function getTrailingDisplayColumnIds(props) {
+  return [(props.positionActionsColumn === 'last' && props.enableRowActions || props.enableEditing && props.editingMode === 'row') && 'mrt-row-actions'];
+};
+var getDefaultColumnOrderIds = function getDefaultColumnOrderIds(props) {
+  return [].concat(getLeadingDisplayColumnIds(props), getAllLeafColumnDefs(props.columns).map(function (c) {
+    return c.id;
+  }), getTrailingDisplayColumnIds(props)).filter(Boolean);
+};
 
 var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
   var _column$columns2;
@@ -3597,7 +3608,7 @@ var MRT_ShowHideColumnsMenu = function MRT_ShowHideColumnsMenu(_ref) {
     onClick: hideAllColumns
   }, localization.hideAll), !isSubMenu && enableColumnOrdering && React__default.createElement(material.Button, {
     onClick: function onClick() {
-      return instance.resetColumnOrder();
+      return instance.setColumnOrder(getDefaultColumnOrderIds(instance.options));
     }
   }, localization.resetOrder), !isSubMenu && enablePinning && React__default.createElement(material.Button, {
     disabled: !getIsSomeColumnsPinned(),
@@ -5352,7 +5363,7 @@ var MRT_SearchTextField = function MRT_SearchTextField(_ref) {
       }, React__default.createElement(material.Tooltip, {
         arrow: true,
         title: localization.changeSearchMode
-      }, React__default.createElement("span", null, React__default.createElement(material.IconButton, {
+      }, React__default.createElement(material.IconButton, {
         "aria-label": localization.changeSearchMode,
         onClick: handleGlobalFilterMenuOpen,
         size: "small",
@@ -5360,7 +5371,7 @@ var MRT_SearchTextField = function MRT_SearchTextField(_ref) {
           height: '1.75rem',
           width: '1.75rem'
         }
-      }, React__default.createElement(SearchIcon, null))))),
+      }, React__default.createElement(SearchIcon, null)))),
       endAdornment: React__default.createElement(material.InputAdornment, {
         position: "end"
       }, React__default.createElement(material.IconButton, {
@@ -5371,11 +5382,7 @@ var MRT_SearchTextField = function MRT_SearchTextField(_ref) {
         title: localization.clearSearch
       }, React__default.createElement(CloseIcon, null)))
     }
-  }, textFieldProps, {
-    sx: _extends({
-      justifySelf: 'end'
-    }, textFieldProps == null ? void 0 : textFieldProps.sx)
-  })), React__default.createElement(MRT_FilterOptionMenu, {
+  }, textFieldProps)), React__default.createElement(MRT_FilterOptionMenu, {
     anchorEl: anchorEl,
     setAnchorEl: setAnchorEl,
     instance: instance
@@ -5397,8 +5404,8 @@ var MRT_ToolbarInternalButtons = function MRT_ToolbarInternalButtons(_ref) {
       renderToolbarInternalActions = _instance$options.renderToolbarInternalActions;
   return React__default.createElement(material.Box, {
     sx: {
-      display: 'flex',
       alignItems: 'center',
+      display: 'flex',
       zIndex: 3
     }
   }, (_renderToolbarInterna = renderToolbarInternalActions == null ? void 0 : renderToolbarInternalActions({
@@ -5424,19 +5431,23 @@ var MRT_ToolbarInternalButtons = function MRT_ToolbarInternalButtons(_ref) {
 };
 
 var MRT_TablePagination = function MRT_TablePagination(_ref) {
-  var instance = _ref.instance;
+  var instance = _ref.instance,
+      position = _ref.position;
   var getPrePaginationRowModel = instance.getPrePaginationRowModel,
       getState = instance.getState,
       setPageIndex = instance.setPageIndex,
       setPageSize = instance.setPageSize,
-      muiTablePaginationProps = instance.options.muiTablePaginationProps;
+      _instance$options = instance.options,
+      muiTablePaginationProps = _instance$options.muiTablePaginationProps,
+      enableToolbarInternalActions = _instance$options.enableToolbarInternalActions;
 
   var _getState = getState(),
       _getState$pagination = _getState.pagination,
       _getState$pagination$ = _getState$pagination.pageSize,
       pageSize = _getState$pagination$ === void 0 ? 10 : _getState$pagination$,
       _getState$pagination$2 = _getState$pagination.pageIndex,
-      pageIndex = _getState$pagination$2 === void 0 ? 0 : _getState$pagination$2;
+      pageIndex = _getState$pagination$2 === void 0 ? 0 : _getState$pagination$2,
+      showGlobalFilter = _getState.showGlobalFilter;
 
   var tablePaginationProps = muiTablePaginationProps instanceof Function ? muiTablePaginationProps({
     instance: instance
@@ -5472,6 +5483,7 @@ var MRT_TablePagination = function MRT_TablePagination(_ref) {
   }, 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)
@@ -5574,12 +5586,11 @@ var commonToolbarStyles = function commonToolbarStyles(_ref) {
     overflow: 'hidden',
     p: '0 !important',
     transition: 'all 0.2s ease-in-out',
-    width: '100%',
     zIndex: 1
   };
 };
 var MRT_ToolbarTop = function MRT_ToolbarTop(_ref2) {
-  var _renderToolbarCustomA;
+  var _renderToolbarTopCust;
 
   var instance = _ref2.instance;
   var getState = instance.getState,
@@ -5587,13 +5598,12 @@ var MRT_ToolbarTop = function MRT_ToolbarTop(_ref2) {
       enableGlobalFilter = _instance$options.enableGlobalFilter,
       enablePagination = _instance$options.enablePagination,
       enableToolbarInternalActions = _instance$options.enableToolbarInternalActions,
-      tableId = _instance$options.tableId,
       muiTableToolbarTopProps = _instance$options.muiTableToolbarTopProps,
-      positionPagination = _instance$options.positionPagination,
       positionGlobalFilter = _instance$options.positionGlobalFilter,
-      positionToolbarActions = _instance$options.positionToolbarActions,
+      positionPagination = _instance$options.positionPagination,
       positionToolbarAlertBanner = _instance$options.positionToolbarAlertBanner,
-      renderToolbarCustomActions = _instance$options.renderToolbarCustomActions;
+      renderToolbarTopCustomActions = _instance$options.renderToolbarTopCustomActions,
+      tableId = _instance$options.tableId;
 
   var _getState = getState(),
       isFullScreen = _getState.isFullScreen,
@@ -5603,7 +5613,7 @@ var MRT_ToolbarTop = function MRT_ToolbarTop(_ref2) {
   var toolbarProps = muiTableToolbarTopProps instanceof Function ? muiTableToolbarTopProps({
     instance: instance
   }) : muiTableToolbarTopProps;
-  var stackAlertBanner = isMobile || positionToolbarAlertBanner === 'top' && (!!renderToolbarCustomActions || showGlobalFilter);
+  var stackAlertBanner = isMobile || positionToolbarAlertBanner === 'top' && (!!renderToolbarTopCustomActions || showGlobalFilter);
   return React__default.createElement(material.Toolbar, Object.assign({
     id: "mrt-" + tableId + "-toolbar-top",
     variant: "dense"
@@ -5622,23 +5632,27 @@ var MRT_ToolbarTop = function MRT_ToolbarTop(_ref2) {
   }), React__default.createElement(material.Box, {
     sx: {
       alignItems: 'flex-start',
+      boxSizing: 'border-box',
       display: 'flex',
       justifyContent: 'space-between',
       p: '0.5rem',
       position: stackAlertBanner ? 'relative' : 'absolute',
       right: 0,
       top: 0,
-      width: renderToolbarCustomActions ? '100%' : undefined
+      width: '100%'
     }
   }, enableGlobalFilter && positionGlobalFilter === 'left' && React__default.createElement(MRT_SearchTextField, {
     instance: instance
-  }), (_renderToolbarCustomA = renderToolbarCustomActions == null ? void 0 : renderToolbarCustomActions({
+  }), (_renderToolbarTopCust = renderToolbarTopCustomActions == null ? void 0 : renderToolbarTopCustomActions({
     instance: instance
-  })) != null ? _renderToolbarCustomA : React__default.createElement("span", null), enableToolbarInternalActions && positionToolbarActions === 'top' && React__default.createElement(MRT_ToolbarInternalButtons, {
+  })) != null ? _renderToolbarTopCust : React__default.createElement("span", null), enableToolbarInternalActions ? React__default.createElement(MRT_ToolbarInternalButtons, {
     instance: instance
-  })), React__default.createElement("div", null, enablePagination && ['top', 'both'].includes(positionPagination != null ? positionPagination : '') && React__default.createElement(MRT_TablePagination, {
+  }) : enableGlobalFilter && positionGlobalFilter === 'right' && React__default.createElement(MRT_SearchTextField, {
     instance: instance
-  })), React__default.createElement(MRT_LinearProgressBar, {
+  })), enablePagination && ['top', 'both'].includes(positionPagination != null ? positionPagination : '') && React__default.createElement(MRT_TablePagination, {
+    instance: instance,
+    position: "top"
+  }), React__default.createElement(MRT_LinearProgressBar, {
     alignTo: "bottom",
     instance: instance
   }));
@@ -5648,14 +5662,12 @@ var MRT_ToolbarBottom = function MRT_ToolbarBottom(_ref) {
   var instance = _ref.instance;
   var getState = instance.getState,
       _instance$options = instance.options,
-      enableToolbarInternalActions = _instance$options.enableToolbarInternalActions,
-      tableId = _instance$options.tableId,
       enablePagination = _instance$options.enablePagination,
       muiTableToolbarBottomProps = _instance$options.muiTableToolbarBottomProps,
       positionPagination = _instance$options.positionPagination,
-      positionToolbarActions = _instance$options.positionToolbarActions,
       positionToolbarAlertBanner = _instance$options.positionToolbarAlertBanner,
-      renderToolbarCustomActions = _instance$options.renderToolbarCustomActions;
+      renderToolbarBottomCustomActions = _instance$options.renderToolbarBottomCustomActions,
+      tableId = _instance$options.tableId;
 
   var _getState = getState(),
       isFullScreen = _getState.isFullScreen;
@@ -5664,7 +5676,7 @@ var MRT_ToolbarBottom = function MRT_ToolbarBottom(_ref) {
   var toolbarProps = muiTableToolbarBottomProps instanceof Function ? muiTableToolbarBottomProps({
     instance: instance
   }) : muiTableToolbarBottomProps;
-  var stackAlertBanner = isMobile || positionToolbarAlertBanner === 'bottom' && positionToolbarActions === 'bottom' || positionToolbarAlertBanner === 'bottom' && !!renderToolbarCustomActions && positionToolbarActions === 'bottom';
+  var stackAlertBanner = isMobile || positionToolbarAlertBanner === 'bottom' && !!renderToolbarBottomCustomActions;
   return React__default.createElement(material.Toolbar, Object.assign({
     id: "mrt-" + tableId + "-toolbar-bottom",
     variant: "dense"
@@ -5687,16 +5699,26 @@ var MRT_ToolbarBottom = function MRT_ToolbarBottom(_ref) {
     sx: {
       display: 'flex',
       justifyContent: 'space-between',
-      width: '100%',
+      width: '100%'
+    }
+  }, renderToolbarBottomCustomActions ? React__default.createElement(material.Box, {
+    sx: {
+      p: '0.5rem'
+    }
+  }, renderToolbarBottomCustomActions({
+    instance: instance
+  })) : React__default.createElement("span", null), React__default.createElement(material.Box, {
+    sx: {
+      display: 'flex',
+      justifyContent: 'flex-end',
       position: stackAlertBanner ? 'relative' : 'absolute',
       right: 0,
       top: 0
     }
-  }, enableToolbarInternalActions && positionToolbarActions === 'bottom' ? React__default.createElement(MRT_ToolbarInternalButtons, {
-    instance: instance
-  }) : React__default.createElement("span", null), enablePagination && ['bottom', 'both'].includes(positionPagination != null ? positionPagination : '') && React__default.createElement(MRT_TablePagination, {
-    instance: instance
-  })));
+  }, enablePagination && ['bottom', 'both'].includes(positionPagination != null ? positionPagination : '') && React__default.createElement(MRT_TablePagination, {
+    instance: instance,
+    position: "bottom"
+  }))));
 };
 
 var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
@@ -7038,6 +7060,7 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
       muiTableBodyCellProps = _instance$options.muiTableBodyCellProps,
       muiTableBodyCellSkeletonProps = _instance$options.muiTableBodyCellSkeletonProps,
       onCellClick = _instance$options.onCellClick,
+      onRowClick = _instance$options.onRowClick,
       rowNumberMode = _instance$options.rowNumberMode,
       tableId = _instance$options.tableId,
       setColumnOrder = instance.setColumnOrder,
@@ -7124,7 +7147,7 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
       return _extends({
         backgroundColor: column.getIsPinned() ? material.alpha(material.lighten(theme.palette.background["default"], 0.04), 0.95) : undefined,
         boxShadow: getIsLastLeftPinnedColumn() ? "4px 0 4px -2px " + material.alpha(theme.palette.common.black, 0.1) : getIsFirstRightPinnedColumn() ? "-4px 0 4px -2px " + material.alpha(theme.palette.common.black, 0.1) : undefined,
-        cursor: isEditable && editingMode === 'cell' ? 'pointer' : 'text',
+        cursor: isEditable && editingMode === 'cell' || onRowClick || onCellClick ? 'pointer' : 'text',
         left: column.getIsPinned() === 'left' ? column.getStart('left') + "px" : undefined,
         overflow: 'hidden',
         p: density === 'compact' ? columnDefType === 'display' ? '0 0.5rem' : '0.5rem' : density === 'comfortable' ? columnDefType === 'display' ? '0.5rem 0.75rem' : '1rem' : columnDefType === 'display' ? '1rem 1.25rem' : '1.5rem',
@@ -7520,7 +7543,7 @@ var MRT_TablePaper = function MRT_TablePaper(_ref) {
 };
 
 var MRT_TableRoot = function MRT_TableRoot(props) {
-  var _initialState$current, _initialState$current2, _initialState$density, _initialState$isFullS, _initialState$showFil, _initialState$showGlo, _props$globalFilterFn, _props$state3, _props$state4, _props$onCurrentEditi, _props$onCurrentEditi2, _props$onCurrentFilte, _props$onCurrentGloba, _props$onDensityChang, _props$onIsFullScreen, _props$onShowFiltersC, _props$onShowGlobalFi;
+  var _initialState$columnO, _initialState$current, _initialState$current2, _initialState$density, _initialState$isFullS, _initialState$showFil, _initialState$showGlo, _props$globalFilterFn, _props$state3, _props$state4, _props$onCurrentEditi, _props$onCurrentEditi2, _props$onCurrentFilte, _props$onCurrentGloba, _props$onDensityChang, _props$onIsFullScreen, _props$onShowFiltersC, _props$onShowGlobalFi;
 
   var _useState = React.useState(props.tableId),
       tableId = _useState[0],
@@ -7531,15 +7554,11 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
 
     return setIdPrefix((_props$tableId = props.tableId) != null ? _props$tableId : Math.random().toString(36).substring(2, 9));
   }, [props.tableId]);
-  var showActionColumn = props.enableRowActions || props.enableEditing && props.editingMode === 'row';
-  var showExpandColumn = props.enableExpanding || props.enableGrouping;
   var initialState = React.useMemo(function () {
     var _props$initialState, _initState$columnOrde;
 
     var initState = (_props$initialState = props.initialState) != null ? _props$initialState : {};
-    initState.columnOrder = ((_initState$columnOrde = initState == null ? void 0 : initState.columnOrder) != null ? _initState$columnOrde : props.enableColumnOrdering || props.enableGrouping) ? [showActionColumn && 'mrt-row-actions', showExpandColumn && 'mrt-expand', props.enableRowSelection && 'mrt-select', props.enableRowNumbers && 'mrt-row-numbers'].concat(getAllLeafColumnDefs(props.columns).map(function (c) {
-      return c.id;
-    })).filter(Boolean) : [];
+    initState.columnOrder = (_initState$columnOrde = initState.columnOrder) != null ? _initState$columnOrde : getDefaultColumnOrderIds(props);
 
     if (!props.enablePersistentState || !props.tableId) {
       return initState;
@@ -7566,43 +7585,47 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
     return initState;
   }, []);
 
-  var _useState2 = React.useState((_initialState$current = initialState == null ? void 0 : initialState.currentEditingCell) != null ? _initialState$current : null),
-      currentEditingCell = _useState2[0],
-      setCurrentEditingCell = _useState2[1];
+  var _useState2 = React.useState((_initialState$columnO = initialState.columnOrder) != null ? _initialState$columnO : []),
+      columnOrder = _useState2[0],
+      setColumnOrder = _useState2[1];
+
+  var _useState3 = React.useState((_initialState$current = initialState == null ? void 0 : initialState.currentEditingCell) != null ? _initialState$current : null),
+      currentEditingCell = _useState3[0],
+      setCurrentEditingCell = _useState3[1];
 
-  var _useState3 = React.useState((_initialState$current2 = initialState == null ? void 0 : initialState.currentEditingRow) != null ? _initialState$current2 : null),
-      currentEditingRow = _useState3[0],
-      setCurrentEditingRow = _useState3[1];
+  var _useState4 = React.useState((_initialState$current2 = initialState == null ? void 0 : initialState.currentEditingRow) != null ? _initialState$current2 : null),
+      currentEditingRow = _useState4[0],
+      setCurrentEditingRow = _useState4[1];
 
-  var _useState4 = React.useState((_initialState$density = initialState == null ? void 0 : initialState.density) != null ? _initialState$density : 'comfortable'),
-      density = _useState4[0],
-      setDensity = _useState4[1];
+  var _useState5 = React.useState((_initialState$density = initialState == null ? void 0 : initialState.density) != null ? _initialState$density : 'comfortable'),
+      density = _useState5[0],
+      setDensity = _useState5[1];
 
-  var _useState5 = React.useState((_initialState$isFullS = initialState == null ? void 0 : initialState.isFullScreen) != null ? _initialState$isFullS : false),
-      isFullScreen = _useState5[0],
-      setIsFullScreen = _useState5[1];
+  var _useState6 = React.useState((_initialState$isFullS = initialState == null ? void 0 : initialState.isFullScreen) != null ? _initialState$isFullS : false),
+      isFullScreen = _useState6[0],
+      setIsFullScreen = _useState6[1];
 
-  var _useState6 = React.useState((_initialState$showFil = initialState == null ? void 0 : initialState.showFilters) != null ? _initialState$showFil : false),
-      showFilters = _useState6[0],
-      setShowFilters = _useState6[1];
+  var _useState7 = React.useState((_initialState$showFil = initialState == null ? void 0 : initialState.showFilters) != null ? _initialState$showFil : false),
+      showFilters = _useState7[0],
+      setShowFilters = _useState7[1];
 
-  var _useState7 = React.useState((_initialState$showGlo = initialState == null ? void 0 : initialState.showGlobalFilter) != null ? _initialState$showGlo : false),
-      showGlobalFilter = _useState7[0],
-      setShowGlobalFilter = _useState7[1];
+  var _useState8 = React.useState((_initialState$showGlo = initialState == null ? void 0 : initialState.showGlobalFilter) != null ? _initialState$showGlo : false),
+      showGlobalFilter = _useState8[0],
+      setShowGlobalFilter = _useState8[1];
 
-  var _useState8 = React.useState(function () {
+  var _useState9 = React.useState(function () {
     return Object.assign.apply(Object, [{}].concat(getAllLeafColumnDefs(props.columns).map(function (c) {
       var _ref, _c$filterFn, _initialState$current3, _c$filterSelectOption, _ref2;
 
       return _ref2 = {}, _ref2[c.id] = (_ref = (_c$filterFn = c.filterFn) != null ? _c$filterFn : initialState == null ? void 0 : (_initialState$current3 = initialState.currentFilterFns) == null ? void 0 : _initialState$current3[c.id]) != null ? _ref : !!((_c$filterSelectOption = c.filterSelectOptions) != null && _c$filterSelectOption.length) ? 'equals' : 'fuzzy', _ref2;
     })));
   }),
-      currentFilterFns = _useState8[0],
-      setCurrentFilterFns = _useState8[1];
+      currentFilterFns = _useState9[0],
+      setCurrentFilterFns = _useState9[1];
 
-  var _useState9 = React.useState((_props$globalFilterFn = props.globalFilterFn) != null ? _props$globalFilterFn : 'fuzzy'),
-      currentGlobalFilterFn = _useState9[0],
-      setCurrentGlobalFilterFn = _useState9[1];
+  var _useState10 = React.useState((_props$globalFilterFn = props.globalFilterFn) != null ? _props$globalFilterFn : 'fuzzy'),
+      currentGlobalFilterFn = _useState10[0],
+      setCurrentGlobalFilterFn = _useState10[1];
 
   var table = React.useMemo(function () {
     return (// @ts-ignore
@@ -7619,16 +7642,14 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
         getSubRows: function getSubRows(row) {
           return row == null ? void 0 : row.subRows;
         },
-        tableId: tableId,
-        initialState: initialState
+        tableId: tableId
       })
     );
   }, []);
-
-  var _useMemo = React.useMemo(function () {
+  var displayColumns = React.useMemo(function () {
     var _props$localization, _props$localization2, _props$localization3, _props$localization5;
 
-    var leadingDisplayColumns = [showActionColumn && createDisplayColumn(table, {
+    return [columnOrder.includes('mrt-row-actions') && createDisplayColumn(table, {
       Cell: function Cell(_ref3) {
         var cell = _ref3.cell;
         return React__default.createElement(MRT_ToggleRowActionMenuButton, {
@@ -7641,7 +7662,7 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
       muiTableBodyCellProps: props.muiTableBodyCellProps,
       muiTableHeadCellProps: props.muiTableHeadCellProps,
       size: 70
-    }), showExpandColumn && createDisplayColumn(table, {
+    }), columnOrder.includes('mrt-expand') && createDisplayColumn(table, {
       Cell: function Cell(_ref4) {
         var cell = _ref4.cell;
         return React__default.createElement(MRT_ExpandButton, {
@@ -7659,7 +7680,7 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
       muiTableBodyCellProps: props.muiTableBodyCellProps,
       muiTableHeadCellProps: props.muiTableHeadCellProps,
       size: 50
-    }), props.enableRowSelection && createDisplayColumn(table, {
+    }), columnOrder.includes('mrt-select') && createDisplayColumn(table, {
       Cell: function Cell(_ref5) {
         var cell = _ref5.cell;
         return React__default.createElement(MRT_SelectCheckbox, {
@@ -7678,7 +7699,7 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
       muiTableBodyCellProps: props.muiTableBodyCellProps,
       muiTableHeadCellProps: props.muiTableHeadCellProps,
       size: 50
-    }), props.enableRowNumbers && createDisplayColumn(table, {
+    }), columnOrder.includes('mrt-row-numbers') && createDisplayColumn(table, {
       Cell: function Cell(_ref6) {
         var cell = _ref6.cell;
         return cell.row.index + 1;
@@ -7694,23 +7715,11 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
       muiTableHeadCellProps: props.muiTableHeadCellProps,
       size: 50
     })].filter(Boolean);
-    var trailingDisplayColumns = [];
-
-    if (props.enableRowActions && props.positionActionsColumn === 'last') {
-      trailingDisplayColumns.push.apply(trailingDisplayColumns, leadingDisplayColumns.splice(leadingDisplayColumns.findIndex(function (col) {
-        return col.id === 'mrt-row-actions';
-      }), 1));
-    }
-
-    return [leadingDisplayColumns, trailingDisplayColumns];
-  }, [props.editingMode, props.enableEditing, props.enableExpandAll, props.enableExpanding, props.enableGrouping, props.enableRowActions, props.enableRowNumbers, props.enableRowSelection, props.enableSelectAll, props.localization, props.muiTableBodyCellProps, props.muiTableHeadCellProps, props.positionActionsColumn, table]),
-      leadingDisplayColumns = _useMemo[0],
-      trailingDisplayColumns = _useMemo[1];
-
+  }, [columnOrder, props.editingMode, props.enableEditing, props.enableExpandAll, props.enableExpanding, props.enableGrouping, props.enableRowActions, props.enableRowNumbers, props.enableRowSelection, props.enableSelectAll, props.localization, props.muiTableBodyCellProps, props.muiTableHeadCellProps, props.positionActionsColumn, table]);
   var columns = React.useMemo(function () {
-    return [].concat(leadingDisplayColumns, props.columns.map(function (column) {
+    return [].concat(displayColumns, props.columns.map(function (column) {
       return column.columns ? createGroup(table, column, currentFilterFns) : createDataColumn(table, column, currentFilterFns);
-    }), trailingDisplayColumns);
+    }));
   }, [table, props.columns, currentFilterFns]);
   var data = React.useMemo(function () {
     var _props$state, _props$state2;
@@ -7724,13 +7733,17 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
     }) : props.data;
   }, [props.data, (_props$state3 = props.state) == null ? void 0 : _props$state3.isLoading, (_props$state4 = props.state) == null ? void 0 : _props$state4.showSkeletons]); //@ts-ignore
 
-  var instance = _extends({}, reactTable.useTableInstance(table, _extends({}, props, {
+  var instance = _extends({}, reactTable.useTableInstance(table, _extends({
+    onColumnOrderChange: setColumnOrder
+  }, props, {
     //@ts-ignore
     columns: columns,
     data: data,
     //@ts-ignore
     globalFilterFn: currentGlobalFilterFn,
+    initialState: initialState,
     state: _extends({
+      columnOrder: columnOrder,
       currentEditingCell: currentEditingCell,
       currentEditingRow: currentEditingRow,
       currentFilterFns: currentFilterFns,
@@ -7791,7 +7804,7 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
   }));
 };
 
-var _excluded$5 = ["autoResetExpanded", "columnResizeMode", "defaultColumn", "editingMode", "enableColumnActions", "enableColumnFilters", "enableColumnOrdering", "enableColumnResizing", "enableDensityToggle", "enableExpandAll", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGrouping", "enableHiding", "enableMultiRowSelection", "enablePagination", "enablePinning", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarBottom", "enableToolbarInternalActions", "enableToolbarTop", "icons", "localization", "persistentStateMode", "positionActionsColumn", "positionPagination", "positionGlobalFilter", "positionToolbarActions", "positionToolbarAlertBanner", "rowNumberMode", "selectAllMode"];
+var _excluded$5 = ["autoResetExpanded", "columnResizeMode", "defaultColumn", "editingMode", "enableColumnActions", "enableColumnFilters", "enableColumnOrdering", "enableColumnResizing", "enableDensityToggle", "enableExpandAll", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGrouping", "enableHiding", "enableMultiRowSelection", "enablePagination", "enablePinning", "enableRowSelection", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarBottom", "enableToolbarInternalActions", "enableToolbarTop", "icons", "localization", "persistentStateMode", "positionActionsColumn", "positionGlobalFilter", "positionPagination", "positionToolbarAlertBanner", "rowNumberMode", "selectAllMode"];
 var MaterialReactTable = (function (_ref) {
   var _ref$autoResetExpande = _ref.autoResetExpanded,
       autoResetExpanded = _ref$autoResetExpande === void 0 ? false : _ref$autoResetExpande,
@@ -7833,6 +7846,8 @@ var MaterialReactTable = (function (_ref) {
       enablePagination = _ref$enablePagination === void 0 ? true : _ref$enablePagination,
       _ref$enablePinning = _ref.enablePinning,
       enablePinning = _ref$enablePinning === void 0 ? false : _ref$enablePinning,
+      _ref$enableRowSelecti = _ref.enableRowSelection,
+      enableRowSelection = _ref$enableRowSelecti === void 0 ? false : _ref$enableRowSelecti,
       _ref$enableSelectAll = _ref.enableSelectAll,
       enableSelectAll = _ref$enableSelectAll === void 0 ? true : _ref$enableSelectAll,
       _ref$enableSorting = _ref.enableSorting,
@@ -7855,14 +7870,12 @@ var MaterialReactTable = (function (_ref) {
       persistentStateMode = _ref$persistentStateM === void 0 ? 'sessionStorage' : _ref$persistentStateM,
       _ref$positionActionsC = _ref.positionActionsColumn,
       positionActionsColumn = _ref$positionActionsC === void 0 ? 'first' : _ref$positionActionsC,
-      _ref$positionPaginati = _ref.positionPagination,
-      positionPagination = _ref$positionPaginati === void 0 ? 'bottom' : _ref$positionPaginati,
       _ref$positionGlobalFi = _ref.positionGlobalFilter,
       positionGlobalFilter = _ref$positionGlobalFi === void 0 ? 'right' : _ref$positionGlobalFi,
-      _ref$positionToolbarA = _ref.positionToolbarActions,
-      positionToolbarActions = _ref$positionToolbarA === void 0 ? 'top' : _ref$positionToolbarA,
-      _ref$positionToolbarA2 = _ref.positionToolbarAlertBanner,
-      positionToolbarAlertBanner = _ref$positionToolbarA2 === void 0 ? 'top' : _ref$positionToolbarA2,
+      _ref$positionPaginati = _ref.positionPagination,
+      positionPagination = _ref$positionPaginati === void 0 ? 'bottom' : _ref$positionPaginati,
+      _ref$positionToolbarA = _ref.positionToolbarAlertBanner,
+      positionToolbarAlertBanner = _ref$positionToolbarA === void 0 ? 'top' : _ref$positionToolbarA,
       _ref$rowNumberMode = _ref.rowNumberMode,
       rowNumberMode = _ref$rowNumberMode === void 0 ? 'original' : _ref$rowNumberMode,
       _ref$selectAllMode = _ref.selectAllMode,
@@ -7888,6 +7901,7 @@ var MaterialReactTable = (function (_ref) {
     enableMultiRowSelection: enableMultiRowSelection,
     enablePagination: enablePagination,
     enablePinning: enablePinning,
+    enableRowSelection: enableRowSelection,
     enableSelectAll: enableSelectAll,
     enableSorting: enableSorting,
     enableStickyHeader: enableStickyHeader,
@@ -7902,7 +7916,6 @@ var MaterialReactTable = (function (_ref) {
     positionActionsColumn: positionActionsColumn,
     positionGlobalFilter: positionGlobalFilter,
     positionPagination: positionPagination,
-    positionToolbarActions: positionToolbarActions,
     positionToolbarAlertBanner: positionToolbarAlertBanner,
     rowNumberMode: rowNumberMode,
     selectAllMode: selectAllMode