react-table-edit 1.4.18 → 1.4.20

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 }) : ''] }));
 };
@@ -21418,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() })] }) }));
 };
 
 /**
@@ -22661,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;
@@ -22686,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;
@@ -22917,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`,
@@ -22961,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) {
@@ -22992,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,
@@ -23031,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([]);
@@ -23041,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);
@@ -23070,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: {
@@ -23079,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) => {
@@ -23100,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.
@@ -23305,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,
@@ -23365,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) => {
@@ -23391,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: {
@@ -23416,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] })] }));
 };
@@ -23525,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`,
@@ -23538,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) => {
@@ -23558,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}`));
@@ -23583,7 +23583,7 @@ 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);
@@ -41807,7 +41807,7 @@ function styleInject(css, ref) {
 var css_248z$1 = ".react-resizable {\n  position: relative;\n}\n.react-resizable-handle {\n  position: absolute;\n  width: 20px;\n  height: 20px;\n  background-repeat: no-repeat;\n  background-origin: content-box;\n  box-sizing: border-box;\n  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+');\n  background-position: bottom right;\n  padding: 0 3px 3px 0;\n}\n.react-resizable-handle-sw {\n  bottom: 0;\n  left: 0;\n  cursor: sw-resize;\n  transform: rotate(90deg);\n}\n.react-resizable-handle-se {\n  bottom: 0;\n  right: 0;\n  cursor: se-resize;\n}\n.react-resizable-handle-nw {\n  top: 0;\n  left: 0;\n  cursor: nw-resize;\n  transform: rotate(180deg);\n}\n.react-resizable-handle-ne {\n  top: 0;\n  right: 0;\n  cursor: ne-resize;\n  transform: rotate(270deg);\n}\n.react-resizable-handle-w,\n.react-resizable-handle-e {\n  top: 50%;\n  margin-top: -10px;\n  cursor: ew-resize;\n}\n.react-resizable-handle-w {\n  left: 0;\n  transform: rotate(135deg);\n}\n.react-resizable-handle-e {\n  right: 0;\n  transform: rotate(315deg);\n}\n.react-resizable-handle-n,\n.react-resizable-handle-s {\n  left: 50%;\n  margin-left: -10px;\n  cursor: ns-resize;\n}\n.react-resizable-handle-n {\n  top: 0;\n  transform: rotate(225deg);\n}\n.react-resizable-handle-s {\n  bottom: 0;\n  transform: rotate(45deg);\n}";
 styleInject(css_248z$1);
 
-const HeaderTableCol = (props) => {
+const HeaderTableCol$1 = (props) => {
     const { selectEnable, dataSource, setSelectedRows, col, indexCol, indexParent, objWidthFixLeft, objWidthFixRight, totalCount, selectedRows, column, setColumn, fisrtObjWidthFixRight, lastObjWidthFixLeft, isMulti } = props;
     const { t } = reactI18next.useTranslation();
     const handleResize = (e, { size }) => {
@@ -41825,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; }));
@@ -41959,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,
@@ -42010,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) => {
@@ -42057,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;
@@ -42068,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) => {
@@ -42122,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']);
@@ -42133,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([]);
@@ -42143,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))) {
@@ -42169,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: {
@@ -42187,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 }) => {
@@ -42208,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) => {
@@ -42330,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) => {
@@ -42501,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.
@@ -42781,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);
@@ -42793,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);
@@ -42928,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);
@@ -42994,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) {
@@ -43337,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',
@@ -43382,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) => {
@@ -43422,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) => {
@@ -43453,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) => {
@@ -43472,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'
@@ -43496,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}`) }));
             }
         }));
     };
@@ -43507,7 +43507,7 @@ const TableEdit = React$5.forwardRef((props, ref) => {
     }, [searchTerm, searchSetting?.searchTerm]);
     return (jsxRuntime.jsxs(React$5.Fragment, { children: [jsxRuntime.jsxs("div", { className: "react-table-edit", children: [jsxRuntime.jsxs("div", { className: 'r-grid', ref: gridRef, children: [toolbarSetting?.showTopToolbar && jsxRuntime.jsx(RenderToolbarTop, { toolbarTopOption: toolbarTopOption }), jsxRuntime.jsx("div", { ref: tableElement, className: "r-gridtable", style: { height: `${height ? `${height}px` : 'auto'}`, minHeight: `${minHeight ? `${minHeight}px` : ''}`, maxHeight: `${maxHeight ? `${maxHeight}px` : '400px'}` }, children: jsxRuntime.jsxs("table", { style: { width: '100%' }, children: [jsxRuntime.jsx("thead", { className: 'r-gridheader', children: headerColumns.map((element, indexParent) => {
                                                 return (jsxRuntime.jsx("tr", { className: "r-row", role: "row", children: element?.map((col, index) => {
-                                                        return (jsxRuntime.jsx(HeaderTableCol, { col: col, dataSource: dataSource, indexCol: index, indexParent: indexParent, isMulti: isMulti ?? false, objWidthFixLeft: objWidthFixLeft, objWidthFixRight: objWidthFixRight, selectEnable: selectEnable ?? false, selectedRows: selectedRows, setSelectedRows: setSelectedRows, column: contentColumns, setColumn: setContentColumns, fisrtObjWidthFixRight: fisrtObjWidthFixRight, lastObjWidthFixLeft: lastObjWidthFixLeft, totalCount: totalCount }, `header-${indexParent}-${index}`));
+                                                        return (jsxRuntime.jsx(HeaderTableCol$1, { col: col, dataSource: dataSource, indexCol: index, indexParent: indexParent, isMulti: isMulti ?? false, objWidthFixLeft: objWidthFixLeft, objWidthFixRight: objWidthFixRight, selectEnable: selectEnable ?? false, selectedRows: selectedRows, setSelectedRows: setSelectedRows, column: contentColumns, setColumn: setContentColumns, fisrtObjWidthFixRight: fisrtObjWidthFixRight, lastObjWidthFixLeft: lastObjWidthFixLeft, totalCount: totalCount }, `header-${indexParent}-${index}`));
                                                     }) }, `header-${-indexParent}`));
                                             }) }), jsxRuntime.jsx("tbody", { className: 'r-gridcontent', children: renderData() }), jsxRuntime.jsx("tfoot", { className: "r-gridfoot", children: haveSum == true ? jsxRuntime.jsx("tr", { className: 'r-row', children: contentColumns.map((col, index) => {
                                                     return (renderFooterCol(col, index));
@@ -43615,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) {
@@ -43627,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 = [
@@ -44512,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 });
                             } })] })] }) }));
 };
@@ -45990,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 = {
@@ -46081,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 }) => {
@@ -65354,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
@@ -65364,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) => {
@@ -65406,6 +65406,323 @@ const ImportExcelComponent = (props) => {
             ] }) }));
 };
 
+const HeaderTableCol = (props) => {
+    const { selectEnable, dataSource, setSelectedRows, col, indexCol, indexParent, objWidthFixLeft, objWidthFixRight, totalCount, selectedRows, columns, setColumns, orderBy, changeFilter, filterBy, changeOrder, allowFilter, allowOrder, container, fisrtObjWidthFixRight, lastObjWidthFixLeft, formatSetting, isMulti } = props;
+    const { t } = reactI18next.useTranslation();
+    const order = orderBy.find((item) => item.key === col.field);
+    const [openFilter, setOpenFilter] = React$5.useState(false);
+    const filter = filterBy.find((item) => item.key === col.field);
+    const handleResize = (e, { size }) => {
+        // Update the column width here
+        // You might need to update the state or call a callback to update the width
+        if (size.width > 50) {
+            const newColumns = [...columns];
+            newColumns[indexCol].width = size.width;
+            if ((columns[indexCol]?.maxWidth ?? 0) < size.width) {
+                newColumns[indexCol].maxWidth = size.width;
+            }
+            if ((columns[indexCol]?.minWidth ?? 0) > size.width) {
+                newColumns[indexCol].minWidth = size.width;
+            }
+            if (setColumns) {
+                setColumns(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 : 1, 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[indexCol ?? 0] : undefined,
+                    right: col.fixedType === 'right' ? objWidthFixRight[indexCol ?? 0] : undefined
+                }, children: jsxRuntime.jsxs("div", { style: { justifyContent: 'space-between' }, onClick: () => {
+                        if (order) {
+                            if (order.direction === 'asc') {
+                                order.direction = 'desc';
+                                changeOrder(orderBy);
+                            }
+                            else {
+                                changeOrder(orderBy.filter((x) => x.key !== col.field));
+                            }
+                        }
+                        else {
+                            orderBy.push({ direction: 'asc', key: col.field });
+                            changeOrder(orderBy);
+                        }
+                    }, className: classNames$1('r-headercell-div', { 'cursor-pointer': allowOrder }), children: [col.type === '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; }));
+                                    }
+                                    else {
+                                        setSelectedRows([]);
+                                    }
+                                }
+                            } })), col.type !== 'checkbox' && jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: 'header-content d-flex', style: { justifyContent: col.textAlign ?? 'left', flex: 1 }, children: t(col.headerText ?? '') }), col.type !== '#' && col.type !== 'command' && jsxRuntime.jsxs("div", { className: 'd-flex', children: [allowOrder && order?.direction === 'asc' && jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: 'ms-25', width: "10", height: "10", viewBox: "0 0 16 18", fill: "none", children: [jsxRuntime.jsx("g", { "clip-path": "url(#clip0_520_6)", children: jsxRuntime.jsx("path", { d: "M8.70711 0.292893C8.31658 -0.0976311 7.68342 -0.0976311 7.29289 0.292893L0.928932 6.65685C0.538408 7.04738 0.538408 7.68054 0.928932 8.07107C1.31946 8.46159 1.95262 8.46159 2.34315 8.07107L8 2.41421L13.6569 8.07107C14.0474 8.46159 14.6805 8.46159 15.0711 8.07107C15.4616 7.68054 15.4616 7.04738 15.0711 6.65685L8.70711 0.292893ZM8 18H9L9 1H8H7L7 18H8Z", fill: "black" }) }), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", { id: "clip0_520_6", children: jsxRuntime.jsx("rect", { width: "16", height: "18", fill: "white" }) }) })] }), allowOrder && order?.direction === 'desc' && jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: 'ms-25', width: "10", height: "10", viewBox: "0 0 16 18", fill: "none", children: [jsxRuntime.jsx("g", { "clip-path": "url(#clip0_520_2)", children: jsxRuntime.jsx("path", { d: "M7.29289 17.7071C7.68342 18.0976 8.31658 18.0976 8.70711 17.7071L15.0711 11.3431C15.4616 10.9526 15.4616 10.3195 15.0711 9.92893C14.6805 9.53841 14.0474 9.53841 13.6569 9.92893L8 15.5858L2.34315 9.92893C1.95262 9.53841 1.31946 9.53841 0.928932 9.92893C0.538408 10.3195 0.538408 10.9526 0.928932 11.3431L7.29289 17.7071ZM8 0L7 0L7 17H8H9L9 0L8 0Z", fill: "black" }) }), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", { id: "clip0_520_2", children: jsxRuntime.jsx("rect", { width: "16", height: "18", fill: "white" }) }) })] }), allowFilter && jsxRuntime.jsxs(Dropdown$1, { isOpen: openFilter, toggle: (e) => {
+                                                setOpenFilter(!openFilter);
+                                                e.stopPropagation();
+                                            }, onClick: (e) => {
+                                                e.stopPropagation();
+                                            }, children: [jsxRuntime.jsx(DropdownToggle$1, { tag: 'div', className: 'p-0 r-filter', children: jsxRuntime.jsxs("svg", { className: classNames$1('ms-25', { 'active': filter }), width: "10", height: "10", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "stroke-width": "1.5", "font-size": "12", children: [jsxRuntime.jsx("path", { d: "M14.7 11.998v10.506c.052.4-.08.826-.381 1.106a1.306 1.306 0 0 1-.925.39 1.289 1.289 0 0 1-.926-.39l-2.637-2.68a1.323 1.323 0 0 1-.38-1.106v-7.826h-.04L1.85 2.16A1.348 1.348 0 0 1 2.076.293C2.325.107 2.6 0 2.888 0h18.373c.289 0 .564.107.814.293a1.348 1.348 0 0 1 .223 1.866L14.738 12H14.7Z", fill: "currentColor" }), " "] }) }), jsxRuntime.jsx(DropdownMenu$1, { container: container, className: 'formula-dropdown icon-dropdown p-0', style: {
+                                                        borderRadius: 8,
+                                                        zIndex: 1056
+                                                    }, children: jsxRuntime.jsx(DropdownItem$1, { className: 'p-1', style: { borderRadius: '6px' }, tag: 'div', header: true, children: jsxRuntime.jsx(RenderFilterElement, { setOpenFilter: setOpenFilter, filter: filter, filterBy: filterBy, formatSetting: formatSetting, changeFilter: changeFilter, column: col }) }) })] })] })] })] }) }) })) }, `header-${indexCol}`));
+};
+const RenderFilterElement = ({ filter, formatSetting, filterBy, setOpenFilter, changeFilter, column }) => {
+    const { t } = reactI18next.useTranslation();
+    const [operator, setOperator] = React$5.useState(filter?.ope ?? 'contains');
+    const [valueFilter, setValueFilter] = React$5.useState(filter?.value ?? '');
+    const RenderStringFilter = () => {
+        const options = [
+            { label: 'Bắt đầu bởi', value: 'startswith' },
+            { label: 'Kết thúc bởi', value: 'endswith' },
+            { label: 'Chứa', value: 'contains' },
+            { label: 'Bằng', value: 'equal' },
+            { label: 'Không bằng', value: 'notequal' }
+        ];
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(SelectTable, { value: options.find((x) => x.value === (operator)), options: options, onChange: (val) => {
+                        setOperator(val.value);
+                    }, placeholder: 'Select' }), jsxRuntime.jsx(Input$1, { className: 'my-1', value: valueFilter, onChange: (val) => {
+                        setValueFilter(val.target.value);
+                    } })] }));
+    };
+    const RenderNumberFilter = () => {
+        const options = [
+            { label: 'Lớn hơn', value: 'greaterthan' },
+            { label: 'Lớn hơn hoặc bằng', value: 'greaterthanorequal' },
+            { label: 'Bằng', value: 'equal' },
+            { label: 'Bé hơn', value: 'lessthan' },
+            { label: 'Bé hơn hoặc bằng', value: 'lessthanorequal' }
+        ];
+        const numericFormatProps = {
+            value: !isNullOrUndefined$1(valueFilter) ? valueFilter.toString() : '',
+            thousandSeparator: checkThousandSeparator(formatSetting?.thousandSeparator, formatSetting?.decimalSeparator),
+            decimalSeparator: checkDecimalSeparator(formatSetting?.thousandSeparator, formatSetting?.decimalSeparator),
+            allowNegative: column.numericSettings?.allowNegative ?? false,
+            decimalScale: column.numericSettings?.fraction ?? 0
+        };
+        let floatValue = parseFloat(valueFilter ?? '0');
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(SelectTable, { value: options.find((x) => x.value === (operator)), options: options, onChange: (val) => {
+                        setOperator(val.value);
+                    }, placeholder: 'Select' }), jsxRuntime.jsx(Input$1, { className: 'my-1', value: valueFilter, onChange: (val) => {
+                        setValueFilter(val.target.value);
+                    } }), jsxRuntime.jsx(NumericFormat, { style: { textAlign: column.textAlign, height: 29 }, ...numericFormatProps, defaultValue: formartNumberic(valueFilter, formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', column.numericSettings?.fraction), className: classNames$1('form-control my-1 input-numeric'), onValueChange: (values) => {
+                        floatValue = values?.floatValue;
+                    }, onFocus: (e) => {
+                        e.target.setSelectionRange(0, e.target.innerText.length - 1);
+                    }, onBlur: () => {
+                        if (floatValue !== valueFilter) {
+                            setValueFilter(!isNaN(floatValue) ? floatValue : 0);
+                        }
+                    } })] }));
+    };
+    const RenderSelectFilter = () => {
+        return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(SelectTable, { value: column.settingFilter?.options.find((x) => x.value === (operator)), options: column.settingFilter?.options ?? [], isClearable: true, onChange: (val) => {
+                    setOperator(val.value);
+                }, placeholder: 'Select' }) }));
+    };
+    return (jsxRuntime.jsxs("div", { className: 'r-filter-popup', children: [((!column.settingFilter?.filterType && column.type === 'numeric') || column.settingFilter?.filterType === 'numeric') ? jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [RenderNumberFilter(), " "] }) : (column.settingFilter?.filterType === 'select' ? jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [RenderSelectFilter(), " "] }) : RenderStringFilter()), jsxRuntime.jsxs("div", { className: 'd-flex justify-content-end', children: [jsxRuntime.jsx(Button$1, { outline: true, color: 'primary', style: { borderRadius: 3 }, className: 'me-50 py-25 px-50', onClick: () => {
+                            if (filter) {
+                                filter.ope = operator;
+                                filter.value = valueFilter;
+                            }
+                            else {
+                                filterBy.push({ key: column.field, ope: operator, value: valueFilter });
+                            }
+                            changeFilter([...filterBy]);
+                            setOpenFilter(false);
+                        }, children: t('Filter') }), jsxRuntime.jsx(Button$1, { className: 'py-25 px-50', outline: true, style: { borderRadius: 3 }, onClick: () => {
+                            if (filterBy) {
+                                changeFilter(filterBy.filter((x) => x.key !== column.field));
+                            }
+                            setOpenFilter(false);
+                        }, children: t('Clear') })] })] }));
+};
+
+const RenderContentCol = (props) => {
+    const { col, indexCol, indexRow, isSelected, row, formatSetting, idTable, fisrtObjWidthFixRight, lastObjWidthFixLeft, objWidthFixLeft, objWidthFixRight, selectedRows, selectEnable, setSelectedRows, handleCommandClick, fieldKey, isMulti } = props;
+    const RenderElement = () => {
+        if (col.type === 'command') {
+            return jsxRuntime.jsx("div", { className: "r-rowcell-div command", children: jsxRuntime.jsx(CommandElement, { commandItems: col.commandItems ?? [], handleCommandClick: handleCommandClick, indexRow: indexRow, rowData: row }) });
+        }
+        else if (col.type === '#') {
+            jsxRuntime.jsx("div", { className: "r-rowcell-div", children: indexRow + 1 });
+        }
+        else if (col.type === 'checkbox') {
+            return (jsxRuntime.jsx("div", { className: "r-rowcell-div cursor-pointer", style: { alignItems: 'center' }, onClick: (e) => {
+                    if (selectEnable) {
+                        const index = selectedRows?.findIndex((x) => x[fieldKey] === row[fieldKey]);
+                        if (index > -1) {
+                            if (isMulti) {
+                                selectedRows?.splice(index, 1);
+                                setSelectedRows([...selectedRows]);
+                            }
+                            else {
+                                setSelectedRows([]);
+                            }
+                        }
+                        else {
+                            if (isMulti) {
+                                setSelectedRows([...selectedRows, row]);
+                            }
+                            else {
+                                setSelectedRows([row]);
+                            }
+                        }
+                        e.stopPropagation();
+                    }
+                }, children: jsxRuntime.jsx(Input$1, { checked: isSelected, type: "checkbox", className: "cursor-pointer", style: { textAlign: col.textAlign ?? 'center' } }) }));
+        }
+        else {
+            let value = row[col.field];
+            if (col.type === 'numeric') {
+                value = formartNumberic(row[col.field], formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', col.numericSettings?.fraction, true, false) ?? 0;
+            }
+            else if (col.type === 'date') {
+                value = value ? formatDateTime(value, formatSetting?.dateFormat) : '';
+            }
+            else if (col.type === 'datetime') {
+                value = value ? formatDateTime(value, formatSetting?.dateFormat ?? 'DD/MM/yyyy HH:mm') : '';
+            }
+            return (jsxRuntime.jsx("div", { className: classNames$1('r-rowcell-div'), children: jsxRuntime.jsxs("div", { className: classNames$1('r-rowcell-content'), style: {
+                        textAlign: col.textAlign ? col.textAlign : 'left'
+                    }, children: [jsxRuntime.jsx("div", { id: `content-${idTable}-row${indexRow}col-${indexCol}`, className: "r-cell-text", children: (col.type === 'numeric' && Number(row[col.field]) < 0 ? jsxRuntime.jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [" ", `${formatSetting?.prefixNegative ?? '-'}${value}${formatSetting?.suffixNegative ?? ''}`] }) : value) }), col.haveToolTip && jsxRuntime.jsx(UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `content-${idTable}-row${indexRow}col-${indexCol}`, children: (col.type === 'numeric' && Number(row[col.field]) < 0 ? jsxRuntime.jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [" ", `${formatSetting?.prefixNegative ?? '-'}${value}${formatSetting?.suffixNegative ?? ''}`] }) : value) })] }) }));
+        }
+    };
+    return (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 }), style: {
+            left: col.fixedType === 'left' ? objWidthFixLeft[indexCol] : undefined,
+            right: col.fixedType === 'right' ? objWidthFixRight[indexCol] : undefined
+        }, onClick: (e) => {
+            if (e.target.nodeName === 'DIV' || e.target.nodeName === 'TD') {
+                if (selectEnable) {
+                    const index = selectedRows?.findIndex((x) => x[fieldKey] === row[fieldKey]);
+                    if (index > -1) {
+                        if (isMulti) {
+                            selectedRows?.splice(index, 1);
+                            setSelectedRows([...selectedRows]);
+                        }
+                        else {
+                            setSelectedRows([]);
+                        }
+                    }
+                    else {
+                        if (isMulti) {
+                            setSelectedRows([...selectedRows, row]);
+                        }
+                        else {
+                            setSelectedRows([row]);
+                        }
+                    }
+                }
+                e.stopPropagation();
+            }
+        }, children: RenderElement() }, `col-${indexRow}-${indexCol}`));
+};
+
+const RenderColGroup = ({ contentColumns }) => (jsxRuntime.jsx("colgroup", { children: contentColumns.map((col, index) => (jsxRuntime.jsx("col", { style: {
+            width: typeof col.width === 'number' ? `${col.width}px` : col.width || undefined,
+            minWidth: typeof col.minWidth === 'number' ? `${col.minWidth}px` : col.minWidth || undefined,
+            maxWidth: typeof col.maxWidth === 'number' ? `${col.maxWidth}px` : col.maxWidth || undefined
+        } }, index))) }));
+
+const SkeletonRow = ({ columns, rowHeight }) => (jsxRuntime.jsx("tr", { style: { height: rowHeight }, className: "animate-pulse", children: Array.from({ length: columns }).map((_, colIndex) => (jsxRuntime.jsx("td", { style: { padding: '8px' }, children: jsxRuntime.jsx("div", { style: { height: 12, background: '#e0e0e0', borderRadius: 4 } }) }, colIndex))) }));
+
+const VirtualTable = ({ idTable, dataSource, rowHeight = 28, height = 400, columns, isMutil, isLoading, selectEnable, formatSetting, commandClick, allowFilter, allowOrder, setColumns, pagingSetting, changeFilter, changeOrder, searchSetting, columnsAggregate, toolbarSetting }) => {
+    const gridRef = React$5.useRef(null);
+    const [startIndex, setStartIndex] = React$5.useState(0);
+    const [selectedRows, setSelectedRows] = React$5.useState([]);
+    const [orderBy, setOrderBy] = React$5.useState([]);
+    const [filterBy, setFilterBy] = React$5.useState([]);
+    const [searchTerm, setSearchTerm] = React$5.useState('');
+    const fieldKey = columns.find((item) => item.isPrimarykey === true)?.field ?? 'id';
+    const visibleRowCount = Math.ceil(height / rowHeight) + 5;
+    const countLoading = 10;
+    const { t } = reactI18next.useTranslation();
+    const { levels: headerColumns, flat: contentColumns, flatVisble, objWidthFixLeft, objWidthFixRight, lastObjWidthFixLeft, fisrtObjWidthFixRight } = React$5.useMemo(() => calculateTableStructure(columns), [columns]);
+    const handleScroll = () => {
+        if (gridRef.current) {
+            const scrollTop = gridRef.current.scrollTop;
+            const newStartIndex = Math.floor(scrollTop / rowHeight);
+            if (newStartIndex !== startIndex) {
+                setStartIndex(newStartIndex);
+            }
+        }
+    };
+    const visibleData = dataSource.slice(startIndex, Math.min(startIndex + visibleRowCount, dataSource.length));
+    const handleCommandClick = (id, rowData, index) => {
+        if (commandClick) {
+            commandClick({ id, rowData, index });
+        }
+    };
+    const handleKeyPress = (e) => {
+        if ((e.code === 'Enter' || e.code === 'NumpadEnter')) {
+            if (searchSetting?.setSearchTerm) {
+                searchSetting?.setSearchTerm(e.target.value);
+            }
+            else {
+                setSearchTerm(e.target.value);
+            }
+            e.stopPropagation();
+            e.preventDefault();
+        }
+    };
+    const searchTemplate = () => {
+        return (jsxRuntime.jsx("div", { className: "me-50 r-search", children: jsxRuntime.jsx(ReactInput, { style: { width: '230px' }, value: searchSetting?.searchTerm !== undefined ? searchSetting?.searchTerm : searchTerm, setSearchTerm: searchSetting?.setSearchTerm ? searchSetting?.setSearchTerm : setSearchTerm, placeholder: t('Search'), onKeyPress: handleKeyPress }) }));
+    };
+    const defaultToolbarOption = searchSetting?.searchEnable ? [{ template: searchTemplate, align: 'left' }] : [];
+    let toolbarTopOption = [];
+    if (toolbarSetting?.toolbarOptions) {
+        toolbarTopOption = [...defaultToolbarOption, ...toolbarSetting?.toolbarOptions];
+    }
+    else {
+        toolbarTopOption = [...defaultToolbarOption];
+    }
+    const onChangePage = (args) => {
+        if (pagingSetting?.setCurrentPage) {
+            if (args.currentPage === args.oldPage) {
+                return;
+            }
+            pagingSetting.setCurrentPage(args.currentPage);
+        }
+    };
+    const onChangePageSize = (args) => {
+        if (pagingSetting?.allowPaging) {
+            if (pagingSetting?.pageSize !== args.pageSize) {
+                if (pagingSetting?.setPageSize) {
+                    pagingSetting.setPageSize(args.pageSize);
+                }
+                if (pagingSetting?.setCurrentPage) {
+                    pagingSetting.setCurrentPage(1);
+                }
+            }
+        }
+    };
+    return (jsxRuntime.jsxs("div", { className: "react-table-edit", children: [jsxRuntime.jsxs("div", { className: 'r-grid', children: [toolbarSetting?.showTopToolbar && jsxRuntime.jsx(RenderToolbarTop, { toolbarTopOption: toolbarTopOption }), jsxRuntime.jsx("div", { ref: gridRef, className: "r-gridtable", onScroll: handleScroll, style: { height: `${height ? `${height}px` : 'auto'}` }, children: jsxRuntime.jsxs("table", { style: { width: '100%' }, children: [jsxRuntime.jsx(RenderColGroup, { contentColumns: flatVisble }), jsxRuntime.jsx("thead", { className: 'r-gridheader', children: headerColumns.map((rowColumn, indexParent) => (jsxRuntime.jsx("tr", { className: "r-row", role: "row", children: rowColumn.map((column, indexColumn) => (jsxRuntime.jsx(HeaderTableCol, { col: column, dataSource: dataSource, indexCol: indexColumn, indexParent: indexParent, isMulti: isMutil ?? false, selectEnable: selectEnable ?? false, selectedRows: selectedRows, setSelectedRows: setSelectedRows, columns: contentColumns, setColumns: setColumns, objWidthFixLeft: objWidthFixLeft, objWidthFixRight: objWidthFixRight, fisrtObjWidthFixRight: fisrtObjWidthFixRight, lastObjWidthFixLeft: lastObjWidthFixLeft, orderBy: orderBy, allowFilter: allowFilter, allowOrder: allowOrder, filterBy: filterBy, changeFilter: (val) => {
+                                                setFilterBy([...val]);
+                                                if (changeFilter) {
+                                                    changeFilter(val);
+                                                }
+                                            }, changeOrder: (val) => {
+                                                setOrderBy([...val]);
+                                                if (changeOrder) {
+                                                    changeOrder(val);
+                                                }
+                                            }, container: gridRef, totalCount: dataSource.length }, `header-${indexParent}-${indexColumn}`))) }, indexParent))) }), (((dataSource.length ?? 0) === 0) && !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...')] }), jsxRuntime.jsxs("tbody", { className: 'r-gridcontent', children: [jsxRuntime.jsx("tr", { style: { height: (startIndex < countLoading ? startIndex : startIndex - countLoading) * rowHeight }, children: jsxRuntime.jsx("td", { style: { padding: 0 }, colSpan: flatVisble.length }) }), startIndex > countLoading && Array.from({ length: countLoading }).map((_, index) => (jsxRuntime.jsx(SkeletonRow, { columns: flatVisble.length, rowHeight: rowHeight }, `top-${index}`))), visibleData.map((row, index) => {
+                                            const indexRow = index + startIndex;
+                                            const isSelected = selectedRows?.some((x) => x[fieldKey] === row[fieldKey]);
+                                            return (jsxRuntime.jsx("tr", { className: classNames$1('r-row'), children: contentColumns.map((column, indexCol) => (jsxRuntime.jsx(RenderContentCol, { idTable: idTable, col: column, fieldKey: 'field', objWidthFixLeft: objWidthFixLeft, objWidthFixRight: objWidthFixRight, fisrtObjWidthFixRight: fisrtObjWidthFixRight, lastObjWidthFixLeft: lastObjWidthFixLeft, isMulti: isMutil ?? false, selectEnable: selectEnable ?? false, selectedRows: selectedRows, setSelectedRows: setSelectedRows, formatSetting: formatSetting, handleCommandClick: handleCommandClick, indexCol: indexCol, indexRow: indexRow, isSelected: isSelected, row: row }, indexCol))) }, `row-${indexRow}`));
+                                        }), jsxRuntime.jsx("tr", { style: { height: (dataSource.length - (startIndex + visibleData.length)) * rowHeight }, children: jsxRuntime.jsx("td", { style: { padding: 0 }, colSpan: flatVisble.length }) })] }), jsxRuntime.jsx("tfoot", { className: "r-gridfoot", children: (columnsAggregate?.length ?? 0) > 0 ? jsxRuntime.jsx("tr", { className: 'r-row', children: contentColumns.map((col, indexCol) => {
+                                            const item = columnsAggregate?.find((x) => x.field === col.field);
+                                            let sumValue = item?.value;
+                                            if (!item && col.haveSum === true && col.type === "numeric") {
+                                                sumValue = dataSource.reduce(function (accumulator, currentValue) { return (Number(accumulator ?? 0) + Number(currentValue[col.field] ?? 0)); }, 0);
+                                            }
+                                            return 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'
+                                                }, children: jsxRuntime.jsxs("div", { className: "r-footer-div", children: [(item || (col.haveSum === true && col.type === "numeric")) && col.type === "numeric" && (Number(sumValue) >= 0) && jsxRuntime.jsx(jsxRuntime.Fragment, { children: formartNumberic(sumValue, formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', col.numericSettings?.fraction, true, false) }), (item || (col.haveSum === true && col.type === "numeric")) && col.type === "numeric" && (Number(sumValue) < 0) && jsxRuntime.jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [" ", `${formatSetting?.prefixNegative ?? '-'}${formartNumberic(sumValue, formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', col.numericSettings?.fraction, true, false)}${formatSetting?.suffixNegative ?? ''}`] })] }) }, `summarycell-${indexCol}`);
+                                        }) }) : jsxRuntime.jsx(jsxRuntime.Fragment, {}) })] }) })] }), pagingSetting?.allowPaging ? jsxRuntime.jsx(PagingComponent, { onChangePage: onChangePage, pageSize: pagingSetting?.pageSize ?? 0, currentPage: pagingSetting?.currentPage ?? 0, pageOptions: pagingSetting?.pageOptions ?? [20, 30, 50, 100], totalItem: (pagingSetting?.totalItem ?? 0), onChangePageSize: onChangePageSize }) : jsxRuntime.jsx(jsxRuntime.Fragment, {})] }));
+};
+
 exports.ExportExcelComponent = ExportExcelComponent;
 exports.FindNodeByPath = FindNodeByPath;
 exports.ImportExcelComponent = ImportExcelComponent;
@@ -65413,6 +65730,7 @@ exports.InputStyleComponent = InputStyleComponent;
 exports.SelectTable = SelectTable;
 exports.SelectTableTree = SelectTableTree;
 exports.TabsMenuComponent = TabsMenuComponent;
+exports.VirtualTable = VirtualTable;
 exports.Wizard = Wizard;
 exports.calculateTableStructure = calculateTableStructure;
 exports.checkDecimalSeparator = checkDecimalSeparator;