react-table-edit 1.4.10 → 1.4.11

package/dist/component/edit-form/index.d.ts

@@ -22,13 +22,13 @@ type Props = {
     menuWidth?: number;
     rowData: any;
     indexRow: any;
-    template?: any;
     onKeyDown?: any;
     defaultValues?: any;
     schema?: InferType<any>;
     onFormOpen?: (rowData: any, itemsField: FromItemsField[], setItemsField: Dispatch<SetStateAction<FromItemsField[]>>) => void;
     onFormSubmit?: (rowData: any, setValue: UseFormSetValue<any>, getValues: UseFormGetValues<any>, reset: UseFormReset<any>) => void;
     footerTemplate?: (rowData: any) => JSX.Element;
+    template?: (row: any, indexRow: number) => JSX.Element | string | number | undefined;
     onChangeField?: (rowData: any, field: string, setValue: UseFormSetValue<any>, getValues: UseFormGetValues<any>) => void;
     onChange: (rowData: any) => void;
     onPaste?: (e: ClipboardEvent<HTMLInputElement>) => void;

package/dist/component/table/button-handle.d.ts

@@ -1,10 +1,10 @@
 import { IFTableEditButton, IFTableEditPaging, IFTableEditToolbar } from "../type";
-export declare const handleAdd: (dataSource: any[], tableElement: any, columnFistEdit: any, changeDataSource: (data: any[], haveNew?: boolean) => void, pagingSetting: {
+export declare const handleAdd: (dataSource: any[], tableElement: any, columnFistEdit: any, changeDataSource: (data: any[], numberOfRows?: number) => void, pagingSetting: {
     setCurrentPage?: (page: number) => void;
     pageSize?: number;
-} | undefined, setIndexFocus: (item: number) => void, focusNewElement: (col: number, row: number, onLoad?: boolean) => void) => void;
+} | undefined, setIndexFocus: (item: number) => void, focusNewElement: (col: number, row: number, onLoad?: boolean) => void, numberOfRows?: number) => void;
 export declare const handleDuplicate: (dataSource: any[], indexFocus: number, fieldKey: string | undefined, defaultValue: any, fieldUniKey: string[], changeDataSource: (data: any[]) => void, tableElement: any, totalCount: number, toolbarSetting?: IFTableEditToolbar, buttonSetting?: IFTableEditButton, editDisable?: boolean, addDisable?: boolean, onDuplicate?: (newData: any, index: number) => void, // sự kiện khi duplicate
 pagingClient?: boolean, pagingSetting?: IFTableEditPaging) => Promise<void>;
 export declare const handleInsertAfter: (dataSource: any[], indexFocus: number, defaultValue: any, changeDataSource: (data: any[]) => void, tableElement: any, totalCount: number, pagingClient?: boolean, pagingSetting?: IFTableEditPaging, toolbarSetting?: IFTableEditToolbar, buttonSetting?: IFTableEditButton, editDisable?: boolean, addDisable?: boolean) => void;
 export declare const handleInsertBefore: (dataSource: any[], indexFocus: number, defaultValue: any, changeDataSource: (data: any[]) => void, pagingClient?: boolean, pagingSetting?: IFTableEditPaging, toolbarSetting?: IFTableEditToolbar, buttonSetting?: IFTableEditButton, editDisable?: boolean, addDisable?: boolean) => void;
-export declare const handleDeleteAll: (t: any, messageBoxConfirmDelete: (t: any, callback: () => void, message: string) => void, setIndexFocus: (item: number) => void, changeDataSource: (data: any[], haveNew?: boolean) => void, editDisable?: boolean, addDisable?: boolean, toolbarSetting?: IFTableEditToolbar, buttonSetting?: IFTableEditButton) => void;
+export declare const handleDeleteAll: (t: any, messageBoxConfirmDelete: (t: any, callback: () => void, message: string) => void, setIndexFocus: (item: number) => void, changeDataSource: (data: any[]) => void, editDisable?: boolean, addDisable?: boolean, toolbarSetting?: IFTableEditToolbar, buttonSetting?: IFTableEditButton) => void;

package/dist/index.js

@@ -23061,12 +23061,13 @@ const SelectTableBox$1 = (props) => {
 
 const defaultWidth = 200;
 const EditForm = React$5.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 = React$5.useRef(null);
     const editFormRef = React$5.useRef(null);
     const buttonRef = React$5.useRef(null);
     const [dropdownOpen, setDropdownOpen] = React$5.useState(false);
+    const [isFocus, setIsFocus] = React$5.useState(false);
     const [itemsField, setItemsField] = React$5.useState([]);
     const { t } = reactI18next.useTranslation();
     useOnClickOutside(editFormRef, () => {
@@ -23108,6 +23109,7 @@ const EditForm = React$5.forwardRef((props, ref) => {
         else {
             setDropdownOpen(true);
         }
+        inputRef?.current.focus();
     };
     const handleOnSubmit = (val) => {
         closeMenu();
@@ -23221,7 +23223,26 @@ const EditForm = React$5.forwardRef((props, ref) => {
                 }
             }) }));
     };
-    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.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 }) }), jsxRuntime.jsx(DropdownMenu$1, { className: 'formula-dropdown icon-dropdown p-0', style: {
+    React$5.useEffect(() => {
+        if (inputRef) {
+            inputRef.current.addEventListener('blur', function () {
+                setIsFocus(false);
+            });
+            inputRef.current.addEventListener('focus', function () {
+                if (!isFocus) {
+                    setIsFocus(true);
+                }
+            });
+        }
+    }, [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: {
+                                        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 })] }) }), jsxRuntime.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,
@@ -41723,6 +41744,12 @@ 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);
         }
     };
@@ -41731,8 +41758,8 @@ const HeaderTableCol = (props) => {
                     left: col.fixedType === 'left' ? objWidthFix[col.index ?? 0] : undefined,
                     right: col.fixedType === 'right' ? objWidthFix[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: 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) => {
                                 if (selectEnable) {
                                     if (e.target.checked) {
@@ -42136,11 +42163,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);
     }
@@ -42224,14 +42251,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 (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.jsx("div", { className: classnames('r-toolbar-item', { 'd-none': editDisable || addDisable }), "aria-disabled": "false", children: jsxRuntime.jsx(Button$1, { color: 'success', outline: true, onClick: handleAdd, className: 'd-flex', children: t('Add item') }) }), (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('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: " 10 " }), jsxRuntime.jsx(DropdownItem$1, { className: 'py-25', tag: 'div', onClick: () => handleAdd(20), children: " 20 " }), jsxRuntime.jsx(DropdownItem$1, { className: 'py-25', tag: 'div', onClick: () => handleAdd(30), children: " 30 " }), jsxRuntime.jsx(DropdownItem$1, { className: 'py-25', tag: 'div', onClick: () => handleAdd(40), children: " 40 " }), jsxRuntime.jsx(DropdownItem$1, { className: 'py-25', tag: 'div', onClick: () => handleAdd(50), children: " 50 " })] })] })] }), (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 ((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}`) : '');
@@ -42459,9 +42486,9 @@ const EditFormInline = React$5.forwardRef((props, ref) => {
                         onFormOpen(rowData, itemsField, setItemsField);
                     }
                     setOnFocus(true);
-                }, onKeyDown: e => formKeyDown(e, handleSubmit), children: template ? template(rowData, indexRow) : displayValue }), jsxRuntime.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 && jsxRuntime.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 (jsxRuntime.jsx("div", { className: "form__element", onKeyDown: e => formItemKeyDown(e, index), children: jsxRuntime.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 (jsxRuntime.jsx("div", { style: { minWidth: 90 }, className: "form__element", onKeyDown: e => formItemKeyDown(e, index), children: jsxRuntime.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 (jsxRuntime.jsx("div", { className: "form__element", onKeyDown: e => formItemKeyDown(e, index), children: jsxRuntime.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));
@@ -42648,7 +42675,7 @@ const TableEdit = React$5.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':
@@ -42759,31 +42786,29 @@ const TableEdit = React$5.forwardRef((props, ref) => {
                 else {
                     valueSelectTree = (!isNullOrUndefined$1(row[col.field]) && row[col.field] !== '') ? findItemInTree(optionsSelectTree, row[col.field]) : '';
                 }
-                return (jsxRuntime.jsx("div", { onKeyDown: (e) => {
+                return (jsxRuntime.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: jsxRuntime.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 (jsxRuntime.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;
@@ -42848,7 +42873,7 @@ const TableEdit = React$5.forwardRef((props, ref) => {
                 return (jsxRuntime.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) {
@@ -42924,7 +42949,7 @@ const TableEdit = React$5.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);
         }
@@ -42991,13 +43016,13 @@ const TableEdit = React$5.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);
@@ -43013,7 +43038,8 @@ const TableEdit = React$5.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]);
@@ -43090,8 +43116,7 @@ const TableEdit = React$5.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);
                                         }
@@ -43099,11 +43124,25 @@ const TableEdit = React$5.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 {
@@ -43128,7 +43167,7 @@ const TableEdit = React$5.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) {
@@ -43138,8 +43177,10 @@ const TableEdit = React$5.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 {
@@ -43242,9 +43283,8 @@ const TableEdit = React$5.forwardRef((props, ref) => {
         else if (col.field === 'checkbox') {
             return (jsxRuntime.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: jsxRuntime.jsx("div", { className: "r-rowcell-div cursor-pointer", onClick: (e) => {
+                    right: col.fixedType === 'right' ? objWidthFix[indexCol] : undefined
+                }, children: 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) {
@@ -43266,7 +43306,7 @@ const TableEdit = React$5.forwardRef((props, ref) => {
                             }
                             e.stopPropagation();
                         }
-                    }, children: jsxRuntime.jsx(Input$1, { checked: isSelected, type: "checkbox", className: "cursor-pointer", onChange: () => { }, style: { textAlign: col.textAlign ?? 'center' } }) }) }, `col-${indexRow}-${indexCol}`));
+                    }, children: jsxRuntime.jsx(Input$1, { checked: isSelected, type: "checkbox", className: "cursor-pointer", style: { textAlign: col.textAlign ?? 'center' } }) }) }, `col-${indexRow}-${indexCol}`));
         }
         else {
             let value = row[col.field];
@@ -43314,8 +43354,20 @@ const TableEdit = React$5.forwardRef((props, ref) => {
                         }
                     }, 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: {
                                 textAlign: col.textAlign ? col.textAlign : 'left'
-                            }, children: [typeDis === 1 && !refreshRow ? RenderEdit(row, col, indexCol, indexRow) : jsxRuntime.jsx(jsxRuntime.Fragment, { children: typeDis === 2 ? (col.template && col.template(row, indexRow)) ?? '' : jsxRuntime.jsx("div", { id: `content-${idTable}-row${indexRow}col-${indexCol}`, className: "r-cell-text", children: (col.editType === 'numeric' && Number(row[col.field]) < 0 ? jsxRuntime.jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [" ", `${formatSetting?.prefixNegative ?? '-'}${value}${formatSetting?.suffixNegative ?? ''}`] }) : 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 }) }), (!(typeDis === 1 && !refreshRow) && typeDis !== 2) && jsxRuntime.jsx(UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `content-${idTable}-row${indexRow}col-${indexCol}`, children: (col.editType === 'numeric' && Number(row[col.field]) < 0 ? jsxRuntime.jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [" ", `${formatSetting?.prefixNegative ?? '-'}${value}${formatSetting?.suffixNegative ?? ''}`] }) : value) }), 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('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) => {
+        if (typeDis === 2) {
+            const value = col.template?.(row, indexRow) ?? '';
+            if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {
+                return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { id: `content-${idTable}-row${indexRow}col-${indexCol}`, className: "r-cell-text", children: value }), (!refreshRow && typeDis !== 2) && jsxRuntime.jsx(UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `content-${idTable}-row${indexRow}col-${indexCol}`, children: (col.editType === 'numeric' && Number(row[col.field]) < 0 ? jsxRuntime.jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [" ", `${formatSetting?.prefixNegative ?? '-'}${value}${formatSetting?.suffixNegative ?? ''}`] }) : value) })] }));
+            }
+            else {
+                return value;
+            }
         }
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { id: `content-${idTable}-row${indexRow}col-${indexCol}`, className: "r-cell-text", children: (col.editType === 'numeric' && Number(row[col.field]) < 0 ? jsxRuntime.jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [" ", `${formatSetting?.prefixNegative ?? '-'}${value}${formatSetting?.suffixNegative ?? ''}`] }) : value) }), (!(typeDis === 1 && !refreshRow) && typeDis !== 2) && jsxRuntime.jsx(UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `content-${idTable}-row${indexRow}col-${indexCol}`, children: (col.editType === 'numeric' && Number(row[col.field]) < 0 ? jsxRuntime.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;
@@ -43358,8 +43410,8 @@ const TableEdit = React$5.forwardRef((props, ref) => {
                                                     }) }, `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));
-                                                }) }) : jsxRuntime.jsx(jsxRuntime.Fragment, {}) })] }) }), toolbarSetting?.showBottomToolbar && jsxRuntime.jsx(ToolbarBottom, { handleAdd: () => {
-                                    handleAdd(dataSource, tableElement.current, columnFistEdit, changeDataSource, pagingSetting, setIndexFocus, focusNewElement);
+                                                }) }) : jsxRuntime.jsx(jsxRuntime.Fragment, {}) })] }) }), toolbarSetting?.showBottomToolbar && jsxRuntime.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: () => {