react-table-edit 1.4.17 → 1.4.19

package/dist/index.js

@@ -1158,7 +1158,7 @@ if (process.env.NODE_ENV !== 'production') {
 
 var PropTypes = propTypes$1.exports;
 
-var classnames$2 = {exports: {}};
+var classnames$1 = {exports: {}};
 
 /*!
 	Copyright (c) 2018 Jed Watson.
@@ -1233,9 +1233,9 @@ var classnames$2 = {exports: {}};
 		window.classNames = classNames;
 	}
 }());
-}(classnames$2));
+}(classnames$1));
 
-var classNames$1 = classnames$2.exports;
+var classNames$2 = classnames$1.exports;
 
 var ManagerReferenceNodeContext = React__namespace.createContext();
 var ManagerReferenceNodeSetterContext = React__namespace.createContext();
@@ -4587,7 +4587,7 @@ const Row = props => {
     const isXs = !i;
     colClasses.push(isXs ? `row-cols-${colSize}` : `row-cols-${colWidth}-${colSize}`);
   });
-  const classes = mapToCssModules(classNames$1(className, noGutters ? 'gx-0' : null, form ? 'form-row' : 'row', colClasses), cssModule);
+  const classes = mapToCssModules(classNames$2(className, noGutters ? 'gx-0' : null, form ? 'form-row' : 'row', colClasses), cssModule);
   return /*#__PURE__*/React__default["default"].createElement(Tag, _extends$5({}, attributes, {
     className: classes
   }));
@@ -4647,7 +4647,7 @@ const getColumnClasses = (attributes, cssModule, widths = colWidths$1) => {
     if (isObject$1(columnProp)) {
       const colSizeInterfix = isXs ? '-' : `-${colWidth}-`;
       const colClass = getColumnSizeClass$1(isXs, colWidth, columnProp.size);
-      colClasses.push(mapToCssModules(classNames$1({
+      colClasses.push(mapToCssModules(classNames$2({
         [colClass]: columnProp.size || columnProp.size === '',
         [`order${colSizeInterfix}${columnProp.order}`]: columnProp.order || columnProp.order === 0,
         [`offset${colSizeInterfix}${columnProp.offset}`]: columnProp.offset || columnProp.offset === 0
@@ -4681,7 +4681,7 @@ const Col = props => {
     colClasses.push('col');
   }
 
-  const classes = mapToCssModules(classNames$1(className, colClasses), cssModule);
+  const classes = mapToCssModules(classNames$2(className, colClasses), cssModule);
   return /*#__PURE__*/React__default["default"].createElement(Tag, _extends$5({}, modifiedAttributes, {
     className: classes
   }));
@@ -4789,7 +4789,7 @@ class NavLink extends React__default["default"].Component {
     } = _this$props,
         attributes = _objectWithoutProperties$1(_this$props, _excluded$15);
 
-    const classes = mapToCssModules(classNames$1(className, 'nav-link', {
+    const classes = mapToCssModules(classNames$2(className, 'nav-link', {
       disabled: attributes.disabled,
       active: active
     }), cssModule);
@@ -4877,7 +4877,7 @@ class Button extends React__default["default"].Component {
         attributes = _objectWithoutProperties$1(_this$props, _excluded$12);
 
     const btnOutlineColor = `btn${outline ? '-outline' : ''}-${color}`;
-    const classes = mapToCssModules(classNames$1(className, close && 'btn-close', close || 'btn', close || btnOutlineColor, size ? `btn-${size}` : false, block ? 'd-block w-100' : false, {
+    const classes = mapToCssModules(classNames$2(className, close && 'btn-close', close || 'btn', close || btnOutlineColor, size ? `btn-${size}` : false, block ? 'd-block w-100' : false, {
       active,
       disabled: this.props.disabled
     }), cssModule);
@@ -4965,7 +4965,7 @@ class ButtonToggle extends React__default["default"].Component {
     } = _this$props,
           attributes = _objectWithoutProperties$1(_this$props, _excluded$11);
 
-    const classes = mapToCssModules(classNames$1(className, {
+    const classes = mapToCssModules(classNames$2(className, {
       focus: this.state.focus
     }), this.props.cssModule);
     return /*#__PURE__*/React__default["default"].createElement(Button$1, _extends$5({
@@ -5239,7 +5239,7 @@ class Dropdown extends React__default["default"].Component {
       });
     }
 
-    const classes = mapToCssModules(classNames$1(className, nav && active ? 'active' : false, setActiveFromChild && subItemIsActive ? 'active' : false, {
+    const classes = mapToCssModules(classNames$2(className, nav && active ? 'active' : false, setActiveFromChild && subItemIsActive ? 'active' : false, {
       'btn-group': group,
       [`btn-group-${size}`]: !!size,
       dropdown: !group,
@@ -5380,7 +5380,7 @@ class DropdownItem extends React__default["default"].Component {
     } = _omit,
         props = _objectWithoutProperties$1(_omit, _excluded$Z);
 
-    const classes = mapToCssModules(classNames$1(className, {
+    const classes = mapToCssModules(classNames$2(className, {
       disabled: props.disabled,
       'dropdown-item': !divider && !header && !text,
       active: active,
@@ -5473,7 +5473,7 @@ class DropdownMenu extends React__default["default"].Component {
     } = _this$props,
           attrs = _objectWithoutProperties$1(_this$props, _excluded$Y);
 
-    const classes = mapToCssModules(classNames$1(className, 'dropdown-menu', {
+    const classes = mapToCssModules(classNames$2(className, 'dropdown-menu', {
       'dropdown-menu-dark': dark,
       'dropdown-menu-end': end || right,
       show: this.context.isOpen
@@ -5606,7 +5606,7 @@ class DropdownToggle extends React__default["default"].Component {
           props = _objectWithoutProperties$1(_this$props, _excluded$X);
 
     const ariaLabel = props['aria-label'] || 'Toggle Dropdown';
-    const classes = mapToCssModules(classNames$1(className, {
+    const classes = mapToCssModules(classNames$2(className, {
       'dropdown-toggle': caret || split,
       'dropdown-toggle-split': split,
       'nav-link': nav
@@ -5697,7 +5697,7 @@ function Fade(props) {
   const childProps = omit(otherProps, TransitionPropTypeKeys);
   return /*#__PURE__*/React__default["default"].createElement(Transition$1, transitionProps, status => {
     const isActive = status === 'entered';
-    const classes = mapToCssModules(classNames$1(className, baseClass, isActive && baseClassActive), cssModule);
+    const classes = mapToCssModules(classNames$2(className, baseClass, isActive && baseClassActive), cssModule);
     return /*#__PURE__*/React__default["default"].createElement(Tag, _extends$5({
       className: classes
     }, childProps, {
@@ -5869,7 +5869,7 @@ class Collapse extends React$5.Component {
       onExited: this.onExited
     }), status => {
       let collapseClass = getTransitionClass(status);
-      const classes = mapToCssModules(classNames$1(className, horizontal && 'collapse-horizontal', collapseClass, navbar && 'navbar-collapse'), cssModule);
+      const classes = mapToCssModules(classNames$2(className, horizontal && 'collapse-horizontal', collapseClass, navbar && 'navbar-collapse'), cssModule);
       const style = dimension === null ? null : {
         [horizontal ? 'width' : 'height']: dimension
       };
@@ -5922,7 +5922,7 @@ const Badge = props => {
   } = props,
       attributes = _objectWithoutProperties$1(props, _excluded$P);
 
-  const classes = mapToCssModules(classNames$1(className, 'badge', 'bg-' + color, pill ? 'rounded-pill' : false), cssModule);
+  const classes = mapToCssModules(classNames$2(className, 'badge', 'bg-' + color, pill ? 'rounded-pill' : false), cssModule);
 
   if (attributes.href && Tag === 'span') {
     Tag = 'a';
@@ -6077,7 +6077,7 @@ class CarouselItem extends React__default["default"].Component {
       const isActive = status === TransitionStatuses.ENTERED || status === TransitionStatuses.EXITING;
       const directionClassName = (status === TransitionStatuses.ENTERING || status === TransitionStatuses.EXITING) && this.state.startAnimation && (direction === 'end' ? 'carousel-item-start' : 'carousel-item-end');
       const orderClassName = status === TransitionStatuses.ENTERING && (direction === 'end' ? 'carousel-item-next' : 'carousel-item-prev');
-      const itemClasses = mapToCssModules(classNames$1(className, 'carousel-item', isActive && 'active', directionClassName, orderClassName), cssModule);
+      const itemClasses = mapToCssModules(classNames$2(className, 'carousel-item', isActive && 'active', directionClassName, orderClassName), cssModule);
       return /*#__PURE__*/React__default["default"].createElement(Tag, {
         className: itemClasses
       }, children);
@@ -6291,8 +6291,8 @@ class Carousel extends React__default["default"].Component {
       dark,
       fade
     } = this.props;
-    const outerClasses = mapToCssModules(classNames$1(className, 'carousel', fade, slide && 'slide', dark && 'carousel-dark'), cssModule);
-    const innerClasses = mapToCssModules(classNames$1('carousel-inner'), cssModule); // filter out booleans, null, or undefined
+    const outerClasses = mapToCssModules(classNames$2(className, 'carousel', fade, slide && 'slide', dark && 'carousel-dark'), cssModule);
+    const innerClasses = mapToCssModules(classNames$2('carousel-inner'), cssModule); // filter out booleans, null, or undefined
 
     const children = this.props.children.filter(child => child !== null && child !== undefined && typeof child !== 'boolean');
     const slidesOnly = children.every(child => child.type === CarouselItem$1); // Rendering only slides
@@ -6405,9 +6405,9 @@ const CarouselControl = props => {
     directionText,
     className
   } = props;
-  const anchorClasses = mapToCssModules(classNames$1(className, `carousel-control-${direction}`), cssModule);
-  const iconClasses = mapToCssModules(classNames$1(`carousel-control-${direction}-icon`), cssModule);
-  const screenReaderClasses = mapToCssModules(classNames$1('visually-hidden'), cssModule);
+  const anchorClasses = mapToCssModules(classNames$2(className, `carousel-control-${direction}`), cssModule);
+  const iconClasses = mapToCssModules(classNames$2(`carousel-control-${direction}-icon`), cssModule);
+  const screenReaderClasses = mapToCssModules(classNames$2('visually-hidden'), cssModule);
   return (
     /*#__PURE__*/
     // We need to disable this linting rule to use an `<a>` instead of
@@ -6451,9 +6451,9 @@ const CarouselIndicators = props => {
     onClickHandler,
     className
   } = props;
-  const listClasses = mapToCssModules(classNames$1(className, 'carousel-indicators'), cssModule);
+  const listClasses = mapToCssModules(classNames$2(className, 'carousel-indicators'), cssModule);
   const indicators = items.map((item, idx) => {
-    const indicatorClasses = mapToCssModules(classNames$1({
+    const indicatorClasses = mapToCssModules(classNames$2({
       active: activeIndex === idx
     }), cssModule);
     return /*#__PURE__*/React__default["default"].createElement("button", {
@@ -6488,7 +6488,7 @@ const CarouselCaption = props => {
     cssModule,
     className
   } = props;
-  const classes = mapToCssModules(classNames$1(className, 'carousel-caption', 'd-none', 'd-md-block'), cssModule);
+  const classes = mapToCssModules(classNames$2(className, 'carousel-caption', 'd-none', 'd-md-block'), cssModule);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes
   }, /*#__PURE__*/React__default["default"].createElement("h3", null, captionHeader), /*#__PURE__*/React__default["default"].createElement("p", null, captionText));
@@ -6749,8 +6749,8 @@ class PopperContent extends React__default["default"].Component {
     } = _this$props,
           attrs = _objectWithoutProperties$1(_this$props, _excluded$z);
 
-    const arrowClassName = mapToCssModules(classNames$1('arrow', _arrowClassName), cssModule);
-    const popperClassName = mapToCssModules(classNames$1(_popperClassName, placementPrefix ? `${placementPrefix}-auto` : ''), this.props.cssModule);
+    const arrowClassName = mapToCssModules(classNames$2('arrow', _arrowClassName), cssModule);
+    const popperClassName = mapToCssModules(classNames$2(_popperClassName, placementPrefix ? `${placementPrefix}-auto` : ''), this.props.cssModule);
     const modifierNames = modifiers.map(m => m.name);
     const baseModifiers = [{
       name: 'offset',
@@ -7214,8 +7214,8 @@ const defaultProps$D = {
 };
 
 const Popover = props => {
-  const popperClasses = classNames$1('popover', 'show', props.popperClassName);
-  const classes = classNames$1('popover-inner', props.innerClassName);
+  const popperClasses = classNames$2('popover', 'show', props.popperClassName);
+  const classes = classNames$2('popover-inner', props.innerClassName);
   return /*#__PURE__*/React__default["default"].createElement(TooltipPopoverWrapper$1, _extends$5({}, props, {
     arrowClassName: "popover-arrow",
     popperClassName: popperClasses,
@@ -7640,7 +7640,7 @@ class Modal extends React__default["default"].Component {
     conditionallyUpdateScrollbar();
 
     if (Modal.openCount === 0) {
-      document.body.className = classNames$1(document.body.className, mapToCssModules('modal-open', this.props.cssModule));
+      document.body.className = classNames$2(document.body.className, mapToCssModules('modal-open', this.props.cssModule));
     }
 
     this.modalIndex = Modal.openCount;
@@ -7684,7 +7684,7 @@ class Modal extends React__default["default"].Component {
     const attributes = omit(this.props, propsToOmit$1);
     const dialogBaseClass = 'modal-dialog';
     return /*#__PURE__*/React__default["default"].createElement("div", _extends$5({}, attributes, {
-      className: mapToCssModules(classNames$1(dialogBaseClass, this.props.className, {
+      className: mapToCssModules(classNames$2(dialogBaseClass, this.props.className, {
         [`modal-${this.props.size}`]: this.props.size,
         [`${dialogBaseClass}-centered`]: this.props.centered,
         [`${dialogBaseClass}-scrollable`]: this.props.scrollable,
@@ -7696,7 +7696,7 @@ class Modal extends React__default["default"].Component {
         this._dialog = c;
       }
     }), /*#__PURE__*/React__default["default"].createElement("div", {
-      className: mapToCssModules(classNames$1('modal-content', this.props.contentClassName), this.props.cssModule)
+      className: mapToCssModules(classNames$2('modal-content', this.props.contentClassName), this.props.cssModule)
     }, this.props.children));
   }
 
@@ -7747,9 +7747,9 @@ class Modal extends React__default["default"].Component {
       const Backdrop = backdrop && (hasTransition ? /*#__PURE__*/React__default["default"].createElement(Fade, _extends$5({}, backdropTransition, {
         in: isOpen && !!backdrop,
         cssModule: cssModule,
-        className: mapToCssModules(classNames$1('modal-backdrop', backdropClassName), cssModule)
+        className: mapToCssModules(classNames$2('modal-backdrop', backdropClassName), cssModule)
       })) : /*#__PURE__*/React__default["default"].createElement("div", {
-        className: mapToCssModules(classNames$1('modal-backdrop', 'show', backdropClassName), cssModule)
+        className: mapToCssModules(classNames$2('modal-backdrop', 'show', backdropClassName), cssModule)
       }));
       return /*#__PURE__*/React__default["default"].createElement(Portal$1$1, {
         node: this._element
@@ -7760,7 +7760,7 @@ class Modal extends React__default["default"].Component {
         onEntered: this.onOpened,
         onExited: this.onClosed,
         cssModule: cssModule,
-        className: mapToCssModules(classNames$1('modal', modalClassName, this.state.showStaticBackdropAnimation && 'modal-static'), cssModule),
+        className: mapToCssModules(classNames$2('modal', modalClassName, this.state.showStaticBackdropAnimation && 'modal-static'), cssModule),
         innerRef: innerRef
       }), external, this.renderModalDialog()), Backdrop));
     }
@@ -7809,7 +7809,7 @@ const ModalBody = props => {
   } = props,
         attributes = _objectWithoutProperties$1(props, _excluded$u);
 
-  const classes = mapToCssModules(classNames$1(className, 'modal-body'), cssModule);
+  const classes = mapToCssModules(classNames$2(className, 'modal-body'), cssModule);
   return /*#__PURE__*/React__default["default"].createElement(Tag, _extends$5({}, attributes, {
     className: classes
   }));
@@ -7832,8 +7832,8 @@ const defaultProps$v = {
 };
 
 const Tooltip = props => {
-  const popperClasses = classNames$1('tooltip', 'show', props.popperClassName);
-  const classes = classNames$1('tooltip-inner', props.innerClassName);
+  const popperClasses = classNames$2('tooltip', 'show', props.popperClassName);
+  const classes = classNames$2('tooltip-inner', props.innerClassName);
   return /*#__PURE__*/React__default["default"].createElement(TooltipPopoverWrapper$1, _extends$5({}, props, {
     arrowClassName: "tooltip-arrow",
     popperClassName: popperClasses,
@@ -7912,7 +7912,7 @@ class Form extends React$5.Component {
     } = _this$props,
           attributes = _objectWithoutProperties$1(_this$props, _excluded$q);
 
-    const classes = mapToCssModules(classNames$1(className, inline ? 'form-inline' : false), cssModule);
+    const classes = mapToCssModules(classNames$2(className, inline ? 'form-inline' : false), cssModule);
     return /*#__PURE__*/React__default["default"].createElement(Tag, _extends$5({}, attributes, {
       ref: innerRef,
       className: classes
@@ -7949,7 +7949,7 @@ const FormFeedback = props => {
         attributes = _objectWithoutProperties$1(props, _excluded$p);
 
   const validMode = tooltip ? 'tooltip' : 'feedback';
-  const classes = mapToCssModules(classNames$1(className, valid ? `valid-${validMode}` : `invalid-${validMode}`), cssModule);
+  const classes = mapToCssModules(classNames$2(className, valid ? `valid-${validMode}` : `invalid-${validMode}`), cssModule);
   return /*#__PURE__*/React__default["default"].createElement(Tag, _extends$5({}, attributes, {
     className: classes
   }));
@@ -8064,7 +8064,7 @@ class Input extends React__default["default"].Component {
       delete attributes.size;
     }
 
-    const classes = mapToCssModules(classNames$1(className, invalid && 'is-invalid', valid && 'is-valid', bsSize ? selectInput ? `form-select-${bsSize}` : `form-control-${bsSize}` : false, formControlClass), cssModule);
+    const classes = mapToCssModules(classNames$2(className, invalid && 'is-invalid', valid && 'is-valid', bsSize ? selectInput ? `form-select-${bsSize}` : `form-control-${bsSize}` : false, formControlClass), cssModule);
 
     if (Tag === 'input' || tag && typeof tag === 'function') {
       attributes.type = type === 'switch' ? 'checkbox' : type;
@@ -8168,7 +8168,7 @@ const Label = props => {
     if (isObject$1(columnProp)) {
       const colSizeInterfix = isXs ? '-' : `-${colWidth}-`;
       colClass = getColumnSizeClass(isXs, colWidth, columnProp.size);
-      colClasses.push(mapToCssModules(classNames$1({
+      colClasses.push(mapToCssModules(classNames$2({
         [colClass]: columnProp.size || columnProp.size === '',
         [`order${colSizeInterfix}${columnProp.order}`]: columnProp.order || columnProp.order === 0,
         [`offset${colSizeInterfix}${columnProp.offset}`]: columnProp.offset || columnProp.offset === 0
@@ -8178,7 +8178,7 @@ const Label = props => {
       colClasses.push(colClass);
     }
   });
-  const classes = mapToCssModules(classNames$1(className, hidden ? 'visually-hidden' : false, check ? 'form-check-label' : false, size ? `col-form-label-${size}` : false, colClasses, colClasses.length ? 'col-form-label' : 'form-label'), cssModule);
+  const classes = mapToCssModules(classNames$2(className, hidden ? 'visually-hidden' : false, check ? 'form-check-label' : false, size ? `col-form-label-${size}` : false, colClasses, colClasses.length ? 'col-form-label' : 'form-label'), cssModule);
   return /*#__PURE__*/React__default["default"].createElement(Tag, _extends$5({
     htmlFor: htmlFor
   }, attributes, {
@@ -8577,11 +8577,11 @@ class Offcanvas extends React__default["default"].Component {
           this._backdrop = c;
         },
         cssModule: cssModule,
-        className: mapToCssModules(classNames$1('offcanvas-backdrop', backdropClassName), cssModule),
+        className: mapToCssModules(classNames$2('offcanvas-backdrop', backdropClassName), cssModule),
         onClick: this.handleBackdropClick,
         onMouseDown: this.handleBackdropMouseDown
       })) : /*#__PURE__*/React__default["default"].createElement("div", {
-        className: mapToCssModules(classNames$1('offcanvas-backdrop', 'show', backdropClassName), cssModule),
+        className: mapToCssModules(classNames$2('offcanvas-backdrop', 'show', backdropClassName), cssModule),
         onClick: this.handleBackdropClick,
         onMouseDown: this.handleBackdropMouseDown
       }));
@@ -8593,7 +8593,7 @@ class Offcanvas extends React__default["default"].Component {
         onEntered: this.onOpened,
         onExited: this.onClosed,
         cssModule: cssModule,
-        className: mapToCssModules(classNames$1('offcanvas', className, `offcanvas-${direction}`), cssModule),
+        className: mapToCssModules(classNames$2('offcanvas', className, `offcanvas-${direction}`), cssModule),
         innerRef: c => {
           this._dialog = c;
         },
@@ -8707,7 +8707,7 @@ class TabContent extends React$5.Component {
       tag: Tag
     } = this.props;
     const attributes = omit(this.props, Object.keys(propTypes$e));
-    const classes = mapToCssModules(classNames$1('tab-content', className), cssModule);
+    const classes = mapToCssModules(classNames$2('tab-content', className), cssModule);
     return /*#__PURE__*/React__default["default"].createElement(TabContext.Provider, {
       value: {
         activeTabId: this.state.activeTab
@@ -8825,7 +8825,7 @@ const List = React$5.forwardRef((props, ref) => {
   } = props,
         attributes = _objectWithoutProperties$1(props, _excluded$4);
 
-  const classes = mapToCssModules(classNames$1(className, type ? `list-${type}` : false), cssModule);
+  const classes = mapToCssModules(classNames$2(className, type ? `list-${type}` : false), cssModule);
   return /*#__PURE__*/React__default["default"].createElement(Tag, _extends$5({}, attributes, {
     className: classes,
     ref: ref
@@ -8852,7 +8852,7 @@ const ListInlineItem = React$5.forwardRef((props, ref) => {
   } = props,
         attributes = _objectWithoutProperties$1(props, _excluded$3);
 
-  const classes = mapToCssModules(classNames$1(className, 'list-inline-item'), cssModule);
+  const classes = mapToCssModules(classNames$2(className, 'list-inline-item'), cssModule);
   return /*#__PURE__*/React__default["default"].createElement(Tag, _extends$5({}, attributes, {
     className: classes,
     ref: ref
@@ -9035,7 +9035,7 @@ const Spinner = props => {
   } = props,
         attributes = _objectWithoutProperties$1(props, _excluded$2);
 
-  const classes = mapToCssModules(classNames$1(className, size ? `spinner-${type}-${size}` : false, `spinner-${type}`, color ? `text-${color}` : false), cssModule);
+  const classes = mapToCssModules(classNames$2(className, size ? `spinner-${type}-${size}` : false, `spinner-${type}`, color ? `text-${color}` : false), cssModule);
   return /*#__PURE__*/React__default["default"].createElement(Tag, _extends$5({
     role: "status"
   }, attributes, {
@@ -9089,7 +9089,7 @@ _objectSpread2(_objectSpread2({}, Col$1.propTypes), {}, {
   Object.values = values;
 })();
 
-var classnames$1 = {exports: {}};
+var classnames = {exports: {}};
 
 /*!
   Copyright (c) 2018 Jed Watson.
@@ -9145,9 +9145,9 @@ var classnames$1 = {exports: {}};
 		window.classNames = classNames;
 	}
 }());
-}(classnames$1));
+}(classnames));
 
-var classnames = classnames$1.exports;
+var classNames$1 = classnames.exports;
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -14285,7 +14285,7 @@ const ReactInput = (props) => {
             //{...props}
             , { 
                 //{...props}
-                style: style, placeholder: placeholder, onKeyPress: onKeyPress, className: classnames('input__value', {
+                style: style, placeholder: placeholder, onKeyPress: onKeyPress, className: classNames$1('input__value', {
                     'is-clearable': value
                 }), value: value, onChange: (val) => setValue(val.target.value) }), value ? jsxRuntime.jsx(SvgX, { className: 'input__clear-icon', onClick: handelClear, strokeWidth: 3, fontSize: 16 }) : ''] }));
 };
@@ -19297,6 +19297,77 @@ const FindNodeByPath = (tree, path) => {
     }
     return { parent: current, lastIndex: levels.at(-1), firstIndex: levels.length === 1 ? levels[0] : -1, node };
 };
+/**
+ * Tính toán cấu trúc bảng từ dữ liệu column dạng cây:
+ * - Tạo header dạng nhiều cấp (header theo chiều dọc)
+ * - Chuyển cột thành dạng phẳng để render nội dung
+ * - Tính toán vị trí cố định trái/phải (fixed column) để hiển thị sticky
+ *
+ * @param columns Mảng cấu trúc cây đại diện cho các cột của bảng
+ * @returns {
+ *   levels: IHeaderColumnTable[][]       // Các hàng header theo cấp
+ *   flat: IColumnVirtualizedTable[]      // Danh sách cột phẳng
+ *   objWidthFixLeft: Record<number, number>      // Offset trái cho cột fixed left
+ *   objWidthFixRight: Record<number, number>     // Offset phải cho cột fixed right
+ *   lastObjWidthFixLeft: number          // Chỉ số cột cuối cùng fixed left
+ *   fisrtObjWidthFixRight: number        // Chỉ số cột đầu tiên fixed right
+ * }
+ */
+const calculateTableStructure = (columns) => {
+    const levels = [];
+    const flat = [];
+    const objWidthFixLeft = {};
+    const objWidthFixRight = {};
+    let maxDepth = 0;
+    // Tính depth tối đa
+    const calculateDepth = (cols, depth = 1) => (Math.max(...cols.map(col => (col.columns?.length ? calculateDepth(col.columns, depth + 1) : depth))));
+    maxDepth = calculateDepth(columns);
+    let leftTotal = 0;
+    let rightTotal = 0;
+    const traverse = (cols, level = 0) => {
+        levels[level] = levels[level] || [];
+        return cols.reduce((colspanSum, col) => {
+            const hasChildren = (col.columns?.length ?? 0) > 0;
+            const colspan = hasChildren ? traverse(col.columns, level + 1) : 1;
+            const cell = {
+                ...col,
+                columns: col.columns ?? [],
+                colspan,
+                rowspan: hasChildren ? 1 : maxDepth - level
+            };
+            levels[level].push(cell);
+            if (!hasChildren) {
+                const visible = col.visible !== false;
+                const index = flat.length;
+                const width = col.width ?? 40;
+                cell.index = index;
+                flat.push(cell);
+                if (col.fixedType === 'left' && visible) {
+                    objWidthFixLeft[index] = leftTotal;
+                    leftTotal += width;
+                }
+                if (col.fixedType === 'right' && visible) {
+                    objWidthFixRight[index] = rightTotal;
+                    rightTotal += width;
+                }
+            }
+            return colspanSum + colspan;
+        }, 0);
+    };
+    traverse(columns);
+    const flatVisble = flat.filter((e) => e.visible !== false);
+    const lastObjWidthFixLeft = Math.max(...Object.keys(objWidthFixLeft).map(Number), 0);
+    const fisrtObjWidthFixRight = Math.min(...Object.keys(objWidthFixRight).map(Number), flat.length);
+    return {
+        levels,
+        flat,
+        flatVisble,
+        objWidthFixLeft,
+        objWidthFixRight,
+        lastObjWidthFixLeft,
+        fisrtObjWidthFixRight
+    };
+};
 
 var isCheckBoxInput = (element) => element.type === 'checkbox';
 
@@ -21347,11 +21418,11 @@ const TextInput = (props) => {
                             }
                         }, style: { height: `${height}px` }, autoFocus: autoFocus, disabled: disabled, placeholder: placeholder, type: type ? type : 'text', invalid: errors && true, className: "h-100", rows: row, min: min, max: max, readOnly: readOnly, ...rest })) }), errors && jsxRuntime.jsx(FormFeedback$1, { children: errors?.message })] }));
     };
-    return (jsxRuntime.jsx(React$5.Fragment, { children: jsxRuntime.jsxs("div", { className: classnames(' align', {
+    return (jsxRuntime.jsx(React$5.Fragment, { children: jsxRuntime.jsxs("div", { className: classNames$1(' align', {
                 [labelSize ? labelSize : '']: labelSize,
                 [classes ? classes : '']: classes,
                 'form-row-inline-error': errors
-            }, inLine === false ? 'form-group ' : 'form-row-inline d-flex'), children: [renderLabel({ isLabel, name, label, required }), jsxRuntime.jsx("div", { className: classnames('form-input-content', { 'hidden-label': isLabel === false }), children: renderInput() })] }) }));
+            }, inLine === false ? 'form-group ' : 'form-row-inline d-flex'), children: [renderLabel({ isLabel, name, label, required }), jsxRuntime.jsx("div", { className: classNames$1('form-input-content', { 'hidden-label': isLabel === false }), children: renderInput() })] }) }));
 };
 
 /**
@@ -22590,7 +22661,7 @@ const NumberInput = (props) => {
                             decimalScale: fractionCurrency ?? 0,
                             fixedDecimalScale
                         };
-                        return (jsxRuntime.jsx(NumericFormat, { id: id, ...numericFormatProps, className: classnames('form-control text-right', {
+                        return (jsxRuntime.jsx(NumericFormat, { id: id, ...numericFormatProps, className: classNames$1('form-control text-right', {
                                 'is-invalid': errors
                             }), onValueChange: (values) => {
                                 floatValue = values?.floatValue;
@@ -22615,11 +22686,11 @@ const NumberInput = (props) => {
                             }, placeholder: placeholder, disabled: disabled }));
                     } }), errors && jsxRuntime.jsx(FormFeedback$1, { children: errors?.message })] }));
     };
-    return (jsxRuntime.jsx(React$5.Fragment, { children: jsxRuntime.jsxs("div", { className: classnames(' align', {
+    return (jsxRuntime.jsx(React$5.Fragment, { children: jsxRuntime.jsxs("div", { className: classNames$1(' align', {
                 [labelSize ? labelSize : '']: labelSize,
                 [classes ? classes : '']: classes,
                 'form-row-inline-error': errors
-            }, inLine === false ? 'form-group ' : 'form-row-inline d-flex'), children: [renderLabel({ isLabel, name, label, required }), jsxRuntime.jsx("div", { style: { width: width ? width : undefined }, className: classnames('form-input-content', { 'hidden-label': isLabel === false }), children: renderInput() })] }) }));
+            }, inLine === false ? 'form-group ' : 'form-row-inline d-flex'), children: [renderLabel({ isLabel, name, label, required }), jsxRuntime.jsx("div", { style: { width: width ? width : undefined }, className: classNames$1('form-input-content', { 'hidden-label': isLabel === false }), children: renderInput() })] }) }));
 };
 
 const defaultMaxHeight$1 = 250;
@@ -22846,7 +22917,7 @@ const SelectTable = React$5.forwardRef((props, ref) => {
         }, 100);
     };
     const renderHeaderCol = (col, indexCol) => {
-        return (jsxRuntime.jsx(React$5.Fragment, { children: col.visible !== false && jsxRuntime.jsx("th", { className: classnames(`r-select-headercell fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }), style: {
+        return (jsxRuntime.jsx(React$5.Fragment, { children: col.visible !== false && jsxRuntime.jsx("th", { className: classNames$1(`r-select-headercell fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }), style: {
                     width: col.fixedType ? Number(col.maxWidth ? col.maxWidth : (col.width ? col.width : (col.minWidth ?? 'auto'))) : col.width,
                     minWidth: col.fixedType ? Number(col.maxWidth ? col.maxWidth : (col.width ? col.width : (col.minWidth ?? 'auto'))) : col.minWidth,
                     top: `${0 * 35}px`,
@@ -22890,7 +22961,7 @@ const SelectTable = React$5.forwardRef((props, ref) => {
     };
     const RenderElement = React__default["default"].memo((props) => {
         const { indexRow, row, isSelected, level = 0 } = props;
-        return (jsxRuntime.jsxs("tr", { id: `row-select-table-${indexRow}`, style: { paddingLeft: 10 * level }, className: classnames('r-select-row', { 'last-row': indexRow === (optionsLoad ? optionsLoad : options).length - 1 }, { 'fisrt-row': indexRow === 0 }), children: [isMulti && jsxRuntime.jsx("td", { className: classnames(`r-select-rowcell`, { 'r-select-move': indexFocus === indexRow, 'r-select-active': !isMulti && value && value[fieldValue ?? 'value'] === row[fieldValue ?? 'value'] }), style: { width: 40, textAlign: 'center', padding: 0, paddingBottom: 6 }, onClick: (e) => {
+        return (jsxRuntime.jsxs("tr", { id: `row-select-table-${indexRow}`, style: { paddingLeft: 10 * level }, className: classNames$1('r-select-row', { 'last-row': indexRow === (optionsLoad ? optionsLoad : options).length - 1 }, { 'fisrt-row': indexRow === 0 }), children: [isMulti && jsxRuntime.jsx("td", { className: classNames$1(`r-select-rowcell`, { 'r-select-move': indexFocus === indexRow, 'r-select-active': !isMulti && value && value[fieldValue ?? 'value'] === row[fieldValue ?? 'value'] }), style: { width: 40, textAlign: 'center', padding: 0, paddingBottom: 6 }, onClick: (e) => {
                         if (isMulti) {
                             const index = value?.findIndex((x) => x[fieldValue ?? 'value'] === row[fieldValue ?? 'value']);
                             if (index > -1) {
@@ -22921,7 +22992,7 @@ const SelectTable = React$5.forwardRef((props, ref) => {
                     }
                     return (jsxRuntime.jsxs(React$5.Fragment, { children: [col.visible !== false && jsxRuntime.jsx("td", { id: `select-${id}-${indexRow}-${indexCol}`, 
                                 // ref={refRow}
-                                className: classnames(`r-select-rowcell`, { 'r-select-move': indexFocus === indexRow, 'r-select-active': !isMulti && value && value[fieldValue ?? 'value'] === row[fieldValue ?? 'value'] }), style: {
+                                className: classNames$1(`r-select-rowcell`, { 'r-select-move': indexFocus === indexRow, 'r-select-active': !isMulti && value && value[fieldValue ?? 'value'] === row[fieldValue ?? 'value'] }), style: {
                                     minWidth: col.minWidth,
                                     width: col.width,
                                     maxWidth: col.maxWidth,
@@ -22960,7 +23031,7 @@ const SelectTable = React$5.forwardRef((props, ref) => {
     });
     const RenderTable = (props) => {
         return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("table", { style: { width: '100%' }, children: [!(noHeader || (columns?.length ?? 0) === 0) &&
-                            jsxRuntime.jsx("thead", { className: 'r-select-gridheader', children: jsxRuntime.jsxs("tr", { className: "r-select-row", role: "row", children: [isMulti && jsxRuntime.jsx("th", { className: classnames(`r-select-headercell`), style: { width: 40, top: `0px` }, children: jsxRuntime.jsx("div", { style: { justifyContent: 'center' }, className: classnames('r-select-headercell-div'), children: jsxRuntime.jsx(Input$1, { checked: isSelectedAll, type: "checkbox", onClick: (e) => {
+                            jsxRuntime.jsx("thead", { className: 'r-select-gridheader', children: jsxRuntime.jsxs("tr", { className: "r-select-row", role: "row", children: [isMulti && jsxRuntime.jsx("th", { className: classNames$1(`r-select-headercell`), style: { width: 40, top: `0px` }, children: jsxRuntime.jsx("div", { style: { justifyContent: 'center' }, className: classNames$1('r-select-headercell-div'), children: jsxRuntime.jsx(Input$1, { checked: isSelectedAll, type: "checkbox", onClick: (e) => {
                                                         if (isMulti) {
                                                             if (isSelectedAll) {
                                                                 handChange([]);
@@ -22970,22 +23041,22 @@ const SelectTable = React$5.forwardRef((props, ref) => {
                                                             }
                                                             e.stopPropagation();
                                                         }
-                                                    }, readOnly: true, className: classnames('cursor-pointer', { 'd-none': !isMulti }), style: { textAlign: 'center', marginTop: 6 } }) }) }), (columns ? columns : defaultColumns).map((col, index) => {
+                                                    }, readOnly: true, className: classNames$1('cursor-pointer', { 'd-none': !isMulti }), style: { textAlign: 'center', marginTop: 6 } }) }) }), (columns ? columns : defaultColumns).map((col, index) => {
                                             return (renderHeaderCol(col, index));
                                         })] }) }), ((optionsLoad ? optionsLoad : options) && !isLoading) && jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("tbody", { className: 'r-select-gridcontent', children: [haveCreateNew && jsxRuntime.jsx(RenderElement, { isSelected: false, indexRow: 0, row: { valueCreate: searchTerm, [fieldValue ?? "value"]: searchTerm, [fieldLabel ?? "label"]: `${t('Create')} '${searchTerm}'`, isCreated: true } }), (optionsLoad ? optionsLoad : options)?.map((row, indexRow) => {
                                         const isSelected = isMulti && value?.some((x) => x[fieldValue ?? 'value'] === row[fieldValue ?? 'value']);
                                         return (jsxRuntime.jsx(RenderElement, { isSelected: isSelected ?? false, indexRow: indexRow + (haveCreateNew ? 1 : 0), row: row }, `select-table-${indexRow}`));
                                     })] }) })] }), ((((optionsLoad ? optionsLoad : options)?.length ?? 0) === 0) && !haveCreateNew && !isLoading) && jsxRuntime.jsxs("div", { className: "r-no-data", children: [jsxRuntime.jsx("svg", { width: "64", height: "41", viewBox: "0 0 64 41", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsxs("g", { transform: "translate(0 1)", fill: "none", fillRule: "evenodd", children: [jsxRuntime.jsx("ellipse", { fill: "#f5f5f5", cx: "32", cy: "33", rx: "32", ry: "7" }), jsxRuntime.jsxs("g", { fillRule: "nonzero", stroke: "#d9d9d9", children: [jsxRuntime.jsx("path", { d: "M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z" }), jsxRuntime.jsx("path", { d: "M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z", fill: "#fafafa" })] })] }) }), t('No data available.')] }), isLoading && jsxRuntime.jsxs("div", { className: "r-no-data", children: [jsxRuntime.jsx(Spinner$1, { className: "me-1", children: " " }), t('Loading...')] })] }));
     };
-    return (jsxRuntime.jsx("div", { className: classnames('react-select-table', { 'is-invalid': invalid }), ref: ref, id: id, children: jsxRuntime.jsx("div", { ref: selectTableRef, children: jsxRuntime.jsxs(Dropdown$1, { isOpen: dropdownOpen, toggle: () => { }, onMouseDown: (e) => e.preventDefault(), children: [jsxRuntime.jsxs(DropdownToggle$1, { onClick: (e) => {
+    return (jsxRuntime.jsx("div", { className: classNames$1('react-select-table', { 'is-invalid': invalid }), ref: ref, id: id, children: jsxRuntime.jsx("div", { ref: selectTableRef, children: jsxRuntime.jsxs(Dropdown$1, { isOpen: dropdownOpen, toggle: () => { }, onMouseDown: (e) => e.preventDefault(), children: [jsxRuntime.jsxs(DropdownToggle$1, { onClick: (e) => {
                             if (!isDisabled) {
                                 inputRef?.current.focus();
                                 handleOpenClose();
                             }
                             e.preventDefault();
-                        }, tag: 'div', style: { width: width ? width : (selectTableRef?.current?.clientWidth ? selectTableRef?.current?.clientWidth : 'auto') }, className: classnames('select-table-control', { 'r-select-is-disabled': isDisabled }, { 'r-select-is-open': dropdownOpen }, { 'r-select-is-focus': isFocus }, { 'r-select-is-invalid': invalid }), children: [jsxRuntime.jsxs("div", { className: "select-table-container", children: [isMulti ? jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx("div", { className: classnames('select-value is-mutil', { 'd-none': searchTerm }), children: value?.map((ele, index) => {
+                        }, tag: 'div', style: { width: width ? width : (selectTableRef?.current?.clientWidth ? selectTableRef?.current?.clientWidth : 'auto') }, className: classNames$1('select-table-control', { 'r-select-is-disabled': isDisabled }, { 'r-select-is-open': dropdownOpen }, { 'r-select-is-focus': isFocus }, { 'r-select-is-invalid': invalid }), children: [jsxRuntime.jsxs("div", { className: "select-table-container", children: [isMulti ? jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx("div", { className: classNames$1('select-value is-mutil', { 'd-none': searchTerm }), children: value?.map((ele, index) => {
                                                 return (jsxRuntime.jsxs("span", { children: [index === 0 ? '' : ', ', formatOptionLabel ? formatOptionLabel(ele) : ele[fieldLabel ?? 'label']] }, index));
-                                            }) }) }) : jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", { className: classnames('select-value', { 'd-none': searchTerm }), children: [value ? (formatOptionLabel ? formatOptionLabel(value) : value[fieldLabel ?? 'label']) : '', " "] }) }), !((isMulti ? value?.length > 0 : value) || isDisabled || searchTerm) && jsxRuntime.jsx("div", { className: classnames('select-placeholder'), children: placeholder }), jsxRuntime.jsx("div", { className: 'input-container', children: jsxRuntime.jsx("input", { style: { textAlign: textAlign ?? 'left' }, ref: inputRef, className: classnames('select-input'), readOnly: isDisabled, value: searchTerm, onPaste: (e) => (onPaste && !dropdownOpen) && onPaste(e), onChange: (val) => {
+                                            }) }) }) : jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", { className: classNames$1('select-value', { 'd-none': searchTerm }), children: [value ? (formatOptionLabel ? formatOptionLabel(value) : value[fieldLabel ?? 'label']) : '', " "] }) }), !((isMulti ? value?.length > 0 : value) || isDisabled || searchTerm) && jsxRuntime.jsx("div", { className: classNames$1('select-placeholder'), children: placeholder }), jsxRuntime.jsx("div", { className: 'input-container', children: jsxRuntime.jsx("input", { style: { textAlign: textAlign ?? 'left' }, ref: inputRef, className: classNames$1('select-input'), readOnly: isDisabled, value: searchTerm, onPaste: (e) => (onPaste && !dropdownOpen) && onPaste(e), onChange: (val) => {
                                                 if (val.target.value) {
                                                     if (loadOptions && val.target.value) {
                                                         setIsLoading(true);
@@ -22999,7 +23070,7 @@ const SelectTable = React$5.forwardRef((props, ref) => {
                                                     }
                                                 }
                                                 setSearchTerm(val.target.value);
-                                            }, onKeyDown: (e) => handleOnKeyDown(e) }) })] }), isLoading && jsxRuntime.jsxs("div", { className: classnames('select-table-indicator d-flex align-items-center'), children: [jsxRuntime.jsx(Spinner$1, { style: { width: 4, height: 4, marginRight: 3 }, type: "grow" }), jsxRuntime.jsx(Spinner$1, { style: { width: 4, height: 4, marginRight: 3 }, type: "grow" }), jsxRuntime.jsx(Spinner$1, { style: { width: 4, height: 4, marginRight: 3 }, type: "grow" })] }), (isClearable && value && !isDisabled) && jsxRuntime.jsx("div", { className: classnames('cursor-pointer icon-clear'), onClick: (e) => {
+                                            }, onKeyDown: (e) => handleOnKeyDown(e) }) })] }), isLoading && jsxRuntime.jsxs("div", { className: classNames$1('select-table-indicator d-flex align-items-center'), children: [jsxRuntime.jsx(Spinner$1, { style: { width: 4, height: 4, marginRight: 3 }, type: "grow" }), jsxRuntime.jsx(Spinner$1, { style: { width: 4, height: 4, marginRight: 3 }, type: "grow" }), jsxRuntime.jsx(Spinner$1, { style: { width: 4, height: 4, marginRight: 3 }, type: "grow" })] }), (isClearable && value && !isDisabled) && jsxRuntime.jsx("div", { className: classNames$1('cursor-pointer icon-clear'), onClick: (e) => {
                                     handChange(isMulti ? [] : undefined);
                                     e.stopPropagation();
                                 }, children: "\u00D7" }), !isDisabled && jsxRuntime.jsx("div", { className: "select-table-indicator", onMouseDown: (e) => e.preventDefault(), children: jsxRuntime.jsx("svg", { height: "20", width: "20", viewBox: "0 0 20 20", children: jsxRuntime.jsx("path", { d: "M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z" }) }) })] }), jsxRuntime.jsx(DropdownMenu$1, { container: component, className: 'formula-dropdown icon-dropdown p-0', style: {
@@ -23008,12 +23079,12 @@ const SelectTable = React$5.forwardRef((props, ref) => {
                             position: 'fixed',
                             borderRadius: 4,
                             zIndex: 9999
-                        }, children: jsxRuntime.jsx(DropdownItem$1, { className: classnames('p-0 menu-select-table'), tag: 'div', header: true, children: dropdownOpen && jsxRuntime.jsx("div", { style: { backgroundColor: 'none' }, onMouseDown: (e) => {
+                        }, children: jsxRuntime.jsx(DropdownItem$1, { className: classNames$1('p-0 menu-select-table'), tag: 'div', header: true, children: dropdownOpen && jsxRuntime.jsx("div", { style: { backgroundColor: 'none' }, onMouseDown: (e) => {
                                     if (!isDisabled) {
                                         inputRef?.current.focus();
                                         e.preventDefault();
                                     }
-                                }, children: jsxRuntime.jsxs("div", { className: 'r-select-grid', children: [jsxRuntime.jsx("div", { className: classnames('r-select-gridtable', { 'no-header': noHeader || (columns?.length ?? 0) === 0 }), ref: selectMenuTableRef, style: { width: menuWidth, minWidth: selectTableRef?.current?.clientWidth, maxHeight: maxHeight ?? defaultMaxHeight$1 }, children: jsxRuntime.jsx(RenderTable, {}) }), jsxRuntime.jsxs("div", { className: classnames('r-select-footer', { 'd-none': !(showFooter === true || handleAdd) }), children: [jsxRuntime.jsxs(Button$1, { outline: true, color: "primary", onClick: () => handleAdd?.(), className: classnames('r-btn d-flex align-items-center', { 'd-none': !handleAdd }), children: [jsxRuntime.jsx(SvgPlus, { className: "me-50", fontSize: 16 }), t('AddNew'), " (F9)"] }), footerComponent ? footerComponent() : null] })] }) }) }) })] }) }) }));
+                                }, children: jsxRuntime.jsxs("div", { className: 'r-select-grid', children: [jsxRuntime.jsx("div", { className: classNames$1('r-select-gridtable', { 'no-header': noHeader || (columns?.length ?? 0) === 0 }), ref: selectMenuTableRef, style: { width: menuWidth, minWidth: selectTableRef?.current?.clientWidth, maxHeight: maxHeight ?? defaultMaxHeight$1 }, children: jsxRuntime.jsx(RenderTable, {}) }), jsxRuntime.jsxs("div", { className: classNames$1('r-select-footer', { 'd-none': !(showFooter === true || handleAdd) }), children: [jsxRuntime.jsxs(Button$1, { outline: true, color: "primary", onClick: () => handleAdd?.(), className: classNames$1('r-btn d-flex align-items-center', { 'd-none': !handleAdd }), children: [jsxRuntime.jsx(SvgPlus, { className: "me-50", fontSize: 16 }), t('AddNew'), " (F9)"] }), footerComponent ? footerComponent() : null] })] }) }) }) })] }) }) }));
 });
 
 const SelectTableBox$1 = (props) => {
@@ -23029,10 +23100,10 @@ const SelectTableBox$1 = (props) => {
         const { isLabel, desciptionLabel, id, classLabel, name, label, required } = props;
         return (jsxRuntime.jsxs(React$5.Fragment, { children: [isLabel === false ? '' : jsxRuntime.jsxs(Label$1, { id: `label-${id}`, className: classLabel, for: name, children: [t(label ? label : ''), " ", required ? jsxRuntime.jsx("span", { className: "text-danger", children: "*" }) : ''] }), (!isNullOrUndefined$1(desciptionLabel) && desciptionLabel !== '') ?? jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(UncontrolledTooltip, { target: `label-${id}`, children: t(desciptionLabel ?? '') }) })] }));
     };
-    return (jsxRuntime.jsx(React$5.Fragment, { children: jsxRuntime.jsxs("div", { className: classnames(inLine === false ? 'form-group ' : 'form-row-inline d-flex', 'align', {
+    return (jsxRuntime.jsx(React$5.Fragment, { children: jsxRuntime.jsxs("div", { className: classNames$1(inLine === false ? 'form-group ' : 'form-row-inline d-flex', 'align', {
                 [labelSize ? labelSize : '']: labelSize,
                 'form-row-inline-error': errors
-            }), children: [renderLabel({ isLabel, desciptionLabel, classLabel, name, label, required, id: id ?? '' }), jsxRuntime.jsxs("div", { className: classnames('form-input-content', { 'hidden-label': isLabel === false }), children: [jsxRuntime.jsx(Controller, { name: name, control: control, render: ({ field: { value, onChange } }) => {
+            }), children: [renderLabel({ isLabel, desciptionLabel, classLabel, name, label, required, id: id ?? '' }), jsxRuntime.jsxs("div", { className: classNames$1('form-input-content', { 'hidden-label': isLabel === false }), children: [jsxRuntime.jsx(Controller, { name: name, control: control, render: ({ field: { value, onChange } }) => {
                                 return (jsxRuntime.jsx(SelectTable, { ...rest, id: id, value: (isMulti ? value?.length > 0 : value) ? (!isMulti ? (options.find((val) => val[fieldValue ?? 'value'] === value) ?? (defaultValue ?? '')) : value) : (isMulti ? [] : undefined), 
                                     // Giá trị của SelectTable, nếu isMulti là true và value có độ dài lớn hơn 0, hoặc nếu isMulti là false và value có giá trị, 
                                     // thì tìm giá trị tương ứng trong options hoặc sử dụng defaultValue. Nếu không, sử dụng giá trị mặc định tùy thuộc vào isMulti.
@@ -23065,7 +23136,6 @@ const EditForm = React$5.forwardRef((props, ref) => {
     const { innerWidth } = window;
     const inputRef = React$5.useRef(null);
     const editFormRef = React$5.useRef(null);
-    const buttonRef = React$5.useRef(null);
     const [dropdownOpen, setDropdownOpen] = React$5.useState(false);
     const [isFocus, setIsFocus] = React$5.useState(false);
     const [itemsField, setItemsField] = React$5.useState([]);
@@ -23235,7 +23305,7 @@ const EditForm = React$5.forwardRef((props, ref) => {
             });
         }
     }, [inputRef]);
-    return (jsxRuntime.jsx("div", { className: "form-edit", ref: ref, id: id, children: jsxRuntime.jsx("div", { ref: editFormRef, children: jsxRuntime.jsxs(Dropdown$1, { isOpen: dropdownOpen, toggle: () => { }, children: [jsxRuntime.jsx(DropdownToggle$1, { tag: 'div', children: jsxRuntime.jsxs("div", { className: classnames('display-value', { 'r-is-focus': isFocus || dropdownOpen }, { 'is-invalid': invalid }), onClick: handleOnClick, children: [template?.(rowData, indexRow) ?? displayValue, jsxRuntime.jsx(Input$1, { style: {
+    return (jsxRuntime.jsx("div", { className: "form-edit", ref: ref, id: id, children: jsxRuntime.jsx("div", { ref: editFormRef, children: jsxRuntime.jsxs(Dropdown$1, { isOpen: dropdownOpen, toggle: () => { }, children: [jsxRuntime.jsx(DropdownToggle$1, { tag: 'div', children: jsxRuntime.jsxs("div", { className: classNames$1('display-value', { 'r-is-focus': isFocus || dropdownOpen }, { 'is-invalid': invalid }), onClick: handleOnClick, children: [template?.(rowData, indexRow) ?? displayValue, jsxRuntime.jsx(Input$1, { style: {
                                         width: template ? 0 : '100%',
                                         height: template ? 0 : 28,
                                         lineHeight: template ? 0 : 19,
@@ -23251,7 +23321,7 @@ const EditForm = React$5.forwardRef((props, ref) => {
                         }, children: jsxRuntime.jsxs(DropdownItem$1, { className: 'p-0', style: { borderRadius: '6px' }, tag: 'div', header: true, children: [jsxRuntime.jsx("div", { onKeyDown: (e) => formKeyDown(e, handleSubmit(handleOnSubmit)), className: 'p-1', style: {
                                         maxHeight: menuHeight ? menuHeight : 300,
                                         overflow: "auto"
-                                    }, children: itemsField ? renderForm(itemsField) : '' }), jsxRuntime.jsxs("div", { className: "d-flex justify-content-between p-50", style: { boxShadow: "0 4px 24px 0 rgb(34 41 47 / 10%)" }, children: [jsxRuntime.jsx("div", { className: "text-primary py-25", style: { fontSize: 12 }, children: footerTemplate ? footerTemplate(rowData) : '' }), !onChangeField ? jsxRuntime.jsxs("div", { className: "d-flex justify-content-end", children: [isClearable && jsxRuntime.jsx(Button$1, { ref: buttonRef, className: 'btn me-50 py-25 px-50', outline: true, onClick: () => {
+                                    }, children: itemsField ? renderForm(itemsField) : '' }), jsxRuntime.jsxs("div", { className: "d-flex justify-content-between p-50", style: { boxShadow: "0 4px 24px 0 rgb(34 41 47 / 10%)" }, children: [jsxRuntime.jsx("div", { className: "text-primary py-25", style: { fontSize: 12 }, children: footerTemplate ? footerTemplate(rowData) : '' }), !onChangeField ? jsxRuntime.jsxs("div", { className: "d-flex justify-content-end", children: [isClearable && jsxRuntime.jsx(Button$1, { className: 'btn me-50 py-25 px-50', outline: true, onClick: () => {
                                                         itemsField.forEach((e) => {
                                                             if (e.type === 'numeric') {
                                                                 setValue(e.name, 0);
@@ -23264,7 +23334,7 @@ const EditForm = React$5.forwardRef((props, ref) => {
                                                         if (e.code === 'Tab') {
                                                             closeMenu();
                                                         }
-                                                    }, children: t('Clear') }), jsxRuntime.jsx(Button$1, { ref: buttonRef, color: 'primary', className: 'btn btn-primary py-25 px-50', onClick: handleSubmit(handleOnSubmit), onKeyDown: (e) => {
+                                                    }, children: t('Clear') }), jsxRuntime.jsx(Button$1, { color: 'primary', className: 'btn btn-primary py-25 px-50', onClick: handleSubmit(handleOnSubmit), onKeyDown: (e) => {
                                                         if (e.code === 'Tab') {
                                                             closeMenu();
                                                         }
@@ -23295,7 +23365,7 @@ const ModalHeader = (props) => {
             return jsxRuntime.jsx(SvgPlus, { fontSize: 17, className: 'me-1' });
         }
     };
-    return (jsxRuntime.jsxs("div", { className: 'modal-header d-flex align-items-center justify-content-between mb-1', children: [jsxRuntime.jsxs("div", { className: "d-flex align-items-center justify-content-start", children: [jsxRuntime.jsxs("h5", { className: 'modal-title', children: [handleModalIcon(), " ", t(title)] }), component ? component() : jsxRuntime.jsx(jsxRuntime.Fragment, {})] }), jsxRuntime.jsx("div", { className: 'todo-item-action d-flex align-items-center', children: jsxRuntime.jsx(SvgX, { className: classnames('fw-normal mt-25 cursor-pointer', { 'd-none': !handleModal }), fontSize: 20, onClick: handleModal }) })] }));
+    return (jsxRuntime.jsxs("div", { className: 'modal-header d-flex align-items-center justify-content-between mb-1', children: [jsxRuntime.jsxs("div", { className: "d-flex align-items-center justify-content-start", children: [jsxRuntime.jsxs("h5", { className: 'modal-title', children: [handleModalIcon(), " ", t(title)] }), component ? component() : jsxRuntime.jsx(jsxRuntime.Fragment, {})] }), jsxRuntime.jsx("div", { className: 'todo-item-action d-flex align-items-center', children: jsxRuntime.jsx(SvgX, { className: classNames$1('fw-normal mt-25 cursor-pointer', { 'd-none': !handleModal }), fontSize: 20, onClick: handleModal }) })] }));
 };
 
 const Sidebar = (props) => {
@@ -23321,16 +23391,16 @@ const Sidebar = (props) => {
             toggleSidebar();
         }, 400);
     };
-    return (jsxRuntime.jsxs("div", { tabIndex: 0, className: classnames({ 'd-none': !open }), onKeyDown: (e) => {
+    return (jsxRuntime.jsxs("div", { tabIndex: 0, className: classNames$1({ 'd-none': !open }), onKeyDown: (e) => {
             if ((!keyboard) && e.code === 'Escape' && flag) {
                 handClose();
                 e.stopPropagation();
                 e.preventDefault();
             }
-        }, children: [jsxRuntime.jsx("div", { className: classnames('offcanvas-backdrop fade', {
+        }, children: [jsxRuntime.jsx("div", { className: classNames$1('offcanvas-backdrop fade', {
                     'd-none': !flag || hiddenBackground,
                     show: flag
-                }), style: { zIndex: 1056 }, onClick: handClose }), jsxRuntime.jsxs("div", { className: classnames('r-sidebar', `customizer-${width ?? 600}`, {
+                }), style: { zIndex: 1056 }, onClick: handClose }), jsxRuntime.jsxs("div", { className: classNames$1('r-sidebar', `customizer-${width ?? 600}`, {
                     open: flag,
                     fullscreen: isFullScreen
                 }), style: { zIndex: 1057 }, children: [jsxRuntime.jsxs("div", { style: {
@@ -23346,7 +23416,7 @@ const Sidebar = (props) => {
                             cursor: 'pointer',
                             zIndex: 9,
                             marginLeft: 7
-                        }, className: classnames({ 'd-none': hiddenFullScreenButton }), onClick: () => {
+                        }, className: classNames$1({ 'd-none': hiddenFullScreenButton }), onClick: () => {
                             setIsFullScreen(!isFullScreen);
                         }, children: [jsxRuntime.jsx(SvgChevronLeft, { className: `${isFullScreen ? 'd-none' : ''}`, fontSize: 16 }), jsxRuntime.jsx(SvgChevronRight, { className: `${!isFullScreen ? 'd-none' : ''}`, fontSize: 15 })] }), children] })] }));
 };
@@ -23455,7 +23525,7 @@ const SidebarSetColumn = (props) => {
         }
     ];
     const renderHeaderCol = (col, indexCol) => {
-        return (jsxRuntime.jsx(React$5.Fragment, { children: col.visible !== false && jsxRuntime.jsx("th", { className: classnames(`r-headercell fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }), style: {
+        return (jsxRuntime.jsx(React$5.Fragment, { children: col.visible !== false && jsxRuntime.jsx("th", { className: classNames$1(`r-headercell fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }), style: {
                     width: col.fixedType ? Number(col.maxWidth ? col.maxWidth : (col.width ? col.width : (col.minWidth ?? 'auto'))) : col.width,
                     minWidth: col.fixedType ? Number(col.maxWidth ? col.maxWidth : (col.width ? col.width : (col.minWidth ?? 'auto'))) : col.minWidth,
                     top: `${0 * 42}px`,
@@ -23468,12 +23538,12 @@ const SidebarSetColumn = (props) => {
     return (jsxRuntime.jsxs(Sidebar, { open: openSidebar, toggleSidebar: handleCancel, width: 700, children: [jsxRuntime.jsx(ModalHeader, { typeModal: 'Edit', handleModal: handleCancel, title: 'Column setup' }), jsxRuntime.jsx("div", { className: "ms-2 react-table-edit", children: jsxRuntime.jsx("div", { className: 'r-grid', children: jsxRuntime.jsx("div", { className: "r-gridtable", style: { height: windowSize.innerHeight - 120 }, children: jsxRuntime.jsxs("table", { style: { width: '100%' }, children: [jsxRuntime.jsx("thead", { className: 'r-gridheader', children: jsxRuntime.jsx("tr", { className: "r-row", role: "row", children: columns.map((col, index) => {
                                             return (renderHeaderCol(col, index));
                                         }) }) }), jsxRuntime.jsx("tbody", { className: 'r-gridcontent', children: dataSource?.map((row, indexRow) => {
-                                        return (jsxRuntime.jsx("tr", { className: classnames('r-row', { 'last-row': indexRow === dataSource.length - 1 }, { 'fisrt-row': indexRow === 0 }), children: columns.map((col, indexCol) => {
+                                        return (jsxRuntime.jsx("tr", { className: classNames$1('r-row', { 'last-row': indexRow === dataSource.length - 1 }, { 'fisrt-row': indexRow === 0 }), children: columns.map((col, indexCol) => {
                                                 let value = row[col.field];
                                                 if (col.editType === 'numeric' || (col.editTypeCondition && col.editTypeCondition(row) === 'numeric')) {
                                                     value = formartNumberic(row[col.field], ',', '.', col.numericSettings?.fraction, true) ?? 0;
                                                 }
-                                                return (jsxRuntime.jsx(React$5.Fragment, { children: col.visible !== false && jsxRuntime.jsx("td", { className: classnames(`r-rowcell fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }, { 'r-active': indexFocus === indexRow }), style: {
+                                                return (jsxRuntime.jsx(React$5.Fragment, { children: col.visible !== false && jsxRuntime.jsx("td", { className: classNames$1(`r-rowcell fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }, { 'r-active': indexFocus === indexRow }), style: {
                                                             padding: 0,
                                                             textAlign: col.textAlign ? col.textAlign : 'left'
                                                         }, onFocus: (e) => {
@@ -23488,9 +23558,9 @@ const SidebarSetColumn = (props) => {
                                                                 }
                                                                 e.stopPropagation();
                                                             }
-                                                        }, children: jsxRuntime.jsx("div", { className: classnames('r-rowcell-div'), style: {
+                                                        }, children: jsxRuntime.jsx("div", { className: classNames$1('r-rowcell-div'), style: {
                                                                 width: col.fixedType ? Number(col.maxWidth ? col.maxWidth : (col.width ? col.width : (col.minWidth ?? 'auto'))) : 'auto'
-                                                            }, children: jsxRuntime.jsx("div", { className: classnames('r-rowcell-content'), style: {
+                                                            }, children: jsxRuntime.jsx("div", { className: classNames$1('r-rowcell-content'), style: {
                                                                     margin: '7px 9px'
                                                                 }, children: jsxRuntime.jsx("div", { className: "r-cell-text", children: col.template ? col.template(row, indexRow) : value }) }) }) }, `col-${indexRow}-${indexCol}`) }, indexCol));
                                             }) }, `row-${indexRow}`));
@@ -23513,12 +23583,14 @@ const CommandElement = (props) => {
     const { commandItems, rowData, indexRow, handleCommandClick, indexFocus, setIndexFocus } = props;
     const { t } = reactI18next.useTranslation();
     return (jsxRuntime.jsx(React$5.Fragment, { children: jsxRuntime.jsx("div", { className: 'd-flex align-items-center', style: { columnGap: 10 }, children: commandItems.map((item, index) => {
-                return (jsxRuntime.jsxs(Button$1, { id: `command-item-${indexRow}-${index}`, tabIndex: -1, style: { padding: '5px', minWidth: 45, height: '100%' }, className: classnames('command-item', {
+                return (jsxRuntime.jsxs(Button$1, { id: `command-item-${indexRow}-${index}`, tabIndex: -1, style: { padding: '5px', minWidth: 45, height: '100%' }, className: classNames$1('command-item', {
                         'btn-icon': item.tooltip === ''
                     }), color: item.color ? item.color : '#000', onClick: (e) => {
                         handleCommandClick(item.id, rowData, indexRow);
                         if (indexRow === indexFocus) {
-                            setIndexFocus(-1);
+                            if (setIndexFocus) {
+                                setIndexFocus(-1);
+                            }
                         }
                         e.preventDefault();
                     }, children: [item.icon && jsxRuntime.jsx(IconCustom, { iconName: item.icon, size: 16 }), jsxRuntime.jsx(UncontrolledTooltip, { className: "r-tooltip", target: `command-item-${indexRow}-${index}`, place: "top", children: t(item.tooltip ?? '') })] }, `command-${index}`));
@@ -41753,14 +41825,14 @@ const HeaderTableCol = (props) => {
             setColumn(newColumns);
         }
     };
-    return (jsxRuntime.jsx(React$5.Fragment, { children: col.visible !== false && (jsxRuntime.jsx(Resizable, { className: "r-resize", width: typeof col.width === 'number' ? col.width : Number((col.width ?? "").replaceAll(new RegExp(`[^0-9]`, "g"), '')), height: 0, onResize: handleResize, draggableOpts: { enableUserSelectHack: false }, children: jsxRuntime.jsx("th", { rowSpan: col.rowspan !== 1 ? col.rowspan : undefined, colSpan: col.columns?.filter(x => x.visible !== false)?.length ?? 1, className: classnames(`r-headercell fix-${col.fixedType}`, { 'fixed-last': (col.fixedType === 'left' && indexCol === lastObjWidthFixLeft) || (col.fixedType === 'right' && indexCol === fisrtObjWidthFixRight) }, { 'cell-fixed': col.fixedType }), style: {
+    return (jsxRuntime.jsx(React$5.Fragment, { children: col.visible !== false && (jsxRuntime.jsx(Resizable, { className: "r-resize", width: typeof col.width === 'number' ? col.width : Number((col.width ?? "").replaceAll(new RegExp(`[^0-9]`, "g"), '')), height: 0, onResize: handleResize, draggableOpts: { enableUserSelectHack: false }, children: jsxRuntime.jsx("th", { rowSpan: col.rowspan !== 1 ? col.rowspan : undefined, colSpan: col.columns?.filter(x => x.visible !== false)?.length ?? 1, className: classNames$1(`r-headercell fix-${col.fixedType}`, { 'fixed-last': (col.fixedType === 'left' && indexCol === lastObjWidthFixLeft) || (col.fixedType === 'right' && indexCol === fisrtObjWidthFixRight) }, { 'cell-fixed': col.fixedType }), style: {
                     top: `${indexParent * 42}px`,
                     left: col.fixedType === 'left' ? objWidthFixLeft[col.index ?? 0] : undefined,
                     right: col.fixedType === 'right' ? objWidthFixRight[col.index ?? 0] : undefined,
                     width: col.width ? typeof col.width === 'number' ? col.width : col.width?.includes('px') || col.width?.includes('%') ? col.width : `${col.width}px` : 'auto',
                     minWidth: col.fixedType ? col.width : col.minWidth ? typeof col.minWidth === 'number' ? col.minWidth : col.minWidth?.includes('px') || col.minWidth?.includes('%') ? col.minWidth : `${col.minWidth}px` : 'auto',
                     maxWidth: col.fixedType ? col.width : col.maxWidth ? typeof col.maxWidth === 'number' ? col.maxWidth : col.maxWidth?.includes('px') || col.maxWidth?.includes('%') ? col.maxWidth : `${col.maxWidth}px` : 'auto'
-                }, children: jsxRuntime.jsxs("div", { style: { justifyContent: col.textAlign ?? 'left' }, className: classnames('r-headercell-div'), children: [col.field === 'checkbox' && (jsxRuntime.jsx(Input$1, { checked: !!(totalCount > 0 && selectedRows?.length >= totalCount), type: "checkbox", className: classnames('cursor-pointer', { 'd-none': !isMulti }), style: { textAlign: col.textAlign ?? 'left', marginTop: 6 }, onChange: (e) => {
+                }, children: jsxRuntime.jsxs("div", { style: { justifyContent: col.textAlign ?? 'left' }, className: classNames$1('r-headercell-div'), children: [col.field === 'checkbox' && (jsxRuntime.jsx(Input$1, { checked: !!(totalCount > 0 && selectedRows?.length >= totalCount), type: "checkbox", className: classNames$1('cursor-pointer', { 'd-none': !isMulti }), style: { textAlign: col.textAlign ?? 'left', marginTop: 6 }, onChange: (e) => {
                                 if (selectEnable) {
                                     if (e.target.checked) {
                                         setSelectedRows(dataSource.map((item) => { return item; }));
@@ -41887,7 +41959,7 @@ const SelectTableTree = React$5.forwardRef((props, ref) => {
     };
     // Hàm để render header của cột
     const renderHeaderCol = (col, indexCol) => {
-        return (jsxRuntime.jsx(React$5.Fragment, { children: col.visible !== false && (jsxRuntime.jsx("th", { className: classnames(`r-select-headercell fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }), style: {
+        return (jsxRuntime.jsx(React$5.Fragment, { children: col.visible !== false && (jsxRuntime.jsx("th", { className: classNames$1(`r-select-headercell fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }), style: {
                     width: col.fixedType ? Number(col.maxWidth ? col.maxWidth : (col.width ? col.width : (col.minWidth ?? 'auto'))) : col.width,
                     minWidth: col.fixedType ? Number(col.maxWidth ? col.maxWidth : (col.width ? col.width : (col.minWidth ?? 'auto'))) : col.minWidth,
                     maxWidth: col.fixedType ? Number(col.maxWidth ? col.maxWidth : (col.width ? col.width : (col.minWidth ?? 'auto'))) : col.minWidth,
@@ -41938,7 +42010,7 @@ const SelectTableTree = React$5.forwardRef((props, ref) => {
     const RenderElement = React__default["default"].memo((props) => {
         const { indexRow, row, isSelected, level = 0 } = props;
         const [expanded, setExpanded] = React$5.useState(row.expanded);
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("tr", { id: `row-select-table-${indexRow}`, className: classnames('r-select-row', { 'fisrt-row': indexRow === 0 && level === 0 }), children: [isMulti && jsxRuntime.jsxs("td", { className: classnames(`r-select-rowcell`, { 'r-select-active': !isMulti && value && isSelected }), style: {
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("tr", { id: `row-select-table-${indexRow}`, className: classNames$1('r-select-row', { 'fisrt-row': indexRow === 0 && level === 0 }), children: [isMulti && jsxRuntime.jsxs("td", { className: classNames$1(`r-select-rowcell`, { 'r-select-active': !isMulti && value && isSelected }), style: {
                                 textAlign: 'center',
                                 paddingLeft: (level * 15) + (row[fieldChildren ?? 'children']?.length > 0 ? 0 : 10)
                             }, onClick: (e) => {
@@ -41985,7 +42057,7 @@ const SelectTableTree = React$5.forwardRef((props, ref) => {
                                                 setExpanded(true);
                                             }
                                             e.stopPropagation();
-                                        }, fontSize: 18, className: classnames('me-50 pb-0 r-icon-expand', { 'is-open': expanded }) }), jsxRuntime.jsx(Input$1, { checked: isSelected, type: "checkbox", className: "cursor-pointer", onChange: () => { } })] }), (columns ? columns : defaultColumns).map((col, indexCol) => {
+                                        }, fontSize: 18, className: classNames$1('me-50 pb-0 r-icon-expand', { 'is-open': expanded }) }), jsxRuntime.jsx(Input$1, { checked: isSelected, type: "checkbox", className: "cursor-pointer", onChange: () => { } })] }), (columns ? columns : defaultColumns).map((col, indexCol) => {
                             let valueDisplay = row[col.field];
                             if (col.type === 'numeric' || (col.typeCondition && col.typeCondition(row) === 'numeric')) {
                                 valueDisplay = formartNumberic(row[col.field], formatSetting?.decimalSeparator ?? '.', formatSetting?.thousandSeparator ?? ',', col.fraction ?? 0, true) ?? 0;
@@ -41996,7 +42068,7 @@ const SelectTableTree = React$5.forwardRef((props, ref) => {
                             else if (col.type === 'datetime') {
                                 valueDisplay = valueDisplay ? formatDateTime(valueDisplay, formatSetting?.dateFormat ?? 'DD/MM/yyyy HH:mm') : '';
                             }
-                            return (jsxRuntime.jsxs(React$5.Fragment, { children: [col.visible !== false && jsxRuntime.jsxs("td", { id: `select-${id}-${indexRow}-${indexCol}`, className: classnames(`r-select-rowcell`, { 'r-select-active': !isMulti && value && isSelected }), style: {
+                            return (jsxRuntime.jsxs(React$5.Fragment, { children: [col.visible !== false && jsxRuntime.jsxs("td", { id: `select-${id}-${indexRow}-${indexCol}`, className: classNames$1(`r-select-rowcell`, { 'r-select-active': !isMulti && value && isSelected }), style: {
                                             paddingLeft: 9 + (indexCol === 0 && !isMulti ? (level * 10) + (row[fieldChildren ?? 'children']?.length > 0 || level === 0 ? 0 : 15) : 0),
                                             textAlign: col.textAlign ? col.textAlign : 'left'
                                         }, onClick: (e) => {
@@ -42050,7 +42122,7 @@ const SelectTableTree = React$5.forwardRef((props, ref) => {
                                                             setExpanded(true);
                                                         }
                                                         e.stopPropagation();
-                                                    }, fontSize: 18, className: classnames('me-50 r-icon-expand', { 'is-open': expanded }) }), col.template ? col.template(row, indexRow) : (col.type === 'numeric' && Number(row[col.field]) < 0 ? jsxRuntime.jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [" ", `${formatSetting?.prefixNegative ?? '-'}${value}${formatSetting?.suffixNegative ?? ''}`] }) : valueDisplay)] }, `col-${indexRow}-${indexCol}`), checkOverflow(indexRow, indexCol) && jsxRuntime.jsx(UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `select-${id}-${indexRow}-${indexCol}`, children: col.template ? col.template(row, indexRow) : (col.type === 'numeric' && Number(row[col.field]) < 0 ? jsxRuntime.jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [" ", `${formatSetting?.prefixNegative ?? '-'}${value}${formatSetting?.suffixNegative ?? ''}`] }) : valueDisplay) })] }, indexCol));
+                                                    }, fontSize: 18, className: classNames$1('me-50 r-icon-expand', { 'is-open': expanded }) }), col.template ? col.template(row, indexRow) : (col.type === 'numeric' && Number(row[col.field]) < 0 ? jsxRuntime.jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [" ", `${formatSetting?.prefixNegative ?? '-'}${value}${formatSetting?.suffixNegative ?? ''}`] }) : valueDisplay)] }, `col-${indexRow}-${indexCol}`), checkOverflow(indexRow, indexCol) && jsxRuntime.jsx(UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `select-${id}-${indexRow}-${indexCol}`, children: col.template ? col.template(row, indexRow) : (col.type === 'numeric' && Number(row[col.field]) < 0 ? jsxRuntime.jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [" ", `${formatSetting?.prefixNegative ?? '-'}${value}${formatSetting?.suffixNegative ?? ''}`] }) : valueDisplay) })] }, indexCol));
                         })] }, `row-${indexRow}`), row[fieldChildren ?? 'children'] && row.expanded && row[fieldChildren ?? 'children'].map((child, indexChild) => {
                     if (checkSearch(searchTerm, child, (columns ? columns : defaultColumns))) {
                         const isSelectedChild = value && (isMulti ? value?.some((x) => x === child[fieldValue ?? 'value']) : value[fieldValue ?? 'value'] === child[fieldValue ?? 'value']);
@@ -42061,7 +42133,7 @@ const SelectTableTree = React$5.forwardRef((props, ref) => {
     const RenderTable = (props) => {
         let countDisplay = 0;
         return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("table", { style: { width: '100%' }, children: [!(noHeader && (columns?.length ?? 0) > 0) &&
-                            jsxRuntime.jsx("thead", { className: 'r-select-gridheader', children: jsxRuntime.jsxs("tr", { className: "r-select-row", role: "row", children: [isMulti && jsxRuntime.jsx("th", { className: classnames(`r-select-headercell checkbox-column`), style: { width: 40, minWidth: 40, maxWidth: 100, top: `0px` }, children: jsxRuntime.jsx("div", { style: { justifyContent: 'center' }, className: classnames('r-select-headercell-div'), children: jsxRuntime.jsx(Input$1, { checked: isSelectedAll, type: "checkbox", onClick: (e) => {
+                            jsxRuntime.jsx("thead", { className: 'r-select-gridheader', children: jsxRuntime.jsxs("tr", { className: "r-select-row", role: "row", children: [isMulti && jsxRuntime.jsx("th", { className: classNames$1(`r-select-headercell checkbox-column`), style: { width: 40, minWidth: 40, maxWidth: 100, top: `0px` }, children: jsxRuntime.jsx("div", { style: { justifyContent: 'center' }, className: classNames$1('r-select-headercell-div'), children: jsxRuntime.jsx(Input$1, { checked: isSelectedAll, type: "checkbox", onClick: (e) => {
                                                         if (isMulti) {
                                                             if (isSelectedAll) {
                                                                 onChange([]);
@@ -42071,7 +42143,7 @@ const SelectTableTree = React$5.forwardRef((props, ref) => {
                                                             }
                                                             e.stopPropagation();
                                                         }
-                                                    }, readOnly: true, className: classnames('cursor-pointer', { 'd-none': !isMulti }), style: { textAlign: 'center', marginTop: 6 } }) }) }), (columns ? columns : defaultColumns).map((col, index) => {
+                                                    }, readOnly: true, className: classNames$1('cursor-pointer', { 'd-none': !isMulti }), style: { textAlign: 'center', marginTop: 6 } }) }) }), (columns ? columns : defaultColumns).map((col, index) => {
                                             return (renderHeaderCol(col, index));
                                         })] }) }), (options.length > 0) && jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx("tbody", { className: 'r-select-gridcontent', children: options?.map((row, indexRow) => {
                                     if (checkSearch(searchTerm, row, (columns ? columns : defaultColumns))) {
@@ -42097,17 +42169,17 @@ const SelectTableTree = React$5.forwardRef((props, ref) => {
         traverse(tree);
         return records;
     };
-    return (jsxRuntime.jsx("div", { className: classnames('react-select-table', { 'is-invalid': invalid }), ref: ref, id: id, children: jsxRuntime.jsx("div", { ref: selectTableRef, children: jsxRuntime.jsxs(Dropdown$1, { isOpen: dropdownOpen, toggle: () => { }, onMouseDown: (e) => e.preventDefault(), children: [jsxRuntime.jsxs(DropdownToggle$1, { onClick: (e) => {
+    return (jsxRuntime.jsx("div", { className: classNames$1('react-select-table', { 'is-invalid': invalid }), ref: ref, id: id, children: jsxRuntime.jsx("div", { ref: selectTableRef, children: jsxRuntime.jsxs(Dropdown$1, { isOpen: dropdownOpen, toggle: () => { }, onMouseDown: (e) => e.preventDefault(), children: [jsxRuntime.jsxs(DropdownToggle$1, { onClick: (e) => {
                             if (!isDisabled) {
                                 inputRef?.current.focus();
                                 handleOpenClose();
                             }
                             e.preventDefault();
-                        }, tag: 'div', style: { width: '100%' }, className: classnames('select-table-control', { 'r-select-is-disabled': isDisabled }, { 'r-select-is-open': dropdownOpen }, { 'r-select-is-focus': isFocus }, { 'r-select-is-invalid': invalid }), children: [jsxRuntime.jsxs("div", { className: "select-table-container", children: [isMulti ? jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx("div", { className: classnames('select-value is-mutil', { 'd-none': searchTerm }), children: getSelectedRecords(options, value).map((ele, index) => {
+                        }, tag: 'div', style: { width: '100%' }, className: classNames$1('select-table-control', { 'r-select-is-disabled': isDisabled }, { 'r-select-is-open': dropdownOpen }, { 'r-select-is-focus': isFocus }, { 'r-select-is-invalid': invalid }), children: [jsxRuntime.jsxs("div", { className: "select-table-container", children: [isMulti ? jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx("div", { className: classNames$1('select-value is-mutil', { 'd-none': searchTerm }), children: getSelectedRecords(options, value).map((ele, index) => {
                                                 return (jsxRuntime.jsxs("span", { children: [index === 0 ? '' : ', ', ele[fieldLabel ?? 'label']] }, index));
-                                            }) }) }) : jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", { className: classnames('select-value', { 'd-none': searchTerm }), children: [value ? (formatOptionLabel ? formatOptionLabel(value) : value[fieldLabel ?? 'label']) : '', " "] }) }), !((isMulti ? value?.length > 0 : value) || isDisabled || searchTerm) && jsxRuntime.jsx("div", { className: classnames('select-placeholder'), children: placeholder }), jsxRuntime.jsx("div", { className: 'input-container', children: jsxRuntime.jsx("input", { style: { textAlign: textAlign ?? 'left' }, ref: inputRef, className: classnames('select-input'), readOnly: isDisabled, value: searchTerm, onPaste: (e) => (onPaste && !dropdownOpen) && onPaste(e), onChange: (val) => {
+                                            }) }) }) : jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", { className: classNames$1('select-value', { 'd-none': searchTerm }), children: [value ? (formatOptionLabel ? formatOptionLabel(value) : value[fieldLabel ?? 'label']) : '', " "] }) }), !((isMulti ? value?.length > 0 : value) || isDisabled || searchTerm) && jsxRuntime.jsx("div", { className: classNames$1('select-placeholder'), children: placeholder }), jsxRuntime.jsx("div", { className: 'input-container', children: jsxRuntime.jsx("input", { style: { textAlign: textAlign ?? 'left' }, ref: inputRef, className: classNames$1('select-input'), readOnly: isDisabled, value: searchTerm, onPaste: (e) => (onPaste && !dropdownOpen) && onPaste(e), onChange: (val) => {
                                                 setSearchTerm(val.target.value);
-                                            }, onKeyDown: (e) => handleOnKeyDown(e) }) })] }), (isClearable && value && !isDisabled) && jsxRuntime.jsx("div", { className: classnames('cursor-pointer icon-clear'), onClick: (e) => {
+                                            }, onKeyDown: (e) => handleOnKeyDown(e) }) })] }), (isClearable && value && !isDisabled) && jsxRuntime.jsx("div", { className: classNames$1('cursor-pointer icon-clear'), onClick: (e) => {
                                     onChange(isMulti ? [] : undefined);
                                     e.stopPropagation();
                                 }, children: "\u00D7" }), !isDisabled && jsxRuntime.jsx("div", { className: "select-table-indicator", onMouseDown: (e) => e.preventDefault(), children: jsxRuntime.jsx("svg", { height: "20", width: "20", viewBox: "0 0 20 20", children: jsxRuntime.jsx("path", { d: "M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z" }) }) })] }), jsxRuntime.jsx(DropdownMenu$1, { container: component, className: 'formula-dropdown icon-dropdown p-0', style: {
@@ -42115,12 +42187,12 @@ const SelectTableTree = React$5.forwardRef((props, ref) => {
                             position: 'fixed',
                             borderRadius: 4,
                             zIndex: 9999
-                        }, children: jsxRuntime.jsx(DropdownItem$1, { className: classnames('p-0 menu-select-table'), style: { borderRadius: '6px' }, tag: 'div', header: true, children: dropdownOpen && jsxRuntime.jsx("div", { onMouseDown: (e) => {
+                        }, children: jsxRuntime.jsx(DropdownItem$1, { className: classNames$1('p-0 menu-select-table'), style: { borderRadius: '6px' }, tag: 'div', header: true, children: dropdownOpen && jsxRuntime.jsx("div", { onMouseDown: (e) => {
                                     if (!isDisabled) {
                                         inputRef?.current.focus();
                                         e.preventDefault();
                                     }
-                                }, children: jsxRuntime.jsxs("div", { className: 'r-select-grid r-select-tree-grid', children: [jsxRuntime.jsx("div", { className: "r-select-gridtable ", ref: selectMenuTableRef, style: { width: menuWidth, minWidth: selectTableRef?.current?.clientWidth, maxHeight: maxHeight ?? defaultMaxHeight }, children: jsxRuntime.jsx(RenderTable, {}) }), jsxRuntime.jsxs("div", { className: classnames('r-select-footer', { 'd-none': !(showFooter === true || handleAdd || isMulti) }), children: [jsxRuntime.jsxs(Button$1, { outline: true, color: "primary", onClick: handleAdd, className: classnames('r-btn d-flex align-items-center', { 'd-none': !handleAdd }), children: [jsxRuntime.jsx(SvgPlus, { className: "me-50", fontSize: 16 }), t('AddNew'), " (F9)"] }), isMulti && jsxRuntime.jsx("div", { className: "ms-50 text-primary h-100 d-flex align-items-center", onClick: handleAdd, children: t('countSelected', { item: value?.length ?? 0 }) }), footerComponent ? footerComponent() : null] })] }) }) }) })] }) }) }));
+                                }, children: jsxRuntime.jsxs("div", { className: 'r-select-grid r-select-tree-grid', children: [jsxRuntime.jsx("div", { className: "r-select-gridtable ", ref: selectMenuTableRef, style: { width: menuWidth, minWidth: selectTableRef?.current?.clientWidth, maxHeight: maxHeight ?? defaultMaxHeight }, children: jsxRuntime.jsx(RenderTable, {}) }), jsxRuntime.jsxs("div", { className: classNames$1('r-select-footer', { 'd-none': !(showFooter === true || handleAdd || isMulti) }), children: [jsxRuntime.jsxs(Button$1, { outline: true, color: "primary", onClick: handleAdd, className: classNames$1('r-btn d-flex align-items-center', { 'd-none': !handleAdd }), children: [jsxRuntime.jsx(SvgPlus, { className: "me-50", fontSize: 16 }), t('AddNew'), " (F9)"] }), isMulti && jsxRuntime.jsx("div", { className: "ms-50 text-primary h-100 d-flex align-items-center", onClick: handleAdd, children: t('countSelected', { item: value?.length ?? 0 }) }), footerComponent ? footerComponent() : null] })] }) }) }) })] }) }) }));
 });
 
 const PagingComponent = ({ totalItem, pageSize, currentPage, onChangePage, pageOptions, onChangePageSize }) => {
@@ -42136,14 +42208,14 @@ const PagingComponent = ({ totalItem, pageSize, currentPage, onChangePage, pageO
     const renderPageNumber = (number) => {
         const arr = [];
         for (let index = ((number - 1) * 5) + 1; index <= number * 5 && index <= Math.floor(totalItem / pageSize) + (Math.floor(totalItem / pageSize) === totalItem / pageSize ? 0 : 1); index++) {
-            arr.push(jsxRuntime.jsx("div", { className: classnames('r-number', { 'r-active': index === currentPage }), onClick: () => { onChangePage({ totalItem, pageSize, currentPage: index, old: currentPage }); }, children: index }, `page-${index}`));
+            arr.push(jsxRuntime.jsx("div", { className: classNames$1('r-number', { 'r-active': index === currentPage }), onClick: () => { onChangePage({ totalItem, pageSize, currentPage: index, old: currentPage }); }, children: index }, `page-${index}`));
         }
         return (arr);
     };
-    return (jsxRuntime.jsx(React$5.Fragment, { children: jsxRuntime.jsxs("div", { className: "r-pager", children: [jsxRuntime.jsxs("div", { className: "r-pagercontainer", children: [jsxRuntime.jsx("button", { className: "r-button", type: "button", disabled: countPage <= 1 || currentPage === 1, onClick: () => onChangePage({ totalItem, pageSize, currentPage: 1, old: currentPage }), children: jsxRuntime.jsx(SvgChevronsLeft, { fontSize: 16 }) }), jsxRuntime.jsx("button", { className: "r-button", type: "button", disabled: countPage <= 1 || currentPage === 1, onClick: () => onChangePage({ totalItem, pageSize, currentPage: currentPage - 1, old: currentPage }), children: jsxRuntime.jsx(SvgChevronLeft, { fontSize: 16 }) }), jsxRuntime.jsx("button", { className: classnames('r-button', { 'd-none': currentPageNumber === 1 }), type: "button", onClick: () => {
+    return (jsxRuntime.jsx(React$5.Fragment, { children: jsxRuntime.jsxs("div", { className: "r-pager", children: [jsxRuntime.jsxs("div", { className: "r-pagercontainer", children: [jsxRuntime.jsx("button", { className: "r-button", type: "button", disabled: countPage <= 1 || currentPage === 1, onClick: () => onChangePage({ totalItem, pageSize, currentPage: 1, old: currentPage }), children: jsxRuntime.jsx(SvgChevronsLeft, { fontSize: 16 }) }), jsxRuntime.jsx("button", { className: "r-button", type: "button", disabled: countPage <= 1 || currentPage === 1, onClick: () => onChangePage({ totalItem, pageSize, currentPage: currentPage - 1, old: currentPage }), children: jsxRuntime.jsx(SvgChevronLeft, { fontSize: 16 }) }), jsxRuntime.jsx("button", { className: classNames$1('r-button', { 'd-none': currentPageNumber === 1 }), type: "button", onClick: () => {
                                 setCurrentPageNumber(currentPageNumber - 1);
                                 onChangePage({ totalItem, pageSize, currentPage: ((currentPageNumber - 2) * 5) + 1, old: currentPage });
-                            }, children: "..." }), renderPageNumber(currentPageNumber), jsxRuntime.jsx("button", { className: classnames('r-button', { 'd-none': currentPageNumber * 5 >= countPage }), type: "button", onClick: () => {
+                            }, children: "..." }), renderPageNumber(currentPageNumber), jsxRuntime.jsx("button", { className: classNames$1('r-button', { 'd-none': currentPageNumber * 5 >= countPage }), type: "button", onClick: () => {
                                 setCurrentPageNumber(currentPageNumber + 1);
                                 onChangePage({ totalItem, pageSize, currentPage: (currentPageNumber * 5) + 1, old: currentPage });
                             }, children: "..." }), jsxRuntime.jsx("button", { className: "r-button", type: "button", disabled: countPage <= 1 || countPage === currentPage, onClick: () => onChangePage({ totalItem, pageSize, currentPage: currentPage + 1, old: currentPage }), children: jsxRuntime.jsx(SvgChevronRight, { fontSize: 16 }) }), jsxRuntime.jsx("button", { className: "r-button", type: "button", disabled: countPage <= 1 || countPage === currentPage, onClick: () => onChangePage({ totalItem, pageSize, currentPage: Math.floor(totalItem / pageSize) + (Math.floor(totalItem / pageSize) === totalItem / pageSize ? 0 : 1), old: currentPage }), children: jsxRuntime.jsx(SvgChevronsRight, { fontSize: 16 }) }), jsxRuntime.jsx("div", { className: "r-pagesize", children: jsxRuntime.jsx(SelectTable, { value: { value: pageSize, label: pageSize }, noHeader: true, options: pageOptions.map((item) => ({ value: item, label: item })), onChange: (val) => {
@@ -42258,13 +42330,13 @@ editDisable, addDisable, toolbarSetting, buttonSetting) => {
 };
 
 const ToolbarBottom = ({ handleAdd, handleDuplicate, handleInsertBefore, handleInsertAfter, handleDeleteAll, setOpenPopupSetupColumn, indexFocus, editDisable, addDisable, buttonSetting, toolbarSetting, headerColumns, t }) => {
-    return (jsxRuntime.jsx("div", { id: "table_custom_bottom_toolbar", className: "r-toolbar r-toolbar-bottom", role: "toolbar", "aria-disabled": "false", "aria-haspopup": "false", "aria-orientation": "horizontal", children: jsxRuntime.jsxs("div", { className: "r-toolbar-items", children: [jsxRuntime.jsxs("div", { className: "r-toolbar-left", children: [jsxRuntime.jsxs("div", { className: classnames('r-toolbar-item d-flex', { 'd-none': editDisable || addDisable }), "aria-disabled": "false", children: [jsxRuntime.jsx(Button$1, { color: 'success', outline: true, onClick: () => handleAdd(1), className: 'd-flex', children: t('Add item') }), jsxRuntime.jsxs(UncontrolledDropdown, { className: 'nav-item', children: [jsxRuntime.jsx(DropdownToggle$1, { tag: 'div', className: 'me-0 d-flex', children: jsxRuntime.jsx(Button$1, { type: 'button', color: 'success', outline: true, style: { marginLeft: -1 }, className: 'px-25', children: jsxRuntime.jsx("svg", { fill: '#28c76f', height: "15", width: "20", viewBox: "0 0 20 20", children: jsxRuntime.jsx("path", { d: "M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z" }) }) }) }), jsxRuntime.jsxs(DropdownMenu$1, { className: 'formula-dropdown icon-dropdown p-0', style: { width: 60 }, children: [jsxRuntime.jsx(DropdownItem$1, { className: 'py-25', tag: 'div', onClick: () => handleAdd(10), children: "Th\u00EAm 10 h\u00E0ng" }), jsxRuntime.jsx(DropdownItem$1, { className: 'py-25', tag: 'div', onClick: () => handleAdd(20), children: "Th\u00EAm 20 h\u00E0ng" }), jsxRuntime.jsx(DropdownItem$1, { className: 'py-25', tag: 'div', onClick: () => handleAdd(30), children: "Th\u00EAm 30 h\u00E0ng" }), jsxRuntime.jsx(DropdownItem$1, { className: 'py-25', tag: 'div', onClick: () => handleAdd(40), children: "Th\u00EAm 40 h\u00E0ng" }), jsxRuntime.jsx(DropdownItem$1, { className: 'py-25', tag: 'div', onClick: () => handleAdd(50), children: "Th\u00EAm 50 h\u00E0ng" })] })] })] }), (indexFocus ?? -1) > -1 ? jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: classnames('r-toolbar-item', { 'd-none': editDisable || addDisable || buttonSetting?.duplicateDisable }), "aria-disabled": "false", children: jsxRuntime.jsx(Button$1, { color: 'success', outline: true, onClick: () => { handleDuplicate(); }, className: 'd-flex', children: t('Duplicate') }) }), jsxRuntime.jsx("div", { className: classnames('r-toolbar-item', { 'd-none': editDisable || addDisable || buttonSetting?.insertBeforeDisable }), "aria-disabled": "false", children: jsxRuntime.jsx(Button$1, { color: 'success', outline: true, onClick: handleInsertBefore, className: 'd-flex', children: t('Insert item before') }) }), jsxRuntime.jsx("div", { className: classnames('r-toolbar-item', { 'd-none': editDisable || addDisable || buttonSetting?.insertAfterDisable }), "aria-disabled": "false", children: jsxRuntime.jsx(Button$1, { color: 'success', outline: true, onClick: handleInsertAfter, className: 'd-flex', children: t('Insert item after') }) })] }) : jsxRuntime.jsx(jsxRuntime.Fragment, { children: " " }), jsxRuntime.jsx("div", { className: classnames('r-toolbar-item', { 'd-none': editDisable || buttonSetting?.deleteAllDisable }), "aria-disabled": "false", children: jsxRuntime.jsx(Button$1, { color: 'primary', outline: true, onClick: handleDeleteAll, className: 'd-flex', children: t('Delete all item') }) }), toolbarSetting?.toolbarBottomOptions?.map((item, index) => {
+    return (jsxRuntime.jsx("div", { id: "table_custom_bottom_toolbar", className: "r-toolbar r-toolbar-bottom", role: "toolbar", "aria-disabled": "false", "aria-haspopup": "false", "aria-orientation": "horizontal", children: jsxRuntime.jsxs("div", { className: "r-toolbar-items", children: [jsxRuntime.jsxs("div", { className: "r-toolbar-left", children: [jsxRuntime.jsxs("div", { className: classNames$1('r-toolbar-item d-flex', { 'd-none': editDisable || addDisable }), "aria-disabled": "false", children: [jsxRuntime.jsx(Button$1, { color: 'success', outline: true, onClick: () => handleAdd(1), className: 'd-flex', children: t('Add item') }), jsxRuntime.jsxs(UncontrolledDropdown, { className: 'nav-item', children: [jsxRuntime.jsx(DropdownToggle$1, { tag: 'div', className: 'me-0 d-flex', children: jsxRuntime.jsx(Button$1, { type: 'button', color: 'success', outline: true, style: { marginLeft: -1 }, className: 'px-25', children: jsxRuntime.jsx("svg", { fill: '#28c76f', height: "15", width: "20", viewBox: "0 0 20 20", children: jsxRuntime.jsx("path", { d: "M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z" }) }) }) }), jsxRuntime.jsxs(DropdownMenu$1, { className: 'formula-dropdown icon-dropdown p-0', style: { width: 60 }, children: [jsxRuntime.jsx(DropdownItem$1, { className: 'py-25', tag: 'div', onClick: () => handleAdd(10), children: "Th\u00EAm 10 h\u00E0ng" }), jsxRuntime.jsx(DropdownItem$1, { className: 'py-25', tag: 'div', onClick: () => handleAdd(20), children: "Th\u00EAm 20 h\u00E0ng" }), jsxRuntime.jsx(DropdownItem$1, { className: 'py-25', tag: 'div', onClick: () => handleAdd(30), children: "Th\u00EAm 30 h\u00E0ng" }), jsxRuntime.jsx(DropdownItem$1, { className: 'py-25', tag: 'div', onClick: () => handleAdd(40), children: "Th\u00EAm 40 h\u00E0ng" }), jsxRuntime.jsx(DropdownItem$1, { className: 'py-25', tag: 'div', onClick: () => handleAdd(50), children: "Th\u00EAm 50 h\u00E0ng" })] })] })] }), (indexFocus ?? -1) > -1 ? jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: classNames$1('r-toolbar-item', { 'd-none': editDisable || addDisable || buttonSetting?.duplicateDisable }), "aria-disabled": "false", children: jsxRuntime.jsx(Button$1, { color: 'success', outline: true, onClick: () => { handleDuplicate(); }, className: 'd-flex', children: t('Duplicate') }) }), jsxRuntime.jsx("div", { className: classNames$1('r-toolbar-item', { 'd-none': editDisable || addDisable || buttonSetting?.insertBeforeDisable }), "aria-disabled": "false", children: jsxRuntime.jsx(Button$1, { color: 'success', outline: true, onClick: handleInsertBefore, className: 'd-flex', children: t('Insert item before') }) }), jsxRuntime.jsx("div", { className: classNames$1('r-toolbar-item', { 'd-none': editDisable || addDisable || buttonSetting?.insertAfterDisable }), "aria-disabled": "false", children: jsxRuntime.jsx(Button$1, { color: 'success', outline: true, onClick: handleInsertAfter, className: 'd-flex', children: t('Insert item after') }) })] }) : jsxRuntime.jsx(jsxRuntime.Fragment, { children: " " }), jsxRuntime.jsx("div", { className: classNames$1('r-toolbar-item', { 'd-none': editDisable || buttonSetting?.deleteAllDisable }), "aria-disabled": "false", children: jsxRuntime.jsx(Button$1, { color: 'primary', outline: true, onClick: handleDeleteAll, className: 'd-flex', children: t('Delete all item') }) }), toolbarSetting?.toolbarBottomOptions?.map((item, index) => {
                             return ((item.align === 'left') ? jsxRuntime.jsx("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-left-${index}`) : '');
                         })] }), jsxRuntime.jsx("div", { className: "r-toolbar-center", children: toolbarSetting?.toolbarBottomOptions?.map((item, index) => {
                         return ((item.align === 'center') ? jsxRuntime.jsx("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-center-${index}`) : '');
                     }) }), jsxRuntime.jsxs("div", { className: "r-toolbar-right", children: [toolbarSetting?.toolbarBottomOptions?.map((item, index) => {
                             return ((item.align === 'right') ? jsxRuntime.jsx("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-right-${index}`) : '');
-                        }), jsxRuntime.jsx("div", { className: classnames('r-toolbar-item me-25', { 'd-none': headerColumns.length > 1 }), "aria-disabled": "false", children: jsxRuntime.jsx(SvgSettings, { className: "text-primary cursor-pointer", onClick: () => setOpenPopupSetupColumn(true) }) }), jsxRuntime.jsx("div", { className: classnames('r-toolbar-item me-25', { 'd-none': editDisable || addDisable }), "aria-disabled": "false", children: jsxRuntime.jsxs(UncontrolledDropdown, { className: 'dropdown-user nav-item', children: [jsxRuntime.jsx(DropdownToggle$1, { tag: 'div', color: "primary", onClick: (e) => e.preventDefault(), children: jsxRuntime.jsx(SvgInfo, { className: "cursor-pointer text-primary" }) }), jsxRuntime.jsx(DropdownMenu$1, { className: 'formula-dropdown icon-dropdown', children: jsxRuntime.jsxs("ul", { className: "mb-0 pe-50", children: [jsxRuntime.jsx("li", { style: { fontSize: 13 }, children: "Nh\u1EA5n v\u00E0o c\u1ED9t STT \u0111\u1EC3 ch\u1ECDn h\u00E0ng v\u00E0 nh\u1EA5n Ctrl + D \u0111\u1EC3 nh\u00E2n b\u1EA3n" }), jsxRuntime.jsx("li", { style: { fontSize: 13 }, children: "Ch\u1ECDn \u00F4 v\u00E0 Ctrl + V \u0111\u1EC3 d\u00E1n th\u00F4ng tin t\u1EEB excel" }), jsxRuntime.jsx("li", { style: { fontSize: 13 }, children: "Nh\u1EA5n v\u00E0o c\u1ED9t STT \u0111\u1EC3 ch\u1ECDn h\u00E0ng v\u00E0 nh\u1EA5n Ctrl + C \u0111\u1EC3 sao ch\u00E9p h\u00E0ng" }), jsxRuntime.jsx("li", { style: { fontSize: 13 }, children: "Nh\u1EA5n v\u00E0o c\u1ED9t STT \u0111\u1EC3 ch\u1ECDn h\u00E0ng v\u00E0 nh\u1EA5n Ctrl + V \u0111\u1EC3  d\u00E1n h\u00E0ng" }), jsxRuntime.jsx("li", { style: { fontSize: 13 }, children: "Nh\u1EA5n Ctrl ho\u1EB7c Alt + Shift + \u2193 \u0111\u1EC3 sao ch\u00E9p d\u1EEF li\u1EC7u \u00F4 cho c\u00E1c d\u00F2ng d\u01B0\u1EDBi" }), jsxRuntime.jsx("li", { style: { fontSize: 13 }, children: "Nh\u1EA5n Ctrl ho\u1EB7c Alt + Shift + \u2191 \u0111\u1EC3 sao ch\u00E9p d\u1EEF li\u1EC7u \u00F4 cho c\u00E1c d\u00F2ng tr\u00EAn" })] }) })] }) })] })] }) }));
+                        }), jsxRuntime.jsx("div", { className: classNames$1('r-toolbar-item me-25', { 'd-none': headerColumns.length > 1 }), "aria-disabled": "false", children: jsxRuntime.jsx(SvgSettings, { className: "text-primary cursor-pointer", onClick: () => setOpenPopupSetupColumn(true) }) }), jsxRuntime.jsx("div", { className: classNames$1('r-toolbar-item me-25', { 'd-none': editDisable || addDisable }), "aria-disabled": "false", children: jsxRuntime.jsxs(UncontrolledDropdown, { className: 'dropdown-user nav-item', children: [jsxRuntime.jsx(DropdownToggle$1, { tag: 'div', color: "primary", onClick: (e) => e.preventDefault(), children: jsxRuntime.jsx(SvgInfo, { className: "cursor-pointer text-primary" }) }), jsxRuntime.jsx(DropdownMenu$1, { className: 'formula-dropdown icon-dropdown', children: jsxRuntime.jsxs("ul", { className: "mb-0 pe-50", children: [jsxRuntime.jsx("li", { style: { fontSize: 13 }, children: "Nh\u1EA5n v\u00E0o c\u1ED9t STT \u0111\u1EC3 ch\u1ECDn h\u00E0ng v\u00E0 nh\u1EA5n Ctrl + D \u0111\u1EC3 nh\u00E2n b\u1EA3n" }), jsxRuntime.jsx("li", { style: { fontSize: 13 }, children: "Ch\u1ECDn \u00F4 v\u00E0 Ctrl + V \u0111\u1EC3 d\u00E1n th\u00F4ng tin t\u1EEB excel" }), jsxRuntime.jsx("li", { style: { fontSize: 13 }, children: "Nh\u1EA5n v\u00E0o c\u1ED9t STT \u0111\u1EC3 ch\u1ECDn h\u00E0ng v\u00E0 nh\u1EA5n Ctrl + C \u0111\u1EC3 sao ch\u00E9p h\u00E0ng" }), jsxRuntime.jsx("li", { style: { fontSize: 13 }, children: "Nh\u1EA5n v\u00E0o c\u1ED9t STT \u0111\u1EC3 ch\u1ECDn h\u00E0ng v\u00E0 nh\u1EA5n Ctrl + V \u0111\u1EC3  d\u00E1n h\u00E0ng" }), jsxRuntime.jsx("li", { style: { fontSize: 13 }, children: "Nh\u1EA5n Ctrl ho\u1EB7c Alt + Shift + \u2193 \u0111\u1EC3 sao ch\u00E9p d\u1EEF li\u1EC7u \u00F4 cho c\u00E1c d\u00F2ng d\u01B0\u1EDBi" }), jsxRuntime.jsx("li", { style: { fontSize: 13 }, children: "Nh\u1EA5n Ctrl ho\u1EB7c Alt + Shift + \u2191 \u0111\u1EC3 sao ch\u00E9p d\u1EEF li\u1EC7u \u00F4 cho c\u00E1c d\u00F2ng tr\u00EAn" })] }) })] }) })] })] }) }));
 };
 
 const handleArrowRight = (e, params) => {
@@ -42429,10 +42501,10 @@ const SelectTableBox = (props) => {
         const { isLabel, desciptionLabel, id, classLabel, name, label, required } = props;
         return (jsxRuntime.jsxs(React$5.Fragment, { children: [isLabel === false ? '' : jsxRuntime.jsxs(Label$1, { id: `label-${id}`, className: classLabel, for: name, children: [t(label ? label : ''), " ", required ? jsxRuntime.jsx("span", { className: "text-danger", children: "*" }) : ''] }), (!isNullOrUndefined$1(desciptionLabel) && desciptionLabel !== '') ?? jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(UncontrolledTooltip, { target: `label-${id}`, children: t(desciptionLabel ?? '') }) })] }));
     };
-    return (jsxRuntime.jsx(React$5.Fragment, { children: jsxRuntime.jsxs("div", { className: classnames(inLine === false ? 'form-group ' : 'form-row-inline d-flex', 'align', {
+    return (jsxRuntime.jsx(React$5.Fragment, { children: jsxRuntime.jsxs("div", { className: classNames$1(inLine === false ? 'form-group ' : 'form-row-inline d-flex', 'align', {
                 [labelSize ? labelSize : '']: labelSize,
                 'form-row-inline-error': errors
-            }), children: [renderLabel({ isLabel, desciptionLabel, classLabel, name, label, required, id: id ?? '' }), jsxRuntime.jsxs("div", { className: classnames('form-input-content', { 'hidden-label': isLabel === false }), children: [jsxRuntime.jsx(Controller, { name: name, control: control, render: ({ field: { value, onChange } }) => {
+            }), children: [renderLabel({ isLabel, desciptionLabel, classLabel, name, label, required, id: id ?? '' }), jsxRuntime.jsxs("div", { className: classNames$1('form-input-content', { 'hidden-label': isLabel === false }), children: [jsxRuntime.jsx(Controller, { name: name, control: control, render: ({ field: { value, onChange } }) => {
                                 return (jsxRuntime.jsx(SelectTable, { ...rest, id: id, value: (isMulti ? value?.length > 0 : value) ? (!isMulti ? (options.find((val) => val[fieldValue ?? 'value'] === value) ?? (defaultValue ?? '')) : value) : (isMulti ? [] : undefined), 
                                     // Giá trị của SelectTable, nếu isMulti là true và value có độ dài lớn hơn 0, hoặc nếu isMulti là false và value có giá trị, 
                                     // thì tìm giá trị tương ứng trong options hoặc sử dụng defaultValue. Nếu không, sử dụng giá trị mặc định tùy thuộc vào isMulti.
@@ -42630,24 +42702,6 @@ const TableEdit = React$5.forwardRef((props, ref) => {
         setHeaderColumns(arrHeaderColumns);
         setContentColumns(arrContentColumns);
     }, [columns]);
-    React$5.useEffect(() => {
-        const arrHeaderColumns = [];
-        const arrContentColumns = [];
-        let headerLevelRow = 0;
-        if (levelCol) {
-            headerLevelRow = levelCol;
-        }
-        else {
-            headerLevelRow = stretchColumn(columns, 0);
-            setLevelCol(headerLevelRow);
-        }
-        for (let i = 0; i < headerLevelRow; i++) {
-            arrHeaderColumns.push([]);
-        }
-        getNestedChildren(columns, arrHeaderColumns, arrContentColumns, 0, headerLevelRow);
-        setHeaderColumns(arrHeaderColumns);
-        setContentColumns(arrContentColumns);
-    }, [columns]);
     const getNestedChildren = (array, arrHeaderColumns, arrContentColumns, level, maxLevelRow) => {
         array.forEach((item) => {
             const ele = { ...item, visible: item.visible, rowspan: 1, index: 0 };
@@ -42727,7 +42781,7 @@ const TableEdit = React$5.forwardRef((props, ref) => {
         /*eslint-disable */
         switch (col?.editTypeCondition ? col?.editTypeCondition(row) : col.editType) {
             case 'date':
-                return (jsxRuntime.jsx(DateInput, { id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`, className: classnames('form-control border-0 rounded-0 input-numeric', { 'is-invalid': col.validate && col.validate(row[col.field], row) }), value: row[col.field], onChange: (date) => {
+                return (jsxRuntime.jsx(DateInput, { id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`, className: classNames$1('form-control border-0 rounded-0 input-numeric', { 'is-invalid': col.validate && col.validate(row[col.field], row) }), value: row[col.field], onChange: (date) => {
                         row[col.field] = date ? new Date(date.getTime() + 7 * 60 * 60 * 1000) : undefined;
                         if (col.callback) {
                             col.callback(row[col.field], indexRow, row);
@@ -42739,7 +42793,7 @@ const TableEdit = React$5.forwardRef((props, ref) => {
                         }
                     } }));
             case 'datetime':
-                return (jsxRuntime.jsx(DateInput, { id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`, className: classnames('form-control border-0 rounded-0 input-numeric', { 'is-invalid': col.validate && col.validate(row[col.field], row) }), value: row[col.field], onChange: (date) => {
+                return (jsxRuntime.jsx(DateInput, { id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`, className: classNames$1('form-control border-0 rounded-0 input-numeric', { 'is-invalid': col.validate && col.validate(row[col.field], row) }), value: row[col.field], onChange: (date) => {
                         row[col.field] = date;
                         if (col.callback) {
                             col.callback(row[col.field], indexRow, row);
@@ -42874,7 +42928,7 @@ const TableEdit = React$5.forwardRef((props, ref) => {
                     decimalScale: col.numericSettings?.fraction ?? 0
                 };
                 let floatValue = parseFloat(row[col.field] ?? '0');
-                return (jsxRuntime.jsx(NumericFormat, { id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`, style: { textAlign: col.textAlign, height: 29 }, ...numericFormatProps, defaultValue: formartNumberic(row[col.field], formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', col.numericSettings?.fraction), className: classnames('form-control border-0 rounded-0 input-numeric', { 'is-invalid': col.validate && col.validate(row[col.field], row) }), onValueChange: (values) => {
+                return (jsxRuntime.jsx(NumericFormat, { id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`, style: { textAlign: col.textAlign, height: 29 }, ...numericFormatProps, defaultValue: formartNumberic(row[col.field], formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', col.numericSettings?.fraction), className: classNames$1('form-control border-0 rounded-0 input-numeric', { 'is-invalid': col.validate && col.validate(row[col.field], row) }), onValueChange: (values) => {
                         floatValue = values?.floatValue;
                     }, onFocus: (e) => {
                         e.target.setSelectionRange(0, e.target.innerText.length - 1);
@@ -42940,7 +42994,7 @@ const TableEdit = React$5.forwardRef((props, ref) => {
                         }
                     } }));
             default:
-                return (jsxRuntime.jsx(Input$1, { id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`, style: { textAlign: col.textAlign, height: 29 }, value: isNullOrUndefined$1(row[col.field]) ? '' : row[col.field], className: classnames('border-0 rounded-0 input-element', { 'is-invalid': col.validate && col.validate(row[col.field], row) }), onChange: (val) => {
+                return (jsxRuntime.jsx(Input$1, { id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`, style: { textAlign: col.textAlign, height: 29 }, value: isNullOrUndefined$1(row[col.field]) ? '' : row[col.field], className: classNames$1('border-0 rounded-0 input-element', { 'is-invalid': col.validate && col.validate(row[col.field], row) }), onChange: (val) => {
                         if (row[col.field] != val.target?.value) {
                             row[col.field] = val.target?.value;
                             if (col.callback) {
@@ -43283,14 +43337,14 @@ const TableEdit = React$5.forwardRef((props, ref) => {
     }, [selectedItem]);
     const renderContentCol = (col, row, indexRow, indexCol, isSelected) => {
         if (col.field === 'command') {
-            return (col.visible !== false && jsxRuntime.jsx("td", { className: classnames(`r-rowcell p-0 fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }, { 'fixed-last': (col.fixedType === 'left' && indexCol === lastObjWidthFixLeft) || (col.fixedType === 'right' && indexCol === fisrtObjWidthFixRight) }, { 'r-active': (isSelected && editDisable) || indexFocus === indexRow }), style: {
+            return (col.visible !== false && jsxRuntime.jsx("td", { className: classNames$1(`r-rowcell p-0 fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }, { 'fixed-last': (col.fixedType === 'left' && indexCol === lastObjWidthFixLeft) || (col.fixedType === 'right' && indexCol === fisrtObjWidthFixRight) }, { 'r-active': (isSelected && editDisable) || indexFocus === indexRow }), style: {
                     left: col.fixedType === 'left' ? objWidthFixLeft[indexCol] : undefined,
                     right: col.fixedType === 'right' ? objWidthFixRight[indexCol] : undefined,
                     textAlign: col.textAlign ? col.textAlign : 'left',
                 }, children: jsxRuntime.jsx("div", { className: "r-rowcell-div command", children: jsxRuntime.jsx(CommandElement, { commandItems: col.commandItems ?? [], handleCommandClick: handleCommandClick, indexRow: indexRow, rowData: row, setIndexFocus: setIndexFocus, indexFocus: indexFocus }) }) }, `col-${indexRow}-${indexCol}`));
         }
         else if (col.field === '#') {
-            return (col.visible !== false && jsxRuntime.jsx("td", { className: classnames(`r-rowcell p-0 cursor-pointer fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }, { 'fixed-last': (col.fixedType === 'left' && indexCol === lastObjWidthFixLeft) || (col.fixedType === 'right' && indexCol === fisrtObjWidthFixRight) }, { 'r-active': (isSelected && editDisable) || indexFocus === indexRow }), tabIndex: Number(`${indexRow}${indexCol}`), style: {
+            return (col.visible !== false && jsxRuntime.jsx("td", { className: classNames$1(`r-rowcell p-0 cursor-pointer fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }, { 'fixed-last': (col.fixedType === 'left' && indexCol === lastObjWidthFixLeft) || (col.fixedType === 'right' && indexCol === fisrtObjWidthFixRight) }, { 'r-active': (isSelected && editDisable) || indexFocus === indexRow }), tabIndex: Number(`${indexRow}${indexCol}`), style: {
                     left: col.fixedType === 'left' ? objWidthFixLeft[indexCol] : undefined,
                     right: col.fixedType === 'right' ? objWidthFixRight[indexCol] : undefined,
                     textAlign: 'center',
@@ -43328,7 +43382,7 @@ const TableEdit = React$5.forwardRef((props, ref) => {
                 }, children: jsxRuntime.jsx("div", { className: "r-rowcell-div", children: indexRow + 1 }) }, `col-${indexRow}-${indexCol}`));
         }
         else if (col.field === 'checkbox') {
-            return (jsxRuntime.jsx("td", { className: classnames(`r-rowcell p-0 fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }, { 'fixed-last': (col.fixedType === 'left' && indexCol === lastObjWidthFixLeft) || (col.fixedType === 'right' && indexCol === fisrtObjWidthFixRight) }, { 'r-active': (isSelected && editDisable) || indexFocus === indexRow }), style: {
+            return (jsxRuntime.jsx("td", { className: classNames$1(`r-rowcell p-0 fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }, { 'fixed-last': (col.fixedType === 'left' && indexCol === lastObjWidthFixLeft) || (col.fixedType === 'right' && indexCol === fisrtObjWidthFixRight) }, { 'r-active': (isSelected && editDisable) || indexFocus === indexRow }), style: {
                     left: col.fixedType === 'left' ? objWidthFixLeft[indexCol] : undefined,
                     right: col.fixedType === 'right' ? objWidthFixRight[indexCol] : undefined,
                 }, children: jsxRuntime.jsx("div", { className: "r-rowcell-div cursor-pointer", style: { alignItems: 'center' }, onClick: (e) => {
@@ -43368,7 +43422,7 @@ const TableEdit = React$5.forwardRef((props, ref) => {
             }
             const typeDis = !editDisable && (indexFocus === indexRow || col.editType === 'checkbox') && (!col.disabledCondition || !col.disabledCondition(row)) ? (col.editEnable ? 1 : (col.template ? 2 : 3)) : (col.template ? 2 : 3);
             const errorMessage = typeDis === 1 || col.field === '' || !col.validate ? '' : col.validate(row[col.field], row);
-            return (jsxRuntime.jsx(React$5.Fragment, { children: col.visible !== false && jsxRuntime.jsx("td", { className: classnames(`r-rowcell fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }, { 'fixed-last': (col.fixedType === 'left' && indexCol === lastObjWidthFixLeft) || (col.fixedType === 'right' && indexCol === fisrtObjWidthFixRight) }, { 'r-active': (isSelected && editDisable) || indexFocus === indexRow }), style: {
+            return (jsxRuntime.jsx(React$5.Fragment, { children: col.visible !== false && jsxRuntime.jsx("td", { className: classNames$1(`r-rowcell fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }, { 'fixed-last': (col.fixedType === 'left' && indexCol === lastObjWidthFixLeft) || (col.fixedType === 'right' && indexCol === fisrtObjWidthFixRight) }, { 'r-active': (isSelected && editDisable) || indexFocus === indexRow }), style: {
                         left: col.fixedType === 'left' ? objWidthFixLeft[indexCol] : undefined,
                         right: col.fixedType === 'right' ? objWidthFixRight[indexCol] : undefined,
                     }, onClick: (e) => {
@@ -43399,9 +43453,9 @@ const TableEdit = React$5.forwardRef((props, ref) => {
                             }
                             e.stopPropagation();
                         }
-                    }, children: jsxRuntime.jsx("div", { className: classnames('r-rowcell-div'), children: jsxRuntime.jsxs("div", { id: indexFocus === indexRow && typeDis !== 1 ? `${idTable}-col${indexCol + 1}-row${indexRow + 1}` : '', className: classnames('r-rowcell-content', { 'r-is-invalid': errorMessage }), style: {
+                    }, children: jsxRuntime.jsx("div", { className: classNames$1('r-rowcell-div'), children: jsxRuntime.jsxs("div", { id: indexFocus === indexRow && typeDis !== 1 ? `${idTable}-col${indexCol + 1}-row${indexRow + 1}` : '', className: classNames$1('r-rowcell-content', { 'r-is-invalid': errorMessage }), style: {
                                 textAlign: col.textAlign ? col.textAlign : 'left'
-                            }, children: [typeDis === 1 && !refreshRow && jsxRuntime.jsx(jsxRuntime.Fragment, { children: RenderEditCell(row, col, indexCol, indexRow) }), (typeDis !== 1 || refreshRow) && RenderContentCell(row, col, indexCol, indexRow, typeDis, value), jsxRuntime.jsx("span", { id: `error-${indexRow}-${indexCol}`, className: classnames('cursor-pointer text-primary icon-table', { 'd-none': !errorMessage }), children: jsxRuntime.jsx(SvgAlertCircle, { fontSize: 15.5 }) }), jsxRuntime.jsx(UncontrolledTooltip, { target: `error-${indexRow}-${indexCol}`, className: "r-tooltip tooltip-error", children: errorMessage?.toString() ?? '' })] }) }) }, `col-${indexRow}-${indexCol}`) }, indexCol));
+                            }, children: [typeDis === 1 && !refreshRow && jsxRuntime.jsx(jsxRuntime.Fragment, { children: RenderEditCell(row, col, indexCol, indexRow) }), (typeDis !== 1 || refreshRow) && RenderContentCell(row, col, indexCol, indexRow, typeDis, value), jsxRuntime.jsx("span", { id: `error-${indexRow}-${indexCol}`, className: classNames$1('cursor-pointer text-primary icon-table', { 'd-none': !errorMessage }), children: jsxRuntime.jsx(SvgAlertCircle, { fontSize: 15.5 }) }), jsxRuntime.jsx(UncontrolledTooltip, { target: `error-${indexRow}-${indexCol}`, className: "r-tooltip tooltip-error", children: errorMessage?.toString() ?? '' })] }) }) }, `col-${indexRow}-${indexCol}`) }, indexCol));
         }
     };
     const RenderContentCell = (row, col, indexCol, indexRow, typeDis, value) => {
@@ -43418,7 +43472,7 @@ const TableEdit = React$5.forwardRef((props, ref) => {
     };
     const renderFooterCol = (col, indexCol) => {
         const sumValue = (col.haveSum === true && col.editType === "numeric") ? dataSource.reduce(function (accumulator, currentValue) { return (Number(accumulator ?? 0) + Number(currentValue[col.field] ?? 0)); }, 0) : 0;
-        return (jsxRuntime.jsx(React$5.Fragment, { children: (col.visible !== false) && jsxRuntime.jsx("td", { className: classnames(`p-0 px-50 r-footer fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }), style: {
+        return (jsxRuntime.jsx(React$5.Fragment, { children: (col.visible !== false) && jsxRuntime.jsx("td", { className: classNames$1(`p-0 px-50 r-footer fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }), style: {
                     left: col.fixedType === 'left' ? objWidthFixLeft[indexCol] : undefined,
                     right: col.fixedType === 'right' ? objWidthFixRight[indexCol] : undefined,
                     textAlign: col.textAlign ? col.textAlign : 'left'
@@ -43442,7 +43496,7 @@ const TableEdit = React$5.forwardRef((props, ref) => {
             const flagSearch = !searchClient || checkSearch(searchSetting?.searchTerm !== undefined ? searchSetting?.searchTerm : searchTerm, row, searchSetting?.keyField ?? []);
             if (flagSearch) {
                 const flagDisplay = !pagingClient || ((indexRow + 1) > ((pagingSetting.pageSize ?? 0) * ((pagingSetting.currentPage ?? 0) - 1)) && (indexRow + 1) <= ((pagingSetting.pageSize ?? 0) * ((pagingSetting.currentPage ?? 0))));
-                return (flagDisplay && jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx("tr", { className: classnames('r-row'), children: contentColumns.map((col, indexCol) => renderContentCol(col, row, indexRow, indexCol, isSelected)) }, `row-${indexRow}`) }));
+                return (flagDisplay && jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx("tr", { className: classNames$1('r-row'), children: contentColumns.map((col, indexCol) => renderContentCol(col, row, indexRow, indexCol, isSelected)) }, `row-${indexRow}`) }));
             }
         }));
     };
@@ -43561,7 +43615,7 @@ const TabsMenuComponent = ({ buttonWidth, tabParent, tabChild, resourceCodeParen
     const handleModal = (name) => {
         setOpenModal((old) => ({ ...old, [name]: !(openModal[name] ?? false) }));
     };
-    return (jsxRuntime.jsxs(React$5.Fragment, { children: [renderModal ? renderModal({ handleModal, windowSize, openModal, setDataItem, dataItem }) : '', jsxRuntime.jsxs("div", { className: classnames('tab-custom', { 'tab-parent': tabParent }, { 'tab-child': tabChild }), style: { width: `calc(100% - ${buttonWidth ?? 100}px` }, children: [jsxRuntime.jsx("div", { onClick: () => handleScroll(-200), className: classnames('btn-scroll', { 'd-none': componentWidth >= contentWidth - 20 }), children: jsxRuntime.jsx(SvgChevronLeft, {}) }), jsxRuntime.jsx("div", { ref: tabComponentRef, className: "tab-component", onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, children: jsxRuntime.jsx("div", { ref: contentComponentRef, children: dataMenu.map((item) => {
+    return (jsxRuntime.jsxs(React$5.Fragment, { children: [renderModal ? renderModal({ handleModal, windowSize, openModal, setDataItem, dataItem }) : '', jsxRuntime.jsxs("div", { className: classNames$1('tab-custom', { 'tab-parent': tabParent }, { 'tab-child': tabChild }), style: { width: `calc(100% - ${buttonWidth ?? 100}px` }, children: [jsxRuntime.jsx("div", { onClick: () => handleScroll(-200), className: classNames$1('btn-scroll', { 'd-none': componentWidth >= contentWidth - 20 }), children: jsxRuntime.jsx(SvgChevronLeft, {}) }), jsxRuntime.jsx("div", { ref: tabComponentRef, className: "tab-component", onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, children: jsxRuntime.jsx("div", { ref: contentComponentRef, children: dataMenu.map((item) => {
                                 if (item?.resAttributes?.IS_MENU === '1') {
                                     return (jsxRuntime.jsxs(UncontrolledDropdown, { draggable: false, className: "tab-custom-item", isOpen: openMenu, toggle: toggleMenu, direction: 'down', style: { backgroundColor: openMenu ? '#e0e0e0' : '' }, children: [jsxRuntime.jsx(DropdownToggle$1, { color: "#00000", style: { border: 'none', boxShadow: 'none', margin: 0, padding: 0 }, className: "background-none", children: jsxRuntime.jsx("div", { children: item.name }) }), jsxRuntime.jsx(DropdownMenu$1, { container: document.body, end: true, style: { width: 300 }, children: item?.children?.map((x) => jsxRuntime.jsx(DropdownItem$1, { style: { borderRadius: '5px', margin: "0 0.5rem", width: "95%" }, onClick: () => {
                                                         if (x.resAttributes.MODAL_VALUE) {
@@ -43573,9 +43627,9 @@ const TabsMenuComponent = ({ buttonWidth, tabParent, tabChild, resourceCodeParen
                                                     }, children: x.name }, x.code)) })] }, item.code));
                                 }
                                 else {
-                                    return (jsxRuntime.jsx(reactRouterDom.Link, { draggable: false, to: item.url, className: classnames('tab-custom-item', { active: item.url === url || (tabParent && url?.split('/').length > 3 && item.url.startsWith(url.substring(0, url.lastIndexOf('/')))) }), children: item.name }, item.code));
+                                    return (jsxRuntime.jsx(reactRouterDom.Link, { draggable: false, to: item.url, className: classNames$1('tab-custom-item', { active: item.url === url || (tabParent && url?.split('/').length > 3 && item.url.startsWith(url.substring(0, url.lastIndexOf('/')))) }), children: item.name }, item.code));
                                 }
-                            }) }) }), jsxRuntime.jsx("div", { onClick: () => handleScroll(200), className: classnames('btn-scroll', { 'd-none': componentWidth >= contentWidth - 20 }), children: jsxRuntime.jsx(SvgChevronRight, {}) })] })] }));
+                            }) }) }), jsxRuntime.jsx("div", { onClick: () => handleScroll(200), className: classNames$1('btn-scroll', { 'd-none': componentWidth >= contentWidth - 20 }), children: jsxRuntime.jsx(SvgChevronRight, {}) })] })] }));
 };
 
 const OptionFont = [
@@ -44458,23 +44512,23 @@ const InputStyleComponent = (props) => {
                                 backgroundColor: value.backgroundColor ?? '#ffffff',
                                 color: value.color ?? '#000000'
                             }, children: props.label }));
-                    } }), jsxRuntime.jsx("div", { className: classnames('ms-25', { 'd-none': disabledFontSize }), style: { width: 60 }, children: jsxRuntime.jsx(SelectTable, { options: Array.from({ length: 100 }, (_, i) => ({ value: i + 1, label: i + 1 })), noHeader: true, isDisabled: disabled, value: value.fontSize ? { value: value.fontSize, label: value.fontSize } : null, onChange: (val) => {
+                    } }), jsxRuntime.jsx("div", { className: classNames$1('ms-25', { 'd-none': disabledFontSize }), style: { width: 60 }, children: jsxRuntime.jsx(SelectTable, { options: Array.from({ length: 100 }, (_, i) => ({ value: i + 1, label: i + 1 })), noHeader: true, isDisabled: disabled, value: value.fontSize ? { value: value.fontSize, label: value.fontSize } : null, onChange: (val) => {
                             onChange({ ...value, fontSize: val.value });
-                        } }) }), jsxRuntime.jsx("div", { className: classnames('btn-input-style', { 'active-custom': value.bold }, { 'd-none': disabledBold }), onClick: () => {
+                        } }) }), jsxRuntime.jsx("div", { className: classNames$1('btn-input-style', { 'active-custom': value.bold }, { 'd-none': disabledBold }), onClick: () => {
                         if (!disabled) {
                             onChange({ ...value, bold: !value.bold });
                         }
-                    }, children: jsxRuntime.jsx(SvgBold, { fontSize: 18 }) }), jsxRuntime.jsx("div", { className: classnames('btn-input-style', { 'active-custom': value.italic }, { 'd-none': disabledItalic }), onClick: () => {
+                    }, children: jsxRuntime.jsx(SvgBold, { fontSize: 18 }) }), jsxRuntime.jsx("div", { className: classNames$1('btn-input-style', { 'active-custom': value.italic }, { 'd-none': disabledItalic }), onClick: () => {
                         if (!disabled) {
                             onChange({ ...value, italic: !value.italic });
                         }
-                    }, children: jsxRuntime.jsx(SvgItalic, { fontSize: 18 }) }), jsxRuntime.jsx("div", { className: classnames('btn-input-style', { 'active-custom': value.underline }, { 'd-none': disabledUnderline }), onClick: () => {
+                    }, children: jsxRuntime.jsx(SvgItalic, { fontSize: 18 }) }), jsxRuntime.jsx("div", { className: classNames$1('btn-input-style', { 'active-custom': value.underline }, { 'd-none': disabledUnderline }), onClick: () => {
                         if (!disabled) {
                             onChange({ ...value, underline: !value.underline });
                         }
-                    }, children: jsxRuntime.jsx(SvgUnderline, { fontSize: 18 }) }), jsxRuntime.jsxs(Button$1, { tag: 'label', color: 'none', className: classnames('btn-input-style', { 'd-none': disabledColor }), children: [jsxRuntime.jsx(SvgType, { stroke: value.color ?? '#000000', fontSize: 18 }), jsxRuntime.jsx("input", { type: "color", id: "color", disabled: disabled, value: value.color, style: { color: '#FFF', border: 'none', height: 0, width: 0, outline: 'none', padding: 0 }, onChange: (e) => {
+                    }, children: jsxRuntime.jsx(SvgUnderline, { fontSize: 18 }) }), jsxRuntime.jsxs(Button$1, { tag: 'label', color: 'none', className: classNames$1('btn-input-style', { 'd-none': disabledColor }), children: [jsxRuntime.jsx(SvgType, { stroke: value.color ?? '#000000', fontSize: 18 }), jsxRuntime.jsx("input", { type: "color", id: "color", disabled: disabled, value: value.color, style: { color: '#FFF', border: 'none', height: 0, width: 0, outline: 'none', padding: 0 }, onChange: (e) => {
                                 onChange({ ...value, color: e.target.value });
-                            } })] }), jsxRuntime.jsxs(Button$1, { tag: 'label', color: 'none', className: classnames('btn-input-style', { 'd-none': disabledBackgroundColor }), children: [jsxRuntime.jsx(SvgDroplet, { fill: value.backgroundColor ?? '#ffffff', fontSize: 18 }), jsxRuntime.jsx(Input$1, { id: "backgroundColor", type: "color", disabled: disabled, style: { color: '#FFF', border: 'none', height: 0, width: 0, outline: 'none', padding: 0 }, value: value.backgroundColor, onChange: (e) => {
+                            } })] }), jsxRuntime.jsxs(Button$1, { tag: 'label', color: 'none', className: classNames$1('btn-input-style', { 'd-none': disabledBackgroundColor }), children: [jsxRuntime.jsx(SvgDroplet, { fill: value.backgroundColor ?? '#ffffff', fontSize: 18 }), jsxRuntime.jsx(Input$1, { id: "backgroundColor", type: "color", disabled: disabled, style: { color: '#FFF', border: 'none', height: 0, width: 0, outline: 'none', padding: 0 }, value: value.backgroundColor, onChange: (e) => {
                                 onChange({ ...value, backgroundColor: e.target.value });
                             } })] })] }) }));
 };
@@ -45936,10 +45990,10 @@ const CheckboxInput = (props) => {
                         }
                     } })) }) }));
     };
-    return (jsxRuntime.jsx(React$5.Fragment, { children: jsxRuntime.jsxs("div", { className: classnames(inLine === false ? 'form-group ' : 'form-row-inline d-flex', {
+    return (jsxRuntime.jsx(React$5.Fragment, { children: jsxRuntime.jsxs("div", { className: classNames$1(inLine === false ? 'form-group ' : 'form-row-inline d-flex', {
                 [labelSize ? labelSize : '']: labelSize,
                 reverse
-            }), children: [renderLabel({ isLabel, name, label: label ?? '' }), jsxRuntime.jsxs("div", { className: classnames('form-input-content', { 'hidden-label': isLabel === false }), children: [renderInput(), renderText()] })] }) }));
+            }), children: [renderLabel({ isLabel, name, label: label ?? '' }), jsxRuntime.jsxs("div", { className: classNames$1('form-input-content', { 'hidden-label': isLabel === false }), children: [renderInput(), renderText()] })] }) }));
 };
 
 const defaultStyleExportSetting = {
@@ -46027,11 +46081,11 @@ const StyleInput = (props) => {
                         return (jsxRuntime.jsx(InputStyleComponent, { disabledBackgroundColor: disabledBackgroundColor, disabledFontFamily: disabledFontFamily, disabledFontSize: disabledFontSize, disabledBold: disabledBold, disabledItalic: disabledItalic, disabledUnderline: disabledUnderline, disabled: disabled, value: value, onChange: onChange }));
                     } }), errors && jsxRuntime.jsx(FormFeedback$1, { children: errors?.message })] }));
     };
-    return (jsxRuntime.jsx(React$5.Fragment, { children: jsxRuntime.jsxs("div", { className: classnames(' align', {
+    return (jsxRuntime.jsx(React$5.Fragment, { children: jsxRuntime.jsxs("div", { className: classNames$1(' align', {
                 [labelSize ? labelSize : '']: labelSize,
                 [classes ? classes : '']: classes,
                 'form-row-inline-error': errors
-            }, inLine === false ? 'form-group ' : 'form-row-inline d-flex'), children: [renderLabel({ isLabel, name, label, required }), jsxRuntime.jsx("div", { style: { height: `${height}px` }, className: classnames('form-input-content', { 'hidden-label': isLabel === false }), children: renderInput() })] }) }));
+            }, inLine === false ? 'form-group ' : 'form-row-inline d-flex'), children: [renderLabel({ isLabel, name, label, required }), jsxRuntime.jsx("div", { style: { height: `${height}px` }, className: classNames$1('form-input-content', { 'hidden-label': isLabel === false }), children: renderInput() })] }) }));
 };
 
 const ExportExcelComponent = ({ openModal, typeModal, handleModal, windowSize, dataItem, columns, columnGroups }) => {
@@ -65300,7 +65354,7 @@ const Wizard = React$5.forwardRef((props, ref) => {
     // ** Renders Wizard Header
     const renderHeader = () => {
         return steps.map((step, index) => {
-            return (jsxRuntime.jsxs(React$5.Fragment, { children: [index !== 0 && index !== steps.length ? jsxRuntime.jsx("div", { className: 'line', children: separator }) : null, jsxRuntime.jsx("div", { className: classnames('step', {
+            return (jsxRuntime.jsxs(React$5.Fragment, { children: [index !== 0 && index !== steps.length ? jsxRuntime.jsx("div", { className: 'line', children: separator }) : null, jsxRuntime.jsx("div", { className: classNames$1('step', {
                             crossed: (step.done !== undefined ? step.done : activeStep > (index + 1)),
                             disable: step.disable,
                             active: (index + 1) === activeStep
@@ -65310,18 +65364,18 @@ const Wizard = React$5.forwardRef((props, ref) => {
     // ** Renders Wizard Content
     const renderContent = () => {
         return steps.map((step, index) => {
-            return (jsxRuntime.jsx("div", { className: classnames('content', {
+            return (jsxRuntime.jsx("div", { className: classNames$1('content', {
                     [contentClassName]: contentClassName,
                     'active dstepper-block': activeStep === (index + 1)
                 }), id: step.id, children: step.content }, step.id));
         });
     };
-    return (jsxRuntime.jsxs("div", { ref: ref, className: classnames('bs-stepper', {
+    return (jsxRuntime.jsxs("div", { ref: ref, className: classNames$1('bs-stepper', {
             [className]: className,
             vertical: type === 'vertical',
             'vertical wizard-modern': type === 'modern-vertical',
             'wizard-modern': type === 'modern-horizontal'
-        }), children: [jsxRuntime.jsx("div", { className: classnames('bs-stepper-header', { [headerClassName]: headerClassName }), children: renderHeader() }), jsxRuntime.jsx("div", { style: { height: heightContent, width: widthContent }, className: classnames('bs-stepper-content', { [contentWrapperClassName]: contentWrapperClassName }), children: renderContent() })] }));
+        }), children: [jsxRuntime.jsx("div", { className: classNames$1('bs-stepper-header', { [headerClassName]: headerClassName }), children: renderHeader() }), jsxRuntime.jsx("div", { style: { height: heightContent, width: widthContent }, className: classNames$1('bs-stepper-content', { [contentWrapperClassName]: contentWrapperClassName }), children: renderContent() })] }));
 });
 
 const ImportExcelComponent = (props) => {
@@ -65360,6 +65414,7 @@ exports.SelectTable = SelectTable;
 exports.SelectTableTree = SelectTableTree;
 exports.TabsMenuComponent = TabsMenuComponent;
 exports.Wizard = Wizard;
+exports.calculateTableStructure = calculateTableStructure;
 exports.checkDecimalSeparator = checkDecimalSeparator;
 exports.checkThousandSeparator = checkThousandSeparator;
 exports["default"] = TableEdit;