@luminati-io/uikit 3.4.7 → 3.4.9

package/dist/umd/uikit.development.js

@@ -30467,11 +30467,13 @@ var CodeBlock = function CodeBlock(props) {
     themeProp = props.theme,
     lineNumbers = props.lineNumbers,
     copyButton = props.copyButton,
-    onCopy = props.onCopy;
+    onCopy = props.onCopy,
+    with_dropdown = props.with_dropdown;
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(CodeBlockWrapper, {
     className: className,
     "data-testid": "code_block"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(CodeBlockHeader, {
+    $with_dropdown: with_dropdown,
     $theme: themeProp
   }, header), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_code_snippet__WEBPACK_IMPORTED_MODULE_5__.CodeSnippet, {
     max_height: max_height,
@@ -30503,16 +30505,16 @@ var CodeBlockWrapper = styled_components__WEBPACK_IMPORTED_MODULE_1___default().
 })(["border-radius:4px;overflow:hidden;font-family:", ";font-size:", ";"], _theme__WEBPACK_IMPORTED_MODULE_3__["default"].font_family.sans, _theme__WEBPACK_IMPORTED_MODULE_3__["default"].font_size.md);
 var CodeBlockHeader = styled_components__WEBPACK_IMPORTED_MODULE_1___default()(_layout__WEBPACK_IMPORTED_MODULE_4__.Flex).attrs({
   align_items: 'center',
-  justify_content: 'space-between',
-  padding: '0.9em 1em'
+  justify_content: 'space-between'
 }).withConfig({
   displayName: "CodeBlockHeader",
   componentId: "sc-dgi5hi-1"
 })(["", ""], function (props) {
+  var padding = props.$with_dropdown ? '0.5em 0.8em' : '0.9em 1em';
   if (props.$theme == 'white') {
-    return (0,styled_components__WEBPACK_IMPORTED_MODULE_1__.css)(["background-color:", ";color:", ";border-bottom:1px solid ", ";"], _theme__WEBPACK_IMPORTED_MODULE_3__["default"].color.gray_2, _theme__WEBPACK_IMPORTED_MODULE_3__["default"].color.gray_9, _theme__WEBPACK_IMPORTED_MODULE_3__["default"].color.gray_5);
+    return (0,styled_components__WEBPACK_IMPORTED_MODULE_1__.css)(["padding:", ";background-color:", ";color:", ";border-bottom:1px solid ", ";"], padding, _theme__WEBPACK_IMPORTED_MODULE_3__["default"].color.gray_2, _theme__WEBPACK_IMPORTED_MODULE_3__["default"].color.gray_9, _theme__WEBPACK_IMPORTED_MODULE_3__["default"].color.gray_5);
   }
-  return (0,styled_components__WEBPACK_IMPORTED_MODULE_1__.css)(["background-color:", ";color:", ";"], _theme__WEBPACK_IMPORTED_MODULE_3__["default"].color.gray_11_50, _theme__WEBPACK_IMPORTED_MODULE_3__["default"].color.gray_9);
+  return (0,styled_components__WEBPACK_IMPORTED_MODULE_1__.css)(["padding:", ";background-color:", ";color:", ";"], padding, _theme__WEBPACK_IMPORTED_MODULE_3__["default"].color.gray_11_50, _theme__WEBPACK_IMPORTED_MODULE_3__["default"].color.gray_9);
 });
 
 /***/ }),
@@ -31765,7 +31767,7 @@ Icon.propTypes = {
   name: prop_types__WEBPACK_IMPORTED_MODULE_2___default().oneOf(_utils__WEBPACK_IMPORTED_MODULE_5__.iconNames).isRequired,
   color: prop_types__WEBPACK_IMPORTED_MODULE_2___default().oneOf(_utils__WEBPACK_IMPORTED_MODULE_5__.colorNames),
   size: prop_types__WEBPACK_IMPORTED_MODULE_2___default().oneOf(['xxs', 'xs', 'sm', 'md', 'lg', 'xl']),
-  verticalAlign: prop_types__WEBPACK_IMPORTED_MODULE_2___default().oneOf(['top', 'middle', 'bottom', 'baseline', 'text-top', 'text-bottom', 'super'])
+  verticalAlign: prop_types__WEBPACK_IMPORTED_MODULE_2___default().oneOf(['top', 'middle', 'bottom', 'baseline', 'text-top', 'text-bottom', 'super', 'sub'])
 };
 var StyledSvg = styled_components__WEBPACK_IMPORTED_MODULE_1___default().svg.withConfig({
   displayName: "StyledSvg",
@@ -33193,7 +33195,7 @@ var DraggableItem = function DraggableItem(props) {
     Dragger = props.Dragger,
     isDragging = props.isDragging;
   return /*#__PURE__*/React.createElement(DraggedContainer, {
-    isDragging: isDragging
+    $dragging: isDragging
   }, /*#__PURE__*/React.createElement(Dragger, null, !disableDrag && /*#__PURE__*/React.createElement(_icon__WEBPACK_IMPORTED_MODULE_3__.Icon, {
     name: "DragAndDrop",
     size: "xs",
@@ -33214,7 +33216,7 @@ var DraggedContainer = styled_components__WEBPACK_IMPORTED_MODULE_0___default()(
   displayName: "DraggedContainer",
   componentId: "sc-167vnen-0"
 })(["border-radius:4px;&:hover{background-color:", ";}", ""], _theme__WEBPACK_IMPORTED_MODULE_4__["default"].color.gray_2, function (props) {
-  return props.isDragging && (0,styled_components__WEBPACK_IMPORTED_MODULE_0__.css)(["background-color:", ";"], _theme__WEBPACK_IMPORTED_MODULE_4__["default"].color.gray_3);
+  return props.$dragging && (0,styled_components__WEBPACK_IMPORTED_MODULE_0__.css)(["background-color:", ";"], _theme__WEBPACK_IMPORTED_MODULE_4__["default"].color.gray_3);
 });
 var Truncated_label = styled_components__WEBPACK_IMPORTED_MODULE_0___default()(_typography__WEBPACK_IMPORTED_MODULE_2__.Label).withConfig({
   displayName: "Truncated_label",
@@ -33309,8 +33311,8 @@ var DroppableArea = function DroppableArea(props) {
 var DropComp = function DropComp(props) {
   return /*#__PURE__*/React.createElement(SectionFlex, {
     flex_direction: "column",
-    isLast: props.isLast,
-    containerDirection: props.containerDirection
+    $last: props.isLast,
+    $direction: props.containerDirection
   }, /*#__PURE__*/React.createElement(_typography__WEBPACK_IMPORTED_MODULE_4__.Label, {
     style: {
       marginTop: '6px',
@@ -33319,14 +33321,14 @@ var DropComp = function DropComp(props) {
   }, props.name || 'Section ' + props.index), props.children);
 };
 var borderProp = function borderProp(_ref) {
-  var containerDirection = _ref.containerDirection;
-  return 'border-' + (containerDirection == 'row' ? 'right' : 'bottom');
+  var $direction = _ref.$direction;
+  return 'border-' + ($direction == 'row' ? 'right' : 'bottom');
 };
 var SectionFlex = styled_components__WEBPACK_IMPORTED_MODULE_2___default()(_layout__WEBPACK_IMPORTED_MODULE_3__.Flex).withConfig({
   displayName: "SectionFlex",
   componentId: "sc-2htus7-0"
 })(["padding-right:8px;padding-left:8px;", ""], function (props) {
-  return !props.isLast && (0,styled_components__WEBPACK_IMPORTED_MODULE_2__.css)(["", ":1px solid ", ";"], borderProp(props), _theme__WEBPACK_IMPORTED_MODULE_5__["default"].color.gray_4);
+  return !props.$last && (0,styled_components__WEBPACK_IMPORTED_MODULE_2__.css)(["", ":1px solid ", ";"], borderProp(props), _theme__WEBPACK_IMPORTED_MODULE_5__["default"].color.gray_4);
 });
 DroppableArea.displayName = 'DroppableArea';
 DropComp.displayName = 'DropComp';
@@ -33909,7 +33911,8 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 
 var useStyles = function useStyles(_ref) {
   var styles = _ref.styles,
-    size = _ref.size;
+    size = _ref.size,
+    menuPortalTarget = _ref.menuPortalTarget;
   return (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(function () {
     return (0,_util_with_user_styles__WEBPACK_IMPORTED_MODULE_5__.withUserStyles)(styles, {
       control: function control(baseStyles, _ref2) {
@@ -33976,7 +33979,8 @@ var useStyles = function useStyles(_ref) {
           width: '100%',
           backgroundColor: _theme__WEBPACK_IMPORTED_MODULE_1__["default"].color.white,
           borderRadius: _theme__WEBPACK_IMPORTED_MODULE_1__["default"].spacing['02'],
-          boxShadow: _theme__WEBPACK_IMPORTED_MODULE_1__["default"].box_shadow.md
+          boxShadow: _theme__WEBPACK_IMPORTED_MODULE_1__["default"].box_shadow.md,
+          zIndex: menuPortalTarget ? baseStyles.zIndex : _constants__WEBPACK_IMPORTED_MODULE_3__.Z_INDEX.dropdown
         });
       },
       menuPortal: function menuPortal(baseStyles) {
@@ -34022,7 +34026,7 @@ var useStyles = function useStyles(_ref) {
         });
       }
     });
-  }, [styles, size]);
+  }, [styles, size, menuPortalTarget]);
 };
 
 /***/ }),
@@ -36112,8 +36116,8 @@ __webpack_require__.r(__webpack_exports__);
 /*jslint react:true*/
 
 
-_menu__WEBPACK_IMPORTED_MODULE_0__["default"].Item = _menu_item__WEBPACK_IMPORTED_MODULE_1__["default"];
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_menu__WEBPACK_IMPORTED_MODULE_0__["default"]);
+_menu__WEBPACK_IMPORTED_MODULE_0__.Menu.Item = _menu_item__WEBPACK_IMPORTED_MODULE_1__.MenuItem;
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_menu__WEBPACK_IMPORTED_MODULE_0__.Menu);
 
 /***/ }),
 
@@ -36126,7 +36130,7 @@ _menu__WEBPACK_IMPORTED_MODULE_0__["default"].Item = _menu_item__WEBPACK_IMPORTE
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */   Menu: () => (/* binding */ Menu)
 /* harmony export */ });
 /* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! prop-types */ "prop-types");
 /* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_0__);
@@ -36173,7 +36177,6 @@ Menu.propTypes = {
   size: prop_types__WEBPACK_IMPORTED_MODULE_0___default().oneOf(['sm', 'md', 'lg']),
   items: prop_types__WEBPACK_IMPORTED_MODULE_0___default().arrayOf((prop_types__WEBPACK_IMPORTED_MODULE_0___default().any)).isRequired
 };
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Menu);
 
 /***/ }),
 
@@ -36186,7 +36189,7 @@ Menu.propTypes = {
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */   MenuItem: () => (/* binding */ MenuItem)
 /* harmony export */ });
 /* harmony import */ var lodash_omit__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! lodash/omit */ "./node_modules/lodash/omit.js");
 /* harmony import */ var lodash_omit__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(lodash_omit__WEBPACK_IMPORTED_MODULE_0__);
@@ -36214,7 +36217,7 @@ __webpack_require__.r(__webpack_exports__);
 var _excluded = ["type", "text", "secondaryText", "tertiaryText", "description", "size", "children", "variant", "tag", "disabled", "selected", "subMenu", "tooltip", "isFirstItem"],
   _excluded2 = ["isLeft"],
   _excluded3 = ["subItems", "children"],
-  _excluded4 = ["popover"];
+  _excluded4 = ["popover", "onClick"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -36231,7 +36234,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 
 
-var MenuItem = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().forwardRef(function (props, ref) {
+var MenuItem = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_2__.forwardRef)(function (props, ref) {
   var type = props.type,
     text = props.text,
     secondaryText = props.secondaryText,
@@ -36314,7 +36317,7 @@ MenuItem.propTypes = {
   subMenu: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
   tooltip: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node)
 };
-var MenuItemComp = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().forwardRef(function (props, ref) {
+var MenuItemComp = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_2__.forwardRef)(function (props, ref) {
   var subItems = props.subItems,
     children = props.children,
     rest = _objectWithoutProperties(props, _excluded3);
@@ -36342,13 +36345,19 @@ var MenuItemButton = styled_components__WEBPACK_IMPORTED_MODULE_3___default().di
 }, function (props) {
   return props['aria-disabled'] ? 'not-allowed' : 'pointer';
 }, _theme__WEBPACK_IMPORTED_MODULE_6__["default"].color.gray_2, _theme__WEBPACK_IMPORTED_MODULE_6__["default"].color.gray_4);
-var MenuItemPopover = (0,_hoc__WEBPACK_IMPORTED_MODULE_4__.withPopover)(function (_ref) {
-  var popover = _ref.popover,
-    rest = _objectWithoutProperties(_ref, _excluded4);
+var MenuItemPopoverTrigger = function MenuItemPopoverTrigger(props) {
+  var popover = props.popover,
+    onClick = props.onClick,
+    rest = _objectWithoutProperties(props, _excluded4);
+  var _onClick = (0,react__WEBPACK_IMPORTED_MODULE_2__.useCallback)(function (evt) {
+    onClick === null || onClick === void 0 || onClick(evt);
+    popover.toggle();
+  }, [onClick, popover.toggle]);
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(MenuItemButton, _extends({}, rest, {
-    onClick: popover.toggle
+    onClick: _onClick
   }));
-}, function (props) {
+};
+var MenuItemPopover = (0,_hoc__WEBPACK_IMPORTED_MODULE_4__.withPopover)(MenuItemPopoverTrigger, function (props) {
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(_shared__WEBPACK_IMPORTED_MODULE_13__.MenuContainer, {
     onClick: props.popover.hide
   }, props.subItems);
@@ -36416,14 +36425,13 @@ var Description = styled_components__WEBPACK_IMPORTED_MODULE_3___default()(_typo
 })(["width:100%;overflow-x:clip;text-overflow:ellipsis;"]);
 var buildSubItems = function buildSubItems(children, itemProps) {
   return Array.isArray(children) && children.length > 0 ? children.map(function (item, ind) {
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(_menu__WEBPACK_IMPORTED_MODULE_10__["default"].Item, _extends({
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(_menu__WEBPACK_IMPORTED_MODULE_10__.Menu.Item, _extends({
       key: item.key
     }, item, itemProps, {
       isFirstItem: ind == 0
     }));
   }) : undefined;
 };
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (MenuItem);
 
 /***/ }),
 
@@ -37823,12 +37831,13 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _pinned_columns__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./pinned_columns */ "./src/table/pinned_columns.js");
 /* harmony import */ var _expandable_rows__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./expandable_rows */ "./src/table/expandable_rows.js");
 /* harmony import */ var _select_rows__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./select_rows */ "./src/table/select_rows.js");
+/* harmony import */ var _order_logic__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./order_logic */ "./src/table/order_logic.js");
 // LICENSE_CODE ZON
 
 
 /*jslint react:true*/
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["data", "columnsSort", "pageSize", "pageSizes", "children", "stateManager", "hooks", "NoDataComp", "LoadingComp", "ExpandHandleComp", "noDataText", "loadingText", "isLoading", "onPageChange", "manualPagination", "totalCount", "paginateExpandedRows", "getHeaderProps", "getColumnProps", "getRowProps", "getCellProps", "getFooterProps", "selectedRowIds"];
+var _excluded = ["data", "columnsSort", "pageSize", "pageSizes", "children", "stateManager", "hooks", "NoDataComp", "LoadingComp", "ExpandHandleComp", "noDataText", "loadingText", "isLoading", "onPageChange", "manualPagination", "totalCount", "paginateExpandedRows", "getHeaderProps", "getColumnProps", "getRowProps", "getCellProps", "getFooterProps", "selectedRowIds", "canOrderColumns"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -37857,6 +37866,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 
 
+
 var assign = Object.assign;
 var defaultPropGetter = function defaultPropGetter() {
   return {};
@@ -37915,6 +37925,8 @@ var Provider = function Provider(props) {
     _props$getFooterProps = props.getFooterProps,
     getFooterProps = _props$getFooterProps === void 0 ? defaultPropGetter : _props$getFooterProps,
     selectedRowIds = props.selectedRowIds,
+    _props$canOrderColumn = props.canOrderColumns,
+    canOrderColumns = _props$canOrderColumn === void 0 ? false : _props$canOrderColumn,
     rest = _objectWithoutProperties(props, _excluded);
   var _useState = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(0),
     _useState2 = _slicedToArray(_useState, 2),
@@ -37967,9 +37979,12 @@ var Provider = function Provider(props) {
   }, [manualPagination, totalCount, pageIndex, _pageSize]);
   var _LoadingComp = useComp(loadingText, LoadingComp);
   var _NoDataComp = useComp(noDataText, NoDataComp);
+  var orderLogic = (0,_order_logic__WEBPACK_IMPORTED_MODULE_11__.useOrderLogic)(table);
   var value = _objectSpread(_objectSpread({
     columnsSort: columnsSort
   }, table), {}, {
+    canOrderColumns: canOrderColumns,
+    orderLogic: orderLogic,
     LoadingComp: _LoadingComp,
     NoDataComp: _NoDataComp
   });
@@ -37994,7 +38009,8 @@ Provider.defaultProps = {
   getRowProps: defaultPropGetter,
   getCellProps: defaultPropGetter,
   getFooterProps: defaultPropGetter,
-  rowDensity: 'busy_bee'
+  rowDensity: 'busy_bee',
+  canOrderColumns: false
 };
 Provider.propTypes = {
   columns: prop_types__WEBPACK_IMPORTED_MODULE_0___default().arrayOf(prop_types__WEBPACK_IMPORTED_MODULE_0___default().shape({
@@ -38046,7 +38062,8 @@ Provider.propTypes = {
   stickyHeader: prop_types__WEBPACK_IMPORTED_MODULE_0___default().oneOfType([(prop_types__WEBPACK_IMPORTED_MODULE_0___default().bool), (prop_types__WEBPACK_IMPORTED_MODULE_0___default().object)]),
   scrollTarget: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().any),
   className: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().string),
-  onSelectRows: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().func)
+  onSelectRows: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().func),
+  canOrderColumns: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().bool)
 };
 var calcPageCount = function calcPageCount(totalCount, pageSize) {
   return Math.ceil(totalCount / pageSize);
@@ -38679,7 +38696,9 @@ var HeaderCell = function HeaderCell(props) {
     getColumnProps = _useTableContext2.getColumnProps,
     getHeaderProps = _useTableContext2.getHeaderProps,
     columnsSort = _useTableContext2.columnsSort,
-    fullWidth = _useTableContext2.fullWidth;
+    fullWidth = _useTableContext2.fullWidth,
+    canOrderColumns = _useTableContext2.canOrderColumns,
+    orderLogic = _useTableContext2.orderLogic;
   var sort = columnsSort[id];
   var canSort = header.can_sort && header.on_sort;
   var handleSort = (0,react__WEBPACK_IMPORTED_MODULE_1__.useCallback)(function () {
@@ -38725,7 +38744,8 @@ var HeaderCell = function HeaderCell(props) {
     visible: hovered,
     onItemClick: function onItemClick() {
       return setHovered(false);
-    }
+    },
+    orderLogic: canOrderColumns && orderLogic
   }), canResize && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(HeaderCellResizer, _extends({}, getResizerProps(), {
     $isResizing: isResizing
   }))));
@@ -38807,7 +38827,8 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 var HeaderFunctions = function HeaderFunctions(props) {
   var header = props.header,
     visible = props.visible,
-    onItemClick = props.onItemClick;
+    onItemClick = props.onItemClick,
+    orderLogic = props.orderLogic;
   var id = header.id,
     on_sort = header.on_sort,
     canHide = header.canHide,
@@ -38815,6 +38836,38 @@ var HeaderFunctions = function HeaderFunctions(props) {
     canPin = header.canPin;
   var canSort = header.can_sort && header.on_sort;
   var items = [];
+  if (orderLogic) {
+    var firsts = orderLogic.firsts,
+      lasts = orderLogic.lasts,
+      moveBackwards = orderLogic.moveBackwards,
+      moveForward = orderLogic.moveForward;
+    if (!Object.keys(firsts).includes(id)) {
+      items.push({
+        id: 'move_back',
+        children: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(OrderColumn, {
+          id: id,
+          dir: "back",
+          action: moveBackwards
+        })
+      });
+    }
+    if (!Object.keys(lasts).includes(id)) {
+      items.push({
+        id: 'move_forward',
+        children: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(OrderColumn, {
+          id: id,
+          dir: "forward",
+          action: moveForward
+        })
+      });
+    }
+    if ((canSort || canHide || canPin) && (!Object.keys(firsts).includes(id) || !Object.keys(lasts).includes(id))) {
+      items.push({
+        id: 'sep',
+        $separator: true
+      });
+    }
+  }
   if (canSort) {
     items.push({
       id: 'sort_asc',
@@ -38902,6 +38955,25 @@ var MenuItem = styled_components__WEBPACK_IMPORTED_MODULE_1___default().li.withC
 })(["list-style:none;&:hover{background-color:", ";}", ""], _theme__WEBPACK_IMPORTED_MODULE_5__["default"].color.gray_2, function (props) {
   return props.$separator && (0,styled_components__WEBPACK_IMPORTED_MODULE_1__.css)(["padding:0;height:1px;background-color:", ";&:hover{background-color:", ";}"], _theme__WEBPACK_IMPORTED_MODULE_5__["default"].color.gray_4, _theme__WEBPACK_IMPORTED_MODULE_5__["default"].color.gray_4);
 });
+var OrderColumn = function OrderColumn(props) {
+  var id = props.id,
+    dir = props.dir,
+    action = props.action;
+  var text = dir == 'back' ? 'Column Left' : 'Column Right';
+  var handleClick = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function () {
+    return action(id);
+  }, [id, action]);
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(FunctionWrapper, {
+    onClick: handleClick
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_icon__WEBPACK_IMPORTED_MODULE_3__.Icon, {
+    name: dir == 'back' ? 'ArrowLeft' : 'ArrowRight',
+    color: "gray_9",
+    size: "xs"
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_6__.Label, {
+    variant: "sm",
+    color: "gray_11_50"
+  }, text));
+};
 var SortColumn = function SortColumn(props) {
   var id = props.id,
     sort = props.sort,
@@ -39000,6 +39072,150 @@ _table__WEBPACK_IMPORTED_MODULE_3__["default"].plugins = _plugin__WEBPACK_IMPORT
 
 /***/ }),
 
+/***/ "./src/table/order_logic.js":
+/*!**********************************!*\
+  !*** ./src/table/order_logic.js ***!
+  \**********************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   useOrderLogic: () => (/* binding */ useOrderLogic)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+// LICENSE_CODE ZON
+
+
+/*jslint react:true*/
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+
+var useOrderLogic = function useOrderLogic(table) {
+  var _table$state = table.state,
+    columnOrder = _table$state.columnOrder,
+    hiddenColumns = _table$state.hiddenColumns,
+    pinnedColumns = _table$state.pinnedColumns,
+    setColumnOrder = table.setColumnOrder,
+    setHiddenColumns = table.setHiddenColumns,
+    setPinnedColumns = table.setPinnedColumns,
+    allColumns = table.allColumns;
+  var getColumnCategory = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (id) {
+    if (hiddenColumns.includes(id)) return 'hidden';
+    if (pinnedColumns.includes(id)) return 'pinned';
+    return 'visible';
+  }, [hiddenColumns, pinnedColumns]);
+  var fullOrder = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(function () {
+    var rest;
+    if (columnOrder.length == allColumns.length) rest = [];else {
+      rest = allColumns.filter(function (c) {
+        return !columnOrder.includes(c.id);
+      }).map(function (c) {
+        return c.id;
+      });
+    }
+    return [].concat(_toConsumableArray(columnOrder), _toConsumableArray(rest));
+  }, [columnOrder, allColumns]);
+  var orders = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(function () {
+    var _orders = {
+      visible: [],
+      pinned: [],
+      hidden: []
+    };
+    for (var i = 0, l = fullOrder.length; i < l; i++) _orders[getColumnCategory(fullOrder[i])].push(fullOrder[i]);
+    return _orders;
+  }, [fullOrder, getColumnCategory]);
+  var firsts = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(function () {
+    return Object.fromEntries(Object.entries(orders).map(function (_ref) {
+      var _ref2 = _slicedToArray(_ref, 2),
+        key = _ref2[0],
+        _ref2$ = _slicedToArray(_ref2[1], 1),
+        first = _ref2$[0];
+      return first && [key, first];
+    }).filter(Boolean));
+  }, [orders]);
+  var lasts = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(function () {
+    return Object.fromEntries(Object.entries(orders).map(function (_ref3) {
+      var _ref4 = _slicedToArray(_ref3, 2),
+        key = _ref4[0],
+        arr = _ref4[1];
+      return arr.length && [key, arr[arr.length - 1]];
+    }).filter(Boolean));
+  }, [orders]);
+  var setOrders = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (_ref5) {
+    var pinned = _ref5.pinned,
+      visible = _ref5.visible,
+      hidden = _ref5.hidden;
+    return setColumnOrder([].concat(_toConsumableArray(pinned), _toConsumableArray(visible), _toConsumableArray(hidden)));
+  }, [setColumnOrder]);
+  var moveBackwards = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (id) {
+    var category = getColumnCategory(id);
+    var arr = orders[category];
+    var n = arr.indexOf(id);
+    console.log('orders1', orders, category, n);
+    if (n <= 0) return;
+    var new_arr = arr.toSpliced(n, 1);
+    new_arr.splice(n - 1, 0, id);
+    var newOrder = _objectSpread({}, orders);
+    newOrder[category] = new_arr;
+    console.log('orders', orders, newOrder);
+    setOrders(newOrder);
+  }, [getColumnCategory, orders, setOrders]);
+  var moveForward = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (id) {
+    var category = getColumnCategory(id);
+    var arr = orders[category];
+    var n = arr.indexOf(id);
+    if (n == -1 || n == arr.length - 1) return;
+    var new_arr = arr.toSpliced(n, 1);
+    new_arr.splice(n + 1, 0, id);
+    var newOrder = _objectSpread({}, orders);
+    newOrder[category] = new_arr;
+    setOrders(newOrder);
+  }, [getColumnCategory, orders, setOrders]);
+  var moveColumn = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (id, cat, n) {
+    var srcCat = getColumnCategory(id);
+    if (srcCat == cat && orders[srcCat][n] == id) return;
+    var newOrders = _objectSpread({}, orders);
+    newOrders[srcCat] = newOrders[srcCat].filter(function (_id) {
+      return _id != id;
+    });
+    newOrders[cat] = newOrders.toSpliced(n, 0, id);
+    setOrders(newOrders);
+    if (srcCat == cat) return;
+    if (srcCat == 'hidden' || cat == 'hidden') setHiddenColumns(newOrders.hidden);
+    if (srcCat == 'pinned' || cat == 'pinned') setPinnedColumns(newOrders.pinned);
+  }, [getColumnCategory, orders, setOrders, setHiddenColumns, setPinnedColumns]);
+  var res = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(function () {
+    return {
+      orders: orders,
+      firsts: firsts,
+      lasts: lasts,
+      setOrders: setOrders,
+      moveBackwards: moveBackwards,
+      moveForward: moveForward,
+      moveColumn: moveColumn
+    };
+  }, [orders, firsts, lasts, setOrders, moveBackwards, moveForward, moveColumn]);
+  return res;
+};
+
+/***/ }),
+
 /***/ "./src/table/pagination.js":
 /*!*********************************!*\
   !*** ./src/table/pagination.js ***!