es-grid-template 1.8.92 → 1.8.93

package/es/ali-table/InternalTable.js

@@ -72,9 +72,6 @@ const InternalTable = props => {
       document.removeEventListener('resize', handleWindowResize);
     };
   }, []);
-  const isDataTree = React.useMemo(() => {
-    return isTreeArray(dataSource);
-  }, [dataSource]);
   const [visibleKeys, setVisibleKeys] = React.useState(undefined);
   const [filterState, setFilterState] = React.useState(undefined);
   const [sortState, setSortState] = React.useState(undefined);
@@ -87,6 +84,9 @@ const InternalTable = props => {
     }
     return addRowIdArray(dataSource);
   }, [dataSource, groupAble, groupColumns, groupSetting]);
+  const isDataTree = React.useMemo(() => {
+    return isTreeArray(convertData);
+  }, [convertData]);
   const mergedData = React.useMemo(() => {
     if (sortState || filterState) {
       return filterDataByColumns(convertData, filterState ?? [], sortState ?? [], [], ignoreAccents);

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

@@ -1,11 +1,14 @@
 import type { ReactElement, ReactNode } from 'react';
 import type React from 'react';
-import type { ColumnTemplate, CommandItem, IFormat, ITextAlign } from '../grid-component/type';
-export type ArtColumnAlign = 'left' | 'center' | 'right';
+import type { ColumnTemplate, CommandItem, FilterOperator, IColumnType, IFormat, ITextAlign, TypeFilter } from '../grid-component/type';
 export type CellProps = React.TdHTMLAttributes<HTMLTableCellElement>;
-export type TypeFilter = 'Text' | 'Date' | 'Time' | 'Datetime' | 'DateRange' | 'Month' | 'Quarter' | 'Year' | 'Week' | 'Number' | 'NumberRange' | 'Dropdown' | 'DropTree' | 'Checkbox' | 'CheckboxTree' | 'CheckboxDropdown';
-export type IColumnType = 'number' | 'time' | 'date' | 'week' | 'month' | 'file' | 'quarter' | 'year' | 'datetime' | 'string' | 'boolean' | 'checkbox' | 'color' | null | undefined;
-export type FilterOperator = 'equal' | 'notEqual' | 'greaterThan' | 'greaterThanOrEqual' | 'lessThan' | 'lessThanOrEqual' | 'startsWith' | 'endsWith' | 'contains';
+export type FilterState = {
+    field: any;
+    key: any;
+    column: ArtColumn;
+    filteredKeys: any[];
+    operator: string | undefined;
+};
 export interface ArtColumnStaticPart {
     /** Column name */
     headerText?: string;

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

@@ -121,14 +121,7 @@ export function columnCustom(opts) {
         if (newVisible) {
           const filterValue = filterColumnState.filteredKeys ?? [];
           const operator = filterColumnState.operator;
-
-          // const filterValueOrigin = fieldOriginal ? (fieldOriginal.getFilterValue() ?? []) as string[] : undefined
-
-          // const operatorValue = (column.getFilterOperator() ?? getDefaultOperator(column)) as string
           const operatorValue = operator ?? getDefaultOperator(column);
-
-          // setSelectedKeys(filterValueOrigin ?? filterValue)
-
           pipeline.setStateAtKey(stateKeyColumnFilter, {
             operator: operatorValue,
             filteredKeys: filterValue,
@@ -443,9 +436,8 @@ export function columnCustom(opts) {
         };
       }
       const prevGetCellProps = col?.getCellProps;
-      const headerCustomTooltip = col.headerTooltip ?? (t ? t(col.headerText) : col.headerText);
+      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
       return {
@@ -518,7 +510,7 @@ export function columnCustom(opts) {
         })),
         headerCellProps: mergeCellProps(col.headerCellProps ?? {}, {
           'data-tooltip-id': `${id}-tooltip-content`,
-          'data-tooltip-content': !hasValue ? '' : htmlTooltip,
+          'data-tooltip-content': htmlTooltip,
           style: {
             overflow: 'visible',
             position: 'relative'

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

@@ -5,6 +5,7 @@ export type IOperator = {
     label: string;
     key: string;
 };
+export type Operator = 'equal' | 'greaterthan' | 'greaterthanorequal' | 'lessthan' | 'lessthanorequal' | 'notequal' | 'startswith' | 'endswith' | 'contains';
 export declare const numberOperator: IOperator[];
 export declare const stringOperator: IOperator[];
 export declare const dateOperator: IOperator[];

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

@@ -3,7 +3,6 @@ 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 { 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';
 declare module "@tanstack/table-core" {
     interface ColumnMeta<any, any> extends ColumnTable {
@@ -98,7 +97,7 @@ export type EditType = 'text' | 'numeric' | 'asyncSelect' | 'date' | 'datetime'
 export type ITextAlign = 'center' | 'left' | 'right';
 export type TypeFilter = 'Text' | 'Date' | 'Time' | 'Datetime' | 'DateRange' | 'Month' | 'Quarter' | 'Year' | 'Week' | 'Number' | 'NumberRange' | 'Dropdown' | 'DropTree' | 'Checkbox' | 'CheckboxTree' | 'CheckboxDropdown';
 export type IColumnType = 'number' | 'time' | 'date' | 'week' | 'month' | 'file' | 'quarter' | 'year' | 'datetime' | 'string' | 'boolean' | 'checkbox' | 'color' | null | undefined;
-export type FilterOperator = 'equal' | 'notEqual' | 'greaterThan' | 'greaterThanOrEqual' | 'lessThan' | 'lessThanOrEqual' | 'startsWith' | 'endsWith' | 'contains';
+export type FilterOperator = 'equal' | 'notequal' | 'greaterthan' | 'greaterthanorequal' | 'lessthan' | 'lessthanorequal' | 'startswith' | 'endswith' | 'contains';
 export type FixedType = 'left' | 'right' | boolean;
 export type SelectMode = 'checkbox' | 'radio' | undefined;
 type IGrid = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24;
@@ -614,7 +613,7 @@ export type Sorter = {
 export type FilterItem = {
     field: string;
     key: string;
-    operator: IOperator;
+    operator: FilterOperator;
     predicate: 'and' | 'or';
     value: any;
 };

package/es/group-component/hook/useFilterOperator.js

@@ -23,9 +23,9 @@ export function customStringFilterFn(row, columnId, filterValue) {
   switch (operator) {
     case 'equal':
       return cellValue === filterValue;
-    case 'startsWith':
+    case 'startswith':
       return cellValue.toLowerCase().startsWith(filterValue.toLowerCase());
-    case 'endsWith':
+    case 'endswith':
       return cellValue.toLowerCase().endsWith(filterValue.toLowerCase());
     default:
       return cellValue.toLowerCase().includes(filterValue.toLowerCase());

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

@@ -162,7 +162,7 @@ export declare const fixColumnsLeft: <RecordType>(columns: ColumnTable<RecordTyp
     type?: IColumnType;
     haveSum?: boolean;
     isSummary?: boolean;
-    summaryTemplate?: (data: number, key: string) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode;
+    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;
@@ -177,18 +177,18 @@ export declare const fixColumnsLeft: <RecordType>(columns: ColumnTable<RecordTyp
     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;
     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);
+    }) => 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>[];
     editType?: EditType | ((rowData?: RecordType) => EditType);

package/es/table-component/InternalTable.js

@@ -33,6 +33,10 @@ const InternalTable = props => {
     expandable,
     onChooseColumns,
     onExpandClick,
+    defaultFilter,
+    defaultSorter,
+    onFilter,
+    onSorter,
     // contextMenuClick,
     // contextMenuOpen,
     height,
@@ -74,8 +78,8 @@ const InternalTable = props => {
       document.removeEventListener('resize', handleWindowResize);
     };
   }, []);
-  const [filterStates, setFilterState] = React.useState(null);
-  const [sorterStates, setSorterStates] = React.useState([]);
+  const [filterStates, setFilterState] = React.useState(undefined);
+  const [sorterStates, setSorterStates] = React.useState(undefined);
   const [isFullScreen, setIsFullScreen] = React.useState(false);
   const [columns, setColumns] = React.useState([]);
   const [isExpandClick, setIsExpandClick] = React.useState(false);
@@ -139,8 +143,8 @@ const InternalTable = props => {
     value: selectedRowKeys
   });
   const mergedData = React.useMemo(() => {
-    return filterDataByColumns(convertData, filterStates, sorterStates, mergedFilterKeys, ignoreAccents);
-  }, [convertData, filterStates, mergedFilterKeys, sorterStates, ignoreAccents]);
+    return filterDataByColumns(convertData, onFilter ? undefined : filterStates ?? defaultFilter, onSorter ? undefined : sorterStates ?? defaultSorter, mergedFilterKeys, ignoreAccents);
+  }, [convertData, filterStates, mergedFilterKeys, sorterStates, ignoreAccents, defaultFilter, defaultSorter, onFilter, onSorter]);
   const columnVisibility = React.useMemo(() => {
     return getInvisibleColumns(columns);
   }, [columns]);
@@ -187,6 +191,10 @@ const InternalTable = props => {
     columnHidden: columnsHiddenKeys ? convertToObj(columnsHiddenKeys) : columnVisibility,
     triggerFilter: setFilterState,
     triggerSorter: setSorterStates,
+    defaultFilter: defaultFilter,
+    defaultSorter: defaultSorter,
+    onFilter: onFilter,
+    onSorter: onSorter,
     setMergedFilterKeys: setMergedFilterKeys,
     mergedFilterKeys: mergedFilterKeys,
     expanded: expanded,

package/es/table-component/TableContainer.js

@@ -34,6 +34,7 @@ const TableContainer = props => {
     contextMenuItems,
     setSorterChange,
     setFilterChange,
+    defaultFilter,
     height,
     minHeight,
     showToolbar,
@@ -290,6 +291,7 @@ const TableContainer = props => {
       onContextMenu,
       setSorterChange,
       setFilterChange,
+      defaultFilter,
       windowSize,
       isDataTree,
       focusedCell,

package/es/table-component/TableContainerEdit.js

@@ -81,6 +81,7 @@ const TableContainerEdit = props => {
     contextMenuItems,
     setSorterChange,
     setFilterChange,
+    defaultFilter,
     onCellPaste,
     // triggerPaste,
     validate,
@@ -1716,6 +1717,7 @@ const TableContainerEdit = props => {
       // onContextMenu,
       setSorterChange,
       setFilterChange,
+      defaultFilter,
       rangeState,
       setRangeState,
       rangePasteState,

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

@@ -36,7 +36,8 @@ const TableHeadCell2 = props => {
     setExpanded,
     expandable,
     dataSource,
-    rowKey
+    rowKey,
+    defaultFilter
   } = useContext(TableContext);
   const [tableLocal] = useLocale('Table');
   const visibleCols = table.getVisibleFlatColumns();
@@ -97,7 +98,8 @@ const TableHeadCell2 = props => {
       if (newVisible) {
         const filterValue = column.getFilterValue() ?? [];
         const filterValueOrigin = fieldOriginal ? fieldOriginal.getFilterValue() ?? [] : undefined;
-        const operatorValue = column.getFilterOperator() ?? getDefaultOperator(column.columnDef?.meta ?? {});
+        const defaultOperatorValue = defaultFilter?.find(it => it.field === originalColumn.field);
+        const operatorValue = column.getFilterOperator() ?? defaultOperatorValue?.operator ?? getDefaultOperator(column.columnDef?.meta ?? {});
         setSelectedKeys(filterValueOrigin ?? filterValue);
         if (fieldOriginal) {
           fieldOriginal.setFilterOperator?.(operatorValue);
@@ -151,7 +153,8 @@ const TableHeadCell2 = props => {
     destroyPopupOnHide: true,
     dropdownRender: () => {
       const type = getTypeFilter(originalColumn);
-      const operatorValue = column.getFilterOperator() ?? getDefaultOperator(originalColumn);
+      const defaultOperatorValue = defaultFilter?.find(it => it.field === originalColumn.field);
+      const operatorValue = column.getFilterOperator() ?? defaultOperatorValue?.operator ?? getDefaultOperator(originalColumn);
       const operatorOptions = ['Checkbox', 'Dropdown', 'DropTree', 'CheckboxDropdown'].includes(type) ? booleanOperator : !type || type === 'Text' ? stringOperator : numberOperator;
       return /*#__PURE__*/React.createElement("div", {
         // className='ui-rc-table-filter-dropdown'

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

@@ -23,9 +23,9 @@ export function customStringFilterFn(row, columnId, filterValue) {
   switch (operator) {
     case 'equal':
       return cellValue === filterValue;
-    case 'startsWith':
+    case 'startswith':
       return cellValue.toLowerCase().startsWith(filterValue.toLowerCase());
-    case 'endsWith':
+    case 'endswith':
       return cellValue.toLowerCase().endsWith(filterValue.toLowerCase());
     default:
       return cellValue.toLowerCase().includes(filterValue.toLowerCase());

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

@@ -8,6 +8,7 @@ import dayjs from "dayjs";
 import type { IPositionCell } from "../useContext";
 import type { ColumnDef } from "@tanstack/react-table";
 import type { TreeDataNode } from "antd";
+import type { FilterState } from "../../ali-table/interfaces";
 export declare const newGuid: () => any;
 export declare const convertDayjsToDate: (dateString: string, format?: string) => Date;
 export declare const convertDateToDayjs: (date: Date | undefined, format?: string) => dayjs.Dayjs;
@@ -72,7 +73,7 @@ export declare function compareDate(itemValue: any, value: any): boolean;
 export declare const removeVietnameseTones: (str: any) => any;
 export declare const shouldInclude: (item: any, queries: any[], ignoreAccents?: boolean) => any;
 export declare function sortData(data: any[], sorter: Sorter[]): any[];
-export declare function filterDataByColumns(data: any[], queries: FilterItem[], sorter: Sorter[], keysFilter: string[] | undefined, ignoreAccents?: boolean): any[];
+export declare function filterDataByColumns(data: any[], queries: FilterItem[] | undefined, sorter: Sorter[] | undefined, keysFilter: string[] | undefined, ignoreAccents?: boolean): any[];
 export declare const getAllRowKey: (data: any[]) => any[];
 export declare const isEditable: <RecordType>(column: ColumnTable, rowData: RecordType) => boolean | ((rowData: any) => boolean);
 export declare const checkFieldKey: (key: string | undefined) => string;
@@ -119,6 +120,7 @@ export declare function addRowsUp(array: any, n: number): {
     addedRows: any[];
 };
 export declare const convertFilters: (filters: any[]) => any[];
+export declare const revertConvertFilters: (clauses: any[]) => FilterState[];
 export declare function getInvisibleColumns(columns: ColumnTable[]): Record<string, boolean>;
 export declare const getAllVisibleKeys: (columns: any[]) => any[];
 export declare const getAllVisibleKeys1: (columns: ColumnTable[]) => any[];

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

@@ -1769,6 +1769,86 @@ export const convertFilters = filters => {
   });
   return result;
 };
+export const revertConvertFilters = clauses => {
+  const map = new Map();
+  clauses.forEach(c => {
+    const k = `${c.key}__${c.field}`;
+    const cur = map.get(k) ?? {
+      key: c.key,
+      field: c.field,
+      items: []
+    };
+    cur.items.push(c);
+    map.set(k, cur);
+  });
+  const result = [];
+  for (const {
+    key,
+    field,
+    items
+  } of map.values()) {
+    // normalize operator strings
+    // const ops = items.map((i: any) => (i.operator ? String(i.operator).toLowerCase() : i.operator))
+
+    // if all predicates are 'or' => checkbox-like multi values
+    if (items.every(i => i.predicate === 'or')) {
+      const filteredKeys = items.map(i => i.value);
+      const operator = items[0]?.operator;
+      const column = {
+        field,
+        typeFilter: 'Checkbox'
+      };
+      result.push({
+        field,
+        key,
+        column,
+        filteredKeys,
+        operator
+      });
+      continue;
+    }
+
+    // handle range (greaterthanorequal + lessthanorequal)
+    const gte = items.find(i => String(i.operator).toLowerCase() === 'greaterthanorequal');
+    const lte = items.find(i => String(i.operator).toLowerCase() === 'lessthanorequal');
+    if (gte || lte) {
+      const a = gte?.value;
+      const b = lte?.value;
+      const filteredKeys = [a, b].filter(v => v !== undefined);
+      const isNum = filteredKeys.every(v => typeof v === 'number' || !isNaN(Number(v)) && String(v).trim() !== '');
+      const typeFilter = isNum ? 'NumberRange' : 'DateRange';
+      const column = {
+        field,
+        typeFilter
+      };
+      result.push({
+        field,
+        key,
+        column,
+        filteredKeys,
+        operator: undefined
+      });
+      continue;
+    }
+
+    // default: single-value (and) or multiple and-predicates -> collect unique values
+    const filteredKeys = Array.from(new Set(items.map(i => i.value)));
+    const operator = items[0]?.operator;
+    const typeFilter = filteredKeys.length === 1 && isDateString(filteredKeys[0]) ? 'Date' : undefined;
+    const column = {
+      field,
+      typeFilter
+    };
+    result.push({
+      field,
+      key,
+      column,
+      filteredKeys,
+      operator
+    });
+  }
+  return result;
+};
 
 // export function getInvisibleColumns(columns: ColumnTable[]): Record<string, boolean> {
 //   const result: Record<string, boolean> = {};

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

@@ -19,7 +19,7 @@ type Props<T> = Omit<TableProps<T>, 'columns'> & {
     isFullScreen: boolean;
     setIsFullScreen: Dispatch<SetStateAction<boolean>>;
     triggerFilter: Dispatch<SetStateAction<any>>;
-    triggerSorter: Dispatch<SetStateAction<Sorter[]>>;
+    triggerSorter: Dispatch<SetStateAction<Sorter[] | undefined>>;
     setIsExpandClick: Dispatch<SetStateAction<boolean>>;
     onContextMenu?: (data: T) => (event: any) => void;
     triggerChangeColumns?: (args: any, keys: any, type: string) => void;

package/es/table-component/table/Grid.js

@@ -14,7 +14,7 @@ import { arrayMove } from '@dnd-kit/sortable';
 import React, { Fragment } from 'react';
 import TableContainer from "../TableContainer";
 import { OperatorFeature } from "../features/operator";
-import { convertFilters, convertToObjTrue, filterByIds, filterDataByColumns, getAllRowKey, isObjEqual } from "../hook/utils";
+import { convertFilters, convertToObjTrue, filterByIds, filterDataByColumns, getAllRowKey, isObjEqual, revertConvertFilters } from "../hook/utils";
 import TableContainerEdit from "../TableContainerEdit";
 import classNames from 'classnames';
 import { GridStyle } from "../style";
@@ -57,6 +57,8 @@ const Grid = props => {
     fullScreenTitle,
     className: tableClassNames,
     setIsExpandClick,
+    defaultFilter,
+    defaultSorter,
     ...rest
   } = props;
   const [columnResizeMode] = React.useState('onChange');
@@ -166,6 +168,25 @@ const Grid = props => {
 
     // debugTable: true
   });
+  React.useEffect(() => {
+    if (defaultFilter) {
+      const a = revertConvertFilters(defaultFilter);
+      const rs = a.map(it => ({
+        id: it.field,
+        value: it.filteredKeys
+      }));
+      setColumnFilters(rs);
+    }
+  }, [defaultFilter]);
+  React.useEffect(() => {
+    if (defaultSorter) {
+      const rs = defaultSorter.map(it => ({
+        id: it.field,
+        desc: it.order === 'descend'
+      }));
+      setSorting(rs);
+    }
+  }, [defaultSorter]);
   React.useEffect(() => {
     if (columnHidden) {
       const abb = table.getVisibleLeafColumns()?.[0];
@@ -292,6 +313,7 @@ const Grid = props => {
     setIsSelectionChange: setIsSelectionChange,
     setSorterChange: setSorterChange,
     setFilterChange: setFilterChange,
+    defaultFilter: defaultFilter,
     height: height ?? minHeight ?? 700,
     minHeight: minHeight,
     pagination: pagination,

package/es/table-component/useContext.d.ts

@@ -1,5 +1,5 @@
 import type { Dispatch, SetStateAction } from 'react';
-import type { ColumnTable, ExpandableConfig, IFormat, IWrapSettings, Locale, PaginationConfig, RangeState, RecordDoubleClickEventArgs, RowClassName, SelectionSettings, SourceFilter } from "./../grid-component/type";
+import type { ColumnTable, ExpandableConfig, FilterItem, IFormat, IWrapSettings, Locale, PaginationConfig, RangeState, RecordDoubleClickEventArgs, RowClassName, SelectionSettings, SourceFilter } from "./../grid-component/type";
 import type { SubmitHandler } from "react-hook-form";
 import type { ExpandedState, Row, Table } from '@tanstack/react-table';
 export type IPositionCell = {
@@ -35,6 +35,7 @@ export interface IContext<T> {
     }>>;
     setSorterChange: Dispatch<SetStateAction<boolean>>;
     setFilterChange: Dispatch<SetStateAction<boolean>>;
+    defaultFilter?: FilterItem[];
     onContextMenu?: (data: T) => (event: any) => void;
     locale?: Locale;
     lang?: string;

package/lib/ali-table/InternalTable.js

@@ -81,9 +81,6 @@ const InternalTable = props => {
       document.removeEventListener('resize', handleWindowResize);
     };
   }, []);
-  const isDataTree = _react.default.useMemo(() => {
-    return (0, _utils.isTreeArray)(dataSource);
-  }, [dataSource]);
   const [visibleKeys, setVisibleKeys] = _react.default.useState(undefined);
   const [filterState, setFilterState] = _react.default.useState(undefined);
   const [sortState, setSortState] = _react.default.useState(undefined);
@@ -96,6 +93,9 @@ const InternalTable = props => {
     }
     return (0, _utils.addRowIdArray)(dataSource);
   }, [dataSource, groupAble, groupColumns, groupSetting]);
+  const isDataTree = _react.default.useMemo(() => {
+    return (0, _utils.isTreeArray)(convertData);
+  }, [convertData]);
   const mergedData = _react.default.useMemo(() => {
     if (sortState || filterState) {
       return (0, _utils.filterDataByColumns)(convertData, filterState ?? [], sortState ?? [], [], ignoreAccents);

package/lib/ali-table/interfaces.d.ts

@@ -1,11 +1,14 @@
 import type { ReactElement, ReactNode } from 'react';
 import type React from 'react';
-import type { ColumnTemplate, CommandItem, IFormat, ITextAlign } from '../grid-component/type';
-export type ArtColumnAlign = 'left' | 'center' | 'right';
+import type { ColumnTemplate, CommandItem, FilterOperator, IColumnType, IFormat, ITextAlign, TypeFilter } from '../grid-component/type';
 export type CellProps = React.TdHTMLAttributes<HTMLTableCellElement>;
-export type TypeFilter = 'Text' | 'Date' | 'Time' | 'Datetime' | 'DateRange' | 'Month' | 'Quarter' | 'Year' | 'Week' | 'Number' | 'NumberRange' | 'Dropdown' | 'DropTree' | 'Checkbox' | 'CheckboxTree' | 'CheckboxDropdown';
-export type IColumnType = 'number' | 'time' | 'date' | 'week' | 'month' | 'file' | 'quarter' | 'year' | 'datetime' | 'string' | 'boolean' | 'checkbox' | 'color' | null | undefined;
-export type FilterOperator = 'equal' | 'notEqual' | 'greaterThan' | 'greaterThanOrEqual' | 'lessThan' | 'lessThanOrEqual' | 'startsWith' | 'endsWith' | 'contains';
+export type FilterState = {
+    field: any;
+    key: any;
+    column: ArtColumn;
+    filteredKeys: any[];
+    operator: string | undefined;
+};
 export interface ArtColumnStaticPart {
     /** Column name */
     headerText?: string;

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

@@ -128,14 +128,7 @@ function columnCustom(opts) {
         if (newVisible) {
           const filterValue = filterColumnState.filteredKeys ?? [];
           const operator = filterColumnState.operator;
-
-          // const filterValueOrigin = fieldOriginal ? (fieldOriginal.getFilterValue() ?? []) as string[] : undefined
-
-          // const operatorValue = (column.getFilterOperator() ?? getDefaultOperator(column)) as string
           const operatorValue = operator ?? (0, _utils2.getDefaultOperator)(column);
-
-          // setSelectedKeys(filterValueOrigin ?? filterValue)
-
           pipeline.setStateAtKey(stateKeyColumnFilter, {
             operator: operatorValue,
             filteredKeys: filterValue,
@@ -450,9 +443,8 @@ function columnCustom(opts) {
         };
       }
       const prevGetCellProps = col?.getCellProps;
-      const headerCustomTooltip = col.headerTooltip ?? (t ? t(col.headerText) : col.headerText);
+      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
       return {
@@ -525,7 +517,7 @@ function columnCustom(opts) {
         })),
         headerCellProps: (0, _utils.mergeCellProps)(col.headerCellProps ?? {}, {
           'data-tooltip-id': `${id}-tooltip-content`,
-          'data-tooltip-content': !hasValue ? '' : htmlTooltip,
+          'data-tooltip-content': htmlTooltip,
           style: {
             overflow: 'visible',
             position: 'relative'

package/lib/grid-component/hooks/constant.d.ts

@@ -5,6 +5,7 @@ export type IOperator = {
     label: string;
     key: string;
 };
+export type Operator = 'equal' | 'greaterthan' | 'greaterthanorequal' | 'lessthan' | 'lessthanorequal' | 'notequal' | 'startswith' | 'endswith' | 'contains';
 export declare const numberOperator: IOperator[];
 export declare const stringOperator: IOperator[];
 export declare const dateOperator: IOperator[];

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

@@ -3,7 +3,6 @@ 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 { 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';
 declare module "@tanstack/table-core" {
     interface ColumnMeta<any, any> extends ColumnTable {
@@ -98,7 +97,7 @@ export type EditType = 'text' | 'numeric' | 'asyncSelect' | 'date' | 'datetime'
 export type ITextAlign = 'center' | 'left' | 'right';
 export type TypeFilter = 'Text' | 'Date' | 'Time' | 'Datetime' | 'DateRange' | 'Month' | 'Quarter' | 'Year' | 'Week' | 'Number' | 'NumberRange' | 'Dropdown' | 'DropTree' | 'Checkbox' | 'CheckboxTree' | 'CheckboxDropdown';
 export type IColumnType = 'number' | 'time' | 'date' | 'week' | 'month' | 'file' | 'quarter' | 'year' | 'datetime' | 'string' | 'boolean' | 'checkbox' | 'color' | null | undefined;
-export type FilterOperator = 'equal' | 'notEqual' | 'greaterThan' | 'greaterThanOrEqual' | 'lessThan' | 'lessThanOrEqual' | 'startsWith' | 'endsWith' | 'contains';
+export type FilterOperator = 'equal' | 'notequal' | 'greaterthan' | 'greaterthanorequal' | 'lessthan' | 'lessthanorequal' | 'startswith' | 'endswith' | 'contains';
 export type FixedType = 'left' | 'right' | boolean;
 export type SelectMode = 'checkbox' | 'radio' | undefined;
 type IGrid = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24;
@@ -614,7 +613,7 @@ export type Sorter = {
 export type FilterItem = {
     field: string;
     key: string;
-    operator: IOperator;
+    operator: FilterOperator;
     predicate: 'and' | 'or';
     value: any;
 };

package/lib/group-component/hook/useFilterOperator.js

@@ -30,9 +30,9 @@ function customStringFilterFn(row, columnId, filterValue) {
   switch (operator) {
     case 'equal':
       return cellValue === filterValue;
-    case 'startsWith':
+    case 'startswith':
       return cellValue.toLowerCase().startsWith(filterValue.toLowerCase());
-    case 'endsWith':
+    case 'endswith':
       return cellValue.toLowerCase().endsWith(filterValue.toLowerCase());
     default:
       return cellValue.toLowerCase().includes(filterValue.toLowerCase());

package/lib/table-component/InternalTable.js

@@ -42,6 +42,10 @@ const InternalTable = props => {
     expandable,
     onChooseColumns,
     onExpandClick,
+    defaultFilter,
+    defaultSorter,
+    onFilter,
+    onSorter,
     // contextMenuClick,
     // contextMenuOpen,
     height,
@@ -83,8 +87,8 @@ const InternalTable = props => {
       document.removeEventListener('resize', handleWindowResize);
     };
   }, []);
-  const [filterStates, setFilterState] = _react.default.useState(null);
-  const [sorterStates, setSorterStates] = _react.default.useState([]);
+  const [filterStates, setFilterState] = _react.default.useState(undefined);
+  const [sorterStates, setSorterStates] = _react.default.useState(undefined);
   const [isFullScreen, setIsFullScreen] = _react.default.useState(false);
   const [columns, setColumns] = _react.default.useState([]);
   const [isExpandClick, setIsExpandClick] = _react.default.useState(false);
@@ -148,8 +152,8 @@ const InternalTable = props => {
     value: selectedRowKeys
   });
   const mergedData = _react.default.useMemo(() => {
-    return (0, _utils.filterDataByColumns)(convertData, filterStates, sorterStates, mergedFilterKeys, ignoreAccents);
-  }, [convertData, filterStates, mergedFilterKeys, sorterStates, ignoreAccents]);
+    return (0, _utils.filterDataByColumns)(convertData, onFilter ? undefined : filterStates ?? defaultFilter, onSorter ? undefined : sorterStates ?? defaultSorter, mergedFilterKeys, ignoreAccents);
+  }, [convertData, filterStates, mergedFilterKeys, sorterStates, ignoreAccents, defaultFilter, defaultSorter, onFilter, onSorter]);
   const columnVisibility = _react.default.useMemo(() => {
     return (0, _utils.getInvisibleColumns)(columns);
   }, [columns]);
@@ -196,6 +200,10 @@ const InternalTable = props => {
     columnHidden: columnsHiddenKeys ? (0, _utils.convertToObj)(columnsHiddenKeys) : columnVisibility,
     triggerFilter: setFilterState,
     triggerSorter: setSorterStates,
+    defaultFilter: defaultFilter,
+    defaultSorter: defaultSorter,
+    onFilter: onFilter,
+    onSorter: onSorter,
     setMergedFilterKeys: setMergedFilterKeys,
     mergedFilterKeys: mergedFilterKeys,
     expanded: expanded,

package/lib/table-component/TableContainer.js

@@ -41,6 +41,7 @@ const TableContainer = props => {
     contextMenuItems,
     setSorterChange,
     setFilterChange,
+    defaultFilter,
     height,
     minHeight,
     showToolbar,
@@ -297,6 +298,7 @@ const TableContainer = props => {
       onContextMenu,
       setSorterChange,
       setFilterChange,
+      defaultFilter,
       windowSize,
       isDataTree,
       focusedCell,

package/lib/table-component/TableContainerEdit.js

@@ -88,6 +88,7 @@ const TableContainerEdit = props => {
     contextMenuItems,
     setSorterChange,
     setFilterChange,
+    defaultFilter,
     onCellPaste,
     // triggerPaste,
     validate,
@@ -1723,6 +1724,7 @@ const TableContainerEdit = props => {
       // onContextMenu,
       setSorterChange,
       setFilterChange,
+      defaultFilter,
       rangeState,
       setRangeState,
       rangePasteState,

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

@@ -45,7 +45,8 @@ const TableHeadCell2 = props => {
     setExpanded,
     expandable,
     dataSource,
-    rowKey
+    rowKey,
+    defaultFilter
   } = (0, _react.useContext)(_useContext.TableContext);
   const [tableLocal] = (0, _locale.useLocale)('Table');
   const visibleCols = table.getVisibleFlatColumns();
@@ -106,7 +107,8 @@ const TableHeadCell2 = props => {
       if (newVisible) {
         const filterValue = column.getFilterValue() ?? [];
         const filterValueOrigin = fieldOriginal ? fieldOriginal.getFilterValue() ?? [] : undefined;
-        const operatorValue = column.getFilterOperator() ?? (0, _utils.getDefaultOperator)(column.columnDef?.meta ?? {});
+        const defaultOperatorValue = defaultFilter?.find(it => it.field === originalColumn.field);
+        const operatorValue = column.getFilterOperator() ?? defaultOperatorValue?.operator ?? (0, _utils.getDefaultOperator)(column.columnDef?.meta ?? {});
         setSelectedKeys(filterValueOrigin ?? filterValue);
         if (fieldOriginal) {
           fieldOriginal.setFilterOperator?.(operatorValue);
@@ -160,7 +162,8 @@ const TableHeadCell2 = props => {
     destroyPopupOnHide: true,
     dropdownRender: () => {
       const type = (0, _utils.getTypeFilter)(originalColumn);
-      const operatorValue = column.getFilterOperator() ?? (0, _utils.getDefaultOperator)(originalColumn);
+      const defaultOperatorValue = defaultFilter?.find(it => it.field === originalColumn.field);
+      const operatorValue = column.getFilterOperator() ?? defaultOperatorValue?.operator ?? (0, _utils.getDefaultOperator)(originalColumn);
       const operatorOptions = ['Checkbox', 'Dropdown', 'DropTree', 'CheckboxDropdown'].includes(type) ? _hooks.booleanOperator : !type || type === 'Text' ? _hooks.stringOperator : _hooks.numberOperator;
       return /*#__PURE__*/_react.default.createElement("div", {
         // className='ui-rc-table-filter-dropdown'

package/lib/table-component/hook/useFilterOperator.js

@@ -30,9 +30,9 @@ function customStringFilterFn(row, columnId, filterValue) {
   switch (operator) {
     case 'equal':
       return cellValue === filterValue;
-    case 'startsWith':
+    case 'startswith':
       return cellValue.toLowerCase().startsWith(filterValue.toLowerCase());
-    case 'endsWith':
+    case 'endswith':
       return cellValue.toLowerCase().endsWith(filterValue.toLowerCase());
     default:
       return cellValue.toLowerCase().includes(filterValue.toLowerCase());

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

@@ -8,6 +8,7 @@ import dayjs from "dayjs";
 import type { IPositionCell } from "../useContext";
 import type { ColumnDef } from "@tanstack/react-table";
 import type { TreeDataNode } from "antd";
+import type { FilterState } from "../../ali-table/interfaces";
 export declare const newGuid: () => any;
 export declare const convertDayjsToDate: (dateString: string, format?: string) => Date;
 export declare const convertDateToDayjs: (date: Date | undefined, format?: string) => dayjs.Dayjs;
@@ -72,7 +73,7 @@ export declare function compareDate(itemValue: any, value: any): boolean;
 export declare const removeVietnameseTones: (str: any) => any;
 export declare const shouldInclude: (item: any, queries: any[], ignoreAccents?: boolean) => any;
 export declare function sortData(data: any[], sorter: Sorter[]): any[];
-export declare function filterDataByColumns(data: any[], queries: FilterItem[], sorter: Sorter[], keysFilter: string[] | undefined, ignoreAccents?: boolean): any[];
+export declare function filterDataByColumns(data: any[], queries: FilterItem[] | undefined, sorter: Sorter[] | undefined, keysFilter: string[] | undefined, ignoreAccents?: boolean): any[];
 export declare const getAllRowKey: (data: any[]) => any[];
 export declare const isEditable: <RecordType>(column: ColumnTable, rowData: RecordType) => boolean | ((rowData: any) => boolean);
 export declare const checkFieldKey: (key: string | undefined) => string;
@@ -119,6 +120,7 @@ export declare function addRowsUp(array: any, n: number): {
     addedRows: any[];
 };
 export declare const convertFilters: (filters: any[]) => any[];
+export declare const revertConvertFilters: (clauses: any[]) => FilterState[];
 export declare function getInvisibleColumns(columns: ColumnTable[]): Record<string, boolean>;
 export declare const getAllVisibleKeys: (columns: any[]) => any[];
 export declare const getAllVisibleKeys1: (columns: ColumnTable[]) => any[];

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

@@ -54,7 +54,7 @@ exports.parseExcelClipboard = parseExcelClipboard;
 exports.parseExcelClipboardText = parseExcelClipboardText;
 exports.removeColumns = void 0;
 exports.removeDuplicatesByKey = removeDuplicatesByKey;
-exports.sortByType = exports.shouldInclude = exports.removeVietnameseTones = void 0;
+exports.sortByType = exports.shouldInclude = exports.revertConvertFilters = exports.removeVietnameseTones = void 0;
 exports.sortData = sortData;
 exports.sumFields = sumFields;
 exports.sumNumberFields = sumNumberFields;
@@ -62,7 +62,8 @@ exports.sumSize = void 0;
 exports.toggleRowAndChildren = toggleRowAndChildren;
 exports.updateArrayByKey = exports.unFlattenData = void 0;
 exports.updateColumnWidthsRecursive = updateColumnWidthsRecursive;
-exports.updateColumnsByGroup = exports.updateColumns1 = void 0;
+exports.updateColumns1 = void 0;
+exports.updateColumnsByGroup = void 0;
 exports.updateOrInsert = updateOrInsert;
 exports.updateWidthsByOther = updateWidthsByOther;
 var _uuid = require("uuid");
@@ -1884,6 +1885,87 @@ const convertFilters = filters => {
   });
   return result;
 };
+exports.convertFilters = convertFilters;
+const revertConvertFilters = clauses => {
+  const map = new Map();
+  clauses.forEach(c => {
+    const k = `${c.key}__${c.field}`;
+    const cur = map.get(k) ?? {
+      key: c.key,
+      field: c.field,
+      items: []
+    };
+    cur.items.push(c);
+    map.set(k, cur);
+  });
+  const result = [];
+  for (const {
+    key,
+    field,
+    items
+  } of map.values()) {
+    // normalize operator strings
+    // const ops = items.map((i: any) => (i.operator ? String(i.operator).toLowerCase() : i.operator))
+
+    // if all predicates are 'or' => checkbox-like multi values
+    if (items.every(i => i.predicate === 'or')) {
+      const filteredKeys = items.map(i => i.value);
+      const operator = items[0]?.operator;
+      const column = {
+        field,
+        typeFilter: 'Checkbox'
+      };
+      result.push({
+        field,
+        key,
+        column,
+        filteredKeys,
+        operator
+      });
+      continue;
+    }
+
+    // handle range (greaterthanorequal + lessthanorequal)
+    const gte = items.find(i => String(i.operator).toLowerCase() === 'greaterthanorequal');
+    const lte = items.find(i => String(i.operator).toLowerCase() === 'lessthanorequal');
+    if (gte || lte) {
+      const a = gte?.value;
+      const b = lte?.value;
+      const filteredKeys = [a, b].filter(v => v !== undefined);
+      const isNum = filteredKeys.every(v => typeof v === 'number' || !isNaN(Number(v)) && String(v).trim() !== '');
+      const typeFilter = isNum ? 'NumberRange' : 'DateRange';
+      const column = {
+        field,
+        typeFilter
+      };
+      result.push({
+        field,
+        key,
+        column,
+        filteredKeys,
+        operator: undefined
+      });
+      continue;
+    }
+
+    // default: single-value (and) or multiple and-predicates -> collect unique values
+    const filteredKeys = Array.from(new Set(items.map(i => i.value)));
+    const operator = items[0]?.operator;
+    const typeFilter = filteredKeys.length === 1 && isDateString(filteredKeys[0]) ? 'Date' : undefined;
+    const column = {
+      field,
+      typeFilter
+    };
+    result.push({
+      field,
+      key,
+      column,
+      filteredKeys,
+      operator
+    });
+  }
+  return result;
+};
 
 // export function getInvisibleColumns(columns: ColumnTable[]): Record<string, boolean> {
 //   const result: Record<string, boolean> = {};
@@ -1894,7 +1976,7 @@ const convertFilters = filters => {
 //   }
 //   return result;
 // }
-exports.convertFilters = convertFilters;
+exports.revertConvertFilters = revertConvertFilters;
 function getInvisibleColumns(columns) {
   const result = {};
   function traverse(cols) {

package/lib/table-component/table/Grid.d.ts

@@ -19,7 +19,7 @@ type Props<T> = Omit<TableProps<T>, 'columns'> & {
     isFullScreen: boolean;
     setIsFullScreen: Dispatch<SetStateAction<boolean>>;
     triggerFilter: Dispatch<SetStateAction<any>>;
-    triggerSorter: Dispatch<SetStateAction<Sorter[]>>;
+    triggerSorter: Dispatch<SetStateAction<Sorter[] | undefined>>;
     setIsExpandClick: Dispatch<SetStateAction<boolean>>;
     onContextMenu?: (data: T) => (event: any) => void;
     triggerChangeColumns?: (args: any, keys: any, type: string) => void;

package/lib/table-component/table/Grid.js

@@ -62,6 +62,8 @@ const Grid = props => {
     fullScreenTitle,
     className: tableClassNames,
     setIsExpandClick,
+    defaultFilter,
+    defaultSorter,
     ...rest
   } = props;
   const [columnResizeMode] = _react.default.useState('onChange');
@@ -171,6 +173,25 @@ const Grid = props => {
 
     // debugTable: true
   });
+  _react.default.useEffect(() => {
+    if (defaultFilter) {
+      const a = (0, _utils.revertConvertFilters)(defaultFilter);
+      const rs = a.map(it => ({
+        id: it.field,
+        value: it.filteredKeys
+      }));
+      setColumnFilters(rs);
+    }
+  }, [defaultFilter]);
+  _react.default.useEffect(() => {
+    if (defaultSorter) {
+      const rs = defaultSorter.map(it => ({
+        id: it.field,
+        desc: it.order === 'descend'
+      }));
+      setSorting(rs);
+    }
+  }, [defaultSorter]);
   _react.default.useEffect(() => {
     if (columnHidden) {
       const abb = table.getVisibleLeafColumns()?.[0];
@@ -297,6 +318,7 @@ const Grid = props => {
     setIsSelectionChange: setIsSelectionChange,
     setSorterChange: setSorterChange,
     setFilterChange: setFilterChange,
+    defaultFilter: defaultFilter,
     height: height ?? minHeight ?? 700,
     minHeight: minHeight,
     pagination: pagination,

package/lib/table-component/useContext.d.ts

@@ -1,5 +1,5 @@
 import type { Dispatch, SetStateAction } from 'react';
-import type { ColumnTable, ExpandableConfig, IFormat, IWrapSettings, Locale, PaginationConfig, RangeState, RecordDoubleClickEventArgs, RowClassName, SelectionSettings, SourceFilter } from "./../grid-component/type";
+import type { ColumnTable, ExpandableConfig, FilterItem, IFormat, IWrapSettings, Locale, PaginationConfig, RangeState, RecordDoubleClickEventArgs, RowClassName, SelectionSettings, SourceFilter } from "./../grid-component/type";
 import type { SubmitHandler } from "react-hook-form";
 import type { ExpandedState, Row, Table } from '@tanstack/react-table';
 export type IPositionCell = {
@@ -35,6 +35,7 @@ export interface IContext<T> {
     }>>;
     setSorterChange: Dispatch<SetStateAction<boolean>>;
     setFilterChange: Dispatch<SetStateAction<boolean>>;
+    defaultFilter?: FilterItem[];
     onContextMenu?: (data: T) => (event: any) => void;
     locale?: Locale;
     lang?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "es-grid-template",
-  "version": "1.8.92",
+  "version": "1.8.93",
   "description": "es-grid-template",
   "keywords": [
     "react",