es-grid-template 1.9.18 → 1.9.20

package/es/ali-table/Grid.js

@@ -35,6 +35,7 @@ const Grid = /*#__PURE__*/React.forwardRef((props, ref) => {
     locale,
     fullScreen,
     actionTemplate,
+    bottom,
     theme,
     height,
     minHeight,
@@ -292,7 +293,7 @@ const Grid = /*#__PURE__*/React.forwardRef((props, ref) => {
     },
     theme: theme,
     footerDataSource: footerDataSource
-  })), pagination && !infiniteScroll && /*#__PURE__*/React.createElement(Pagination, _extends({
+  })), bottom, pagination && !infiniteScroll && /*#__PURE__*/React.createElement(Pagination, _extends({
     pageSizeOptions: pageSizeOptions,
     rootClassName: 'pagination-template',
     showSizeChanger: true,

package/es/ali-table/base-table/styles.scss

@@ -42,16 +42,12 @@ $prefix: 'ui-rc' !default;
 .ui-rc-grid-table-wrapper.dark {
 
   .ui-rc-grid-horizontal-scroll-container {
-
-
-      &::-webkit-scrollbar-thumb {
-    background: rgba(255, 255, 255, 0.3);
-  }
-   &::-webkit-scrollbar-thumb:hover {
-    background: rgba(255, 255, 255, 0.5);
-  }
+    &::-webkit-scrollbar-thumb {
+      background: rgba(255, 255, 255, 0.3);
+    }
+    &::-webkit-scrollbar-thumb:hover {
+      background: rgba(255, 255, 255, 0.5);
+    }
   }
-
  
-
 }

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

@@ -4,7 +4,7 @@ import type { Cell, Header, OnChangeFn } from '@tanstack/react-table';
 import type { CSSProperties, ReactElement, ReactNode } from 'react';
 import type { TableLocale } from "rc-master-ui/lib/table/interface";
 import type { PaginationLocale } from 'rc-master-ui/lib/pagination/Pagination';
-import { BaseTableCSSVariables } from '../ali-table/base-table/styles';
+import type { BaseTableCSSVariables } from '../ali-table/base-table/styles';
 declare module "@tanstack/table-core" {
     interface ColumnMeta<any, any> extends ColumnTable {
         rowSpan?: number;
@@ -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 = {
@@ -315,6 +395,7 @@ export type TableProps<RecordType = AnyObject> = {
     }) => void;
     expandable?: ExpandableConfig<RecordType>;
     actionTemplate?: ReactNode | ReactElement | (() => ReactNode | ReactElement);
+    bottom?: ReactNode;
     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'>);

package/es/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;
-    summaryTemplate?: (data: number, key: string) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode;
-    format?: IFormat | ((rowData: any) => IFormat);
-    allowFiltering?: boolean;
+    sumGroup?: boolean;
+    summaryTemplate?: (data: number, key: string) => import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
     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").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode);
+    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").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode | ((args: import("./../../grid-component/type").ColumnTemplate<RecordType>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode);
+    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").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode);
-    headerTemplate?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode | ((column: ColumnTable<RecordType>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode);
-    commandItems?: import("./../../grid-component/type").CommandItem[];
-    children?: ColumnTable<RecordType>[];
+    }) => import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>);
+    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" | "position" | "display" | "minWidth" | "width"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "position" | "display" | "minWidth" | "width">);
-    onCellHeaderStyles?: Omit<CSSProperties, "left" | "right" | "position" | "display" | "minWidth" | "width"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "position" | "display" | "minWidth" | "width">);
-    onCellFooterStyles?: Omit<CSSProperties, "left" | "right" | "position" | "display" | "minWidth" | "width"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "position" | "display" | "minWidth" | "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/es/table-component/header/TableHeadCell2.js

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

package/es/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/es/table-component/header/renderFilter.js

@@ -10,6 +10,16 @@ import { convertDateToDayjs, convertDayjsToDate, convertFormat, getDatepickerFor
 import NumberInput from "../components/number";
 import NumberRange from "../components/number-range";
 import CheckboxFilter from "../components/checkbox-filter/CheckboxFilter";
+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;
+  });
+};
 export const renderFilter = args => {
   const {
     column,
@@ -20,7 +30,9 @@ export const renderFilter = args => {
     dataSourceFilter,
     format,
     doFilter,
-    tableLocal
+    tableLocal,
+    prevFilterValue,
+    triggerVisible
   } = args;
   const {
     format: columnFormat,
@@ -97,10 +109,26 @@ export const renderFilter = args => {
         onChange: value => {
           const newDateRangeValue = value ? [value[0] ? moment(value[0]).format() : '', value[1] ? moment(value[1]).format() : ''] : [];
           setSelectedKeys(newDateRangeValue);
-        }
+        },
+        onOk: value => {
+          const newDateRangeValue = value ? [value[0] ? moment(value[0]).format() : '', value[1] ? moment(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"
         ,

package/es/table-component/hook/utils.d.ts

@@ -67,6 +67,8 @@ export declare const detectSeparators: (str: string) => {
     thousandSeparator: string;
     decimalSeparator: string;
 };
+export declare const isDateValue: (value: any) => boolean;
+export declare const convertFomatedDateToDate: (value: string) => Date | null;
 export declare function isDateString(str: any): boolean;
 export declare function compareDates(date1: any, date2: any): boolean;
 export declare function compareDate(itemValue: any, value: any): boolean;

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/lib/ali-table/Grid.js

@@ -45,6 +45,7 @@ const Grid = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     locale,
     fullScreen,
     actionTemplate,
+    bottom,
     theme,
     height,
     minHeight,
@@ -302,7 +303,7 @@ const Grid = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     },
     theme: theme,
     footerDataSource: footerDataSource
-  })), pagination && !infiniteScroll && /*#__PURE__*/_react.default.createElement(_pagination.default, (0, _extends2.default)({
+  })), bottom, pagination && !infiniteScroll && /*#__PURE__*/_react.default.createElement(_pagination.default, (0, _extends2.default)({
     pageSizeOptions: _hooks.pageSizeOptions,
     rootClassName: 'pagination-template',
     showSizeChanger: true,