react-table-edit 1.4.12 → 1.4.13

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

@@ -1,16 +1,7 @@
 import { ClipboardEvent, Dispatch, JSX, SetStateAction } from "react";
 import { UseFormGetValues, UseFormReset, UseFormSetValue } from "react-hook-form";
 import { InferType } from "yup";
-export type FromItemsField = {
-    name: string;
-    label: string;
-    type: 'text' | 'numeric' | 'select' | 'selectCreatable';
-    disabled?: boolean;
-    fraction?: number;
-    min?: number;
-    max?: number;
-    options?: any[];
-};
+import { FromItemsField } from "../type";
 type Props = {
     id?: string;
     field?: string;

package/dist/component/select-table/index.d.ts

@@ -1,26 +1,5 @@
 import React, { JSX } from "react";
-export 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;
-};
-export type IFTableSelectFormat = {
-    dateFormat?: string;
-    datetimeFormat?: string;
-    decimalSeparator?: string;
-    thousandSeparator?: string;
-    colorNegative?: string;
-    prefixNegative?: string;
-    suffixNegative?: string;
-};
+import { IFColumnSelectTable, IFTableSelectFormat } from "../type";
 type Props = {
     id?: string;
     value: any;

package/dist/component/table/key-handlers.d.ts

@@ -1,20 +1,22 @@
 import { KeyboardEvent } from "react";
-import { IFTableEditPaging } from "../type";
+import { IColumnTable, IFTableEditPaging } from "../type";
 export interface KeyHandlerParams {
     row: any;
     dataSource: any[];
     indexRow: number;
     indexCol: number;
-    contentColumns: any[];
+    contentColumns: IColumnTable[];
     idElement: string;
     pagingClient?: boolean;
     totalCount: number;
     columnLastEdit: number;
-    moveIndexRowToNewPage: () => void;
     editDisable?: boolean;
     addDisable?: boolean;
-    handleDuplicate: () => void;
     pagingSetting?: IFTableEditPaging;
+    changeDataSource: (data: any[], numberOfRows?: number) => void;
+    rowChange?: (row: any, indexRow: number, field: string) => void;
+    handleDuplicate: () => void;
+    moveIndexRowToNewPage: () => void;
     focusNewElement: (col: number, row: number, onLoad?: boolean) => void;
     setIndexFocus: (index: number) => void;
 }

package/dist/component/type/index.d.ts

@@ -1,154 +1,346 @@
 import { Dispatch, ReactNode, SetStateAction, JSX } from "react";
-import { IFColumnSelectTable } from "../select-table";
-import { FromItemsField } from "../edit-form";
 import { UseFormGetValues, UseFormReset, UseFormSetValue } from "react-hook-form";
+/** 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 */
 export 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) */
 export 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` */
 export 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` */
 export 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ố */
 export 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 */
 export 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 */
 export 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 */
 export 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 */
 export 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 */
 export 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... */
 export 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 */
 export type IFPageSize = {
+    /** Số dòng mỗi trang */
     pageSize: number;
 };
+/** Cấu hình current page */
 export type IFCurrentPage = {
+    /** Trang hiện tại */
     currentPage: number;
 };
+/** Cấu hình current page kèm trang cũ */
 export type IFCurrentPageConfig = {
+    /** Trang hiện tại */
     currentPage: number;
+    /** Trang cũ */
     oldPage: number;
 };
+/** Header bảng hỗ trợ merge cột */
 export 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;
 };
+export 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;
+};
+export 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;
+};
+export 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[];
+};
 export {};