react-table-edit 1.4.10 → 1.4.12

package/dist/index.mjs

@@ -23033,12 +23033,13 @@ const SelectTableBox$1 = (props) => {
 
 const defaultWidth = 200;
 const EditForm = forwardRef((props, ref) => {
-    const { id, field, displayValue, menuHeight, menuWidth, rowData, invalid, onChange, onChangeField, onKeyDown, defaultValues, placeholder, textAlign, schema, onFormOpen, onFormSubmit, footerTemplate, minWidth, onPaste, openOnFocus, isClearable, labelSize = 'label-small' } = props;
+    const { id, field, displayValue, menuHeight, menuWidth, rowData, invalid, onChange, onChangeField, onKeyDown, defaultValues, placeholder, textAlign, schema, onFormOpen, onFormSubmit, footerTemplate, template, minWidth, onPaste, openOnFocus, isClearable, indexRow, labelSize = 'label-small' } = props;
     const { innerWidth } = window;
     const inputRef = useRef(null);
     const editFormRef = useRef(null);
     const buttonRef = useRef(null);
     const [dropdownOpen, setDropdownOpen] = useState(false);
+    const [isFocus, setIsFocus] = useState(false);
     const [itemsField, setItemsField] = useState([]);
     const { t } = useTranslation();
     useOnClickOutside(editFormRef, () => {
@@ -23080,6 +23081,7 @@ const EditForm = forwardRef((props, ref) => {
         else {
             setDropdownOpen(true);
         }
+        inputRef?.current.focus();
     };
     const handleOnSubmit = (val) => {
         closeMenu();
@@ -23193,7 +23195,26 @@ const EditForm = forwardRef((props, ref) => {
                 }
             }) }));
     };
-    return (jsx("div", { className: "form-edit", ref: ref, id: id, children: jsx("div", { ref: editFormRef, children: jsxs(Dropdown$1, { isOpen: dropdownOpen, toggle: () => { }, children: [jsx(DropdownToggle$1, { tag: 'div', children: jsx(Input$1, { style: { backgroundColor: '#FFF', textAlign: textAlign ?? 'left' }, placeholder: placeholder, innerRef: inputRef, className: classnames('input-display input-numeric', { 'is-invalid': invalid }), value: displayValue, onClick: handleOnClick, onKeyDown: (e) => handleOnKeyDown(e), onPaste: (e) => onPaste && onPaste(e), readOnly: true }) }), jsx(DropdownMenu$1, { className: 'formula-dropdown icon-dropdown p-0', style: {
+    useEffect(() => {
+        if (inputRef) {
+            inputRef.current.addEventListener('blur', function () {
+                setIsFocus(false);
+            });
+            inputRef.current.addEventListener('focus', function () {
+                if (!isFocus) {
+                    setIsFocus(true);
+                }
+            });
+        }
+    }, [inputRef]);
+    return (jsx("div", { className: "form-edit", ref: ref, id: id, children: jsx("div", { ref: editFormRef, children: jsxs(Dropdown$1, { isOpen: dropdownOpen, toggle: () => { }, children: [jsx(DropdownToggle$1, { tag: 'div', children: jsxs("div", { className: classnames('display-value', { 'r-is-focus': isFocus || dropdownOpen }, { 'is-invalid': invalid }), onClick: handleOnClick, children: [template?.(rowData, indexRow) ?? displayValue, jsx(Input$1, { style: {
+                                        width: template ? 0 : '100%',
+                                        height: template ? 0 : 28,
+                                        lineHeight: template ? 0 : 19,
+                                        padding: template ? 0 : 'auto',
+                                        backgroundColor: '#FFF',
+                                        textAlign: textAlign ?? 'left'
+                                    }, placeholder: placeholder, innerRef: inputRef, onKeyDown: (e) => handleOnKeyDown(e), onPaste: (e) => onPaste && onPaste(e), readOnly: true })] }) }), jsx(DropdownMenu$1, { className: 'formula-dropdown icon-dropdown p-0', style: {
                             minWidth: minWidth ? minWidth : defaultWidth,
                             width: menuWidth ? menuWidth : 'min-content',
                             maxWidth: innerWidth > 1280 ? 1280 : innerWidth,
@@ -41687,7 +41708,7 @@ var css_248z$1 = ".react-resizable {\n  position: relative;\n}\n.react-resizable
 styleInject(css_248z$1);
 
 const HeaderTableCol = (props) => {
-    const { selectEnable, dataSource, setSelectedRows, col, indexCol, indexParent, objWidthFix, totalCount, selectedRows, column, setColumn, isMulti } = props;
+    const { selectEnable, dataSource, setSelectedRows, col, indexCol, indexParent, objWidthFixLeft, objWidthFixRight, totalCount, selectedRows, column, setColumn, isMulti } = props;
     const { t } = useTranslation();
     const handleResize = (e, { size }) => {
         // Update the column width here
@@ -41695,16 +41716,22 @@ const HeaderTableCol = (props) => {
         if (size.width > 50) {
             const newColumns = [...column];
             newColumns[indexCol].width = size.width;
+            if ((column[indexCol]?.maxWidth ?? 0) < size.width) {
+                newColumns[indexCol].maxWidth = size.width;
+            }
+            if ((column[indexCol]?.minWidth ?? 0) > size.width) {
+                newColumns[indexCol].minWidth = size.width;
+            }
             setColumn(newColumns);
         }
     };
     return (jsx(Fragment, { children: col.visible !== false && (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: 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}`, { 'cell-fixed': col.fixedType }), style: {
                     top: `${indexParent * 42}px`,
-                    left: col.fixedType === 'left' ? objWidthFix[col.index ?? 0] : undefined,
-                    right: col.fixedType === 'right' ? objWidthFix[col.index ?? 0] : undefined,
+                    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.width ? typeof col.width === 'number' ? col.width : col.width?.includes('px') || col.width?.includes('%') ? col.width : `${col.width}px` : 'auto',
-                    maxWidth: 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: jsxs("div", { style: { justifyContent: col.textAlign ?? 'left' }, className: classnames('r-headercell-div'), children: [col.field === 'checkbox' && (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) => {
                                 if (selectEnable) {
                                     if (e.target.checked) {
@@ -42108,11 +42135,11 @@ const RenderToolbarTop = ({ toolbarTopOption }) => {
 
 const handleAdd = (dataSource, tableElement, columnFistEdit, 
 /*eslint-disable*/
-changeDataSource, pagingSetting, setIndexFocus, focusNewElement
+changeDataSource, pagingSetting, setIndexFocus, focusNewElement, 
 /*eslint-enable*/
-) => {
+numberOfRows) => {
     const lengthData = dataSource.length;
-    changeDataSource(dataSource, true);
+    changeDataSource(dataSource, numberOfRows ?? 1);
     if (pagingSetting?.setCurrentPage) {
         pagingSetting?.setCurrentPage(Math.floor(lengthData / (pagingSetting?.pageSize ?? 0)) + 1);
     }
@@ -42196,14 +42223,14 @@ editDisable, addDisable, toolbarSetting, buttonSetting) => {
         messageBoxConfirmDelete(t, () => {
             if (!editDisable && !addDisable) {
                 setIndexFocus(-1);
-                changeDataSource([], false);
+                changeDataSource([]);
             }
         }, '');
     }
 };
 
 const ToolbarBottom = ({ handleAdd, handleDuplicate, handleInsertBefore, handleInsertAfter, handleDeleteAll, setOpenPopupSetupColumn, indexFocus, editDisable, addDisable, buttonSetting, toolbarSetting, headerColumns, t }) => {
-    return (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: jsxs("div", { className: "r-toolbar-items", children: [jsxs("div", { className: "r-toolbar-left", children: [jsx("div", { className: classnames('r-toolbar-item', { 'd-none': editDisable || addDisable }), "aria-disabled": "false", children: jsx(Button$1, { color: 'success', outline: true, onClick: handleAdd, className: 'd-flex', children: t('Add item') }) }), (indexFocus ?? -1) > -1 ? jsxs(Fragment$1, { children: [jsx("div", { className: classnames('r-toolbar-item', { 'd-none': editDisable || addDisable || buttonSetting?.duplicateDisable }), "aria-disabled": "false", children: jsx(Button$1, { color: 'success', outline: true, onClick: () => { handleDuplicate(); }, className: 'd-flex', children: t('Duplicate') }) }), jsx("div", { className: classnames('r-toolbar-item', { 'd-none': editDisable || addDisable || buttonSetting?.insertBeforeDisable }), "aria-disabled": "false", children: jsx(Button$1, { color: 'success', outline: true, onClick: handleInsertBefore, className: 'd-flex', children: t('Insert item before') }) }), jsx("div", { className: classnames('r-toolbar-item', { 'd-none': editDisable || addDisable || buttonSetting?.insertAfterDisable }), "aria-disabled": "false", children: jsx(Button$1, { color: 'success', outline: true, onClick: handleInsertAfter, className: 'd-flex', children: t('Insert item after') }) })] }) : jsx(Fragment$1, { children: " " }), jsx("div", { className: classnames('r-toolbar-item', { 'd-none': editDisable || buttonSetting?.deleteAllDisable }), "aria-disabled": "false", children: jsx(Button$1, { color: 'primary', outline: true, onClick: handleDeleteAll, className: 'd-flex', children: t('Delete all item') }) }), toolbarSetting?.toolbarBottomOptions?.map((item, index) => {
+    return (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: jsxs("div", { className: "r-toolbar-items", children: [jsxs("div", { className: "r-toolbar-left", children: [jsxs("div", { className: classnames('r-toolbar-item d-flex', { 'd-none': editDisable || addDisable }), "aria-disabled": "false", children: [jsx(Button$1, { color: 'success', outline: true, onClick: () => handleAdd(1), className: 'd-flex', children: t('Add item') }), jsxs(UncontrolledDropdown, { className: 'nav-item', children: [jsx(DropdownToggle$1, { tag: 'div', className: 'me-0 d-flex', children: jsx(Button$1, { type: 'button', color: 'success', outline: true, style: { marginLeft: -1 }, className: 'px-25', children: jsx("svg", { fill: '#28c76f', height: "15", width: "20", viewBox: "0 0 20 20", children: 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" }) }) }) }), jsxs(DropdownMenu$1, { className: 'formula-dropdown icon-dropdown p-0', style: { width: 60 }, children: [jsx(DropdownItem$1, { className: 'py-25', tag: 'div', onClick: () => handleAdd(10), children: " 10 " }), jsx(DropdownItem$1, { className: 'py-25', tag: 'div', onClick: () => handleAdd(20), children: " 20 " }), jsx(DropdownItem$1, { className: 'py-25', tag: 'div', onClick: () => handleAdd(30), children: " 30 " }), jsx(DropdownItem$1, { className: 'py-25', tag: 'div', onClick: () => handleAdd(40), children: " 40 " }), jsx(DropdownItem$1, { className: 'py-25', tag: 'div', onClick: () => handleAdd(50), children: " 50 " })] })] })] }), (indexFocus ?? -1) > -1 ? jsxs(Fragment$1, { children: [jsx("div", { className: classnames('r-toolbar-item', { 'd-none': editDisable || addDisable || buttonSetting?.duplicateDisable }), "aria-disabled": "false", children: jsx(Button$1, { color: 'success', outline: true, onClick: () => { handleDuplicate(); }, className: 'd-flex', children: t('Duplicate') }) }), jsx("div", { className: classnames('r-toolbar-item', { 'd-none': editDisable || addDisable || buttonSetting?.insertBeforeDisable }), "aria-disabled": "false", children: jsx(Button$1, { color: 'success', outline: true, onClick: handleInsertBefore, className: 'd-flex', children: t('Insert item before') }) }), jsx("div", { className: classnames('r-toolbar-item', { 'd-none': editDisable || addDisable || buttonSetting?.insertAfterDisable }), "aria-disabled": "false", children: jsx(Button$1, { color: 'success', outline: true, onClick: handleInsertAfter, className: 'd-flex', children: t('Insert item after') }) })] }) : jsx(Fragment$1, { children: " " }), jsx("div", { className: classnames('r-toolbar-item', { 'd-none': editDisable || buttonSetting?.deleteAllDisable }), "aria-disabled": "false", children: 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') ? jsx("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-left-${index}`) : '');
                         })] }), jsx("div", { className: "r-toolbar-center", children: toolbarSetting?.toolbarBottomOptions?.map((item, index) => {
                         return ((item.align === 'center') ? jsx("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-center-${index}`) : '');
@@ -42431,9 +42458,9 @@ const EditFormInline = forwardRef((props, ref) => {
                         onFormOpen(rowData, itemsField, setItemsField);
                     }
                     setOnFocus(true);
-                }, onKeyDown: e => formKeyDown(e, handleSubmit), children: template ? template(rowData, indexRow) : displayValue }), jsx("div", { className: `form__edit ${onFocus ? 'active' : ''}`, onKeyDown: e => handleOnKeyDown(), children: itemsField.map((item, index) => {
+                }, onKeyDown: e => formKeyDown(e, handleSubmit), children: template ? template(rowData, indexRow) : displayValue }), onFocus && jsx("div", { className: `form__edit ${onFocus ? 'active' : ''}`, style: { width: (itemsField?.length ?? 0) * 95 }, onKeyDown: e => handleOnKeyDown(), children: itemsField.map((item, index) => {
                     if (item.type === 'numeric') {
-                        return (jsx("div", { className: "form__element", onKeyDown: e => formItemKeyDown(e, index), children: jsx(NumberInput, { id: `form-element-${field}-${index}`, control: control, name: item.name, label: item.label ? item.label : '', labelSize: `${labelSize}`, errors: errors[item.name], disabled: item.disabled, min: item.min, max: item.max, inLine: false, fractionCurrency: item.fraction, callback: () => { elementChange(item.name); } }, index) }, index));
+                        return (jsx("div", { style: { minWidth: 90 }, className: "form__element", onKeyDown: e => formItemKeyDown(e, index), children: jsx(NumberInput, { id: `form-element-${field}-${index}`, control: control, name: item.name, label: item.label ? item.label : '', labelSize: `${labelSize}`, errors: errors[item.name], disabled: item.disabled, min: item.min, max: item.max, inLine: false, fractionCurrency: item.fraction, callback: () => { elementChange(item.name); } }, index) }, index));
                     }
                     else if (item.type === 'text') {
                         return (jsx("div", { className: "form__element", onKeyDown: e => formItemKeyDown(e, index), children: jsx(TextInput, { id: `form-element-${field}-${index}`, control: control, name: item.name, label: item.label ? item.label : '', labelSize: `${labelSize}`, inLine: false, errors: errors[item.name], disabled: item.disabled, callback: () => { elementChange(item.name); } }, index) }, index));
@@ -42460,7 +42487,10 @@ const TableEdit = forwardRef((props, ref) => {
     const [levelCol, setLevelCol] = useState(0);
     const [columnFistEdit, setColumnFistEdit] = useState(0);
     const [columnLastEdit, setColumnlastEdit] = useState(0);
-    const [objWidthFix, setObjWidthFix] = useState({});
+    const [objWidthFixRight, setObjWidthFixRight] = useState({});
+    const [objWidthFixLeft, setObjWidthFixLeft] = useState({});
+    const [lastObjWidthFixLeft, setLastObjWidthFixLeft] = useState(0);
+    const [fisrtObjWidthFixRight, setFisrtObjWidthFixRight] = useState(0);
     const [openPopupSetupColumn, setOpenPopupSetupColumn] = useState(false);
     const [searchTerm, setSearchTerm] = useState('');
     const tableElement = useRef(null);
@@ -42487,12 +42517,14 @@ const TableEdit = forwardRef((props, ref) => {
                 headerColumns[0][index].fixedType = item.fixedType;
             }
             if (item.fixedType === 'left' && item.visible !== false) {
-                objWidthFix[index] = letfWidthFix;
+                setLastObjWidthFixLeft(index);
+                objWidthFixLeft[index] = letfWidthFix;
                 letfWidthFix += Number(item.width ?? 40);
             }
             const lasColumn = contentColumns[contentColumns.length - 1 - index];
             if (lasColumn.fixedType === 'right' && lasColumn.visible !== false) {
-                objWidthFix[contentColumns.length - 1 - index] = rightWidthFix;
+                setFisrtObjWidthFixRight(contentColumns.length - 1 - index);
+                objWidthFixRight[contentColumns.length - 1 - index] = rightWidthFix;
                 rightWidthFix += Number(lasColumn.width ?? 40);
             }
             if (item.editEnable && (item.visible !== false) && (!item.disabledCondition)) {
@@ -42505,7 +42537,8 @@ const TableEdit = forwardRef((props, ref) => {
         if (levelCol === 1) {
             setHeaderColumns([...headerColumns]);
         }
-        setObjWidthFix(objWidthFix);
+        setObjWidthFixLeft(objWidthFixLeft);
+        setObjWidthFixRight(objWidthFixRight);
         setColumnFistEdit(indexFirst + 1);
         setColumnlastEdit(indexlast + 1);
     }, [contentColumns]);
@@ -42620,7 +42653,7 @@ const TableEdit = forwardRef((props, ref) => {
     else {
         toolbarTopOption = [...defaultToolbarOption];
     }
-    const RenderEdit = (row, col, indexCol, indexRow) => {
+    const RenderEditCell = (row, col, indexCol, indexRow) => {
         /*eslint-disable */
         switch (col?.editTypeCondition ? col?.editTypeCondition(row) : col.editType) {
             case 'date':
@@ -42731,31 +42764,29 @@ const TableEdit = forwardRef((props, ref) => {
                 else {
                     valueSelectTree = (!isNullOrUndefined$1(row[col.field]) && row[col.field] !== '') ? findItemInTree(optionsSelectTree, row[col.field]) : '';
                 }
-                return (jsx("div", { onKeyDown: (e) => {
+                return (jsx(SelectTableTree, { id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`, value: valueSelectTree, options: optionsSelectTree, onChange: (val) => {
+                        if (col.selectSettings?.isMulti) {
+                            row[col.field] = !isNullOrUndefined$1(val) ? val : [];
+                        }
+                        else {
+                            row[col.field] = !isNullOrUndefined$1(val) ? val[col.selectSettings?.fieldValue ?? 'value'] : undefined;
+                        }
+                        if (col.callback) {
+                            col.callback(val, indexRow, row);
+                        }
+                        handleDataChange(row, col, indexRow);
+                    }, fieldValue: col.selectSettings?.fieldValue, fieldLabel: col.selectSettings?.fieldLabel, component: gridRef, columns: col.selectSettings?.columns, isClearable: col.selectSettings?.isClearable ?? false, formatSetting: formatSetting, placeholder: t('Select'), onOpenMenu: () => {
+                        if (col.selectSettings?.onOpenMenu) {
+                            col.selectSettings?.onOpenMenu(row, col, indexRow);
+                        }
+                    }, loadOptions: col.selectSettings?.loadOptions, handleAdd: col.selectSettings?.handAddNew ? (e) => col.selectSettings?.handAddNew(e, indexRow, row) : undefined, fieldChildren: col.selectSettings?.fieldChild ?? 'children', selectChilds: col.selectSettings?.selectChilds, showFooter: col.selectSettings?.showFooter, formatOptionLabel: col.selectSettings?.formatOptionLabel, footerComponent: col.selectSettings?.footerComponent, width: col.selectSettings?.widthPopup ? Number(col.selectSettings?.widthPopup) : undefined, isMulti: col.selectSettings?.isMulti, noHeader: col.selectSettings?.noHeader, invalid: col.validate && col.validate(row[col.field], row), maxHeight: col.selectSettings?.heightPopup ? Number(col.selectSettings?.heightPopup) : undefined, menuWidth: col.selectSettings?.widthPopup ? Number(col.selectSettings?.widthPopup) : undefined, textAlign: col.textAlign ?? 'left', onKeyDown: (e) => {
                         if (checkKeyDown(e, row, col, indexRow + 1, indexCol + 1)) ;
-                    }, children: jsx(SelectTableTree, { id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`, value: valueSelectTree, options: optionsSelectTree, onChange: (val) => {
-                            if (col.selectSettings?.isMulti) {
-                                row[col.field] = !isNullOrUndefined$1(val) ? val : [];
-                            }
-                            else {
-                                row[col.field] = !isNullOrUndefined$1(val) ? val[col.selectSettings?.fieldValue ?? 'value'] : undefined;
-                            }
-                            if (col.callback) {
-                                col.callback(val, indexRow, row);
-                            }
-                            handleDataChange(row, col, indexRow);
-                        }, fieldValue: col.selectSettings?.fieldValue, fieldLabel: col.selectSettings?.fieldLabel, component: gridRef, columns: col.selectSettings?.columns, isClearable: col.selectSettings?.isClearable ?? false, formatSetting: formatSetting, placeholder: t('Select'), onOpenMenu: () => {
-                            if (col.selectSettings?.onOpenMenu) {
-                                col.selectSettings?.onOpenMenu(row, col, indexRow);
-                            }
-                        }, loadOptions: col.selectSettings?.loadOptions, handleAdd: col.selectSettings?.handAddNew ? (e) => col.selectSettings?.handAddNew(e, indexRow, row) : undefined, fieldChildren: col.selectSettings?.fieldChild ?? 'children', selectChilds: col.selectSettings?.selectChilds, showFooter: col.selectSettings?.showFooter, formatOptionLabel: col.selectSettings?.formatOptionLabel, footerComponent: col.selectSettings?.footerComponent, width: col.selectSettings?.widthPopup ? Number(col.selectSettings?.widthPopup) : undefined, isMulti: col.selectSettings?.isMulti, noHeader: col.selectSettings?.noHeader, invalid: col.validate && col.validate(row[col.field], row), maxHeight: col.selectSettings?.heightPopup ? Number(col.selectSettings?.heightPopup) : undefined, menuWidth: col.selectSettings?.widthPopup ? Number(col.selectSettings?.widthPopup) : undefined, textAlign: col.textAlign ?? 'left', onKeyDown: (e) => {
-                            if (checkKeyDown(e, row, col, indexRow + 1, indexCol + 1)) ;
-                        }, onPaste: (e) => {
-                            if (toolbarSetting?.showBottomToolbar && !editDisable && !addDisable && !col.disablePaste) {
-                                pasteDataFromExcel(indexRow, indexCol, e);
-                                e.preventDefault();
-                            }
-                        } }) }));
+                    }, onPaste: (e) => {
+                        if (toolbarSetting?.showBottomToolbar && !editDisable && !addDisable && !col.disablePaste) {
+                            pasteDataFromExcel(indexRow, indexCol, e);
+                            e.preventDefault();
+                        }
+                    } }));
             case 'checkbox':
                 return (jsx(Input$1, { checked: row[col.field], id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`, type: "checkbox", className: "input-checkbox cursor-pointer", style: { textAlign: col.textAlign ?? 'left', marginTop: 6 }, onChange: (val) => {
                         row[col.field] = val.currentTarget.checked;
@@ -42820,7 +42851,7 @@ const TableEdit = forwardRef((props, ref) => {
                 return (jsx(EditForm, { id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`, ...col.formSettings, field: col.field, displayValue: col.formSettings?.displayValue ? col.formSettings?.displayValue(row) : '', placeholder: col.placeholder ? t(col.placeholder) : '', rowData: row, indexRow: indexRow, onChange: (val) => {
                         Object.assign(row, val);
                         handleDataChange(row, col, indexRow);
-                    }, invalid: col.validate && col.validate(row[col.field], row), textAlign: col.textAlign, onKeyDown: (e) => {
+                    }, invalid: col.validate && col.validate(row[col.field], row), textAlign: col.textAlign, template: col.template, onKeyDown: (e) => {
                         return checkKeyDown(e, row, col, indexRow + 1, indexCol + 1);
                     }, onPaste: (e) => {
                         if (toolbarSetting?.showBottomToolbar && !editDisable && !addDisable && !col.disablePaste) {
@@ -42896,7 +42927,7 @@ const TableEdit = forwardRef((props, ref) => {
     };
     //Thêm dòng mới
     const moveIndexRowToNewPage = () => {
-        changeDataSource(dataSource, true);
+        changeDataSource(dataSource, 1);
         if (pagingClient && pagingSetting?.setCurrentPage && (totalCount % (pagingSetting?.pageSize ?? 0)) === 0) {
             pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 0) + 1);
         }
@@ -42963,13 +42994,13 @@ const TableEdit = forwardRef((props, ref) => {
         }, 50);
     });
     const getColumn = (col, index) => {
-        const column = contentColumns.filter(e => e.visible !== false)[col + index];
+        const column = contentColumns[col + index];
         if (column) {
             return { ...column };
         }
         return undefined;
     };
-    const pasteDataFromExcel = async (currenRowIndex, col, e) => {
+    const pasteDataFromExcel = async (currenRowIndex, indexCol, e) => {
         const clipboard = (e.clipboardData || window.Clipboard).getData('text');
         const rowsClipboard = clipboard.trimEnd().split('\n');
         setIndexFocus(-1);
@@ -42985,7 +43016,8 @@ const TableEdit = forwardRef((props, ref) => {
                         stringData.push(element.trimEnd().split('\t')[index].toString().trim());
                     }
                 });
-                const column = getColumn(col, index);
+                const column = getColumn(indexCol, index);
+                console.log(column);
                 if (column) {
                     if ((!column.disabledCondition || !column.disabledCondition(dataSource[currenRowIndex + 0])) && column.editEnable && column.onPasteValidate) {
                         const rs = await column.onPasteValidate(stringData.join(','), currenRowIndex + 0, dataSource[currenRowIndex + 0]);
@@ -43062,8 +43094,7 @@ const TableEdit = forwardRef((props, ref) => {
                                     }
                                 }
                                 else if (column.editType === 'select') {
-                                    const rs = ((column.selectSettings?.optionsField ? item[column.selectSettings?.optionsField] : column.selectSettings?.options) ?? []).find((item) => item[column.selectSettings?.fieldValue ?? 'value'] === stringData);
-                                    if (rs) {
+                                    if (column.selectSettings?.allowCreate) {
                                         if (column.onPaste) {
                                             dataRow[column.field] = column.onPaste(dataRow, stringData);
                                         }
@@ -43071,11 +43102,25 @@ const TableEdit = forwardRef((props, ref) => {
                                             dataRow[column.field] = stringData;
                                         }
                                         if (column.callback) {
-                                            column.callback(rs, currenRowIndex + indexRow);
+                                            column.callback(stringData, currenRowIndex + indexRow);
                                         }
                                     }
                                     else {
-                                        notificationError(t('PasteExcelNotExist', { index: (currenRowIndex + indexRow + 1), field: t(column.headerText ?? ''), value: stringData }));
+                                        const rs = ((column.selectSettings?.optionsField ? item[column.selectSettings?.optionsField] : column.selectSettings?.options) ?? []).find((item) => item[column.selectSettings?.fieldValue ?? 'value'] === stringData);
+                                        if (rs) {
+                                            if (column.onPaste) {
+                                                dataRow[column.field] = column.onPaste(dataRow, stringData);
+                                            }
+                                            else {
+                                                dataRow[column.field] = stringData;
+                                            }
+                                            if (column.callback) {
+                                                column.callback(rs, currenRowIndex + indexRow);
+                                            }
+                                        }
+                                        else {
+                                            notificationError(t('PasteExcelNotExist', { index: (currenRowIndex + indexRow + 1), field: t(column.headerText ?? ''), value: stringData }));
+                                        }
                                     }
                                 }
                                 else {
@@ -43100,7 +43145,7 @@ const TableEdit = forwardRef((props, ref) => {
         }
         changeDataSource(dataSource);
     };
-    const changeDataSource = (data, haveNew = false) => {
+    const changeDataSource = (data, numberOfRows) => {
         if (!editDisable && setDataSource) {
             if ((searchSetting?.searchTerm !== undefined ? searchSetting?.searchTerm : searchTerm)) {
                 if (searchSetting?.setSearchTerm) {
@@ -43110,8 +43155,10 @@ const TableEdit = forwardRef((props, ref) => {
                     setSearchTerm('');
                 }
             }
-            if (haveNew && !addDisable) {
-                data.push(defaultValue ? { ...defaultValue, [fieldKey]: disableAutoKey ? undefined : generateUUID() } : {});
+            if (numberOfRows && !addDisable) {
+                for (let index = 0; index < numberOfRows; index++) {
+                    data.push(defaultValue ? { ...defaultValue, [fieldKey]: disableAutoKey ? undefined : generateUUID() } : {});
+                }
                 setDataSource([...data]);
             }
             else {
@@ -43167,16 +43214,16 @@ const TableEdit = forwardRef((props, ref) => {
     }, [selectedItem]);
     const renderContentCol = (col, row, indexRow, indexCol, isSelected) => {
         if (col.field === 'command') {
-            return (col.visible !== false && jsx("td", { className: classnames(`r-rowcell p-0 fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }, { 'r-active': (isSelected && editDisable) || indexFocus === indexRow }), style: {
-                    left: col.fixedType === 'left' ? objWidthFix[indexCol] : undefined,
-                    right: col.fixedType === 'right' ? objWidthFix[indexCol] : undefined,
+            return (col.visible !== false && jsx("td", { className: classnames(`r-rowcell p-0 fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }, { 'cell-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: jsx("div", { className: "r-rowcell-div command", children: 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 && jsx("td", { className: classnames(`r-rowcell p-0 cursor-pointer fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }, { 'r-active': (isSelected && editDisable) || indexFocus === indexRow }), tabIndex: Number(`${indexRow}${indexCol}`), style: {
-                    left: col.fixedType === 'left' ? objWidthFix[indexCol] : undefined,
-                    right: col.fixedType === 'right' ? objWidthFix[indexCol] : undefined,
+            return (col.visible !== false && jsx("td", { className: classnames(`r-rowcell p-0 cursor-pointer fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }, { 'cell-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',
                 }, onCopy: (e) => {
                     if (!editDisable && (e.target.nodeName === 'DIV' || e.target.nodeName === 'TD')) {
@@ -43212,11 +43259,10 @@ const TableEdit = forwardRef((props, ref) => {
                 }, children: jsx("div", { className: "r-rowcell-div", children: indexRow + 1 }) }, `col-${indexRow}-${indexCol}`));
         }
         else if (col.field === 'checkbox') {
-            return (jsx("td", { className: classnames(`r-rowcell p-0 fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }, { 'r-active': (isSelected && editDisable) || indexFocus === indexRow }), style: {
-                    left: col.fixedType === 'left' ? objWidthFix[indexCol] : undefined,
-                    right: col.fixedType === 'right' ? objWidthFix[indexCol] : undefined,
-                    textAlign: col.textAlign ? col.textAlign : 'center',
-                }, children: jsx("div", { className: "r-rowcell-div cursor-pointer", onClick: (e) => {
+            return (jsx("td", { className: classnames(`r-rowcell p-0 fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }, { 'cell-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: 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) {
@@ -43238,7 +43284,7 @@ const TableEdit = forwardRef((props, ref) => {
                             }
                             e.stopPropagation();
                         }
-                    }, children: jsx(Input$1, { checked: isSelected, type: "checkbox", className: "cursor-pointer", onChange: () => { }, style: { textAlign: col.textAlign ?? 'center' } }) }) }, `col-${indexRow}-${indexCol}`));
+                    }, children: jsx(Input$1, { checked: isSelected, type: "checkbox", className: "cursor-pointer", style: { textAlign: col.textAlign ?? 'center' } }) }) }, `col-${indexRow}-${indexCol}`));
         }
         else {
             let value = row[col.field];
@@ -43253,9 +43299,9 @@ const TableEdit = 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 (jsx(Fragment, { children: col.visible !== false && jsx("td", { className: classnames(`r-rowcell fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }, { 'r-active': (isSelected && editDisable) || indexFocus === indexRow }), style: {
-                        left: col.fixedType === 'left' ? objWidthFix[indexCol] : undefined,
-                        right: col.fixedType === 'right' ? objWidthFix[indexCol] : undefined
+            return (jsx(Fragment, { children: col.visible !== false && jsx("td", { className: classnames(`r-rowcell fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }, { 'cell-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) => {
                         if (e.target.nodeName === 'DIV' || e.target.nodeName === 'TD') {
                             if (!editDisable && indexRow != indexFocus) {
@@ -43286,14 +43332,26 @@ const TableEdit = forwardRef((props, ref) => {
                         }
                     }, children: jsx("div", { className: classnames('r-rowcell-div'), children: jsxs("div", { id: indexFocus === indexRow && typeDis !== 1 ? `${idTable}-col${indexCol + 1}-row${indexRow + 1}` : '', className: classnames('r-rowcell-content', { 'r-is-invalid': errorMessage }), style: {
                                 textAlign: col.textAlign ? col.textAlign : 'left'
-                            }, children: [typeDis === 1 && !refreshRow ? RenderEdit(row, col, indexCol, indexRow) : jsx(Fragment$1, { children: typeDis === 2 ? (col.template && col.template(row, indexRow)) ?? '' : jsx("div", { id: `content-${idTable}-row${indexRow}col-${indexCol}`, className: "r-cell-text", children: (col.editType === 'numeric' && Number(row[col.field]) < 0 ? jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [" ", `${formatSetting?.prefixNegative ?? '-'}${value}${formatSetting?.suffixNegative ?? ''}`] }) : value) }) }), jsx("span", { id: `error-${indexRow}-${indexCol}`, className: classnames('cursor-pointer text-primary icon-table', { 'd-none': !errorMessage }), children: jsx(SvgAlertCircle, { fontSize: 15.5 }) }), (!(typeDis === 1 && !refreshRow) && typeDis !== 2) && jsx(UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `content-${idTable}-row${indexRow}col-${indexCol}`, children: (col.editType === 'numeric' && Number(row[col.field]) < 0 ? jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [" ", `${formatSetting?.prefixNegative ?? '-'}${value}${formatSetting?.suffixNegative ?? ''}`] }) : value) }), jsx(UncontrolledTooltip, { target: `error-${indexRow}-${indexCol}`, className: "r-tooltip tooltip-error", children: errorMessage?.toString() ?? '' })] }) }) }, `col-${indexRow}-${indexCol}`) }, indexCol));
+                            }, children: [typeDis === 1 && !refreshRow && jsx(Fragment$1, { children: RenderEditCell(row, col, indexCol, indexRow) }), (typeDis !== 1 || refreshRow) && RenderContentCell(row, col, indexCol, indexRow, typeDis, value), jsx("span", { id: `error-${indexRow}-${indexCol}`, className: classnames('cursor-pointer text-primary icon-table', { 'd-none': !errorMessage }), children: jsx(SvgAlertCircle, { fontSize: 15.5 }) }), 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) => {
+        if (typeDis === 2) {
+            const value = col.template?.(row, indexRow) ?? '';
+            if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {
+                return (jsxs(Fragment$1, { children: [jsx("div", { id: `content-${idTable}-row${indexRow}col-${indexCol}`, className: "r-cell-text", children: value }), (!refreshRow && typeDis !== 2) && jsx(UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `content-${idTable}-row${indexRow}col-${indexCol}`, children: (col.editType === 'numeric' && Number(row[col.field]) < 0 ? jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [" ", `${formatSetting?.prefixNegative ?? '-'}${value}${formatSetting?.suffixNegative ?? ''}`] }) : value) })] }));
+            }
+            else {
+                return value;
+            }
         }
+        return (jsxs(Fragment$1, { children: [jsx("div", { id: `content-${idTable}-row${indexRow}col-${indexCol}`, className: "r-cell-text", children: (col.editType === 'numeric' && Number(row[col.field]) < 0 ? jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [" ", `${formatSetting?.prefixNegative ?? '-'}${value}${formatSetting?.suffixNegative ?? ''}`] }) : value) }), (!(typeDis === 1 && !refreshRow) && typeDis !== 2) && jsx(UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `content-${idTable}-row${indexRow}col-${indexCol}`, children: (col.editType === 'numeric' && Number(row[col.field]) < 0 ? jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [" ", `${formatSetting?.prefixNegative ?? '-'}${value}${formatSetting?.suffixNegative ?? ''}`] }) : value) })] }));
     };
     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 (jsx(Fragment, { children: (col.visible !== false) && jsx("td", { className: classnames(`p-0 px-50 r-footer fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }), style: {
-                    left: col.fixedType === 'left' ? objWidthFix[indexCol] : undefined,
-                    right: col.fixedType === 'right' ? objWidthFix[indexCol] : undefined,
+                    left: col.fixedType === 'left' ? objWidthFixLeft[indexCol] : undefined,
+                    right: col.fixedType === 'right' ? objWidthFixRight[indexCol] : undefined,
                     textAlign: col.textAlign ? col.textAlign : 'left'
                 }, children: jsxs("div", { className: "r-footer-div", children: [col.haveSum === true && col.editType === "numeric" && (Number(sumValue) >= 0) && jsx(Fragment$1, { children: formartNumberic(sumValue, formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', col.numericSettings?.fraction, true, false) }), col.haveSum === true && col.editType === "numeric" && (Number(sumValue) < 0) && 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}`));
     };
@@ -43326,12 +43384,12 @@ const TableEdit = forwardRef((props, ref) => {
     }, [searchTerm, searchSetting?.searchTerm]);
     return (jsxs(Fragment, { children: [jsxs("div", { className: "react-table-edit", children: [jsxs("div", { className: 'r-grid', ref: gridRef, children: [toolbarSetting?.showTopToolbar && jsx(RenderToolbarTop, { toolbarTopOption: toolbarTopOption }), jsx("div", { ref: tableElement, className: "r-gridtable", style: { height: `${height ? `${height}px` : 'auto'}`, minHeight: `${minHeight ? `${minHeight}px` : ''}`, maxHeight: `${maxHeight ? `${maxHeight}px` : '400px'}` }, children: jsxs("table", { style: { width: '100%' }, children: [jsx("thead", { className: 'r-gridheader', children: headerColumns.map((element, indexParent) => {
                                                 return (jsx("tr", { className: "r-row", role: "row", children: element?.map((col, index) => {
-                                                        return (jsx(HeaderTableCol, { col: col, dataSource: dataSource, indexCol: index, indexParent: indexParent, isMulti: isMulti ?? false, objWidthFix: objWidthFix, selectEnable: selectEnable ?? false, selectedRows: selectedRows, setSelectedRows: setSelectedRows, column: contentColumns, setColumn: setContentColumns, totalCount: totalCount }, `header-${indexParent}-${index}`));
+                                                        return (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, totalCount: totalCount }, `header-${indexParent}-${index}`));
                                                     }) }, `header-${-indexParent}`));
                                             }) }), jsx("tbody", { className: 'r-gridcontent', children: renderData() }), jsx("tfoot", { className: "r-gridfoot", children: haveSum == true ? jsx("tr", { className: 'r-row', children: contentColumns.map((col, index) => {
                                                     return (renderFooterCol(col, index));
-                                                }) }) : jsx(Fragment$1, {}) })] }) }), toolbarSetting?.showBottomToolbar && jsx(ToolbarBottom, { handleAdd: () => {
-                                    handleAdd(dataSource, tableElement.current, columnFistEdit, changeDataSource, pagingSetting, setIndexFocus, focusNewElement);
+                                                }) }) : jsx(Fragment$1, {}) })] }) }), toolbarSetting?.showBottomToolbar && jsx(ToolbarBottom, { handleAdd: (numberOfRows) => {
+                                    handleAdd(dataSource, tableElement.current, columnFistEdit, changeDataSource, pagingSetting, setIndexFocus, focusNewElement, numberOfRows);
                                 }, handleDuplicate: () => {
                                     handleDuplicate(dataSource, indexFocus, fieldKey, defaultValue, fieldUniKey, changeDataSource, tableElement, totalCount, toolbarSetting, buttonSetting, editDisable, addDisable, onDuplicate);
                                 }, handleInsertAfter: () => {