es-grid-template 1.9.82 → 1.9.84

package/es/ali-table/InternalTable.js

@@ -584,6 +584,7 @@ const InternalTable = props => {
       // const rs  = 
 
       if (onFilter) {
+        console.log('[onFilter] src/ali-table/InternalTable.tsx', val);
         onFilter(val);
       } else {
         setFilterState(val);

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

@@ -262,6 +262,7 @@ export function columnCustom(opts) {
           newFilterState = convertFilters([...rs]);
         }
         if (onFilter) {
+          console.log('[onFilter] src/ali-table/pipeline/features/columnCustom.tsx:confirm', newFilterState);
           onFilter(newFilterState);
         } else {
 
@@ -302,7 +303,9 @@ export function columnCustom(opts) {
 
         pipeline.setStateAtKey(stateKeyFilter, rs);
         if (onFilter) {
-          onFilter(convertFilters([...newFilterState]));
+          const convertedFilterState = convertFilters([...newFilterState]);
+          console.log('[onFilter] src/ali-table/pipeline/features/columnCustom.tsx:clear', convertedFilterState);
+          onFilter(convertedFilterState);
         } else {
 
           // const newData = filterDataByColumns(data, newFilterState, sorterStates, [], false)

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

@@ -103,6 +103,12 @@ export const shouldIncludeOptimized = (item, queries, ignoreAccents = true) => {
         case 'endswith':
           condition = ignoreAccents === false ? itemValue?.endsWith(value) : itemStr.endsWith(compareValue);
           break;
+        case 'empty':
+          condition = ignoreAccents === false ? itemValue === null || itemValue === undefined || typeof itemValue === 'string' && itemValue.trim() === '' : itemStr === null || itemStr === undefined || typeof itemStr === 'string' && itemStr.trim() === '';
+          break;
+        case 'notempty':
+          condition = ignoreAccents === false ? !(itemValue === null || itemValue === undefined || typeof itemValue === 'string' && itemValue.trim() === '') : !(itemStr === null || itemStr === undefined || typeof itemStr === 'string' && itemStr.trim() === '');
+          break;
       }
     }
 

package/es/grid-component/hooks/constant.js

@@ -24,6 +24,14 @@ export const numberOperator = [{
   value: 'notequal',
   label: 'Not equal',
   key: '!='
+}, {
+  value: 'empty',
+  key: 'empty',
+  label: 'Empty'
+}, {
+  value: 'notempty',
+  key: 'notempty',
+  label: 'Not empty'
 }];
 export const stringOperator = [{
   value: 'startswith',
@@ -49,6 +57,14 @@ export const stringOperator = [{
   value: 'notequal',
   key: '!=',
   label: 'Not equal'
+}, {
+  value: 'empty',
+  key: 'empty',
+  label: 'Empty'
+}, {
+  value: 'notempty',
+  key: 'notempty',
+  label: 'Not empty'
 }];
 export const dateOperator = [{
   value: 'equal',
@@ -66,6 +82,14 @@ export const dateOperator = [{
   value: 'lessthan',
   key: '<',
   label: 'Less than'
+}, {
+  value: 'empty',
+  key: 'empty',
+  label: 'Empty'
+}, {
+  value: 'notempty',
+  key: 'notempty',
+  label: 'Not empty'
 }];
 export const dateTimeOperator = [{
   value: 'equal',
@@ -83,6 +107,14 @@ export const dateTimeOperator = [{
   value: 'lessthan',
   key: '<',
   label: 'Less than'
+}, {
+  value: 'empty',
+  key: 'empty',
+  label: 'Empty'
+}, {
+  value: 'notempty',
+  key: 'notempty',
+  label: 'Not empty'
 }];
 export const booleanOperator = [{
   value: 'equal',

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

@@ -76,6 +76,8 @@ export type Locale = {
 export type PaginationConfig = Omit<TablePaginationConfig, 'locale' | 'current'> & {
     currentPage?: number;
     locale?: PagingLocale;
+    /** Chế độ phân trang. Mặc định là client để giữ tương thích với hành vi hiện tại. */
+    mode?: 'client' | 'server';
 };
 export type AnyObject = Record<PropertyKey, any>;
 export type IFormat = {

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

@@ -49,7 +49,7 @@ const TableBodyRow = ({
   return /*#__PURE__*/React.createElement("div", {
     "data-index": virtualRow.index //needed for dynamic row height measurement
     ,
-    ref: node => rowVirtualizer.measureElement(node) //measure dynamic row height
+    ref: rowVirtualizer.measureElement //measure dynamic row height
     ,
     key: row.id,
     "data-row-key": row.id,

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

@@ -6,7 +6,6 @@ import moment from "moment";
 export const newGuid = () => {
   for (let i = 0; i < 20; i++) {
     // @ts-ignore
-    // const id = crypto.randomUUID()
     return uuidv4();
   }
 };
@@ -811,6 +810,12 @@ export const shouldInclude = (item, queries) => {
       case "endswith":
         condition = itemStr?.endsWith(queryStr);
         break;
+      case "empty":
+        condition = itemStr === null || itemStr === undefined || typeof itemStr === 'string' && itemStr.trim() === '';
+        break;
+      case "notempty":
+        condition = !(itemStr === null || itemStr === undefined || typeof itemStr === 'string' && itemStr.trim() === '');
+        break;
       default:
         console.warn(`Unknown operator: ${operator}`);
         break;

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

@@ -235,7 +235,9 @@ const Grid = props => {
         };
       });
       if (onFilter) {
-        onFilter?.(convertFilters(merged));
+        const convertedFilters = convertFilters(merged);
+        console.log('[onFilter] src/group-component/table/Grid.tsx', convertedFilters);
+        onFilter?.(convertedFilters);
       } else {
         triggerFilter(convertFilters(merged));
         const b = filterDataByColumns(originData, convertFilters(merged), [], []);

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

@@ -46,7 +46,7 @@ const TableBodyRow = ({
   return /*#__PURE__*/React.createElement("div", {
     "data-index": virtualRow.index //needed for dynamic row height measurement
     ,
-    ref: node => rowVirtualizer.measureElement(node) //measure dynamic row height
+    ref: rowVirtualizer.measureElement //measure dynamic row height
     ,
     key: row.id,
     "data-row-key": row.id,

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

@@ -89,15 +89,21 @@ const TableHeadCell = props => {
       if (newVisible) {
         const filterValue = header.column.getFilterValue() ?? [];
         const operatorValue = header.column.getFilterOperator() ?? getDefaultOperator(column?.meta ?? {});
-        setSelectedKeys(filterValue);
+        setSelectedKeys(['empty', 'notempty'].includes(operatorValue) ? [] : filterValue);
         header.column.setFilterOperator?.(operatorValue);
       } else {}
       triggerVisible(newVisible);
     }
   };
   const doFilter = type => {
+    console.log('[doFilter] src/table-component/header/TableHeadCell.tsx', {
+      type
+    });
     if (type) {
-      header.column.setFilterValue(!originalColumn.typeFilter || originalColumn.typeFilter === 'Text' ? selectedKeys.length === 0 ? [''] : selectedKeys : selectedKeys);
+      const operatorValue = header.column.getFilterOperator();
+      const isEmptyOperator = ['empty', 'notempty'].includes(operatorValue);
+      const filterValue = isEmptyOperator ? [''] : !originalColumn.typeFilter || originalColumn.typeFilter === 'Text' ? selectedKeys.length === 0 ? [''] : selectedKeys : selectedKeys;
+      header.column.setFilterValue(filterValue);
     } else {
       header.column.setFilterValue(undefined);
       setSelectedKeys([]);
@@ -123,6 +129,7 @@ const TableHeadCell = props => {
     dropdownRender: () => {
       const type = getTypeFilter(originalColumn);
       const operatorValue = header.column.getFilterOperator() ?? getDefaultOperator(originalColumn);
+      const hideFilterInput = ['empty', 'notempty'].includes(operatorValue);
       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'
@@ -145,8 +152,11 @@ const TableHeadCell = props => {
         value: operatorValue,
         onChange: val => {
           header.column.setFilterOperator(val);
+          if (['empty', 'notempty'].includes(val)) {
+            setSelectedKeys([]);
+          }
         }
-      })), /*#__PURE__*/React.createElement("div", {
+      })), !hideFilterInput && /*#__PURE__*/React.createElement("div", {
         style: {
           marginBottom: 8
         }

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

@@ -105,8 +105,8 @@ const TableHeadCell2 = props => {
         const filterValue = column.getFilterValue() ?? [];
         const filterValueOrigin = fieldOriginal ? fieldOriginal.getFilterValue() ?? [] : undefined;
         const defaultFilterOption = defaultFilter?.find(it => it.field === originalColumn.field);
-        const operatorValue = column.getFilterOperator() ?? defaultFilterOption?.operator ?? getDefaultOperator(column.columnDef?.meta ?? {});
-        setSelectedKeys(filterValueOrigin ?? filterValue);
+        const operatorValue = (fieldOriginal ?? column).getFilterOperator() ?? defaultFilterOption?.operator ?? getDefaultOperator(column.columnDef?.meta ?? {});
+        setSelectedKeys(['empty', 'notempty'].includes(operatorValue) ? [] : filterValueOrigin ?? filterValue);
         if (fieldOriginal) {
           fieldOriginal.setFilterOperator?.(operatorValue);
         } else {
@@ -123,12 +123,15 @@ const TableHeadCell2 = props => {
     }
   };
   const doFilter = type => {
+    console.log('[doFilter] src/table-component/header/TableHeadCell2.tsx', {
+      type
+    });
     if (type) {
-      if (fieldOriginal) {
-        fieldOriginal.setFilterValue(!originalColumn.typeFilter || originalColumn.typeFilter === 'Text' ? selectedKeys.length === 0 ? [''] : [selectedKeys[0].trim()] : selectedKeys);
-      } else {
-        column.setFilterValue(!originalColumn.typeFilter || originalColumn.typeFilter === 'Text' ? selectedKeys.length === 0 ? [''] : [selectedKeys[0].trim()] : selectedKeys);
-      }
+      const filterColumn = fieldOriginal ?? column;
+      const operatorValue = filterColumn.getFilterOperator();
+      const isEmptyOperator = ['empty', 'notempty'].includes(operatorValue);
+      const filterValue = isEmptyOperator ? [''] : !originalColumn.typeFilter || originalColumn.typeFilter === 'Text' ? selectedKeys.length === 0 ? [''] : [selectedKeys[0].trim()] : selectedKeys;
+      filterColumn.setFilterValue(filterValue);
 
       // column.setFilterValue(!originalColumn.typeFilter || originalColumn.typeFilter === 'Text' ? (selectedKeys.length === 0 ? [''] : selectedKeys) : selectedKeys)
     } else {
@@ -160,7 +163,8 @@ const TableHeadCell2 = props => {
     dropdownRender: () => {
       const type = getTypeFilter(originalColumn);
       const defaultOperatorValue = defaultFilter?.find(it => it.field === originalColumn.field);
-      const operatorValue = column.getFilterOperator() ?? defaultOperatorValue?.operator ?? getDefaultOperator(originalColumn);
+      const operatorValue = (fieldOriginal ?? column).getFilterOperator() ?? defaultOperatorValue?.operator ?? getDefaultOperator(originalColumn);
+      const hideFilterInput = ['empty', 'notempty'].includes(operatorValue);
       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'
@@ -182,13 +186,16 @@ const TableHeadCell2 = props => {
         },
         value: operatorValue,
         onChange: val => {
-          column.setFilterOperator(val);
+          (fieldOriginal ?? column).setFilterOperator(val);
+          if (['empty', 'notempty'].includes(val)) {
+            setSelectedKeys([]);
+          }
         }
         // dropdownStyle={{
 
         //   zIndex: 1059
         // }}
-      })), /*#__PURE__*/React.createElement("div", {
+      })), !hideFilterInput && /*#__PURE__*/React.createElement("div", {
         style: {
           marginBottom: 8
         }

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

@@ -6,7 +6,6 @@ import { nonActionColumn } from "../../grid-component/hooks";
 export const newGuid = () => {
   for (let i = 0; i < 20; i++) {
     // @ts-ignore
-    // const id = crypto.randomUUID()
     return uuidv4();
   }
 };
@@ -1078,6 +1077,12 @@ export const shouldInclude = (item, queries, ignoreAccents) => {
       case "endswith":
         condition = ignoreAccents === false ? itemValue?.endsWith(value) : itemStr?.endsWith(queryStr);
         break;
+      case 'empty':
+        condition = ignoreAccents === false ? itemValue === null || itemValue === undefined || typeof itemValue === 'string' && itemValue.trim() === '' : itemStr === null || itemStr === undefined || typeof itemStr === 'string' && itemStr.trim() === '';
+        break;
+      case 'notempty':
+        condition = ignoreAccents === false ? !(itemValue === null || itemValue === undefined || typeof itemValue === 'string' && itemValue.trim() === '') : !(itemStr === null || itemStr === undefined || typeof itemStr === 'string' && itemStr.trim() === '');
+        break;
       default:
         console.warn(`Unknown operator: ${operator}`);
         break;

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

@@ -307,7 +307,9 @@ const Grid = props => {
         };
       });
       if (onFilter) {
-        onFilter?.(convertFilters(merged));
+        const convertedFilters = convertFilters(merged);
+        console.log('[onFilter] src/table-component/table/Grid.tsx', convertedFilters);
+        onFilter?.(convertedFilters);
       } else {
         triggerFilter(convertFilters(merged));
         const b = filterDataByColumns(originData, convertFilters(merged), [], []);

package/es/table-virtuoso/InternalTable.js

@@ -89,6 +89,8 @@ const InternalTable = props => {
     pageIndex: pagination && pagination.currentPage ? pagination.currentPage - 1 : 0,
     pageSize: pagination && pagination.pageSize ? pagination.pageSize : 20
   });
+  const isServerPagination = Boolean(pagination && pagination.mode === 'server');
+  const shouldUseClientPagination = Boolean(pagination) && !infiniteScroll && !isServerPagination;
   const [columnSizing, setColumnSizing] = React.useState({});
   const [columnSizingInfo, setColumnSizingInfo] = React.useState({});
 
@@ -264,7 +266,10 @@ const InternalTable = props => {
     getGroupedRowModel: getGroupedRowModel(),
     // onExpandedChange: setExpanded,
     getExpandedRowModel: getExpandedRowModel(),
-    getPaginationRowModel: pagination && !infiniteScroll ? getPaginationRowModel() : undefined,
+    manualPagination: isServerPagination,
+    // Chỉ để TanStack tự phân trang khi có pagination, không dùng infinite scroll và đang ở chế độ client.
+    // Với server pagination, dữ liệu đã được BE phân trang nên không chạy getPaginationRowModel() để tránh phân trang lần 2.
+    getPaginationRowModel: shouldUseClientPagination ? getPaginationRowModel() : undefined,
     onPaginationChange: setPagination,
     onColumnVisibilityChange: setColumnVisibility
     // onColumnPinningChange,

package/es/table-virtuoso/header/TableHeadCell.js

@@ -52,6 +52,11 @@ const TableHeadCell = props => {
   React.useEffect(() => {
     setSelectedKeys(filterValue);
   }, []);
+  React.useEffect(() => {
+    if (['empty', 'notempty'].includes(currentFilter.ope)) {
+      setSelectedKeys([]);
+    }
+  }, [currentFilter.ope]);
   const cellStyles1 = typeof originalColumn.onCellHeaderStyles === 'function' ? originalColumn.onCellHeaderStyles(header) : originalColumn.onCellHeaderStyles;
   const cellStyles2 = originalColumn?.headerCellProps?.style ?? undefined;
   const cellStyles = cellStyles2 ?? cellStyles1;
@@ -87,8 +92,13 @@ const TableHeadCell = props => {
     }, iconFilter);
   };
   const doFilter = type => {
+    console.log('[doFilter] src/table-virtuoso/header/TableHeadCell.tsx', {
+      type
+    });
     if (type) {
-      header.column.setFilterValue(!originalColumn.typeFilter || originalColumn.typeFilter === 'Text' ? selectedKeys.length === 0 ? [''] : selectedKeys : selectedKeys);
+      const isEmptyOperator = ['empty', 'notempty'].includes(currentFilter.ope);
+      const nextFilterValue = isEmptyOperator ? [''] : !originalColumn.typeFilter || originalColumn.typeFilter === 'Text' ? selectedKeys.length === 0 ? [''] : selectedKeys : selectedKeys;
+      header.column.setFilterValue(nextFilterValue);
       header.column.setFilterOperator?.(currentFilter.ope);
     } else {
       header.column.setFilterValue(undefined);
@@ -112,6 +122,7 @@ const TableHeadCell = props => {
     destroyPopupOnHide: true,
     dropdownRender: () => {
       const type = getTypeFilter(originalColumn);
+      const hideFilterInput = ['empty', 'notempty'].includes(currentFilter.ope);
 
       // const operatorValue = (header.column.getFilterOperator() ?? getDefaultOperator(originalColumn)) as string
 
@@ -141,9 +152,12 @@ const TableHeadCell = props => {
             ...prev,
             ope: val
           }));
+          if (['empty', 'notempty'].includes(val)) {
+            setSelectedKeys([]);
+          }
           // header.column.setFilterOperator(val)
         }
-      })), /*#__PURE__*/React.createElement("div", {
+      })), !hideFilterInput && /*#__PURE__*/React.createElement("div", {
         style: {
           marginBottom: 8
         }

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

@@ -859,6 +859,12 @@ export const shouldInclude = (item, queries) => {
       case "endswith":
         condition = itemStr?.endsWith(queryStr);
         break;
+      case "empty":
+        condition = itemStr === null || itemStr === undefined || typeof itemStr === 'string' && itemStr.trim() === '';
+        break;
+      case "notempty":
+        condition = !(itemStr === null || itemStr === undefined || typeof itemStr === 'string' && itemStr.trim() === '');
+        break;
       default:
         console.warn(`Unknown operator: ${operator}`);
         break;

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

@@ -123,7 +123,9 @@ const Grid = props => {
         };
       });
       if (onFilter) {
-        onFilter?.(convertFilters(merged));
+        const convertedFilters = convertFilters(merged);
+        console.log('[onFilter] src/table-virtuoso/table/Grid.tsx', convertedFilters);
+        onFilter?.(convertedFilters);
       } else {
         triggerFilter(convertFilters(merged));
         const b = filterDataByColumns(originData, convertFilters(merged), [], []);

package/es/table-virtuoso/table/TableContainer.js

@@ -79,6 +79,16 @@ const TableContainer = props => {
   } = props;
   const [paginationLocal] = useLocale('Pagination');
   const [tableLocal] = useLocale('Table');
+  const paginationProps = React.useMemo(() => {
+    if (!pagination) {
+      return undefined;
+    }
+    const paginationConfig = {
+      ...pagination
+    };
+    delete paginationConfig.mode;
+    return paginationConfig;
+  }, [pagination]);
   const tableContainerRef = React.useRef(null);
   const containerRef = React.useRef(null);
   const bottomToolbarRef = React.useRef(null);
@@ -210,7 +220,7 @@ const TableContainer = props => {
     showTotal: (totalItems, range) =>
     // @ts-ignore
     `${range[0]}-${range[1]} / ${totalItems} ${t ? t(pagination?.locale?.items ?? 'items') : 'items'}`
-  }, pagination)), typeof actionTemplate === 'function' ? actionTemplate() : actionTemplate, toolbarItemTopRight && /*#__PURE__*/React.createElement("div", {
+  }, paginationProps)), typeof actionTemplate === 'function' ? actionTemplate() : actionTemplate, toolbarItemTopRight && /*#__PURE__*/React.createElement("div", {
     style: {
       flex: 1,
       overflow: 'hidden'
@@ -299,7 +309,7 @@ const TableContainer = props => {
     })} / ${numericFormatter((totalItems ?? 0).toString(), {
       thousandSeparator: '.'
     })} ${pagination?.locale?.items || paginationLocal?.items || ''}`
-  }, pagination, {
+  }, paginationProps, {
     onChange: (page, pageSize1) => {
       if (pagination.onChange) {
         pagination.onChange(page, pageSize1);

package/lib/ali-table/InternalTable.js

@@ -584,6 +584,7 @@ const InternalTable = props => {
       // const rs  = 
 
       if (onFilter) {
+        console.log('[onFilter] src/ali-table/InternalTable.tsx', val);
         onFilter(val);
       } else {
         setFilterState(val);

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

@@ -258,6 +258,7 @@ function columnCustom(opts) {
           newFilterState = (0, _utils2.convertFilters)([...rs]);
         }
         if (onFilter) {
+          console.log('[onFilter] src/ali-table/pipeline/features/columnCustom.tsx:confirm', newFilterState);
           onFilter(newFilterState);
         } else {
 
@@ -298,7 +299,9 @@ function columnCustom(opts) {
 
         pipeline.setStateAtKey(_constants.stateKeyFilter, rs);
         if (onFilter) {
-          onFilter((0, _utils2.convertFilters)([...newFilterState]));
+          const convertedFilterState = (0, _utils2.convertFilters)([...newFilterState]);
+          console.log('[onFilter] src/ali-table/pipeline/features/columnCustom.tsx:clear', convertedFilterState);
+          onFilter(convertedFilterState);
         } else {
 
           // const newData = filterDataByColumns(data, newFilterState, sorterStates, [], false)

package/lib/ali-table/utils/utility.js

@@ -120,6 +120,12 @@ const shouldIncludeOptimized = (item, queries, ignoreAccents = true) => {
         case 'endswith':
           condition = ignoreAccents === false ? itemValue?.endsWith(value) : itemStr.endsWith(compareValue);
           break;
+        case 'empty':
+          condition = ignoreAccents === false ? itemValue === null || itemValue === undefined || typeof itemValue === 'string' && itemValue.trim() === '' : itemStr === null || itemStr === undefined || typeof itemStr === 'string' && itemStr.trim() === '';
+          break;
+        case 'notempty':
+          condition = ignoreAccents === false ? !(itemValue === null || itemValue === undefined || typeof itemValue === 'string' && itemValue.trim() === '') : !(itemStr === null || itemStr === undefined || typeof itemStr === 'string' && itemStr.trim() === '');
+          break;
       }
     }
 

package/lib/grid-component/hooks/constant.js

@@ -30,6 +30,14 @@ const numberOperator = exports.numberOperator = [{
   value: 'notequal',
   label: 'Not equal',
   key: '!='
+}, {
+  value: 'empty',
+  key: 'empty',
+  label: 'Empty'
+}, {
+  value: 'notempty',
+  key: 'notempty',
+  label: 'Not empty'
 }];
 const stringOperator = exports.stringOperator = [{
   value: 'startswith',
@@ -55,6 +63,14 @@ const stringOperator = exports.stringOperator = [{
   value: 'notequal',
   key: '!=',
   label: 'Not equal'
+}, {
+  value: 'empty',
+  key: 'empty',
+  label: 'Empty'
+}, {
+  value: 'notempty',
+  key: 'notempty',
+  label: 'Not empty'
 }];
 const dateOperator = exports.dateOperator = [{
   value: 'equal',
@@ -72,6 +88,14 @@ const dateOperator = exports.dateOperator = [{
   value: 'lessthan',
   key: '<',
   label: 'Less than'
+}, {
+  value: 'empty',
+  key: 'empty',
+  label: 'Empty'
+}, {
+  value: 'notempty',
+  key: 'notempty',
+  label: 'Not empty'
 }];
 const dateTimeOperator = exports.dateTimeOperator = [{
   value: 'equal',
@@ -89,6 +113,14 @@ const dateTimeOperator = exports.dateTimeOperator = [{
   value: 'lessthan',
   key: '<',
   label: 'Less than'
+}, {
+  value: 'empty',
+  key: 'empty',
+  label: 'Empty'
+}, {
+  value: 'notempty',
+  key: 'notempty',
+  label: 'Not empty'
 }];
 const booleanOperator = exports.booleanOperator = [{
   value: 'equal',

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

@@ -76,6 +76,8 @@ export type Locale = {
 export type PaginationConfig = Omit<TablePaginationConfig, 'locale' | 'current'> & {
     currentPage?: number;
     locale?: PagingLocale;
+    /** Chế độ phân trang. Mặc định là client để giữ tương thích với hành vi hiện tại. */
+    mode?: 'client' | 'server';
 };
 export type AnyObject = Record<PropertyKey, any>;
 export type IFormat = {

package/lib/group-component/body/TableBodyRow.js

@@ -56,7 +56,7 @@ const TableBodyRow = ({
   return /*#__PURE__*/_react.default.createElement("div", {
     "data-index": virtualRow.index //needed for dynamic row height measurement
     ,
-    ref: node => rowVirtualizer.measureElement(node) //measure dynamic row height
+    ref: rowVirtualizer.measureElement //measure dynamic row height
     ,
     key: row.id,
     "data-row-key": row.id,

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

@@ -68,7 +68,6 @@ var _moment = _interopRequireDefault(require("moment"));
 const newGuid = () => {
   for (let i = 0; i < 20; i++) {
     // @ts-ignore
-    // const id = crypto.randomUUID()
     return (0, _uuid.v4)();
   }
 };
@@ -903,6 +902,12 @@ const shouldInclude = (item, queries) => {
       case "endswith":
         condition = itemStr?.endsWith(queryStr);
         break;
+      case "empty":
+        condition = itemStr === null || itemStr === undefined || typeof itemStr === 'string' && itemStr.trim() === '';
+        break;
+      case "notempty":
+        condition = !(itemStr === null || itemStr === undefined || typeof itemStr === 'string' && itemStr.trim() === '');
+        break;
       default:
         console.warn(`Unknown operator: ${operator}`);
         break;

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

@@ -241,7 +241,9 @@ const Grid = props => {
         };
       });
       if (onFilter) {
-        onFilter?.((0, _utils.convertFilters)(merged));
+        const convertedFilters = (0, _utils.convertFilters)(merged);
+        console.log('[onFilter] src/group-component/table/Grid.tsx', convertedFilters);
+        onFilter?.(convertedFilters);
       } else {
         triggerFilter((0, _utils.convertFilters)(merged));
         const b = (0, _utils.filterDataByColumns)(originData, (0, _utils.convertFilters)(merged), [], []);

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

@@ -53,7 +53,7 @@ const TableBodyRow = ({
   return /*#__PURE__*/_react.default.createElement("div", {
     "data-index": virtualRow.index //needed for dynamic row height measurement
     ,
-    ref: node => rowVirtualizer.measureElement(node) //measure dynamic row height
+    ref: rowVirtualizer.measureElement //measure dynamic row height
     ,
     key: row.id,
     "data-row-key": row.id,

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

@@ -97,15 +97,21 @@ const TableHeadCell = props => {
       if (newVisible) {
         const filterValue = header.column.getFilterValue() ?? [];
         const operatorValue = header.column.getFilterOperator() ?? (0, _utils.getDefaultOperator)(column?.meta ?? {});
-        setSelectedKeys(filterValue);
+        setSelectedKeys(['empty', 'notempty'].includes(operatorValue) ? [] : filterValue);
         header.column.setFilterOperator?.(operatorValue);
       } else {}
       triggerVisible(newVisible);
     }
   };
   const doFilter = type => {
+    console.log('[doFilter] src/table-component/header/TableHeadCell.tsx', {
+      type
+    });
     if (type) {
-      header.column.setFilterValue(!originalColumn.typeFilter || originalColumn.typeFilter === 'Text' ? selectedKeys.length === 0 ? [''] : selectedKeys : selectedKeys);
+      const operatorValue = header.column.getFilterOperator();
+      const isEmptyOperator = ['empty', 'notempty'].includes(operatorValue);
+      const filterValue = isEmptyOperator ? [''] : !originalColumn.typeFilter || originalColumn.typeFilter === 'Text' ? selectedKeys.length === 0 ? [''] : selectedKeys : selectedKeys;
+      header.column.setFilterValue(filterValue);
     } else {
       header.column.setFilterValue(undefined);
       setSelectedKeys([]);
@@ -131,6 +137,7 @@ const TableHeadCell = props => {
     dropdownRender: () => {
       const type = (0, _utils.getTypeFilter)(originalColumn);
       const operatorValue = header.column.getFilterOperator() ?? (0, _utils.getDefaultOperator)(originalColumn);
+      const hideFilterInput = ['empty', 'notempty'].includes(operatorValue);
       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'
@@ -153,8 +160,11 @@ const TableHeadCell = props => {
         value: operatorValue,
         onChange: val => {
           header.column.setFilterOperator(val);
+          if (['empty', 'notempty'].includes(val)) {
+            setSelectedKeys([]);
+          }
         }
-      })), /*#__PURE__*/_react.default.createElement("div", {
+      })), !hideFilterInput && /*#__PURE__*/_react.default.createElement("div", {
         style: {
           marginBottom: 8
         }

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

@@ -113,8 +113,8 @@ const TableHeadCell2 = props => {
         const filterValue = column.getFilterValue() ?? [];
         const filterValueOrigin = fieldOriginal ? fieldOriginal.getFilterValue() ?? [] : undefined;
         const defaultFilterOption = defaultFilter?.find(it => it.field === originalColumn.field);
-        const operatorValue = column.getFilterOperator() ?? defaultFilterOption?.operator ?? (0, _utils.getDefaultOperator)(column.columnDef?.meta ?? {});
-        setSelectedKeys(filterValueOrigin ?? filterValue);
+        const operatorValue = (fieldOriginal ?? column).getFilterOperator() ?? defaultFilterOption?.operator ?? (0, _utils.getDefaultOperator)(column.columnDef?.meta ?? {});
+        setSelectedKeys(['empty', 'notempty'].includes(operatorValue) ? [] : filterValueOrigin ?? filterValue);
         if (fieldOriginal) {
           fieldOriginal.setFilterOperator?.(operatorValue);
         } else {
@@ -131,12 +131,15 @@ const TableHeadCell2 = props => {
     }
   };
   const doFilter = type => {
+    console.log('[doFilter] src/table-component/header/TableHeadCell2.tsx', {
+      type
+    });
     if (type) {
-      if (fieldOriginal) {
-        fieldOriginal.setFilterValue(!originalColumn.typeFilter || originalColumn.typeFilter === 'Text' ? selectedKeys.length === 0 ? [''] : [selectedKeys[0].trim()] : selectedKeys);
-      } else {
-        column.setFilterValue(!originalColumn.typeFilter || originalColumn.typeFilter === 'Text' ? selectedKeys.length === 0 ? [''] : [selectedKeys[0].trim()] : selectedKeys);
-      }
+      const filterColumn = fieldOriginal ?? column;
+      const operatorValue = filterColumn.getFilterOperator();
+      const isEmptyOperator = ['empty', 'notempty'].includes(operatorValue);
+      const filterValue = isEmptyOperator ? [''] : !originalColumn.typeFilter || originalColumn.typeFilter === 'Text' ? selectedKeys.length === 0 ? [''] : [selectedKeys[0].trim()] : selectedKeys;
+      filterColumn.setFilterValue(filterValue);
 
       // column.setFilterValue(!originalColumn.typeFilter || originalColumn.typeFilter === 'Text' ? (selectedKeys.length === 0 ? [''] : selectedKeys) : selectedKeys)
     } else {
@@ -168,7 +171,8 @@ const TableHeadCell2 = props => {
     dropdownRender: () => {
       const type = (0, _utils.getTypeFilter)(originalColumn);
       const defaultOperatorValue = defaultFilter?.find(it => it.field === originalColumn.field);
-      const operatorValue = column.getFilterOperator() ?? defaultOperatorValue?.operator ?? (0, _utils.getDefaultOperator)(originalColumn);
+      const operatorValue = (fieldOriginal ?? column).getFilterOperator() ?? defaultOperatorValue?.operator ?? (0, _utils.getDefaultOperator)(originalColumn);
+      const hideFilterInput = ['empty', 'notempty'].includes(operatorValue);
       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'
@@ -190,13 +194,16 @@ const TableHeadCell2 = props => {
         },
         value: operatorValue,
         onChange: val => {
-          column.setFilterOperator(val);
+          (fieldOriginal ?? column).setFilterOperator(val);
+          if (['empty', 'notempty'].includes(val)) {
+            setSelectedKeys([]);
+          }
         }
         // dropdownStyle={{
 
         //   zIndex: 1059
         // }}
-      })), /*#__PURE__*/_react.default.createElement("div", {
+      })), !hideFilterInput && /*#__PURE__*/_react.default.createElement("div", {
         style: {
           marginBottom: 8
         }

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

@@ -86,7 +86,6 @@ var _hooks = require("../../grid-component/hooks");
 const newGuid = () => {
   for (let i = 0; i < 20; i++) {
     // @ts-ignore
-    // const id = crypto.randomUUID()
     return (0, _uuid.v4)();
   }
 };
@@ -1192,6 +1191,12 @@ const shouldInclude = (item, queries, ignoreAccents) => {
       case "endswith":
         condition = ignoreAccents === false ? itemValue?.endsWith(value) : itemStr?.endsWith(queryStr);
         break;
+      case 'empty':
+        condition = ignoreAccents === false ? itemValue === null || itemValue === undefined || typeof itemValue === 'string' && itemValue.trim() === '' : itemStr === null || itemStr === undefined || typeof itemStr === 'string' && itemStr.trim() === '';
+        break;
+      case 'notempty':
+        condition = ignoreAccents === false ? !(itemValue === null || itemValue === undefined || typeof itemValue === 'string' && itemValue.trim() === '') : !(itemStr === null || itemStr === undefined || typeof itemStr === 'string' && itemStr.trim() === '');
+        break;
       default:
         console.warn(`Unknown operator: ${operator}`);
         break;

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

@@ -312,7 +312,9 @@ const Grid = props => {
         };
       });
       if (onFilter) {
-        onFilter?.((0, _utils.convertFilters)(merged));
+        const convertedFilters = (0, _utils.convertFilters)(merged);
+        console.log('[onFilter] src/table-component/table/Grid.tsx', convertedFilters);
+        onFilter?.(convertedFilters);
       } else {
         triggerFilter((0, _utils.convertFilters)(merged));
         const b = (0, _utils.filterDataByColumns)(originData, (0, _utils.convertFilters)(merged), [], []);

package/lib/table-virtuoso/InternalTable.js

@@ -99,6 +99,8 @@ const InternalTable = props => {
     pageIndex: pagination && pagination.currentPage ? pagination.currentPage - 1 : 0,
     pageSize: pagination && pagination.pageSize ? pagination.pageSize : 20
   });
+  const isServerPagination = Boolean(pagination && pagination.mode === 'server');
+  const shouldUseClientPagination = Boolean(pagination) && !infiniteScroll && !isServerPagination;
   const [columnSizing, setColumnSizing] = _react.default.useState({});
   const [columnSizingInfo, setColumnSizingInfo] = _react.default.useState({});
 
@@ -274,7 +276,10 @@ const InternalTable = props => {
     getGroupedRowModel: (0, _reactTable.getGroupedRowModel)(),
     // onExpandedChange: setExpanded,
     getExpandedRowModel: (0, _reactTable.getExpandedRowModel)(),
-    getPaginationRowModel: pagination && !infiniteScroll ? (0, _reactTable.getPaginationRowModel)() : undefined,
+    manualPagination: isServerPagination,
+    // Chỉ để TanStack tự phân trang khi có pagination, không dùng infinite scroll và đang ở chế độ client.
+    // Với server pagination, dữ liệu đã được BE phân trang nên không chạy getPaginationRowModel() để tránh phân trang lần 2.
+    getPaginationRowModel: shouldUseClientPagination ? (0, _reactTable.getPaginationRowModel)() : undefined,
     onPaginationChange: setPagination,
     onColumnVisibilityChange: setColumnVisibility
     // onColumnPinningChange,

package/lib/table-virtuoso/header/TableHeadCell.js

@@ -60,6 +60,11 @@ const TableHeadCell = props => {
   _react.default.useEffect(() => {
     setSelectedKeys(filterValue);
   }, []);
+  _react.default.useEffect(() => {
+    if (['empty', 'notempty'].includes(currentFilter.ope)) {
+      setSelectedKeys([]);
+    }
+  }, [currentFilter.ope]);
   const cellStyles1 = typeof originalColumn.onCellHeaderStyles === 'function' ? originalColumn.onCellHeaderStyles(header) : originalColumn.onCellHeaderStyles;
   const cellStyles2 = originalColumn?.headerCellProps?.style ?? undefined;
   const cellStyles = cellStyles2 ?? cellStyles1;
@@ -95,8 +100,13 @@ const TableHeadCell = props => {
     }, iconFilter);
   };
   const doFilter = type => {
+    console.log('[doFilter] src/table-virtuoso/header/TableHeadCell.tsx', {
+      type
+    });
     if (type) {
-      header.column.setFilterValue(!originalColumn.typeFilter || originalColumn.typeFilter === 'Text' ? selectedKeys.length === 0 ? [''] : selectedKeys : selectedKeys);
+      const isEmptyOperator = ['empty', 'notempty'].includes(currentFilter.ope);
+      const nextFilterValue = isEmptyOperator ? [''] : !originalColumn.typeFilter || originalColumn.typeFilter === 'Text' ? selectedKeys.length === 0 ? [''] : selectedKeys : selectedKeys;
+      header.column.setFilterValue(nextFilterValue);
       header.column.setFilterOperator?.(currentFilter.ope);
     } else {
       header.column.setFilterValue(undefined);
@@ -120,6 +130,7 @@ const TableHeadCell = props => {
     destroyPopupOnHide: true,
     dropdownRender: () => {
       const type = (0, _utils.getTypeFilter)(originalColumn);
+      const hideFilterInput = ['empty', 'notempty'].includes(currentFilter.ope);
 
       // const operatorValue = (header.column.getFilterOperator() ?? getDefaultOperator(originalColumn)) as string
 
@@ -149,9 +160,12 @@ const TableHeadCell = props => {
             ...prev,
             ope: val
           }));
+          if (['empty', 'notempty'].includes(val)) {
+            setSelectedKeys([]);
+          }
           // header.column.setFilterOperator(val)
         }
-      })), /*#__PURE__*/_react.default.createElement("div", {
+      })), !hideFilterInput && /*#__PURE__*/_react.default.createElement("div", {
         style: {
           marginBottom: 8
         }

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

@@ -958,6 +958,12 @@ const shouldInclude = (item, queries) => {
       case "endswith":
         condition = itemStr?.endsWith(queryStr);
         break;
+      case "empty":
+        condition = itemStr === null || itemStr === undefined || typeof itemStr === 'string' && itemStr.trim() === '';
+        break;
+      case "notempty":
+        condition = !(itemStr === null || itemStr === undefined || typeof itemStr === 'string' && itemStr.trim() === '');
+        break;
       default:
         console.warn(`Unknown operator: ${operator}`);
         break;

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

@@ -132,7 +132,9 @@ const Grid = props => {
         };
       });
       if (onFilter) {
-        onFilter?.((0, _utils.convertFilters)(merged));
+        const convertedFilters = (0, _utils.convertFilters)(merged);
+        console.log('[onFilter] src/table-virtuoso/table/Grid.tsx', convertedFilters);
+        onFilter?.(convertedFilters);
       } else {
         triggerFilter((0, _utils.convertFilters)(merged));
         const b = (0, _utils.filterDataByColumns)(originData, (0, _utils.convertFilters)(merged), [], []);

package/lib/table-virtuoso/table/TableContainer.js

@@ -87,6 +87,16 @@ const TableContainer = props => {
   } = props;
   const [paginationLocal] = (0, _locale.useLocale)('Pagination');
   const [tableLocal] = (0, _locale.useLocale)('Table');
+  const paginationProps = _react.default.useMemo(() => {
+    if (!pagination) {
+      return undefined;
+    }
+    const paginationConfig = {
+      ...pagination
+    };
+    delete paginationConfig.mode;
+    return paginationConfig;
+  }, [pagination]);
   const tableContainerRef = _react.default.useRef(null);
   const containerRef = _react.default.useRef(null);
   const bottomToolbarRef = _react.default.useRef(null);
@@ -218,7 +228,7 @@ const TableContainer = props => {
     showTotal: (totalItems, range) =>
     // @ts-ignore
     `${range[0]}-${range[1]} / ${totalItems} ${t ? t(pagination?.locale?.items ?? 'items') : 'items'}`
-  }, pagination)), typeof actionTemplate === 'function' ? actionTemplate() : actionTemplate, toolbarItemTopRight && /*#__PURE__*/_react.default.createElement("div", {
+  }, paginationProps)), typeof actionTemplate === 'function' ? actionTemplate() : actionTemplate, toolbarItemTopRight && /*#__PURE__*/_react.default.createElement("div", {
     style: {
       flex: 1,
       overflow: 'hidden'
@@ -307,7 +317,7 @@ const TableContainer = props => {
     })} / ${(0, _reactNumericComponent.numericFormatter)((totalItems ?? 0).toString(), {
       thousandSeparator: '.'
     })} ${pagination?.locale?.items || paginationLocal?.items || ''}`
-  }, pagination, {
+  }, paginationProps, {
     onChange: (page, pageSize1) => {
       if (pagination.onChange) {
         pagination.onChange(page, pageSize1);

package/package.json

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