es-grid-template 1.8.88 → 1.8.89

package/es/ali-table/Grid.d.ts

@@ -4,12 +4,18 @@ import React from "react";
 import './base-table/styles.scss';
 import type { TableProps } from "../table-component";
 import type { BaseTable } from "./base-table/table";
-declare const Grid: React.ForwardRefExoticComponent<TableProps & {
+import type { VirtualEnum } from "./base-table/interfaces";
+declare const Grid: React.ForwardRefExoticComponent<Omit<TableProps, "useVirtual"> & {
     isFullScreen: boolean;
     setIsFullScreen: Dispatch<SetStateAction<boolean>>;
     pipeline: TablePipeline;
     originData: any[];
     originColumns: any[];
     setVisibleKeys: Dispatch<SetStateAction<any>>;
+    useVirtual?: VirtualEnum | {
+        horizontal?: VirtualEnum;
+        vertical?: VirtualEnum;
+        header?: VirtualEnum;
+    };
 } & React.RefAttributes<BaseTable>>;
 export default Grid;

package/es/ali-table/Grid.js

@@ -3,7 +3,6 @@ import { WebsiteBaseTable } from "./assets/WebsiteBaseTable";
 import { useLocale } from "rc-master-ui/es/locale";
 import React, { useContext } from "react";
 import { Tooltip } from "react-tooltip";
-// @ts-ignore
 import "./base-table/styles.scss";
 import { Toolbar } from 'rc-master-ui';
 import classNames from "classnames";
@@ -50,7 +49,8 @@ const Grid = /*#__PURE__*/React.forwardRef((props, ref) => {
     groupColumns,
     setVisibleKeys,
     footerDataSource,
-    loading
+    loading,
+    useVirtual
 
     // onRowFooterStyles,
     // onRowHeaderStyles
@@ -216,11 +216,7 @@ const Grid = /*#__PURE__*/React.forwardRef((props, ref) => {
     id: id,
     commandClick: commandClick,
     isLoading: loading,
-    useVirtual: {
-      header: false,
-      vertical: true,
-      horizontal: true
-    },
+    useVirtual: useVirtual,
     hasStickyScroll: true,
     isStickyFooter: true,
     isStickyHeader: true,
@@ -309,9 +305,15 @@ const Grid = /*#__PURE__*/React.forwardRef((props, ref) => {
     id: `${id}-tooltip-content`,
     style: {
       zIndex: 1999,
-      maxWidth: 450
+      maxWidth: 450,
+      whiteSpace: 'normal',
+      wordWrap: 'break-word'
     },
-    delayShow: 100
+    delayShow: 100,
+    render: ({
+      content,
+      activeAnchor
+    }) => activeAnchor?.getAttribute('data-tooltip-sort') || content
   }), /*#__PURE__*/React.createElement(Tooltip, {
     id: `${id}-tooltip-error`,
     style: {

package/es/ali-table/InternalTable.js

@@ -7,14 +7,11 @@ import React from "react";
 import "./base-table/styles.scss";
 import { addRowIdArray, filterDataByColumns, groupArrayByColumns, isTreeArray, sortByType, sumFields } from "../table-component/hook/utils";
 import { CustomProvider, ConfigProvider } from 'rc-master-ui';
+import { Modal } from 'antd';
 import { getLocale, getLocales } from "../locale/useLocale";
 import { TableContext } from "./useContext";
 import Grid from "./Grid";
-import { Modal } from "antd";
 import { getParentKeysLarge, getRowsByKeysKeepTreeOrder } from "./utils/selected";
-// import { collectNodes } from "./utils"
-// import { filterColumnsByField } from "./utils/convertColumnsChoose"
-
 const InternalTable = props => {
   const {
     t,
@@ -39,6 +36,7 @@ const InternalTable = props => {
     onSorter,
     footerDataSource,
     summary,
+    useVirtual,
     ...rest
   } = props;
   const prefix = 'ui-rc';
@@ -119,7 +117,8 @@ const InternalTable = props => {
     columns
   }).primaryKey(rowKey)
   // .mapDataSource((dta) => collectNodes(dta, 'pre'))
-  .snapshot('flat').use(features.hiddenColumns({
+  // .snapshot('flat')
+  .use(features.hiddenColumns({
     columns,
     visibleKeys
   })).use(features.treeSelect({
@@ -177,6 +176,7 @@ const InternalTable = props => {
     ignoreAccents,
     currentPage: pagination ? pagination?.currentPage : undefined,
     pageSize: pagination ? pagination?.pageSize : undefined,
+    isDataTree,
     onFilter(val) {
       // const rs  = 
 
@@ -218,6 +218,11 @@ const InternalTable = props => {
     }
   }, /*#__PURE__*/React.createElement(Grid, _extends({}, rest, {
     id: id,
+    useVirtual: {
+      header: false,
+      horizontal: useVirtual?.horizontal ?? true,
+      vertical: useVirtual?.vertical ?? true
+    },
     isFullScreen: isFullScreen,
     pagination: pagination,
     setIsFullScreen: setIsFullScreen,
@@ -259,6 +264,11 @@ const InternalTable = props => {
     style: {}
   }, /*#__PURE__*/React.createElement(Grid, _extends({}, rest, {
     id: id,
+    useVirtual: {
+      header: false,
+      horizontal: useVirtual?.horizontal ?? true,
+      vertical: useVirtual?.vertical ?? true
+    },
     isFullScreen: isFullScreen,
     setIsFullScreen: setIsFullScreen,
     pipeline: pipeline,

package/es/ali-table/pipeline/features/ColumnsChoose.js

@@ -1,12 +1,13 @@
 import useMergedState from "rc-util/es/hooks/useMergedState";
 import React, { Fragment, useState } from "react";
 import styled from "styled-components";
-import { Button, Input, Popover } from "antd";
 import Tree from "rc-master-ui/es/tree";
 import SearchOutlined from "@ant-design/icons/SearchOutlined";
 import { Settings } from "becoxy-icons";
 import { updateColumns1 } from "../../../table-component/hook/utils";
 import { convertColumnsToTreeData, filterColumnsByField } from "../../utils/convertColumnsChoose";
+import { Input, Popover } from "rc-master-ui";
+import Button from "rc-master-ui/es/button";
 const CustomStyle = styled.div.withConfig({
   displayName: "CustomStyle",
   componentId: "es-grid-template__sc-1yz2fsm-0"

package/es/ali-table/pipeline/features/columnCustom.d.ts

@@ -5,6 +5,7 @@ import type { FilterItem, IFormat, IWrapSettings, Sorter, SourceFilter } from '.
 export interface ColumnFeatureOptions {
     id: any;
     columns: any[];
+    isDataTree?: boolean;
     dataSource: any[];
     /** Uncontrolled usage: default column widths array */
     defaultSizes?: number[];

package/es/ali-table/pipeline/features/columnCustom.js

@@ -3,13 +3,13 @@ import { internals } from "../../internals";
 import { collectNodes, makeRecursiveMapper, mergeCellProps } from "../../utils";
 import Resizer from "../../base-table/ColumnResizer";
 import { ArrowDown, ArrowUp, FilterFill, SortCancel } from 'becoxy-icons';
-import { booleanOperator, findItemPath, nonActionColumn, numberOperator, stringOperator, translateOption, updateArrayByKey } from "../../../grid-component/hooks";
+import { booleanOperator, findItemPath, nonActionColumn, numberOperator, pageSizeOptions, stringOperator, translateOption, updateArrayByKey } from "../../../grid-component/hooks";
 import classNames from 'classnames';
 import { Button } from 'antd';
 import { Dropdown, Select, Space } from 'rc-master-ui';
 import { convertFilters, extendsObject, getDefaultOperator, getTypeFilter } from "../../../table-component/hook/utils";
 import { renderFilter } from "../../base-table/renderFilter";
-import ReactDOMServer from 'react-dom/server';
+import { renderValueCell } from "../../../table-component/hook/useColumns";
 function clamp(min, x, max) {
   return Math.max(min, Math.min(max, x));
 }
@@ -19,6 +19,7 @@ export function columnCustom(opts) {
   const stateKeySorter = 'columnsSorter';
   const stateKeyVisible = 'visible';
   const stateKeyTooltip = 'tooltip';
+  const stateKey = 'pagination';
   const stateKeyColumnFilter = 'columnFilter';
 
   // const disableUserSelectWhenResizing = opts.disableUserSelectWhenResizing ?? true
@@ -40,8 +41,9 @@ export function columnCustom(opts) {
     wrapSettings,
     // ignoreAccents,
     dataSource,
-    currentPage,
-    pageSize
+    isDataTree
+    // currentPage = 1,
+    // pageSize
   } = opts;
   const {
     orders = ['descend', 'ascend', 'none'],
@@ -53,6 +55,8 @@ export function columnCustom(opts) {
     const filterState = pipeline.getStateAtKey(stateKeyFilter) ?? [];
     const visible = pipeline.getStateAtKey(stateKeyVisible) ?? '';
     const isOpenTooltip = pipeline.getStateAtKey(stateKeyTooltip) ?? false;
+    const pageSize = opts?.pageSize ?? pipeline.getStateAtKey(stateKey)?.pageSize ?? pageSizeOptions[0];
+    const currentPage = opts?.currentPage ?? pipeline.getStateAtKey(stateKey)?.currentPage ?? 1;
 
     // const data = pipeline.getDataSource()
 
@@ -233,7 +237,8 @@ export function columnCustom(opts) {
       endIndex
     }) => {
       const prevTitle = internals.safeRenderHeader(col);
-      const prevTitleContent = internals.safeRenderHeaderContent(col, t);
+
+      // const prevTitleContent = internals.safeRenderHeaderContent(col, t)
 
       // col: flat columns tính cả column cha
 
@@ -391,13 +396,18 @@ export function columnCustom(opts) {
           })),
           template: args => {
             const {
+              index,
               rowData
             } = args;
+            const a = currentPage && pageSize ? (currentPage - 1) * pageSize + index + 1 : index + 1;
+            const b = () => {
+              return findItemPath(dataSource, rowData, 'rowId', currentPage, pageSize);
+            };
             return /*#__PURE__*/React.createElement("div", {
               style: {
                 display: 'flex'
               }
-            }, prevContent?.(args), /*#__PURE__*/React.createElement("span", null, findItemPath(dataSource, rowData, 'rowId', currentPage, pageSize)));
+            }, prevContent?.(args), /*#__PURE__*/React.createElement("span", null, isDataTree ? b() : a));
           },
           headerCellProps: mergeCellProps(col.headerCellProps ?? {}, {
             style: {
@@ -433,8 +443,8 @@ export function columnCustom(opts) {
         };
       }
       const prevGetCellProps = col?.getCellProps;
-      const headerCustomTooltip = col.headerTooltip;
-      const htmlTooltip = ReactDOMServer.renderToStaticMarkup( /*#__PURE__*/React.createElement(React.Fragment, null, headerCustomTooltip ?? prevTitleContent));
+      const headerCustomTooltip = col.headerTooltip ?? (t ? t(col.headerText) : col.headerText);
+      const htmlTooltip = headerCustomTooltip;
       const hasValue = htmlTooltip.trim().length > 0;
 
       //  Cell thường có thể filter và sort được
@@ -476,16 +486,19 @@ export function columnCustom(opts) {
           color: '#000',
           className: "toolbar-icon",
           "data-tooltip-id": `${id}-tooltip-content`,
-          "data-tooltip-content": locale?.table?.cancelSort ?? tableLocal?.cancelSort
+          "data-tooltip-content": locale?.table?.cancelSort ?? tableLocal?.cancelSort,
+          "data-tooltip-sort": locale?.table?.cancelSort ?? tableLocal?.cancelSort
         }) : /*#__PURE__*/React.createElement(ArrowUp, {
           fontSize: 14,
           color: '#000',
           className: "toolbar-icon",
           "data-tooltip-id": `${id}-tooltip-content`,
-          "data-tooltip-content": locale?.table?.triggerAsc ?? tableLocal?.triggerAsc
+          "data-tooltip-content": locale?.table?.triggerAsc ?? tableLocal?.triggerAsc,
+          "data-tooltip-sort": locale?.table?.triggerAsc ?? tableLocal?.triggerAsc
         }) : /*#__PURE__*/React.createElement(SortCancel, {
           "data-tooltip-id": `${id}-tooltip-content`,
           "data-tooltip-content": locale?.table?.triggerDesc ?? tableLocal?.triggerDesc,
+          "data-tooltip-sort": locale?.table?.triggerDesc ?? tableLocal?.triggerDesc,
           fontSize: 15,
           style: {
             display: 'flex'
@@ -505,7 +518,7 @@ export function columnCustom(opts) {
         })),
         headerCellProps: mergeCellProps(col.headerCellProps ?? {}, {
           'data-tooltip-id': `${id}-tooltip-content`,
-          'data-tooltip-html': !hasValue ? '' : htmlTooltip,
+          'data-tooltip-content': !hasValue ? '' : htmlTooltip,
           style: {
             overflow: 'visible',
             position: 'relative'
@@ -514,15 +527,16 @@ export function columnCustom(opts) {
         getCellProps(value, record, rowIndex) {
           const prevCellProps = prevGetCellProps?.(value, record, rowIndex);
           const cellStyles = typeof col.onCellStyles === 'function' ? col.onCellStyles(value, col) : col.onCellStyles;
+          const fomatedValue = ['color', 'checkbox', 'field'].includes(col.type ?? '') ? '' : renderValueCell(col, value, record, rowIndex, 0, format, false);
           const tooltipContent = isOpenTooltip === false ? '' : col?.tooltipDescription ? typeof col.tooltipDescription === 'function' ? col.tooltipDescription({
             value,
             rowData: record
-          }) : col.tooltipDescription : col.template && typeof col.template !== 'function' ? col.template : value;
+          }) : col.tooltipDescription : fomatedValue;
           return mergeCellProps(prevCellProps, {
             // @ts-ignore
             'data-col-key': col.field,
             'data-tooltip-id': `${id}-tooltip-content`,
-            'data-tooltip-html': ReactDOMServer.renderToStaticMarkup( /*#__PURE__*/React.createElement(React.Fragment, null, tooltipContent)),
+            'data-tooltip-content': tooltipContent,
             style: {
               ...prevCellProps?.style,
               ...cellStyles

package/es/ali-table/pipeline/features/multiSelect.js

@@ -90,9 +90,6 @@ export function multiSelect(opts = {}) {
           checked: checked,
           disabled: isDisabled(row, rowIndex),
           onChange: clickArea === 'checkbox' ? (arg1, arg2) => {
-            // Need to support both antd and fusion APIs
-            // fusion: arg2?.nativeEvent
-            // antd: arg1.nativeEvent
             const nativeEvent = arg2?.nativeEvent ?? arg1.nativeEvent;
             if (nativeEvent) {
               if (opts.stopClickEventPropagation) {

package/es/ali-table/pipeline/features/tips.js

@@ -35,10 +35,7 @@ export function tips() {
           }, /*#__PURE__*/React.createElement(icons.Info, {
             className: "tip-icon"
           }))
-        }, col.features.tips) :
-        /*#__PURE__*/
-        // antd
-        React.createElement(Tooltip, {
+        }, col.features.tips) : /*#__PURE__*/React.createElement(Tooltip, {
           title: col.features.tips
         }, /*#__PURE__*/React.createElement("div", {
           className: "tip-icon-wrapper"

package/es/ali-table/pipeline/features/treeSelect.js

@@ -109,12 +109,10 @@ export function treeSelect(opts) {
 
       if (!isChecked) {
         if (checkedStrategy === 'parent') {
-
           // const nextValue = treeDataHelper.getValueAfterToggle('root')
 
-          // pipeline.setStateAtKey(STATE_KEY, new Set(enabledParentKeys))
-
-          // opts.onChange?.(enabledParentKeys, undefined, 'all')
+          pipeline.setStateAtKey(STATE_KEY, new Set(enabledParentKeys));
+          opts.onChange?.(enabledParentKeys, undefined, 'all');
         } else {
           const nextValue = getAllEnabledKeys(tree, primaryKey, isDisabled);
           pipeline.setStateAtKey(STATE_KEY, nextValue);

package/es/ali-table/utils/convertColumnsChoose.d.ts

@@ -1,4 +1,4 @@
-import type { TreeDataNode } from "antd";
+import { TreeDataNode } from "antd";
 import type { ColumnTable } from "../../table-component";
 export declare function convertColumnsToTreeData(columns: ColumnTable[], groupColumns?: string[], t?: any): TreeDataNode[];
 export declare function filterColumnsByField(columns: ColumnTable[], fieldList: string[]): ColumnTable[];

package/es/ali-table/utils/selected.js

@@ -402,6 +402,7 @@ export function isRowChecked(key, selectedKeys, treeIndex, checkedStrategy, isDi
   // =========================
   if (checkedStrategy === 'parent') {
     // node disable => chỉ true nếu explicit chọn
+    // console.log('isDisabled', isDisabled)
     if (isDisabled) {
       const abc = selectedKeys.has(key);
       return abc;

package/es/ali-table/utils/smartCompare.js

@@ -1,10 +1,10 @@
-/** 比较函数，支持字符串、数字、数组和 null。
- * * 对于字符串将比较两者的字典序；
- * * 对数字将比较两者大小；
- * * null 值在比较时总是小于另一个值；
- * * 对于数组来说，将逐个比较数组中的元素，第一个不相等的比较结果将作为整个数组的比较结果
- *
- * 数组的比较可参考 python 中的元祖比较：
+/** 比较函数，支持字符串、数字、数组和 null。
+ * * 对于字符串将比较两者的字典序；
+ * * 对数字将比较两者大小；
+ * * null 值在比较时总是小于另一个值；
+ * * 对于数组来说，将逐个比较数组中的元素，第一个不相等的比较结果将作为整个数组的比较结果
+ *
+ * 数组的比较可参考 python 中的元祖比较：
  * https://stackoverflow.com/questions/5292303/how-does-tuple-comparison-work-in-python */
 export default function smartCompare(x, y) {
   // 将 null 排在最后面

package/es/grid-component/hooks/utils.d.ts

@@ -52,7 +52,7 @@ export declare const isObjEmpty: (obj: any) => boolean;
 export declare const getColumnsVisible: <T>(columns: ColumnsTable<T>, index: number) => ColumnTable<T>[];
 export declare const updateData: <Record = AnyObject>(initData: Record[], rows: Record[], key: keyof Record) => Record[];
 export declare const parseBooleanToValue: (value: boolean, type: 'boolean' | 'number') => number | boolean;
-export declare const genPresets: (presets?: import("@ant-design/colors").PalettesProps) => import("antd/es/color-picker/interface").PresetsItem[];
+export declare const genPresets: (presets?: import("@ant-design/colors").PalettesProps) => import("rc-master-ui/lib/color-picker/interface").PresetsItem[];
 export declare function findAllChildrenKeys<RecordType>(data: readonly RecordType[], getRowKey: GetRowKey<RecordType>, childrenColumnName: string): Key[];
 export declare function findAllChildrenKeys2<RecordType>(data: readonly RecordType[], rowKey: any, childrenColumnName: string): Key[];
 export declare const flattenArray: <RecordType extends AnyObject = AnyObject>(arr: any[]) => RecordType[];

package/es/grid-component/type.d.ts

@@ -1,8 +1,7 @@
-import type { CheckboxProps, TablePaginationConfig } from 'rc-master-ui';
+import type { CheckboxProps, ColorPickerProps, TablePaginationConfig } from 'rc-master-ui';
 import type { ItemType } from 'rc-master-ui/es/menu/interface';
 import type { Cell, Header, OnChangeFn } from '@tanstack/react-table';
 import type { CSSProperties, ReactElement, ReactNode } from 'react';
-import type { ColorPickerProps } from 'antd';
 import type { TableLocale } from "rc-master-ui/lib/table/interface";
 import type { IOperator } from '../grid-component/hooks';
 import type { PaginationLocale } from 'rc-master-ui/lib/pagination/Pagination';
@@ -235,21 +234,10 @@ export type TableProps<RecordType = AnyObject> = {
     className?: string;
     title?: ReactNode | ((data: RecordType) => ReactNode);
     fullScreenTitle?: ReactNode | (() => ReactNode);
-    editAble?: boolean;
     rowKey?: string;
-    infiniteScroll?: boolean;
-    next?: () => void;
-    onEndReachedThreshold?: number;
-    locale?: Locale;
-    groupAble?: boolean;
-    groupColumns?: string[];
-    groupSetting?: IGroupSetting;
-    onChooseColumns?: (props: IOnChooseColumns) => void;
-    pagination?: false | PaginationConfig;
-    showCustomTooltip?: boolean;
-    sortMultiple?: boolean;
     dataSource: RecordType[];
     columns: ColumnsTable<RecordType>;
+    loading?: boolean;
     height?: number;
     minHeight?: number;
     format?: IFormat;
@@ -257,6 +245,24 @@ export type TableProps<RecordType = AnyObject> = {
     t?: any;
     /** Language code: exp: vi || en || ja || zh .... */
     lang?: string;
+    locale?: Locale;
+    wrapSettings?: IWrapSettings;
+    infiniteScroll?: boolean;
+    next?: () => void;
+    onEndReachedThreshold?: number;
+    /**  Group data by columns */
+    groupAble?: boolean;
+    groupColumns?: string[];
+    groupSetting?: IGroupSetting;
+    /** Toolbar */
+    showToolbar?: boolean;
+    toolbarItems?: ToolbarItem[];
+    showColumnChoose?: boolean;
+    onChooseColumns?: (props: IOnChooseColumns) => void;
+    fullScreen?: boolean;
+    pagination?: false | PaginationConfig;
+    showCustomTooltip?: boolean;
+    /** Context Menu */
     contextMenuItems?: ContextMenuItem[];
     showDefaultContext?: boolean;
     contextMenuHidden?: string[] | ((args?: Omit<ContextInfo<RecordType>, 'item' | 'event'>) => string[]);
@@ -264,8 +270,7 @@ export type TableProps<RecordType = AnyObject> = {
     contextMenuClick?: (args: ContextInfo<RecordType>) => void;
     recordDoubleClick?: (args: RecordDoubleClickEventArgs<RecordType>) => void;
     recordClick?: (args: RecordDoubleClickEventArgs<RecordType>) => void;
-    toolbarItems?: ToolbarItem[];
-    showColumnChoose?: boolean;
+    /** Filter */
     showAdvanceFilter?: boolean;
     allowFiltering?: boolean;
     defaultFilter?: FilterItem[];
@@ -277,9 +282,12 @@ export type TableProps<RecordType = AnyObject> = {
      * ignoreAccents = false => so sánh có dấu + uperrcase sensitive
      * **/
     ignoreAccents?: boolean;
+    /** Sorter */
+    sortMultiple?: boolean;
     allowSortering?: boolean;
     onSorter?: (args: Sorter[]) => void;
     defaultSorter?: Sorter[];
+    /** selected record feature */
     selectionSettings?: SelectionSettings;
     rowSelection?: RowSelection<RecordType>;
     rowSelected?: (args: {
@@ -287,35 +295,37 @@ export type TableProps<RecordType = AnyObject> = {
         rowData: RecordType;
         selected: RecordType | RecordType[];
     }) => void;
-    loading?: boolean;
+    /** resize column width  feature */
     allowResizing?: boolean;
-    showToolbar?: boolean;
-    onDataChange?: (data: RecordType[]) => void;
-    defaultValue?: AnyObject | (() => AnyObject);
     summary?: boolean;
     footerDataSource?: any[];
     showEmptyText?: boolean;
     commandSettings?: CommandSettings;
-    rowClassName?: string | RowClassName<RecordType>;
-    onCellPaste?: ICellPasteModel<RecordType>;
-    onCellChange?: (args: CellChangeArgs<RecordType>, handleCallback: (rowData: any, index: any, value?: any) => void) => void;
-    onCellClick?: (args: ICellClick, callback?: any) => void;
-    rowEditable?: (rowData: RecordType) => boolean;
-    validate?: any;
-    onBlur?: (data: RecordType[]) => void;
+    commandClick?: (args: CommandClick<RecordType>) => void;
     onExpandClick?: (args: {
         expandedKeys: string[];
         key: string;
         rowData: any;
     }) => void;
-    wrapSettings?: IWrapSettings;
-    actionTemplate?: ReactNode | ReactElement | (() => ReactNode | ReactElement);
-    commandClick?: (args: CommandClick<RecordType>) => void;
     expandable?: ExpandableConfig<RecordType>;
-    fullScreen?: boolean;
+    actionTemplate?: ReactNode | ReactElement | (() => ReactNode | ReactElement);
+    rowClassName?: string | RowClassName<RecordType>;
     onRowStyles?: CSSProperties | ((data: RecordType) => CSSProperties);
     onRowHeaderStyles?: Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'> | (() => Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'>);
     onRowFooterStyles?: Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'> | (() => Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'>);
+    useVirtual?: {
+        horizontal?: boolean;
+        vertical?: boolean;
+    };
+    editAble?: boolean;
+    onDataChange?: (data: RecordType[]) => void;
+    defaultValue?: AnyObject | (() => AnyObject);
+    onCellPaste?: ICellPasteModel<RecordType>;
+    onCellChange?: (args: CellChangeArgs<RecordType>, handleCallback: (rowData: any, index: any, value?: any) => void) => void;
+    onCellClick?: (args: ICellClick, callback?: any) => void;
+    rowEditable?: (rowData: RecordType) => boolean;
+    validate?: any;
+    onBlur?: (data: RecordType[]) => void;
 };
 export type ExpandableConfig<RecordType> = {
     expandedRowKeys?: readonly Key[];

package/es/group-component/ColumnsChoose.d.ts

@@ -9,5 +9,6 @@ export type IColumnsChoose<RecordType> = {
     t?: any;
     triggerChangeKeys?: any;
     columnHidden: any;
+    id: any;
 };
 export declare const ColumnsChoose: <RecordType extends object>(props: IColumnsChoose<RecordType>) => React.JSX.Element;

package/es/group-component/ColumnsChoose.js

@@ -1,7 +1,7 @@
 import useMergedState from "rc-util/es/hooks/useMergedState";
 import React, { Fragment, useState } from "react";
 import styled from "styled-components";
-import { Button, Input, Popover, Tooltip } from "antd";
+import { Button, Input, Popover } from "antd";
 import Tree from "rc-master-ui/es/tree";
 import SearchOutlined from "@ant-design/icons/SearchOutlined";
 import { convertColumnsToTreeData, getVisibleColumnKeys1, updateColumns1 } from "./hook/utils";
@@ -18,6 +18,7 @@ export const ColumnsChoose = props => {
     triggerChangeColumns,
     // triggerChangeKeys,
     t,
+    id,
     columnsGroup
   } = props;
   const treeColumns = React.useMemo(() => {
@@ -199,13 +200,12 @@ export const ColumnsChoose = props => {
     onOpenChange: handleClickChange,
     arrow: false,
     zIndex: 1065
-  }, /*#__PURE__*/React.createElement(Tooltip, {
-    arrow: false,
-    title: 'Cài đặt'
   }, /*#__PURE__*/React.createElement(Settings, {
     fontSize: 16,
     style: {
       cursor: 'pointer'
-    }
-  }))));
+    },
+    "data-tooltip-id": `${id}-tooltip-content`,
+    "data-tooltip-content": t ? t('Setting') : 'Cài đặt'
+  })));
 };

package/es/group-component/TableContainerEdit.js

@@ -6,12 +6,12 @@ import { checkDecimalSeparator, checkThousandSeparator, detectSeparators, findIt
 unFlattenData, updateArrayByKey, updateColumnWidthsRecursive, updateOrInsert } from "./hook/utils";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { useForm } from 'react-hook-form';
-import { Button, Modal, Typography, Dropdown } from "antd";
 import Pagination from "rc-master-ui/es/pagination";
 import { numericFormatter, removeNumericFormat } from "react-numeric-component";
 import { TableContext } from "./useContext";
 import { yupResolver } from "@hookform/resolvers/yup";
-import { Toolbar } from "rc-master-ui";
+import { Dropdown, Toolbar } from "rc-master-ui";
+import { Modal, Typography } from "antd";
 import classNames from "classnames";
 import { Collapse2, Expand2, Maximize, Minimize } from "becoxy-icons";
 // import { ColumnsChoose } from "./ColumnsChoose";
@@ -23,6 +23,7 @@ import { ColumnsGroup } from "./ColumnsGroup";
 import { unGroupData } from "../table-virtuoso/hook/utils";
 import { useLocale } from "rc-master-ui/es/locale";
 import { ColumnsChoose } from "../table-component/ColumnsChoose";
+import Button from "rc-master-ui/es/button";
 const MySwal = withReactContent(Swal);
 const {
   Paragraph,
@@ -930,7 +931,9 @@ const TableContainerEdit = props => {
       if (index > -1) {
         triggerChangeData?.(rs);
       }
-    } catch (errInfo) {}
+    } catch (errInfo) {
+      console.log('Validate Failed:', errInfo);
+    }
   };
   const onSubmit2 = (formData, newOriginData) => {
     try {
@@ -948,7 +951,9 @@ const TableContainerEdit = props => {
       if (index > -1) {
         triggerChangeData?.(rs);
       }
-    } catch (errInfo) {}
+    } catch (errInfo) {
+      console.log('Validate Failed:', errInfo);
+    }
   };
   const handleCellChange = args => {
     const {

package/es/group-component/body/EditableCell.js

@@ -9,8 +9,6 @@ import dayjs from "dayjs";
 import moment from "moment";
 import { Controller } from "react-hook-form";
 import { Checkbox, TreeSelect, Select } from "rc-master-ui";
-// import { Select } from "antd"
-
 import { AsyncSelect } from "../components/async-select";
 import { AsyncTableSelect } from "../components/async-table-select";
 import { cyan, green, red, blue } from '@ant-design/colors';