material-react-table 0.13.3 → 0.14.0

package/dist/MaterialReactTable.d.ts

@@ -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, enableRowSelection, enableSelectAll, enableSorting, enableStickyHeader, enableTableFooter, enableTableHead, enableToolbarBottom, enableToolbarInternalActions, enableToolbarTop, icons, localization, persistentStateMode, positionActionsColumn, positionGlobalFilter, positionPagination, 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

@@ -5363,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",
@@ -5371,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, {
@@ -5382,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
@@ -5408,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({
@@ -5435,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
@@ -5483,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)
@@ -5585,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,
@@ -5598,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,
@@ -5614,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"
@@ -5633,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
   }));
@@ -5659,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;
@@ -5675,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"
@@ -5698,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) {
@@ -7792,7 +7803,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", "enableRowSelection", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarBottom", "enableToolbarInternalActions", "enableToolbarTop", "icons", "localization", "persistentStateMode", "positionActionsColumn", "positionGlobalFilter", "positionPagination", "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,
@@ -7862,10 +7873,8 @@ var MaterialReactTable = (function (_ref) {
       positionGlobalFilter = _ref$positionGlobalFi === void 0 ? 'right' : _ref$positionGlobalFi,
       _ref$positionPaginati = _ref.positionPagination,
       positionPagination = _ref$positionPaginati === void 0 ? 'bottom' : _ref$positionPaginati,
-      _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$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,
@@ -7906,7 +7915,6 @@ var MaterialReactTable = (function (_ref) {
     positionActionsColumn: positionActionsColumn,
     positionGlobalFilter: positionGlobalFilter,
     positionPagination: positionPagination,
-    positionToolbarActions: positionToolbarActions,
     positionToolbarAlertBanner: positionToolbarAlertBanner,
     rowNumberMode: rowNumberMode,
     selectAllMode: selectAllMode