react-table-edit 1.4.12 → 1.4.14

package/dist/index.d.ts

@@ -1,224 +1,352 @@
 import * as React from 'react';
-import React__default, { JSX, ReactNode, Dispatch, SetStateAction } from 'react';
+import React__default, { ReactNode, Dispatch, SetStateAction, JSX } from 'react';
 import { UseFormSetValue, UseFormGetValues, UseFormReset, Control, UseFormWatch, FieldErrors } from 'react-hook-form';
 import { TFunction } from 'react-i18next';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
-type IFColumnSelectTable = {
-    field: string;
-    headerText: string;
-    visible?: boolean;
-    textAlign?: 'left' | 'right' | 'center';
-    type?: 'text' | 'numeric' | 'date' | 'datetime';
-    template?: any;
-    typeCondition?: any;
-    fraction?: number;
-    width?: number;
-    maxWidth?: number;
-    minWidth?: number;
-};
-type IFTableSelectFormat = {
-    dateFormat?: string;
-    datetimeFormat?: string;
-    decimalSeparator?: string;
-    thousandSeparator?: string;
-    colorNegative?: string;
-    prefixNegative?: string;
-    suffixNegative?: string;
-};
-type Props$1 = {
-    id?: string;
-    value: any;
-    options: any[];
-    fieldValue?: string;
-    fieldLabel?: string;
-    textAlign?: 'left' | 'right' | 'center';
-    placeholder?: string;
-    invalid?: boolean;
-    menuWidth?: number;
-    width?: number;
-    isMulti?: boolean;
-    noHeader?: boolean;
-    maxHeight?: number;
-    columns?: IFColumnSelectTable[];
-    isClearable?: boolean;
-    isDisabled?: boolean;
-    allowCreate?: boolean;
-    showFooter?: boolean;
-    formatSetting?: IFTableSelectFormat;
-    component?: string | HTMLElement | React__default.RefObject<HTMLElement> | undefined;
-    formatOptionLabel?: (ele: any) => JSX.Element;
-    loadOptions?: (keyword: string, callback: (rs: any[]) => void) => void;
-    onKeyDown?: (e: React__default.KeyboardEvent<HTMLInputElement>) => any;
-    onOpenMenu?: () => void;
-    handleAdd?: (e?: any) => void;
-    onPaste?: (e: React__default.ClipboardEvent<HTMLInputElement>) => void;
-    onCloseMenu?: () => void;
-    footerComponent?: () => JSX.Element;
-    onChange: (val: any) => void;
-};
-declare const SelectTable: React__default.ForwardRefExoticComponent<Props$1 & React__default.RefAttributes<unknown>>;
-
-type FromItemsField = {
-    name: string;
-    label: string;
-    type: 'text' | 'numeric' | 'select' | 'selectCreatable';
-    disabled?: boolean;
-    fraction?: number;
-    min?: number;
-    max?: number;
-    options?: any[];
-};
-
+/** Căn lề văn bản trong bảng */
 type ITextAlign = 'center' | 'left' | 'right';
+/** Loại chỉnh sửa của cột */
 type IEditType = 'text' | 'numeric' | 'datetime' | 'selectTree' | 'date' | 'select' | 'checkbox' | 'form' | 'formInline' | 'color';
+/** Cấu hình thao tác trên cột */
 type ICommandItem = {
+    /** ID thao tác */
     id: string;
+    /** Màu hiển thị thao tác */
     color?: string;
+    /** Tooltip mô tả thao tác */
     tooltip?: string;
+    /** Icon đại diện thao tác */
     icon?: string;
+    /** Template hiển thị thao tác */
     commandTemplate?: ReactNode;
 };
+/** Cấu hình thanh công cụ (toolbar) */
 type IFToolbarOptions = {
+    /** Vị trí hiển thị (trái, phải, giữa) */
     align: 'left' | 'right' | 'center';
+    /** Template toolbar */
     template: any;
 };
+/** Cấu hình phần tử form khi dùng loại cột `form` */
 type ISettingFormElement = {
+    /** Schema định nghĩa cấu trúc form */
     schema: any;
+    /** Kích thước nhãn */
     labelSize?: 'label-small' | 'label-medium' | 'label-large';
+    /** Chiều rộng popup form */
     menuWidth?: number;
+    /** Chiều cao popup form */
     menuHeight?: number;
+    /** Giá trị hiển thị */
     displayValue?: any;
+    /** Tự mở khi focus */
     openOnFocus?: boolean;
+    /** Cho phép xóa giá trị */
     isClearable?: boolean;
+    /** Sự kiện mở form */
     onFormOpen?: (rowData: any, itemsField: FromItemsField[], setItemsField: Dispatch<SetStateAction<FromItemsField[]>>) => void;
+    /** Sự kiện submit form */
     onFormSubmit?: (rowData: any, setValue: UseFormSetValue<any>, getValues: UseFormGetValues<any>, reset: UseFormReset<any>) => void;
+    /** Footer tùy chỉnh trong form */
     footerTemplate?: (rowData: any) => JSX.Element;
+    /** Sự kiện thay đổi trường dữ liệu */
     onChangeField?: (rowData: any, field: string, setValue: UseFormSetValue<any>, getValues: UseFormGetValues<any>) => void;
+    /** Sự kiện thay đổi form */
     onChange?: (rowData: any) => void;
 };
+/** Cấu hình cho cột kiểu `select` */
 type ISettingSelectElement = {
+    /** Cho phép xóa giá trị */
     isClearable?: boolean;
+    /** Cho phép chọn nhiều */
     isMulti?: boolean;
+    /** Không hiển thị header */
     noHeader?: boolean;
+    /** Hiển thị footer */
     showFooter?: boolean;
+    /** Tự động chọn các con */
     selectChilds?: boolean;
+    /** Cho phép thêm mới */
     allowCreate?: boolean;
+    /** Giá trị mặc định */
     defaultValue?: any;
+    /** Trường lấy giá trị */
     fieldValue?: string;
+    /** Trường hiển thị nhãn */
     fieldLabel?: string;
+    /** Trường con */
     fieldChild?: string;
+    /** Danh sách options */
     options?: any[];
+    /** Chiều rộng popup chọn */
     widthPopup?: string | number;
+    /** Chiều cao popup chọn */
     heightPopup?: string | number;
+    /** Icon của nhóm chọn */
     iconGroup?: string;
+    /** Sự kiện thêm mới */
     handAddNew?: any;
+    /** Hàm validate option */
     validateOption?: any;
+    /** Trường lấy options */
     optionsField?: string;
+    /** Danh sách cột hiển thị trong bảng chọn */
     columns?: IFColumnSelectTable[];
+    /** Tuỳ chỉnh hiển thị option */
     formatOptionLabel?: (ele: any) => JSX.Element;
+    /** Component footer trong menu chọn */
     footerComponent?: () => JSX.Element;
+    /** Load options động */
     loadOptions?: (keyword: string, callback: (rs: any[]) => void) => void;
+    /** Sự kiện mở menu */
     onOpenMenu?: (row: any, col: IColumnTable, indexRow: number) => void;
 };
+/** Cấu hình cho kiểu số */
 type ISettingNumericElement = {
+    /** Giá trị nhỏ nhất */
     min?: number;
+    /** Giá trị lớn nhất */
     max?: number;
+    /** Số chữ số thập phân */
     fraction?: number;
+    /** Cho phép giá trị âm */
     allowNegative?: boolean;
 };
+/** Định nghĩa cột bảng */
 type IColumnTable = {
+    /** Tên thuộc tính */
     field: string;
+    /** Tiêu đề hiển thị ở header */
     headerText?: string;
+    /** Khóa chính */
     isPrimarykey?: boolean;
+    /** Duy nhất trong bảng */
     isUnikey?: boolean;
+    /** Có tính tổng */
     haveSum?: boolean;
+    /** Có tooltip */
     haveToolTip?: boolean;
+    /** Chiều rộng cột */
     width?: number | string;
+    /** Chiều rộng tối thiểu */
     minWidth?: number | string;
+    /** Chiều rộng tối đa */
     maxWidth?: number | string;
+    /** Cho phép chỉnh sửa */
     editEnable?: boolean;
+    /** Có hiển thị không */
     visible?: boolean;
+    /** Không cho phép thay đổi trạng thái ẩn/hiện */
     invisibleDisable?: boolean;
+    /** Kiểu chỉnh sửa */
     editType?: IEditType;
+    /** Căn lề */
     textAlign?: ITextAlign;
+    /** Cố định trái/phải */
     fixedType?: 'left' | 'right' | undefined;
+    /** Danh sách thao tác */
     commandItems?: ICommandItem[];
+    /** Placeholder trong ô input */
     placeholder?: string;
+    /** Cấu hình cho kiểu numeric */
     numericSettings?: ISettingNumericElement;
+    /** Cấu hình cho kiểu select */
     selectSettings?: ISettingSelectElement;
+    /** Cấu hình cho kiểu form */
     formSettings?: ISettingFormElement;
+    /** Danh sách cột con */
     columns?: IColumnTable[];
+    /** Không cho phép dán giá trị */
     disablePaste?: boolean;
+    /**Giá trị trường callback khi copy xuống các dòng dưới */
+    callbackValue?: (row: any) => any;
+    /** Validate giá trị */
     validate?: (value: any, row: any) => string | undefined;
+    /** Điều kiện disable cột */
     disabledCondition?: (row: any) => boolean;
+    /** Callback khi thay đổi giá trị */
     callback?: (value: any, indexRow: number, item: any) => void;
+    /** Template hiển thị khi không ở chế độ edit */
     template?: (row: any, indexRow: number) => JSX.Element | string | number | undefined;
+    /** Xác định loại edit dựa trên điều kiện */
     editTypeCondition?: (row: any) => string;
+    /** Sự kiện khi paste dữ liệu */
     onPaste?: (dataRow: any, dataPaste: any) => void;
+    /** Xác thực dữ liệu được paste */
     onPasteValidate?: (dataPaste: string, dataRow: any, rowIndex: number) => Promise<any>;
 };
+/** Cấu hình phân trang */
 type IFTableEditPaging = {
+    /** Bật phân trang */
     allowPaging?: boolean;
+    /** Phân trang phía client */
     pagingClient?: boolean;
+    /** Trang hiện tại */
     currentPage?: number;
+    /** Hàm cập nhật trang hiện tại */
     setCurrentPage?: Dispatch<SetStateAction<number>>;
+    /** Hàm cập nhật số dòng mỗi trang */
     setPageSize?: Dispatch<SetStateAction<number>>;
+    /** Số dòng mỗi trang */
     pageSize?: number;
+    /** Tổng số dòng */
     totalItem?: number;
+    /** Các lựa chọn số dòng/trang */
     pageOptions?: number[];
 };
+/** Cấu hình các nút thao tác trên bảng */
 type IFTableEditButton = {
+    /** Vô hiệu hóa nút xóa tất cả */
     deleteAllDisable?: boolean;
+    /** Vô hiệu hóa nút chèn sau */
     insertAfterDisable?: boolean;
+    /** Vô hiệu hóa nút chèn trước */
     insertBeforeDisable?: boolean;
+    /** Vô hiệu hóa nút nhân bản */
     duplicateDisable?: boolean;
 };
+/** Cấu hình toolbar bảng */
 type IFTableEditToolbar = {
+    /** Hiển thị thanh công cụ trên */
     showTopToolbar?: boolean;
+    /** Danh sách toolbar trên */
     toolbarOptions?: IFToolbarOptions[];
+    /** Danh sách toolbar dưới */
     toolbarBottomOptions?: IFToolbarOptions[];
+    /** Hiển thị thanh công cụ dưới */
     showBottomToolbar?: boolean;
 };
+/** Cấu hình tìm kiếm trong bảng */
 type IFTableEditSearchSetting = {
+    /** Bật tìm kiếm */
     searchEnable?: boolean;
+    /** Tìm kiếm phía client */
     searchClient?: boolean;
+    /** Từ khóa tìm kiếm */
     searchTerm?: string;
+    /** Các trường dùng để tìm kiếm */
     keyField?: string[];
+    /** Hàm cập nhật từ khóa */
     setSearchTerm?: Dispatch<SetStateAction<string>>;
 };
+/** Cấu hình định dạng số, ngày... */
 type IFTableEditFormat = {
+    /** Định dạng ngày */
     dateFormat?: string;
+    /** Định dạng ngày giờ */
     datetimeFormat?: string;
+    /** Ký tự phân cách phần thập phân */
     decimalSeparator?: string;
+    /** Ký tự phân cách phần nghìn */
     thousandSeparator?: string;
+    /** Màu số âm */
     colorNegative?: string;
+    /** Tiền tố số âm */
     prefixNegative?: string;
+    /** Hậu tố số âm */
     suffixNegative?: string;
 };
+/** Cấu hình page size */
 type IFPageSize = {
+    /** Số dòng mỗi trang */
     pageSize: number;
 };
+/** Cấu hình current page */
 type IFCurrentPage = {
+    /** Trang hiện tại */
     currentPage: number;
 };
+/** Cấu hình current page kèm trang cũ */
 type IFCurrentPageConfig = {
+    /** Trang hiện tại */
     currentPage: number;
+    /** Trang cũ */
     oldPage: number;
 };
+/** Header bảng hỗ trợ merge cột */
 type IHeaderColumnTable = {
+    /** Tên thuộc tính */
     field: string;
+    /** Tiêu đề header */
     headerText?: string;
+    /** Chiều rộng */
     width?: number | string;
+    /** Chiều rộng tối thiểu */
     minWidth?: number | string;
+    /** Chiều rộng tối đa */
     maxWidth?: number | string;
+    /** Hiển thị/ẩn */
     visible?: boolean;
+    /** Số dòng chiếm (rowspan) */
     rowspan?: number;
+    /** Cột con */
     columns?: IColumnTable[];
+    /** Căn lề */
     textAlign?: ITextAlign;
+    /** Cố định trái/phải */
     fixedType?: 'left' | 'right' | undefined;
+    /** Thứ tự cột */
     index?: number;
 };
+type IFColumnSelectTable = {
+    /** Tên thuộc tính trường dữ liệu */
+    field: string;
+    /** Tiêu đề hiển thị ở phần header của cột */
+    headerText: string;
+    /** Cờ cho phép hiển thị hoặc ẩn cột (mặc định là true) */
+    visible?: boolean;
+    /** Căn lề nội dung trong cột: trái, phải, giữa */
+    textAlign?: 'left' | 'right' | 'center';
+    /** Loại dữ liệu của cột: văn bản, số, ngày, ngày giờ */
+    type?: 'text' | 'numeric' | 'date' | 'datetime';
+    /** Template tùy chỉnh nội dung hiển thị trong ô */
+    template?: any;
+    /** Điều kiện thay đổi kiểu dữ liệu của cột */
+    typeCondition?: any;
+    /** Số chữ số sau dấu phẩy (dùng cho số thực) */
+    fraction?: number;
+    /** Chiều rộng cột (tính bằng pixel) */
+    width?: number;
+    /** Chiều rộng tối đa của cột */
+    maxWidth?: number;
+    /** Chiều rộng tối thiểu của cột */
+    minWidth?: number;
+};
+type IFTableSelectFormat = {
+    /** Định dạng ngày (vd: 'dd/MM/yyyy') */
+    dateFormat?: string;
+    /** Định dạng ngày giờ (vd: 'dd/MM/yyyy HH:mm:ss') */
+    datetimeFormat?: string;
+    /** Ký tự phân cách phần thập phân (vd: ',') */
+    decimalSeparator?: string;
+    /** Ký tự phân cách hàng nghìn (vd: '.') */
+    thousandSeparator?: string;
+    /** Màu hiển thị số âm (vd: 'red') */
+    colorNegative?: string;
+    /** Tiền tố hiển thị trước số âm (vd: '(') */
+    prefixNegative?: string;
+    /** Hậu tố hiển thị sau số âm (vd: ')') */
+    suffixNegative?: string;
+};
+type FromItemsField = {
+    /** Tên thuộc tính (dùng làm key khi thao tác dữ liệu) */
+    name: string;
+    /** Nhãn hiển thị cho trường dữ liệu */
+    label: string;
+    /** Loại trường dữ liệu: văn bản, số, chọn, chọn có thể tạo mới */
+    type: 'text' | 'numeric' | 'select' | 'selectCreatable';
+    /** Trường có bị disable hay không (không cho chỉnh sửa) */
+    disabled?: boolean;
+    /** Số chữ số sau dấu phẩy (chỉ áp dụng với loại 'numeric') */
+    fraction?: number;
+    /** Giá trị tối thiểu (chỉ áp dụng với loại 'numeric') */
+    min?: number;
+    /** Giá trị tối đa (chỉ áp dụng với loại 'numeric') */
+    max?: number;
+    /** Danh sách lựa chọn (chỉ áp dụng với loại 'select' và 'selectCreatable') */
+    options?: any[];
+};
 
 type IFTableEditProps = {
     idTable?: string;
@@ -300,6 +428,39 @@ type IFDataProps$1 = {
 };
 declare const TabsMenuComponent: ({ buttonWidth, tabParent, tabChild, resourceCodeParent, resources, resourceCode, windowSize, renderModal }: IFDataProps$1) => react_jsx_runtime.JSX.Element;
 
+type Props$1 = {
+    id?: string;
+    value: any;
+    options: any[];
+    fieldValue?: string;
+    fieldLabel?: string;
+    textAlign?: 'left' | 'right' | 'center';
+    placeholder?: string;
+    invalid?: boolean;
+    menuWidth?: number;
+    width?: number;
+    isMulti?: boolean;
+    noHeader?: boolean;
+    maxHeight?: number;
+    columns?: IFColumnSelectTable[];
+    isClearable?: boolean;
+    isDisabled?: boolean;
+    allowCreate?: boolean;
+    showFooter?: boolean;
+    formatSetting?: IFTableSelectFormat;
+    component?: string | HTMLElement | React__default.RefObject<HTMLElement> | undefined;
+    formatOptionLabel?: (ele: any) => JSX.Element;
+    loadOptions?: (keyword: string, callback: (rs: any[]) => void) => void;
+    onKeyDown?: (e: React__default.KeyboardEvent<HTMLInputElement>) => any;
+    onOpenMenu?: () => void;
+    handleAdd?: (e?: any) => void;
+    onPaste?: (e: React__default.ClipboardEvent<HTMLInputElement>) => void;
+    onCloseMenu?: () => void;
+    footerComponent?: () => JSX.Element;
+    onChange: (val: any) => void;
+};
+declare const SelectTable: React__default.ForwardRefExoticComponent<Props$1 & React__default.RefAttributes<unknown>>;
+
 type IFColumnSelectTableTree = {
     field: string;
     headerText: string;

package/dist/index.js

@@ -42264,7 +42264,7 @@ const ToolbarBottom = ({ handleAdd, handleDuplicate, handleInsertBefore, handleI
                         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("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 + Shift + \u2193 \u0111\u1EC3 sao ch\u00E9p d\u1EEF li\u1EC7u \u00F4 cho c\u00E1c d\u00F2ng d\u01B0\u1EDBi" })] }) })] }) })] })] }) }));
 };
 
 const handleArrowRight = (e, params) => {
@@ -42301,31 +42301,73 @@ const isSelectMenuOpen = (element) => {
     return element && ["select__control--menu-is-open", "select-100__control--menu-is-open", "select-200__control--menu-is-open", "select-300__control--menu-is-open", "select-400__control--menu-is-open", "select-500__control--menu-is-open"].some(className => element.getElementsByClassName(className).length > 0);
 };
 const handleArrowUp = (e, params) => {
-    const { idElement, indexCol, indexRow, pagingClient, pagingSetting, setIndexFocus, focusNewElement } = params;
-    const element = document.getElementById(idElement);
-    if (!isSelectMenuOpen(element)) {
-        if (indexRow > 1) {
-            if (pagingClient && (pagingSetting?.currentPage ?? 0) !== 1 && (indexRow % (pagingSetting?.pageSize ?? 0)) === 1 && pagingSetting?.setCurrentPage) {
-                pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 1) - 1);
-            }
-            setIndexFocus(indexRow - 2);
-            focusNewElement(indexCol, indexRow - 1, true);
+    const { idElement, indexCol, indexRow, pagingClient, pagingSetting, setIndexFocus, focusNewElement, rowChange, changeDataSource, contentColumns, dataSource, row } = params;
+    if ((e.ctrlKey || e.metaKey) && e.shiftKey) {
+        if (indexRow > 0) {
+            const column = contentColumns[indexCol - 1];
+            for (let index = indexRow - 1; index > 0; index--) {
+                const element = dataSource[index];
+                element[column.field ?? ''] = row[column.field ?? ''];
+                if (column.callback && column.callbackValue) {
+                    const value = column.callbackValue(row);
+                    column.callback(value, index, element);
+                }
+                if (rowChange) {
+                    rowChange(element, indexRow, column.field);
+                }
+            }
+            changeDataSource(dataSource);
             e.preventDefault();
             return e.code;
         }
     }
+    else {
+        const element = document.getElementById(idElement);
+        if (!isSelectMenuOpen(element)) {
+            if (indexRow > 1) {
+                if (pagingClient && (pagingSetting?.currentPage ?? 0) !== 1 && (indexRow % (pagingSetting?.pageSize ?? 0)) === 1 && pagingSetting?.setCurrentPage) {
+                    pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 1) - 1);
+                }
+                setIndexFocus(indexRow - 2);
+                focusNewElement(indexCol, indexRow - 1, true);
+                e.preventDefault();
+                return e.code;
+            }
+        }
+    }
 };
 const handleArrowDown = (e, params) => {
-    const { idElement, indexCol, indexRow, totalCount, pagingClient, pagingSetting, setIndexFocus, focusNewElement } = params;
-    const element = document.getElementById(idElement);
-    if (!isSelectMenuOpen(element) && indexRow < totalCount) {
-        if (pagingClient && (indexRow % (pagingSetting?.pageSize ?? 0)) === 0 && pagingSetting?.setCurrentPage) {
-            pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 1) + 1);
-        }
-        setIndexFocus(indexRow);
-        focusNewElement(indexCol, indexRow + 1, true);
-        e.preventDefault();
-        return e.code;
+    const { idElement, indexCol, indexRow, totalCount, pagingClient, pagingSetting, setIndexFocus, focusNewElement, rowChange, changeDataSource, dataSource, contentColumns, row } = params;
+    if ((e.ctrlKey || e.metaKey) && e.shiftKey) {
+        if (indexRow < totalCount) {
+            const column = contentColumns[indexCol - 1];
+            for (let index = indexRow; index < totalCount; index++) {
+                const element = dataSource[index];
+                element[column.field ?? ''] = row[column.field ?? ''];
+                if (column.callback && column.callbackValue) {
+                    const value = column.callbackValue(row);
+                    column.callback(value, index, element);
+                }
+                if (rowChange) {
+                    rowChange(element, indexRow, column.field);
+                }
+            }
+            changeDataSource(dataSource);
+            e.preventDefault();
+            return e.code;
+        }
+    }
+    else {
+        const element = document.getElementById(idElement);
+        if (!isSelectMenuOpen(element) && indexRow < totalCount) {
+            if (pagingClient && (indexRow % (pagingSetting?.pageSize ?? 0)) === 0 && pagingSetting?.setCurrentPage) {
+                pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 1) + 1);
+            }
+            setIndexFocus(indexRow);
+            focusNewElement(indexCol, indexRow + 1, true);
+            e.preventDefault();
+            return e.code;
+        }
     }
 };
 const handleTab = (e, params) => {
@@ -42704,9 +42746,7 @@ const TableEdit = React$5.forwardRef((props, ref) => {
                         }
                         handleDataChange(row, col, indexRow);
                     }, dateFormat: "dd/MM/yyyy HH:mm", onKeyDown: (e) => {
-                        if (checkKeyDown(e, row, col, indexRow + 1, indexCol + 1)) {
-                            return true;
-                        }
+                        checkKeyDown(e, row, col, indexRow + 1, indexCol + 1);
                     } }));
             case 'select':
                 let valueSelect;
@@ -42752,7 +42792,7 @@ const TableEdit = React$5.forwardRef((props, ref) => {
                         }
                         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'), loadOptions: col.selectSettings?.loadOptions, handleAdd: col.selectSettings?.handAddNew ? (e) => col.selectSettings?.handAddNew(e, indexRow, row) : undefined, isMulti: col.selectSettings?.isMulti, noHeader: col.selectSettings?.noHeader, showFooter: col.selectSettings?.showFooter, formatOptionLabel: col.selectSettings?.formatOptionLabel, footerComponent: col.selectSettings?.footerComponent, invalid: (col.validate && !isNullOrUndefined$1(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', allowCreate: col.selectSettings?.allowCreate, onKeyDown: (e) => {
-                        if (checkKeyDown(e, row, col, indexRow + 1, indexCol + 1)) ;
+                        return checkKeyDown(e, row, col, indexRow + 1, indexCol + 1);
                     }, onOpenMenu: () => {
                         if (col.selectSettings?.onOpenMenu) {
                             col.selectSettings?.onOpenMenu(row, col, indexRow);
@@ -42808,7 +42848,7 @@ const TableEdit = React$5.forwardRef((props, ref) => {
                             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)) ;
+                        checkKeyDown(e, row, col, indexRow + 1, indexCol + 1);
                     }, onPaste: (e) => {
                         if (toolbarSetting?.showBottomToolbar && !editDisable && !addDisable && !col.disablePaste) {
                             pasteDataFromExcel(indexRow, indexCol, e);
@@ -42823,7 +42863,7 @@ const TableEdit = React$5.forwardRef((props, ref) => {
                         }
                         handleDataChange(row, col, indexRow);
                     }, onKeyDown: (e) => {
-                        if (checkKeyDown(e, row, col, indexRow + 1, indexCol + 1)) ;
+                        checkKeyDown(e, row, col, indexRow + 1, indexCol + 1);
                     } }));
             case 'numeric':
                 const numericFormatProps = {
@@ -42973,6 +43013,8 @@ const TableEdit = React$5.forwardRef((props, ref) => {
             addDisable,
             editDisable,
             focusNewElement,
+            changeDataSource,
+            rowChange,
             handleDuplicate: () => handleDuplicate(dataSource, indexFocus, fieldKey, defaultValue, fieldUniKey, changeDataSource, tableElement, totalCount, toolbarSetting, buttonSetting, editDisable, addDisable, onDuplicate),
             idElement,
             indexCol,