es-grid-template 1.9.19 → 1.9.21

package/es/table-component/hook/utils.js

@@ -727,6 +727,172 @@ export const detectSeparators = str => {
   // Không có dấu hoặc không hợp lệ
   return null;
 };
+export const isDateValue = value => {
+  if (value === null || value === undefined) {
+    return false;
+  }
+
+  // Date object
+  if (value instanceof Date) {
+    return !isNaN(value.getTime());
+  }
+
+  // number timestamp
+  if (typeof value === 'number') {
+    const date = new Date(value);
+    return !isNaN(date.getTime());
+  }
+  if (typeof value !== 'string') return false;
+  const str = value.trim();
+  if (!str) {
+    return false;
+  }
+
+  // Các format date phổ biến
+  const patterns = [
+  // dd/MM/yyyy
+  /^\d{2}\/\d{2}\/\d{4}$/,
+  // d/M/yyyy
+  /^\d{1,2}\/\d{1,2}\/\d{4}$/,
+  // yyyy/MM/dd
+  /^\d{4}\/\d{2}\/\d{2}$/,
+  // yyyy/M/d
+  /^\d{4}\/\d{1,2}\/\d{1,2}$/,
+  // MM/yyyy
+  /^\d{2}\/\d{4}$/,
+  // M/yyyy
+  /^\d{1,2}\/\d{4}$/,
+  // yyyy/MM
+  /^\d{4}\/\d{2}$/,
+  // yyyy/M
+  /^\d{4}\/\d{1,2}$/,
+  // dd-MM-yyyy
+  /^\d{2}-\d{2}-\d{4}$/,
+  // yyyy-MM-dd
+  /^\d{4}-\d{2}-\d{2}$/,
+  // yyyy-M-d
+  /^\d{4}-\d{1,2}-\d{1,2}$/,
+  // ISO datetime
+  /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}$/,
+  // ISO datetime milliseconds
+  /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z?$/,
+  // yyyyMMdd
+  /^\d{8}$/,
+  // dd MMM yyyy
+  /^\d{1,2}\s[A-Za-z]{3}\s\d{4}$/,
+  // MMM dd, yyyy
+  /^[A-Za-z]{3}\s\d{1,2},\s\d{4}$/,
+  // full text date
+  /^[A-Za-z]+,\s[A-Za-z]+\s\d{1,2},\s\d{4}$/];
+  const matched = patterns.some(regex => regex.test(str));
+  if (matched) {
+    return true;
+  }
+
+  // fallback:
+  // nếu regex không match nhưng Date parse được
+  if (!matched) {
+    const fallbackDate = new Date(str);
+    return !isNaN(fallbackDate.getTime());
+  }
+
+  // validate real date
+  const date = new Date(str);
+  return !isNaN(date.getTime());
+};
+export const convertFomatedDateToDate = value => {
+  const monthMap = {
+    Jan: 0,
+    Feb: 1,
+    Mar: 2,
+    Apr: 3,
+    May: 4,
+    Jun: 5,
+    Jul: 6,
+    Aug: 7,
+    Sep: 8,
+    Oct: 9,
+    Nov: 10,
+    Dec: 11
+  };
+  let date = null;
+
+  // dd/MM/yyyy | d/M/yyyy
+  if (/^\d{1,2}\/\d{1,2}\/\d{4}$/.test(value)) {
+    const [d, m, y] = value.split('/').map(Number);
+    date = new Date(y, m - 1, d);
+  }
+
+  // yyyy/MM/dd | yyyy/M/d
+  else if (/^\d{4}\/\d{1,2}\/\d{1,2}$/.test(value)) {
+    const [y, m, d] = value.split('/').map(Number);
+    date = new Date(y, m - 1, d);
+  }
+
+  // MM/yyyy | M/yyyy
+  else if (/^\d{1,2}\/\d{4}$/.test(value)) {
+    const [m, y] = value.split('/').map(Number);
+    date = new Date(y, m - 1, 1);
+  }
+
+  // yyyy/MM | yyyy/M
+  else if (/^\d{4}\/\d{1,2}$/.test(value)) {
+    const [y, m] = value.split('/').map(Number);
+    date = new Date(y, m - 1, 1);
+  }
+
+  // dd-MM-yyyy
+  else if (/^\d{2}-\d{2}-\d{4}$/.test(value)) {
+    const [d, m, y] = value.split('-').map(Number);
+    date = new Date(y, m - 1, d);
+  }
+
+  // yyyy-MM-dd | yyyy-M-d
+  else if (/^\d{4}-\d{1,2}-\d{1,2}$/.test(value)) {
+    const [y, m, d] = value.split('-').map(Number);
+    date = new Date(y, m - 1, d);
+  }
+
+  // ISO datetime
+  else if (/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}$/.test(value)) {
+    date = new Date(value);
+  }
+
+  // ISO datetime milliseconds
+  else if (/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z?$/.test(value)) {
+    date = new Date(value);
+  }
+
+  // yyyyMMdd
+  else if (/^\d{8}$/.test(value)) {
+    const y = Number(value.slice(0, 4));
+    const m = Number(value.slice(4, 6));
+    const d = Number(value.slice(6, 8));
+    date = new Date(y, m - 1, d);
+  }
+
+  // dd MMM yyyy
+  else if (/^\d{1,2}\s[A-Za-z]{3}\s\d{4}$/.test(value)) {
+    const [d, mon, y] = value.split(' ');
+    date = new Date(Number(y), monthMap[mon], Number(d));
+  }
+
+  // MMM dd, yyyy
+  else if (/^[A-Za-z]{3}\s\d{1,2},\s\d{4}$/.test(value)) {
+    const [mon, dayComma, y] = value.split(' ');
+    const d = Number(dayComma.replace(',', ''));
+    date = new Date(Number(y), monthMap[mon], d);
+  }
+
+  // full text date
+  else if (/^[A-Za-z]+,\s[A-Za-z]+\s\d{1,2},\s\d{4}$/.test(value)) {
+    date = new Date(value);
+  }
+  if (!date || isNaN(date.getTime())) {
+    return null;
+  }
+  return date;
+};
 function isDate(value) {
   if (value instanceof Date) {
     return !isNaN(value.getTime());
@@ -786,8 +952,11 @@ export const shouldInclude = (item, queries, ignoreAccents) => {
     } = query;
     const itemValue = item[field];
     let condition = false;
-    const isDateComparison = isDate(itemValue) || isDateString(value);
-    const itemDate = isDateComparison ? new Date(itemValue) : null;
+
+    // const aaa =  convertFomatedDateToDate('25/01/2026')
+
+    const isDateComparison = isDate(itemValue) || isDateString(value) || isDateValue(itemValue) || isDateValue(value);
+    const itemDate = isDateComparison ? isNaN(new Date(itemValue).getTime()) ? convertFomatedDateToDate(itemValue) : new Date(itemValue) : null;
     const queryDate = isDateComparison ? parseToDate(value) : null;
     const itemStr = removeVietnameseTones(itemValue?.toString().toLowerCase?.() ?? '');
     const queryStr = removeVietnameseTones(value?.toString().toLowerCase?.() ?? '');

package/es/table-virtuoso/body/TableBodyRow.js

@@ -66,7 +66,6 @@ const TableBodyRow = ({
           rowData: row.original,
           field: colKey
         })(e);
-        onContextMenu?.(row.original)(e);
       }
     }
   }), visibleCells.map(cell => {

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

@@ -135,95 +135,175 @@ export interface SpanRect {
     right: number;
 }
 export type ColumnTable<RecordType = AnyObject> = {
+    /** Field key dùng để mapping dữ liệu */
     field: string;
+    /** Text hiển thị ở header */
+    headerText?: string;
+    /** Field gốc trước khi transform */
     fieldOriginal?: string;
+    /** Độ rộng column */
     width?: number;
+    /** Độ rộng tối đa */
     maxWidth?: number;
+    /** Độ rộng tối thiểu */
     minWidth?: number;
+    /** Hiển thị trong popup chọn column */
+    showInColumnChoose?: boolean;
+    /** Kiểu dữ liệu của column */
     type?: IColumnType;
+    /** Format hiển thị dữ liệu column type = number */
+    format?: IFormat | ((rowData: any) => IFormat);
+    /**
+       * @deprecated Please use `isSummary` instead.
+       * @since  1.7.25
+       */
     haveSum?: boolean;
+    /** Có tính tổng column type = number hay không
+     *
+     * Mặc định = true
+     */
     isSummary?: boolean;
+    /** Có tính tổng theo group */
+    sumGroup?: boolean;
+    /** Template custom cho ô summary */
     summaryTemplate?: (data: number, key: string) => ReactElement | ReactNode;
-    /** Custom method to get cell props */
-    format?: IFormat | ((rowData: any) => IFormat);
-    allowFiltering?: boolean;
     /**
       * @deprecated Please use `allowSortering` instead.
       * @since  1.7.25
       */
     sorter?: boolean;
+    /** Cho phép filter
+     *
+     * Mặc định = true
+     */
+    allowFiltering?: boolean;
+    /** Cho phép sort dữ liệu
+     *
+     *  Mặc định = true
+     * */
     allowSortering?: boolean;
+    /** Kiểu filter */
+    typeFilter?: TypeFilter;
+    /** Toán tử filter mặc định */
     operator?: FilterOperator;
+    /** Ẩn phần chọn toán tử filter
+     *  mặc đinh = false
+     */
     hideOperator?: boolean;
+    /** Custom Placeholder cho input/ Select/ Date.... filter */
     placeholder?: string;
-    showInColumnChoose?: boolean;
-    typeFilter?: TypeFilter;
+    /** Data source cho select/filter */
     source?: any[];
+    /** Hiển thị ô search trong select filter */
     showFilterSearch?: boolean;
-    headerText?: string;
     /**
       * @deprecated Please use `visible` instead.
       * @since  1.7.33
       */
     hidden?: boolean;
+    /** Hiển thị / ẩn column
+     *  mặc định = true
+     * */
     visible?: boolean;
+    /** Tooltip cho header */
     headerTooltip?: boolean | string | (() => ReactNode | ReactElement);
+    /** Tên group header */
     columnGroupText?: string;
-    /**
-     * @deprecated Please use `textAlign` instead.
-     * @since  1.7.34
-     */
-    align?: ITextAlign;
-    textAlign?: ITextAlign;
+    /** Canh lề nội dung header */
     headerTextAlign?: ITextAlign;
-    template?: ReactNode | ReactElement | ((args: ColumnTemplate<RecordType>) => ReactNode | ReactElement);
-    showTooltip?: boolean;
-    tooltipDescription?: string | ((args: {
-        value: any;
-        rowData: RecordType;
-    }) => ReactNode | ReactElement);
+    /** Template custom render header */
     headerTemplate?: React.ReactNode | React.ReactElement | ((column: ColumnTable<RecordType>) => React.ReactNode | React.ReactElement);
-    commandItems?: CommandItem[];
-    children?: ColumnTable<RecordType>[];
-    editType?: EditType | ((rowData?: RecordType) => EditType);
-    disable?: boolean | ((rowData: any) => boolean);
-    editEnable?: boolean | ((rowData: any) => boolean);
-    isClearable?: boolean;
-    maxDate?: any;
-    minDate?: any;
-    maxTime?: any;
-    minTime?: any;
-    max?: number;
-    min?: number;
-    editSelectSettings?: IEditSelectSettings;
-    editFromSettings?: IEditFromSettings;
     /**
      * @deprecated Please use `fixed` instead.
      * @since 1.7.25
      */
     fixedType?: FixedType;
+    /** Fixed column trái/phải */
     fixed?: FixedType;
     /**
-      * @deprecated Please use `wrapSettings` instead.
+      * @deprecated Please use `wrapSettings` on Table instead.
       * @since 1.7.34
       */
     headerTextWrap?: boolean;
+    /** Hiển thị dấu ... khi text overflow */
     ellipsis?: boolean;
+    /** Cho phép resize column
+     *
+     * Mặc định = true
+     */
     allowResizing?: boolean;
-    allowSelection?: boolean | ((rowData: RecordType) => boolean);
+    /**
+     * @deprecated Please use `textAlign` instead.
+     * @since  1.7.34
+     */
+    align?: ITextAlign;
+    /** Canh lề nội dung cell */
+    textAlign?: ITextAlign;
+    /** Template custom render cell */
+    template?: ReactNode | ReactElement | ((args: ColumnTemplate<RecordType>) => ReactNode | ReactElement);
+    /** Hiển thị tooltip cell */
+    showTooltip?: boolean;
+    /** Nội dung tooltip của cell */
+    tooltipDescription?: string | ((args: {
+        value: any;
+        rowData: RecordType;
+    }) => ReactNode | ReactElement);
+    /**
+    * @deprecated Please use `getCellProps` instead.
+    * @since 1.7.34
+    */
     onCellStyles?: Omit<React.CSSProperties, 'display' | 'width' | 'minWidth' | 'left' | 'right' | 'position'> | ((cellValue: any, cell: Cell<RecordType, unknown>) => Omit<React.CSSProperties, 'display' | 'width' | 'minWidth' | 'left' | 'right' | 'position'>);
+    /**
+    * @deprecated Please use `headerCellProps` instead.
+    * @since 1.7.34
+    */
     onCellHeaderStyles?: Omit<React.CSSProperties, 'display' | 'width' | 'minWidth' | 'left' | 'right' | 'position'> | ((cell: Header<RecordType, unknown>) => Omit<React.CSSProperties, 'display' | 'width' | 'minWidth' | 'left' | 'right' | 'position'>);
+    /**
+      * @deprecated Please use `getCellProps` instead.
+      * @since 1.7.34
+      */
+    onCell?: (rowData: RecordType, index: number) => React.TdHTMLAttributes<HTMLTableCellElement>;
     onCellFooterStyles?: Omit<React.CSSProperties, 'display' | 'width' | 'minWidth' | 'left' | 'right' | 'position'> | ((cellValue: any, cell: Header<RecordType, unknown>) => Omit<React.CSSProperties, 'display' | 'width' | 'minWidth' | 'left' | 'right' | 'position'>);
-    sumGroup?: boolean;
     /** Custom data retrieval method */
+    /** Custom method lấy value cell */
     getValue?: (row: any, rowIndex: number) => any;
-    /** Custom render method */
     /** Custom method to get cell props */
     getCellProps?: (value: any, row: any, rowIndex: number) => CellProps;
     /** Props for the header cell */
     headerCellProps?: CellProps;
     /** Custom method to get cell SpanRect */
+    /** Custom merge cell */
     getSpanRect?: (value: any, row: any, rowIndex: number) => SpanRect;
+    /** Kiểu editor khi edit cell */
+    editType?: EditType | ((rowData?: RecordType) => EditType);
+    /** Disable editor */
+    disable?: boolean | ((rowData: any) => boolean);
+    /** Cho phép edit */
+    editEnable?: boolean | ((rowData: any) => boolean);
+    /** Cho phép clear value khi edit */
+    isClearable?: boolean;
+    /** Ngày lớn nhất cho date picker */
+    maxDate?: any;
+    /** Ngày nhỏ nhất cho date picker */
+    minDate?: any;
+    /** Thời gian lớn nhất */
+    maxTime?: any;
+    /** Thời gian nhỏ nhất */
+    minTime?: any;
+    /** Giá trị số lớn nhất khi editType : number */
+    max?: number;
+    /** Giá trị số nhỏ nhất khi editType : number */
+    min?: number;
+    /** Config select editor */
+    editSelectSettings?: IEditSelectSettings;
+    /** Config form editor */
+    editFromSettings?: IEditFromSettings;
+    /** Cho phép select column */
+    allowSelection?: boolean | ((rowData: RecordType) => boolean);
+    /** Danh sách command/action trong column type  = command  */
+    commandItems?: CommandItem[];
+    /** Column con (multi header/group column) */
+    children?: ColumnTable<RecordType>[];
 };
 export type ColumnsTable<RecordType = AnyObject> = ColumnTable<RecordType>[];
 export type IFTheme = {

package/lib/group-component/hook/utils.d.ts

@@ -155,42 +155,53 @@ export declare const removeColumns: <RecordType>(columns: ColumnTable<RecordType
 export declare const fixColumnsLeft: <RecordType>(columns: ColumnTable<RecordType>[], fixedFields: string[]) => {
     fixed: string;
     field: string;
+    headerText?: string;
     fieldOriginal?: string;
     width?: number;
     maxWidth?: number;
     minWidth?: number;
+    showInColumnChoose?: boolean;
     type?: IColumnType;
+    format?: IFormat | ((rowData: any) => IFormat);
     haveSum?: boolean;
     isSummary?: boolean;
+    sumGroup?: boolean;
     summaryTemplate?: (data: number, key: string) => import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    format?: IFormat | ((rowData: any) => IFormat);
-    allowFiltering?: boolean;
     sorter?: boolean;
+    allowFiltering?: boolean;
     allowSortering?: boolean;
+    typeFilter?: TypeFilter;
     operator?: FilterOperator;
     hideOperator?: boolean;
     placeholder?: string;
-    showInColumnChoose?: boolean;
-    typeFilter?: TypeFilter;
     source?: any[];
     showFilterSearch?: boolean;
-    headerText?: string;
     hidden?: boolean;
     visible?: boolean;
     headerTooltip?: string | boolean | (() => import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>);
     columnGroupText?: string;
+    headerTextAlign?: import("./../../grid-component/type").ITextAlign;
+    headerTemplate?: import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | ((column: ColumnTable<RecordType>) => import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>);
+    fixedType?: import("./../../grid-component/type").FixedType;
+    headerTextWrap?: boolean;
+    ellipsis?: boolean;
+    allowResizing?: boolean;
     align?: import("./../../grid-component/type").ITextAlign;
     textAlign?: import("./../../grid-component/type").ITextAlign;
-    headerTextAlign?: import("./../../grid-component/type").ITextAlign;
     template?: import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | ((args: import("./../../grid-component/type").ColumnTemplate<RecordType>) => import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>);
     showTooltip?: boolean;
     tooltipDescription?: string | ((args: {
         value: any;
         rowData: RecordType;
     }) => import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>);
-    headerTemplate?: import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | ((column: ColumnTable<RecordType>) => import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>);
-    commandItems?: import("./../../grid-component/type").CommandItem[];
-    children?: ColumnTable<RecordType>[];
+    onCellStyles?: Omit<CSSProperties, "left" | "right" | "display" | "minWidth" | "position" | "width"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "display" | "minWidth" | "position" | "width">);
+    onCellHeaderStyles?: Omit<CSSProperties, "left" | "right" | "display" | "minWidth" | "position" | "width"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "display" | "minWidth" | "position" | "width">);
+    onCell?: (rowData: RecordType, index: number) => import("react").TdHTMLAttributes<HTMLTableCellElement>;
+    onCellFooterStyles?: Omit<CSSProperties, "left" | "right" | "display" | "minWidth" | "position" | "width"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "display" | "minWidth" | "position" | "width">);
+    getValue?: (row: any, rowIndex: number) => any;
+    getCellProps?: (value: any, row: any, rowIndex: number) => import("./../../grid-component/type").CellProps;
+    headerCellProps?: import("./../../grid-component/type").CellProps;
+    getSpanRect?: (value: any, row: any, rowIndex: number) => import("./../../grid-component/type").SpanRect;
     editType?: EditType | ((rowData?: RecordType) => EditType);
     disable?: boolean | ((rowData: any) => boolean);
     editEnable?: boolean | ((rowData: any) => boolean);
@@ -203,18 +214,8 @@ export declare const fixColumnsLeft: <RecordType>(columns: ColumnTable<RecordTyp
     min?: number;
     editSelectSettings?: import("./../../grid-component/type").IEditSelectSettings;
     editFromSettings?: import("./../../grid-component/type").IEditFromSettings;
-    fixedType?: import("./../../grid-component/type").FixedType;
-    headerTextWrap?: boolean;
-    ellipsis?: boolean;
-    allowResizing?: boolean;
     allowSelection?: boolean | ((rowData: RecordType) => boolean);
-    onCellStyles?: Omit<CSSProperties, "left" | "right" | "display" | "minWidth" | "position" | "width"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "display" | "minWidth" | "position" | "width">);
-    onCellHeaderStyles?: Omit<CSSProperties, "left" | "right" | "display" | "minWidth" | "position" | "width"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "display" | "minWidth" | "position" | "width">);
-    onCellFooterStyles?: Omit<CSSProperties, "left" | "right" | "display" | "minWidth" | "position" | "width"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "display" | "minWidth" | "position" | "width">);
-    sumGroup?: boolean;
-    getValue?: (row: any, rowIndex: number) => any;
-    getCellProps?: (value: any, row: any, rowIndex: number) => import("./../../grid-component/type").CellProps;
-    headerCellProps?: import("./../../grid-component/type").CellProps;
-    getSpanRect?: (value: any, row: any, rowIndex: number) => import("./../../grid-component/type").SpanRect;
+    commandItems?: import("./../../grid-component/type").CommandItem[];
+    children?: ColumnTable<RecordType>[];
 }[];
 export declare function sortColumnsByField<T extends ColumnTable>(columns: T[], priorityFields: string[]): T[];

package/lib/table-component/body/EditableCell.js

@@ -533,9 +533,8 @@ const EditableCell = props => {
           placeholder: t && column.placeholder ? t(column.placeholder) : tableLocal?.selectPlaceholder,
           allowClear: column.isClearable ?? false,
           maxTagCount: 'responsive',
-          popupMatchSelectWidth: menuWidth ? menuWidth + 10 : undefined
-          // optionFilterProp="label"
-          ,
+          popupMatchSelectWidth: menuWidth ? menuWidth + 10 : undefined,
+          optionFilterProp: "label",
           popupClassName: 'be-popup-container',
           status: isInvalid ? 'error' : undefined,
           filterOption: filterKey ? (input, option) => {
@@ -672,9 +671,8 @@ const EditableCell = props => {
           placeholder: t && column.placeholder ? t(column.placeholder) : tableLocal?.selectPlaceholder,
           allowClear: column.isClearable ?? false,
           maxTagCount: 'responsive',
-          popupMatchSelectWidth: menuWidth ? menuWidth + 10 : undefined
-          // optionFilterProp="label"
-          ,
+          popupMatchSelectWidth: menuWidth ? menuWidth + 10 : undefined,
+          optionFilterProp: "label",
           popupClassName: 'be-popup-container',
           loadOptions: loadOptions,
           status: isInvalid ? 'error' : undefined,

package/lib/table-component/body/TableBodyCell.js

@@ -191,17 +191,6 @@ const TableBodyCell = props => {
   const record = cell.row.original;
   const columnMeta = cell.column.columnDef.meta ?? {};
   const cellStyles = typeof columnMeta.onCellStyles === 'function' ? columnMeta.onCellStyles(cell.getValue(), cell) : columnMeta.onCellStyles;
-  const tooltipContent = _react.default.useMemo(() => {
-    if (isOpenTooltip === false) {
-      return '';
-    } else {
-      const abc = columnMeta?.tooltipDescription ? typeof columnMeta.tooltipDescription === 'function' ? columnMeta.tooltipDescription({
-        value: cell.getValue(),
-        rowData: record
-      }) : columnMeta.tooltipDescription : cell.getValue();
-      return abc;
-    }
-  }, [cell, columnMeta, isOpenTooltip, record]);
 
   // const tooltipContent: any = (isOpenTooltip === false)
   //   ? ''
@@ -227,6 +216,18 @@ const TableBodyCell = props => {
   const cellValue = cell.getValue();
   const rowIndex = cell.row.index;
   const fomatedValue = (0, _useColumns.renderValueCell)(columnMeta, cellValue, record, rowIndex, colIndex, format, false);
+  const valueCellString = (0, _useColumns.getValueCellString)(columnMeta, cellValue, record, rowIndex, colIndex, format);
+  const tooltipContent = _react.default.useMemo(() => {
+    if (isOpenTooltip === false) {
+      return '';
+    } else {
+      const abc = columnMeta?.tooltipDescription ? typeof columnMeta.tooltipDescription === 'function' ? columnMeta.tooltipDescription({
+        value: cell.getValue(),
+        rowData: record
+      }) : columnMeta.tooltipDescription : valueCellString;
+      return abc;
+    }
+  }, [cell, columnMeta, isOpenTooltip, record, valueCellString]);
   if (cell.column.id === "#") {
     return /*#__PURE__*/_react.default.createElement("div", {
       key: cell.id,

package/lib/table-component/body/TableBodyCellEdit.js

@@ -244,10 +244,13 @@ const TableBodyCellEdit = props => {
   const [isOpenTooltip, setIsOpenTooltip] = _react.default.useState(false);
   const rowError = dataErrors ? dataErrors.find(it => it.id === cell.row.id) : undefined;
   const message = rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : undefined;
-  const tooltipContent = isOpenTooltip === false ? '' : columnMeta?.tooltipDescription ? typeof columnMeta.tooltipDescription === 'function' ? columnMeta.tooltipDescription({
-    value: cell.getValue(),
-    rowData: record
-  }) : columnMeta.tooltipDescription : cell.getValue();
+
+  // const tooltipContent = (isOpenTooltip === false)
+  //   ? ''
+  //   : columnMeta?.tooltipDescription
+  //     ? (typeof columnMeta.tooltipDescription === 'function' ? columnMeta.tooltipDescription({ value: cell.getValue(), rowData: record }) : columnMeta.tooltipDescription)
+  //     : cell.getValue()
+
   const canEdit = (0, _utils.isEditable)(cell.column.columnDef.meta, record) && isRowEditable !== false;
 
   // const allRows = table.getRowModel().rows;
@@ -299,6 +302,19 @@ const TableBodyCellEdit = props => {
   const isLeftPaste = colIdxPaste === pasteRangeState.startColIndex;
   const isRightPaste = colIdxPaste === pasteRangeState.endColIndex;
   const parrents = cell.row.getParentRows();
+  const valeOfCell = cell.getValue();
+  const valueCellString = (0, _useColumns.getValueCellString)(columnMeta, valeOfCell, record, rowNumber, colIndex, format);
+  const tooltipContent = _react.default.useMemo(() => {
+    if (isOpenTooltip === false) {
+      return '';
+    } else {
+      const abc = columnMeta?.tooltipDescription ? typeof columnMeta.tooltipDescription === 'function' ? columnMeta.tooltipDescription({
+        value: cell.getValue(),
+        rowData: record
+      }) : columnMeta.tooltipDescription : valueCellString;
+      return abc;
+    }
+  }, [cell, columnMeta, isOpenTooltip, record, valueCellString]);
   const triggerDragPaste = (pasteState, ctrlKey) => {
     const tmpCols = table.getVisibleLeafColumns();
     const rowPasteIds = (0, _utils.getRowIdsBetween)(table, startPasteCell?.rowId ?? '', endPasteCell?.rowId ?? '');

package/lib/table-component/header/TableHeadCell2.js

@@ -203,7 +203,9 @@ const TableHeadCell2 = props => {
         doFilter,
         format,
         dataSourceFilter,
-        tableLocal
+        tableLocal,
+        prevFilterValue: column.getFilterValue(),
+        triggerVisible
       })), /*#__PURE__*/_react.default.createElement(_antd.Space, {
         style: {
           justifyContent: 'end',

package/lib/table-component/header/renderFilter.d.ts

@@ -16,6 +16,8 @@ type RenderFilterProps<RecordType> = {
     dateRangeLocale?: any;
     doFilter?: (type: boolean) => void;
     tableLocal: any;
+    prevFilterValue?: string[];
+    triggerVisible?: (visible: boolean) => void;
 };
 export declare const renderFilter: <RecordType>(args: RenderFilterProps<RecordType>) => React.JSX.Element;
 export {};

package/lib/table-component/header/renderFilter.js

@@ -19,6 +19,16 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 
 // import type { AnyObject } from './type';
 
+const isEqualDateArray = (arr1, arr2) => {
+  if (arr1?.length !== arr2?.length) {
+    return false;
+  }
+  return arr1?.every((item, index) => {
+    const date1 = new Date(item).getTime();
+    const date2 = new Date(arr2?.[index]).getTime();
+    return date1 === date2;
+  });
+};
 const renderFilter = args => {
   const {
     column,
@@ -29,7 +39,9 @@ const renderFilter = args => {
     dataSourceFilter,
     format,
     doFilter,
-    tableLocal
+    tableLocal,
+    prevFilterValue,
+    triggerVisible
   } = args;
   const {
     format: columnFormat,
@@ -106,10 +118,26 @@ const renderFilter = args => {
         onChange: value => {
           const newDateRangeValue = value ? [value[0] ? (0, _moment.default)(value[0]).format() : '', value[1] ? (0, _moment.default)(value[1]).format() : ''] : [];
           setSelectedKeys(newDateRangeValue);
-        }
+        },
+        onOk: value => {
+          const newDateRangeValue = value ? [value[0] ? (0, _moment.default)(value[0]).format() : '', value[1] ? (0, _moment.default)(value[1]).format() : ''] : [];
+          setSelectedKeys(newDateRangeValue);
+        },
+        onExit: () => {
+          // clear nhưng chưa ấn OK
+          if (!dateRangeValue) {
+            return;
+          }
 
-        // onSelect={(val) => {
-        // }}
+          // Click ok
+          if (!isEqualDateArray(dateRangeValue, prevFilterValue)) {
+            // giá trị khác nhau
+            doFilter?.(true);
+          } else {
+            // giá trị = nhau
+            triggerVisible?.(false);
+          }
+        }
 
         // menuClassName="rc-menu-popup"
         ,