react-table-edit 1.4.17 → 1.4.19

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

@@ -1,4 +1,4 @@
-import { IFColumnSelectTable } from "../../select-table";
+import { IFColumnSelectTable } from "../../type";
 interface ISelectTableBox {
     id?: string;
     name: string;

package/dist/component/edit-form-inline/select-table/index.d.ts

@@ -1,4 +1,4 @@
-import { IFColumnSelectTable } from "../../select-table";
+import { IFColumnSelectTable } from "../../type";
 interface ISelectTableBox {
     id?: string;
     name: string;

package/dist/component/table/command.d.ts

@@ -5,7 +5,7 @@ type IFDataProps = {
     rowData: any;
     indexRow: number;
     indexFocus?: number;
-    setIndexFocus: Dispatch<SetStateAction<number>>;
+    setIndexFocus?: Dispatch<SetStateAction<number>>;
     handleCommandClick: any;
 };
 declare const CommandElement: (props: IFDataProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -4,6 +4,10 @@ import { UseFormGetValues, UseFormReset, UseFormSetValue } from "react-hook-form
 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';
+/** Loại hiển thị của cột */
+type IViewType = 'text' | 'numeric' | 'datetime' | 'date' | 'checkbox' | '#' | 'command';
+/** Loại loc của cột */
+type IFilterType = 'text' | 'numeric' | 'date' | 'select';
 /** Cấu hình thao tác trên cột */
 export type ICommandItem = {
     /** ID thao tác */
@@ -343,4 +347,65 @@ export type FromItemsField = {
     /** Danh sách lựa chọn (chỉ áp dụng với loại 'select' và 'selectCreatable') */
     options?: any[];
 };
+export type IColumnsVirtualizedAgg = {
+    field: string;
+    value: any;
+    /** Kiểu xem cột */
+    type?: string;
+};
+/** Định nghĩa cột bảng ciew ảo*/
+export type IColumnVirtualizedTable = {
+    /** Tên thuộc tính */
+    field: string;
+    /** Tiêu đề hiển thị ở header */
+    headerText?: string;
+    /** Khóa chính */
+    isPrimarykey?: 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;
+    /** Có hiển thị không */
+    visible?: boolean;
+    /** Kiểu xem cột */
+    type?: IViewType;
+    settingFilter?: IFSettingFilterColumn;
+    /** Căn lề */
+    textAlign?: ITextAlign;
+    /** Cố định trái/phải */
+    fixedType?: 'left' | 'right' | undefined;
+    /** Danh sách thao tác */
+    commandItems?: ICommandItem[];
+    /** Cấu hình cho kiểu numeric */
+    numericSettings?: ISettingNumericElement;
+    /** Danh sách cột con */
+    columns?: IColumnTable[];
+    /** Điều kiện disable cột */
+    disabledCondition?: (row: any) => boolean;
+    /** Template hiển thị khi không ở chế độ edit */
+    template?: (row: any, indexRow: number) => JSX.Element | string | number | undefined;
+    /** Số dòng chiếm (rowspan) */
+    rowspan?: number;
+};
+export type IFSettingFilterColumn = {
+    /** Kiểu lọc cột */
+    filterType?: IFilterType;
+    allowFilter?: boolean;
+    options: any[];
+};
+export type IFOrderTable = {
+    key: string;
+    direction: 'asc' | 'desc';
+};
+export type IFFilterTable = {
+    key: string;
+    value: any;
+    ope: 'startswith' | 'endswith' | 'contains' | 'equal' | 'notequal' | 'greaterthan' | 'greaterthanorequal' | 'lessthan' | 'lessthanorequal';
+};
 export {};

package/dist/component/utils.d.ts

@@ -21,3 +21,28 @@ export declare const FindNodeByPath: (tree: any[], path: string) => {
     firstIndex: number;
     node: any;
 } | null;
+/**
+ * Tính toán cấu trúc bảng từ dữ liệu column dạng cây:
+ * - Tạo header dạng nhiều cấp (header theo chiều dọc)
+ * - Chuyển cột thành dạng phẳng để render nội dung
+ * - Tính toán vị trí cố định trái/phải (fixed column) để hiển thị sticky
+ *
+ * @param columns Mảng cấu trúc cây đại diện cho các cột của bảng
+ * @returns {
+ *   levels: IHeaderColumnTable[][]       // Các hàng header theo cấp
+ *   flat: IColumnVirtualizedTable[]      // Danh sách cột phẳng
+ *   objWidthFixLeft: Record<number, number>      // Offset trái cho cột fixed left
+ *   objWidthFixRight: Record<number, number>     // Offset phải cho cột fixed right
+ *   lastObjWidthFixLeft: number          // Chỉ số cột cuối cùng fixed left
+ *   fisrtObjWidthFixRight: number        // Chỉ số cột đầu tiên fixed right
+ * }
+ */
+export declare const calculateTableStructure: (columns: any[]) => {
+    levels: any[][];
+    flat: any[];
+    flatVisble: any[];
+    objWidthFixLeft: Record<number, number>;
+    objWidthFixRight: Record<number, number>;
+    lastObjWidthFixLeft: number;
+    fisrtObjWidthFixRight: number;
+};

package/dist/component/virtualized-table/content.d.ts

@@ -0,0 +1,22 @@
+import { IColumnVirtualizedTable, IFTableEditFormat } from "../type";
+type IContentColProps = {
+    col: IColumnVirtualizedTable;
+    row: any;
+    indexRow: number;
+    indexCol: number;
+    isSelected: boolean;
+    formatSetting?: IFTableEditFormat;
+    idTable: string;
+    selectedRows: any[];
+    objWidthFixLeft: any;
+    objWidthFixRight: any;
+    lastObjWidthFixLeft: number;
+    fisrtObjWidthFixRight: number;
+    selectEnable?: boolean;
+    isMulti?: boolean;
+    fieldKey: string;
+    setSelectedRows: (value: any[]) => void;
+    handleCommandClick: (id: string, rowData: any, index: number) => void;
+};
+export declare const RenderContentCol: (props: IContentColProps) => false | import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/component/virtualized-table/group-col.d.ts

@@ -0,0 +1,6 @@
+import { IColumnVirtualizedTable } from "../type";
+type IFProps = {
+    contentColumns: IColumnVirtualizedTable[];
+};
+export declare const RenderColGroup: ({ contentColumns }: IFProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/component/virtualized-table/header.d.ts

@@ -0,0 +1,30 @@
+import { Dispatch, SetStateAction } from 'react';
+import { IColumnVirtualizedTable, IFFilterTable, IFOrderTable, IFTableEditFormat } from "../type";
+import 'react-resizable/css/styles.css';
+type IFDataProps = {
+    selectEnable: boolean;
+    dataSource: any[];
+    setSelectedRows: Dispatch<SetStateAction<any[]>>;
+    col: IColumnVirtualizedTable;
+    columns: IColumnVirtualizedTable[];
+    setColumns?: (columns: IColumnVirtualizedTable[]) => void;
+    changeFilter: (data: IFFilterTable[]) => void;
+    changeOrder: (data: IFOrderTable[]) => void;
+    indexCol: number;
+    indexParent: number;
+    objWidthFixLeft: any;
+    objWidthFixRight: any;
+    totalCount: number;
+    lastObjWidthFixLeft: number;
+    fisrtObjWidthFixRight: number;
+    selectedRows: any[];
+    isMulti: boolean;
+    allowFilter?: boolean;
+    allowOrder?: boolean;
+    filterBy: IFFilterTable[];
+    orderBy: IFOrderTable[];
+    container: any;
+    formatSetting?: IFTableEditFormat;
+};
+declare const HeaderTableCol: (props: IFDataProps) => import("react/jsx-runtime").JSX.Element;
+export default HeaderTableCol;

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import { IColumnsVirtualizedAgg, IColumnVirtualizedTable, IFFilterTable, IFOrderTable, IFTableEditFormat, IFTableEditPaging, IFTableEditSearchSetting, IFTableEditToolbar } from '../type';
+type VirtualTableProps = {
+    idTable: string;
+    dataSource: any[];
+    rowHeight?: number;
+    height?: number;
+    columns: IColumnVirtualizedTable[];
+    selectEnable?: boolean;
+    isMutil?: boolean;
+    isLoading?: boolean;
+    formatSetting?: IFTableEditFormat;
+    allowFilter?: boolean;
+    allowOrder?: boolean;
+    pagingSetting?: IFTableEditPaging;
+    toolbarSetting?: IFTableEditToolbar;
+    searchSetting?: IFTableEditSearchSetting;
+    columnsAggregate?: IColumnsVirtualizedAgg[];
+    setColumns?: (columns: IColumnVirtualizedTable[]) => void;
+    commandClick?: (data: any) => void;
+    changeFilter?: (data: IFFilterTable[]) => void;
+    changeOrder?: (data: IFOrderTable[]) => void;
+};
+declare const VirtualTable: React.FC<VirtualTableProps>;
+export default VirtualTable;

package/dist/component/virtualized-table/loading-item.d.ts

@@ -0,0 +1,4 @@
+export declare const SkeletonRow: ({ columns, rowHeight }: {
+    columns: number;
+    rowHeight: number;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/index.d.ts

@@ -8,6 +8,10 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 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';
+/** Loại hiển thị của cột */
+type IViewType = 'text' | 'numeric' | 'datetime' | 'date' | 'checkbox' | '#' | 'command';
+/** Loại loc của cột */
+type IFilterType = 'text' | 'numeric' | 'date' | 'select';
 /** Cấu hình thao tác trên cột */
 type ICommandItem = {
     /** ID thao tác */
@@ -347,6 +351,67 @@ type FromItemsField = {
     /** Danh sách lựa chọn (chỉ áp dụng với loại 'select' và 'selectCreatable') */
     options?: any[];
 };
+type IColumnsVirtualizedAgg = {
+    field: string;
+    value: any;
+    /** Kiểu xem cột */
+    type?: string;
+};
+/** Định nghĩa cột bảng ciew ảo*/
+type IColumnVirtualizedTable = {
+    /** Tên thuộc tính */
+    field: string;
+    /** Tiêu đề hiển thị ở header */
+    headerText?: string;
+    /** Khóa chính */
+    isPrimarykey?: 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;
+    /** Có hiển thị không */
+    visible?: boolean;
+    /** Kiểu xem cột */
+    type?: IViewType;
+    settingFilter?: IFSettingFilterColumn;
+    /** Căn lề */
+    textAlign?: ITextAlign;
+    /** Cố định trái/phải */
+    fixedType?: 'left' | 'right' | undefined;
+    /** Danh sách thao tác */
+    commandItems?: ICommandItem[];
+    /** Cấu hình cho kiểu numeric */
+    numericSettings?: ISettingNumericElement;
+    /** Danh sách cột con */
+    columns?: IColumnTable[];
+    /** Điều kiện disable cột */
+    disabledCondition?: (row: any) => boolean;
+    /** Template hiển thị khi không ở chế độ edit */
+    template?: (row: any, indexRow: number) => JSX.Element | string | number | undefined;
+    /** Số dòng chiếm (rowspan) */
+    rowspan?: number;
+};
+type IFSettingFilterColumn = {
+    /** Kiểu lọc cột */
+    filterType?: IFilterType;
+    allowFilter?: boolean;
+    options: any[];
+};
+type IFOrderTable = {
+    key: string;
+    direction: 'asc' | 'desc';
+};
+type IFFilterTable = {
+    key: string;
+    value: any;
+    ope: 'startswith' | 'endswith' | 'contains' | 'equal' | 'notequal' | 'greaterthan' | 'greaterthanorequal' | 'lessthan' | 'lessthanorequal';
+};
 
 type IFTableEditProps = {
     idTable?: string;
@@ -415,6 +480,31 @@ declare const FindNodeByPath: (tree: any[], path: string) => {
     firstIndex: number;
     node: any;
 } | null;
+/**
+ * Tính toán cấu trúc bảng từ dữ liệu column dạng cây:
+ * - Tạo header dạng nhiều cấp (header theo chiều dọc)
+ * - Chuyển cột thành dạng phẳng để render nội dung
+ * - Tính toán vị trí cố định trái/phải (fixed column) để hiển thị sticky
+ *
+ * @param columns Mảng cấu trúc cây đại diện cho các cột của bảng
+ * @returns {
+ *   levels: IHeaderColumnTable[][]       // Các hàng header theo cấp
+ *   flat: IColumnVirtualizedTable[]      // Danh sách cột phẳng
+ *   objWidthFixLeft: Record<number, number>      // Offset trái cho cột fixed left
+ *   objWidthFixRight: Record<number, number>     // Offset phải cho cột fixed right
+ *   lastObjWidthFixLeft: number          // Chỉ số cột cuối cùng fixed left
+ *   fisrtObjWidthFixRight: number        // Chỉ số cột đầu tiên fixed right
+ * }
+ */
+declare const calculateTableStructure: (columns: any[]) => {
+    levels: any[][];
+    flat: any[];
+    flatVisble: any[];
+    objWidthFixLeft: Record<number, number>;
+    objWidthFixRight: Record<number, number>;
+    lastObjWidthFixLeft: number;
+    fisrtObjWidthFixRight: number;
+};
 
 type IFDataProps$1 = {
     buttonWidth?: number;
@@ -623,4 +713,4 @@ type IFProps = {
 };
 declare const Wizard: React.ForwardRefExoticComponent<IFProps & React.RefAttributes<unknown>>;
 
-export { ExportExcelComponent, FindNodeByPath, type FromItemsField, type IColumnTable, type ICommandItem, type IFColumnSelectTable, type IFColumnSelectTableTree, type IFCurrentPage, type IFCurrentPageConfig, type IFPageSize, type IFPropsDetail, type IFTableEditButton, type IFTableEditFormat, type IFTableEditPaging, type IFTableEditSearchSetting, type IFTableEditToolbar, type IFTableSelectFormat, type IFTableTreeSelectFormat, type IFToolbarOptions, type IHeaderColumnTable, type ISettingFormElement, type ISettingNumericElement, type ISettingSelectElement, ImportExcelComponent, InputStyleComponent, SelectTable, SelectTableTree, TabsMenuComponent, Wizard, checkDecimalSeparator, checkThousandSeparator, TableEdit as default, formartNumberic, formatDateTime, generateUUID, isNullOrUndefined, messageBoxConfirm, messageBoxConfirm2, messageBoxConfirmDelete, messageBoxError, messageHtmlBoxConfirm, messageHtmlBoxError, notificationError, notificationSuccess, roundNumber, useOnClickOutside };
+export { ExportExcelComponent, FindNodeByPath, type FromItemsField, type IColumnTable, type IColumnVirtualizedTable, type IColumnsVirtualizedAgg, type ICommandItem, type IFColumnSelectTable, type IFColumnSelectTableTree, type IFCurrentPage, type IFCurrentPageConfig, type IFFilterTable, type IFOrderTable, type IFPageSize, type IFPropsDetail, type IFSettingFilterColumn, type IFTableEditButton, type IFTableEditFormat, type IFTableEditPaging, type IFTableEditSearchSetting, type IFTableEditToolbar, type IFTableSelectFormat, type IFTableTreeSelectFormat, type IFToolbarOptions, type IHeaderColumnTable, type ISettingFormElement, type ISettingNumericElement, type ISettingSelectElement, ImportExcelComponent, InputStyleComponent, SelectTable, SelectTableTree, TabsMenuComponent, Wizard, calculateTableStructure, checkDecimalSeparator, checkThousandSeparator, TableEdit as default, formartNumberic, formatDateTime, generateUUID, isNullOrUndefined, messageBoxConfirm, messageBoxConfirm2, messageBoxConfirmDelete, messageBoxError, messageHtmlBoxConfirm, messageHtmlBoxError, notificationError, notificationSuccess, roundNumber, useOnClickOutside };