es-grid-template 1.8.69 → 1.8.71

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

@@ -99,7 +99,7 @@ export type ColumnTable<RecordType = AnyObject> = {
     sorter?: boolean;
     allowSortering?: boolean;
     operator?: FilterOperator;
-    showOperator?: boolean;
+    hideOperator?: boolean;
     placeholder?: string;
     showInColumnChoose?: boolean;
     typeFilter?: TypeFilter;
@@ -160,6 +160,7 @@ export type ColumnTable<RecordType = AnyObject> = {
     onCellHeaderStyles?: Omit<React.CSSProperties, 'display' | 'width' | 'minWidth' | 'left' | 'right' | 'position'> | ((cell: Header<RecordType, unknown>) => Omit<React.CSSProperties, 'display' | 'width' | 'minWidth' | 'left' | 'right' | 'position'>);
     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;
+    onCell?: (rowData: RecordType, index: number) => React.TdHTMLAttributes<HTMLTableCellElement>;
 };
 export type Locale = TableLocale & {
     ok_btn?: string;
@@ -200,7 +201,7 @@ export type TableProps<RecordType = AnyObject> = {
         backgroundColor?: string;
         color?: string;
     };
-    classNames?: string;
+    className?: string;
     title?: ReactNode | ((data: RecordType) => ReactNode);
     fullScreenTitle?: ReactNode | (() => ReactNode);
     editAble?: boolean;

package/es/table-component/TableContainerEdit.js

@@ -278,7 +278,7 @@ const TableContainerEdit = props => {
   }, [onDataChange, dataSource]);
   const triggerPaste = React.useCallback((pastedRows, pastedColumnsArray, newData, copyRows) => {
     const handlePasteCallback = callbackData => {
-      const rsFilterData = updateOrInsert(flattenArray([...originData]), callbackData);
+      const rsFilterData = updateOrInsert(flattenArray([...originData]), flattenArray([...callbackData]));
       const rs = unFlattenData(rsFilterData);
       triggerChangeData(rs);
     };
@@ -1242,7 +1242,7 @@ const TableContainerEdit = props => {
           ...record,
           children: [{
             ...defaultRowValue,
-            parentId: record.rowId,
+            parentId: record?.rowId,
             rowId
           }]
         };

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

@@ -813,7 +813,7 @@ const TableBodyCellEdit = props => {
   const handleMouseDownIndex = rowId => {
     setIsSelecting?.(true);
     const allColumns = table.getVisibleLeafColumns().filter(it => !nonActionColumn.includes(it.id));
-    const firstCOl = findFirst(allColumns);
+    const firstCOlSpin = findFirst(allColumns);
     const startCol = allColumns[0].id;
     const endCol = allColumns[allColumns.length - 1].id;
     setStartCell?.({
@@ -824,10 +824,16 @@ const TableBodyCellEdit = props => {
       rowId,
       colId: endCol
     });
-    if (firstCOl) {
+    if (firstCOlSpin) {
       setFocusedCell?.({
         rowId: cell.row.id,
-        colId: firstCOl.id
+        colId: firstCOlSpin.id
+      });
+    } else {
+      const firstCOlVisible = allColumns[0];
+      setFocusedCell?.({
+        rowId: cell.row.id,
+        colId: firstCOlVisible.id
       });
     }
     setRangeState?.(getSelectedCellMatrix(table, {

package/es/table-component/components/checkbox-filter/CheckboxFilter.js

@@ -64,7 +64,7 @@ const CheckboxFilter = props => {
     prefixCls = 'ui-rc-table-filter',
     dropdownPrefixCls = 'ui-rc-dropdown',
     filterMultiple,
-    selectedKeys,
+    selectedKeys: propsSelectedKeys,
     locale,
     options,
     filterMode = 'tree',
@@ -74,6 +74,12 @@ const CheckboxFilter = props => {
     // setSearchValue,
     onSelect
   } = props;
+  const selectedKeys = React.useMemo(() => {
+    if (propsSelectedKeys) {
+      return propsSelectedKeys.map(it => String(it));
+    }
+    return [];
+  }, [propsSelectedKeys]);
   const [searchValue, setSearchValue] = React.useState('');
   const [openKeys, setOpenKeys] = React.useState([]);
 
@@ -129,6 +135,7 @@ const CheckboxFilter = props => {
     const key = String(filter.value);
     const item = {
       title: filter.label,
+      id: filter.value !== undefined ? filter.value : index,
       key: filter.value !== undefined ? key : String(index)
     };
     if (filter.children) {
@@ -146,7 +153,7 @@ const CheckboxFilter = props => {
   });
   const onCheckAll = e => {
     if (e.target.checked) {
-      const allFilterKeys = flattenKeys(options).map(key => String(key));
+      const allFilterKeys = flattenKeys(options).map(key => key);
 
       // setFilteredKeysSync(allFilterKeys);
       onSelect?.(allFilterKeys);
@@ -161,10 +168,17 @@ const CheckboxFilter = props => {
   }) => {
     if (!filterMultiple) {
       // onSelectKeys({ selectedKeys: checked && node.key ? [node.key] : [] });
-      onSelect?.(checked && node.key ? [node.key] : []);
+
+      onSelect?.(checked && node.key ? [node.id] : []);
     } else {
+      if (!checked) {
+        const rs = propsSelectedKeys.filter(it => it !== node.id);
+        onSelect?.(rs);
+      } else {
+        const rs = [...propsSelectedKeys, node.id];
+        onSelect?.(rs);
+      }
       // onSelectKeys({ selectedKeys: keys });
-      onSelect?.(keys);
     }
   };
   if (filterMode === 'tree') {

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

@@ -137,7 +137,7 @@ const TableHeadCell = props => {
           minWidth: 275,
           padding: '8px'
         }
-      }, /*#__PURE__*/React.createElement("div", null), column.meta?.showOperator !== false && column.meta?.typeFilter !== 'DateRange' && column.meta?.typeFilter !== 'NumberRange' && /*#__PURE__*/React.createElement("div", {
+      }, /*#__PURE__*/React.createElement("div", null), column.meta?.hideOperator === true && column.meta?.typeFilter !== 'DateRange' && column.meta?.typeFilter !== 'NumberRange' && /*#__PURE__*/React.createElement("div", {
         className: 'mb-1'
       }, /*#__PURE__*/React.createElement(Select, {
         options: translateOption(operatorOptions, t),

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

@@ -136,7 +136,7 @@ const TableHeadCell2 = props => {
           minWidth: 275,
           padding: '8px'
         }
-      }, /*#__PURE__*/React.createElement("div", null), column.columnDef?.meta?.showOperator !== false && column.columnDef?.meta?.typeFilter !== 'DateRange' && column.columnDef?.meta?.typeFilter !== 'NumberRange' && /*#__PURE__*/React.createElement("div", {
+      }, /*#__PURE__*/React.createElement("div", null), column.columnDef?.meta?.hideOperator === true && column.columnDef?.meta?.typeFilter !== 'DateRange' && column.columnDef?.meta?.typeFilter !== 'NumberRange' && /*#__PURE__*/React.createElement("div", {
         className: 'mb-1'
       }, /*#__PURE__*/React.createElement(Select, {
         options: translateOption(operatorOptions, t),

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

@@ -258,7 +258,9 @@ export const renderFilter = args => {
       }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CheckboxFilter, {
         locale: locale,
         selectedKeys: selectedKeys,
-        onSelect: setSelectedKeys
+        onSelect: val => {
+          setSelectedKeys(val);
+        }
         // options={options}
         ,
         options: source ? source : options ?? [],

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

@@ -819,6 +819,89 @@ export const shouldInclude = (item, queries) => {
   }
   return result;
 };
+
+// function compareValues(a: any, b: any, order: "ascend" | "descend") {
+//   const desc = order === "descend";
+
+//   if (a == null && b == null) return 0;
+//   if (a == null) return desc ? 1 : -1;
+//   if (b == null) return desc ? -1 : 1;
+
+//   // Nếu là số
+//   if (typeof a === "number" && typeof b === "number") {
+//     return desc ? b - a : a - b;
+//   }
+
+//   // Nếu là ngày hợp lệ
+//   const dateA = new Date(a);
+//   const dateB = new Date(b);
+//   if (!isNaN(dateA.getTime()) && !isNaN(dateB.getTime())) {
+//     return desc
+//       ? dateB.getTime() - dateA.getTime()
+//       : dateA.getTime() - dateB.getTime();
+//   }
+
+//   // Mặc định coi như string
+//   return desc
+//     ? String(b).localeCompare(String(a))
+//     : String(a).localeCompare(String(b));
+// }
+
+// export function sortData(data: any[], sorter: Sorter[]): any[] {
+//   const sorted = [...data].sort((a, b) => {
+//     for (const { field, order } of sorter) {
+//       const result = compareValues(a[field], b[field], order);
+//       if (result !== 0) return result;
+//     }
+//     return 0;
+//   });
+
+//   return sorted.map(item => ({
+//     ...item,
+//     children: item.children
+//       ? sortData(item.children, sorter)
+//       : undefined
+//   }));
+// }
+
+// export function filterDataByColumns(data: any[], queries: any[], sorter: Sorter[], keysFilter: string[] | undefined) {
+
+//   if (!queries || queries.length === 0) {
+//     return sorter ? sortData(data, sorter) : data;
+//   }
+
+//   let filtered = data.map(item => {
+//     const newItem = { ...item }
+
+//     if (Array.isArray(item.children)) {
+//       newItem.children = filterDataByColumns(item.children, queries, sorter, keysFilter)
+//     }
+
+//     const isSelfMatched = shouldInclude(item, queries) || keysFilter?.includes(newItem?.rowId)
+
+//     // Nếu chính item thỏa hoặc có con thỏa → giữ lại
+//     if (isSelfMatched || (newItem.children && newItem.children.length > 0)) {
+//       return newItem
+//     }
+
+//     return null // loại bỏ node không phù hợp
+//   })
+//     .filter(Boolean) // xóa các null
+
+//   if (sorter && sorter.length > 0) {
+//     filtered = sortData(filtered, sorter);
+//   }
+
+//   return filtered;
+// }
+
+function getSortValue(item, field) {
+  if (item[field] !== undefined) return item[field];
+  if (item.children && item.children.length > 0) {
+    return getSortValue(item.children[0], field);
+  }
+  return undefined;
+}
 function compareValues(a, b, order) {
   const desc = order === "descend";
   if (a == null && b == null) return 0;
@@ -846,7 +929,7 @@ export function sortData(data, sorter) {
       field,
       order
     } of sorter) {
-      const result = compareValues(a[field], b[field], order);
+      const result = compareValues(getSortValue(a, field), getSortValue(b, field), order);
       if (result !== 0) return result;
     }
     return 0;

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

@@ -55,7 +55,7 @@ const Grid = props => {
     allowResizing,
     windowSize,
     fullScreenTitle,
-    classNames: tableClassNames,
+    className: tableClassNames,
     ...rest
   } = props;
   const [columnResizeMode] = React.useState('onChange');

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

@@ -144,7 +144,9 @@ const TableBodyCell = props => {
     table,
     isEditing,
     colSpan,
+    rowSpan,
     groupValue
+    // ...cellProps
   } = props;
   const {
     id,
@@ -309,6 +311,10 @@ const TableBodyCell = props => {
   return /*#__PURE__*/React.createElement("td", {
     key: cell.id,
     colSpan: colSpan,
+    rowSpan: rowSpan
+    // {...cellProps}
+    ,
+
     ref: el => {
       if (focusedCell?.rowId === cell.row.id && focusedCell?.colId === cell.column.id && !isEditing) {
         el?.focus();

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

@@ -53,12 +53,22 @@ const TableBodyRow = ({
       }
     }
   }), visibleCells.map(cell => {
+    const originCol = cell.column.columnDef.meta ?? {};
+    const {
+      onCell
+    } = originCol ?? {};
+    const cellAttributes = onCell?.(cell.row.original, cell.row.index) ?? {};
+    const {
+      colSpan: onCellColSpan,
+      rowSpan: onCellRowSpan,
+      ...otherCellAttributes
+    } = cellAttributes;
     const nonGroupColumns = visibleCells.filter(col => col.column.id !== 'selection_column' && col.column.id !== '#');
     const firstNonGroupColumn = nonGroupColumns[0];
 
     // const colSpan  = row.subRows && cell.column.id === firstNonGroupColumn?.id ? (groupSetting?.groupColumnSpan ?? 2)
-    const colSpan = row.subRows && row.subRows.length > 0 && cell.column.id === firstNonGroupColumn?.column.id ? 2 : row.subRows && nonGroupColumns[1].column.id === cell.column.id ? 0 : 1;
-    if (row.subRows && row.subRows.length > 0 && colSpan === 0) {
+    const colSpanGroup = row.subRows && row.subRows.length > 0 && cell.column.id === firstNonGroupColumn?.column.id ? 2 : row.subRows && nonGroupColumns[1].column.id === cell.column.id ? 0 : 1;
+    if (row.subRows && row.subRows.length > 0 && colSpanGroup === 0 || onCellRowSpan === 0 || onCellColSpan === 0) {
       return null;
     }
 
@@ -87,7 +97,7 @@ const TableBodyRow = ({
         rowData: row.original,
         value: cellValue
       }) : /*#__PURE__*/React.createElement(React.Fragment, null, headertext, headertext ? ': ' : '', " ", cellContent);
-      return /*#__PURE__*/React.createElement(TableBodyCell, {
+      return /*#__PURE__*/React.createElement(TableBodyCell, _extends({
         table: table,
         tableId: tableId,
         key: cell.id,
@@ -95,11 +105,13 @@ const TableBodyRow = ({
         commandClick: commandClick,
         virtualRow: virtualRow,
         isEditing: false,
-        colSpan: colSpan ?? 1,
+        colSpan: colSpanGroup ?? 1,
+        rowSpan: 1
+      }, otherCellAttributes, {
         groupValue: groupValue
-      });
+      }));
     }
-    return /*#__PURE__*/React.createElement(TableBodyCell, {
+    return /*#__PURE__*/React.createElement(TableBodyCell, _extends({
       table: table,
       tableId: tableId,
       key: cell.id,
@@ -107,8 +119,9 @@ const TableBodyRow = ({
       commandClick: commandClick,
       virtualRow: virtualRow,
       isEditing: false,
-      colSpan: colSpan ?? 1
-    });
+      colSpan: onCellColSpan ?? 1,
+      rowSpan: onCellRowSpan ?? 1
+    }, otherCellAttributes));
   }));
 };
 export default TableBodyRow;

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

@@ -122,7 +122,7 @@ const TableHeadCell = props => {
           minWidth: 275,
           padding: '8px'
         }
-      }, column.meta?.showOperator !== false && column.meta?.typeFilter !== 'DateRange' && column.meta?.typeFilter !== 'NumberRange' && /*#__PURE__*/React.createElement("div", {
+      }, column.meta?.hideOperator === true && column.meta?.typeFilter !== 'DateRange' && column.meta?.typeFilter !== 'NumberRange' && /*#__PURE__*/React.createElement("div", {
         className: 'mb-1'
       }, /*#__PURE__*/React.createElement(Select, {
         options: translateOption(operatorOptions, t),

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

@@ -52,7 +52,7 @@ const Grid = props => {
     columnFilters,
     setColumnOrder,
     rowSelection,
-    classNames: tableClassNames,
+    className: tableClassNames,
     ...rest
   } = props;
   const [isSelectionChange, setIsSelectionChange] = React.useState({

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

@@ -99,7 +99,7 @@ export type ColumnTable<RecordType = AnyObject> = {
     sorter?: boolean;
     allowSortering?: boolean;
     operator?: FilterOperator;
-    showOperator?: boolean;
+    hideOperator?: boolean;
     placeholder?: string;
     showInColumnChoose?: boolean;
     typeFilter?: TypeFilter;
@@ -160,6 +160,7 @@ export type ColumnTable<RecordType = AnyObject> = {
     onCellHeaderStyles?: Omit<React.CSSProperties, 'display' | 'width' | 'minWidth' | 'left' | 'right' | 'position'> | ((cell: Header<RecordType, unknown>) => Omit<React.CSSProperties, 'display' | 'width' | 'minWidth' | 'left' | 'right' | 'position'>);
     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;
+    onCell?: (rowData: RecordType, index: number) => React.TdHTMLAttributes<HTMLTableCellElement>;
 };
 export type Locale = TableLocale & {
     ok_btn?: string;
@@ -200,7 +201,7 @@ export type TableProps<RecordType = AnyObject> = {
         backgroundColor?: string;
         color?: string;
     };
-    classNames?: string;
+    className?: string;
     title?: ReactNode | ((data: RecordType) => ReactNode);
     fullScreenTitle?: ReactNode | (() => ReactNode);
     editAble?: boolean;

package/lib/table-component/TableContainerEdit.js

@@ -285,7 +285,7 @@ const TableContainerEdit = props => {
   }, [onDataChange, dataSource]);
   const triggerPaste = _react.default.useCallback((pastedRows, pastedColumnsArray, newData, copyRows) => {
     const handlePasteCallback = callbackData => {
-      const rsFilterData = (0, _utils.updateOrInsert)((0, _utils.flattenArray)([...originData]), callbackData);
+      const rsFilterData = (0, _utils.updateOrInsert)((0, _utils.flattenArray)([...originData]), (0, _utils.flattenArray)([...callbackData]));
       const rs = (0, _utils.unFlattenData)(rsFilterData);
       triggerChangeData(rs);
     };
@@ -1249,7 +1249,7 @@ const TableContainerEdit = props => {
           ...record,
           children: [{
             ...defaultRowValue,
-            parentId: record.rowId,
+            parentId: record?.rowId,
             rowId
           }]
         };

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

@@ -820,7 +820,7 @@ const TableBodyCellEdit = props => {
   const handleMouseDownIndex = rowId => {
     setIsSelecting?.(true);
     const allColumns = table.getVisibleLeafColumns().filter(it => !_hooks.nonActionColumn.includes(it.id));
-    const firstCOl = (0, _utils.findFirst)(allColumns);
+    const firstCOlSpin = (0, _utils.findFirst)(allColumns);
     const startCol = allColumns[0].id;
     const endCol = allColumns[allColumns.length - 1].id;
     setStartCell?.({
@@ -831,10 +831,16 @@ const TableBodyCellEdit = props => {
       rowId,
       colId: endCol
     });
-    if (firstCOl) {
+    if (firstCOlSpin) {
       setFocusedCell?.({
         rowId: cell.row.id,
-        colId: firstCOl.id
+        colId: firstCOlSpin.id
+      });
+    } else {
+      const firstCOlVisible = allColumns[0];
+      setFocusedCell?.({
+        rowId: cell.row.id,
+        colId: firstCOlVisible.id
       });
     }
     setRangeState?.((0, _utils.getSelectedCellMatrix)(table, {

package/lib/table-component/components/checkbox-filter/CheckboxFilter.js

@@ -73,7 +73,7 @@ const CheckboxFilter = props => {
     prefixCls = 'ui-rc-table-filter',
     dropdownPrefixCls = 'ui-rc-dropdown',
     filterMultiple,
-    selectedKeys,
+    selectedKeys: propsSelectedKeys,
     locale,
     options,
     filterMode = 'tree',
@@ -83,6 +83,12 @@ const CheckboxFilter = props => {
     // setSearchValue,
     onSelect
   } = props;
+  const selectedKeys = React.useMemo(() => {
+    if (propsSelectedKeys) {
+      return propsSelectedKeys.map(it => String(it));
+    }
+    return [];
+  }, [propsSelectedKeys]);
   const [searchValue, setSearchValue] = React.useState('');
   const [openKeys, setOpenKeys] = React.useState([]);
 
@@ -138,6 +144,7 @@ const CheckboxFilter = props => {
     const key = String(filter.value);
     const item = {
       title: filter.label,
+      id: filter.value !== undefined ? filter.value : index,
       key: filter.value !== undefined ? key : String(index)
     };
     if (filter.children) {
@@ -155,7 +162,7 @@ const CheckboxFilter = props => {
   });
   const onCheckAll = e => {
     if (e.target.checked) {
-      const allFilterKeys = (0, _useFilter.flattenKeys)(options).map(key => String(key));
+      const allFilterKeys = (0, _useFilter.flattenKeys)(options).map(key => key);
 
       // setFilteredKeysSync(allFilterKeys);
       onSelect?.(allFilterKeys);
@@ -170,10 +177,17 @@ const CheckboxFilter = props => {
   }) => {
     if (!filterMultiple) {
       // onSelectKeys({ selectedKeys: checked && node.key ? [node.key] : [] });
-      onSelect?.(checked && node.key ? [node.key] : []);
+
+      onSelect?.(checked && node.key ? [node.id] : []);
     } else {
+      if (!checked) {
+        const rs = propsSelectedKeys.filter(it => it !== node.id);
+        onSelect?.(rs);
+      } else {
+        const rs = [...propsSelectedKeys, node.id];
+        onSelect?.(rs);
+      }
       // onSelectKeys({ selectedKeys: keys });
-      onSelect?.(keys);
     }
   };
   if (filterMode === 'tree') {

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

@@ -146,7 +146,7 @@ const TableHeadCell = props => {
           minWidth: 275,
           padding: '8px'
         }
-      }, /*#__PURE__*/_react.default.createElement("div", null), column.meta?.showOperator !== false && column.meta?.typeFilter !== 'DateRange' && column.meta?.typeFilter !== 'NumberRange' && /*#__PURE__*/_react.default.createElement("div", {
+      }, /*#__PURE__*/_react.default.createElement("div", null), column.meta?.hideOperator === true && column.meta?.typeFilter !== 'DateRange' && column.meta?.typeFilter !== 'NumberRange' && /*#__PURE__*/_react.default.createElement("div", {
         className: 'mb-1'
       }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Select, {
         options: (0, _hooks.translateOption)(operatorOptions, t),

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

@@ -145,7 +145,7 @@ const TableHeadCell2 = props => {
           minWidth: 275,
           padding: '8px'
         }
-      }, /*#__PURE__*/_react.default.createElement("div", null), column.columnDef?.meta?.showOperator !== false && column.columnDef?.meta?.typeFilter !== 'DateRange' && column.columnDef?.meta?.typeFilter !== 'NumberRange' && /*#__PURE__*/_react.default.createElement("div", {
+      }, /*#__PURE__*/_react.default.createElement("div", null), column.columnDef?.meta?.hideOperator === true && column.columnDef?.meta?.typeFilter !== 'DateRange' && column.columnDef?.meta?.typeFilter !== 'NumberRange' && /*#__PURE__*/_react.default.createElement("div", {
         className: 'mb-1'
       }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Select, {
         options: (0, _hooks.translateOption)(operatorOptions, t),

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

@@ -267,7 +267,9 @@ const renderFilter = args => {
       }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_CheckboxFilter.default, {
         locale: locale,
         selectedKeys: selectedKeys,
-        onSelect: setSelectedKeys
+        onSelect: val => {
+          setSelectedKeys(val);
+        }
         // options={options}
         ,
         options: source ? source : options ?? [],

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

@@ -915,7 +915,89 @@ const shouldInclude = (item, queries) => {
   }
   return result;
 };
+
+// function compareValues(a: any, b: any, order: "ascend" | "descend") {
+//   const desc = order === "descend";
+
+//   if (a == null && b == null) return 0;
+//   if (a == null) return desc ? 1 : -1;
+//   if (b == null) return desc ? -1 : 1;
+
+//   // Nếu là số
+//   if (typeof a === "number" && typeof b === "number") {
+//     return desc ? b - a : a - b;
+//   }
+
+//   // Nếu là ngày hợp lệ
+//   const dateA = new Date(a);
+//   const dateB = new Date(b);
+//   if (!isNaN(dateA.getTime()) && !isNaN(dateB.getTime())) {
+//     return desc
+//       ? dateB.getTime() - dateA.getTime()
+//       : dateA.getTime() - dateB.getTime();
+//   }
+
+//   // Mặc định coi như string
+//   return desc
+//     ? String(b).localeCompare(String(a))
+//     : String(a).localeCompare(String(b));
+// }
+
+// export function sortData(data: any[], sorter: Sorter[]): any[] {
+//   const sorted = [...data].sort((a, b) => {
+//     for (const { field, order } of sorter) {
+//       const result = compareValues(a[field], b[field], order);
+//       if (result !== 0) return result;
+//     }
+//     return 0;
+//   });
+
+//   return sorted.map(item => ({
+//     ...item,
+//     children: item.children
+//       ? sortData(item.children, sorter)
+//       : undefined
+//   }));
+// }
+
+// export function filterDataByColumns(data: any[], queries: any[], sorter: Sorter[], keysFilter: string[] | undefined) {
+
+//   if (!queries || queries.length === 0) {
+//     return sorter ? sortData(data, sorter) : data;
+//   }
+
+//   let filtered = data.map(item => {
+//     const newItem = { ...item }
+
+//     if (Array.isArray(item.children)) {
+//       newItem.children = filterDataByColumns(item.children, queries, sorter, keysFilter)
+//     }
+
+//     const isSelfMatched = shouldInclude(item, queries) || keysFilter?.includes(newItem?.rowId)
+
+//     // Nếu chính item thỏa hoặc có con thỏa → giữ lại
+//     if (isSelfMatched || (newItem.children && newItem.children.length > 0)) {
+//       return newItem
+//     }
+
+//     return null // loại bỏ node không phù hợp
+//   })
+//     .filter(Boolean) // xóa các null
+
+//   if (sorter && sorter.length > 0) {
+//     filtered = sortData(filtered, sorter);
+//   }
+
+//   return filtered;
+// }
 exports.shouldInclude = shouldInclude;
+function getSortValue(item, field) {
+  if (item[field] !== undefined) return item[field];
+  if (item.children && item.children.length > 0) {
+    return getSortValue(item.children[0], field);
+  }
+  return undefined;
+}
 function compareValues(a, b, order) {
   const desc = order === "descend";
   if (a == null && b == null) return 0;
@@ -943,7 +1025,7 @@ function sortData(data, sorter) {
       field,
       order
     } of sorter) {
-      const result = compareValues(a[field], b[field], order);
+      const result = compareValues(getSortValue(a, field), getSortValue(b, field), order);
       if (result !== 0) return result;
     }
     return 0;

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

@@ -60,7 +60,7 @@ const Grid = props => {
     allowResizing,
     windowSize,
     fullScreenTitle,
-    classNames: tableClassNames,
+    className: tableClassNames,
     ...rest
   } = props;
   const [columnResizeMode] = _react.default.useState('onChange');

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

@@ -151,7 +151,9 @@ const TableBodyCell = props => {
     table,
     isEditing,
     colSpan,
+    rowSpan,
     groupValue
+    // ...cellProps
   } = props;
   const {
     id,
@@ -316,6 +318,10 @@ const TableBodyCell = props => {
   return /*#__PURE__*/_react.default.createElement("td", {
     key: cell.id,
     colSpan: colSpan,
+    rowSpan: rowSpan
+    // {...cellProps}
+    ,
+
     ref: el => {
       if (focusedCell?.rowId === cell.row.id && focusedCell?.colId === cell.column.id && !isEditing) {
         el?.focus();

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

@@ -60,12 +60,22 @@ const TableBodyRow = ({
       }
     }
   }), visibleCells.map(cell => {
+    const originCol = cell.column.columnDef.meta ?? {};
+    const {
+      onCell
+    } = originCol ?? {};
+    const cellAttributes = onCell?.(cell.row.original, cell.row.index) ?? {};
+    const {
+      colSpan: onCellColSpan,
+      rowSpan: onCellRowSpan,
+      ...otherCellAttributes
+    } = cellAttributes;
     const nonGroupColumns = visibleCells.filter(col => col.column.id !== 'selection_column' && col.column.id !== '#');
     const firstNonGroupColumn = nonGroupColumns[0];
 
     // const colSpan  = row.subRows && cell.column.id === firstNonGroupColumn?.id ? (groupSetting?.groupColumnSpan ?? 2)
-    const colSpan = row.subRows && row.subRows.length > 0 && cell.column.id === firstNonGroupColumn?.column.id ? 2 : row.subRows && nonGroupColumns[1].column.id === cell.column.id ? 0 : 1;
-    if (row.subRows && row.subRows.length > 0 && colSpan === 0) {
+    const colSpanGroup = row.subRows && row.subRows.length > 0 && cell.column.id === firstNonGroupColumn?.column.id ? 2 : row.subRows && nonGroupColumns[1].column.id === cell.column.id ? 0 : 1;
+    if (row.subRows && row.subRows.length > 0 && colSpanGroup === 0 || onCellRowSpan === 0 || onCellColSpan === 0) {
       return null;
     }
 
@@ -94,7 +104,7 @@ const TableBodyRow = ({
         rowData: row.original,
         value: cellValue
       }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, headertext, headertext ? ': ' : '', " ", cellContent);
-      return /*#__PURE__*/_react.default.createElement(_TableBodyCell.default, {
+      return /*#__PURE__*/_react.default.createElement(_TableBodyCell.default, (0, _extends2.default)({
         table: table,
         tableId: tableId,
         key: cell.id,
@@ -102,11 +112,13 @@ const TableBodyRow = ({
         commandClick: commandClick,
         virtualRow: virtualRow,
         isEditing: false,
-        colSpan: colSpan ?? 1,
+        colSpan: colSpanGroup ?? 1,
+        rowSpan: 1
+      }, otherCellAttributes, {
         groupValue: groupValue
-      });
+      }));
     }
-    return /*#__PURE__*/_react.default.createElement(_TableBodyCell.default, {
+    return /*#__PURE__*/_react.default.createElement(_TableBodyCell.default, (0, _extends2.default)({
       table: table,
       tableId: tableId,
       key: cell.id,
@@ -114,8 +126,9 @@ const TableBodyRow = ({
       commandClick: commandClick,
       virtualRow: virtualRow,
       isEditing: false,
-      colSpan: colSpan ?? 1
-    });
+      colSpan: onCellColSpan ?? 1,
+      rowSpan: onCellRowSpan ?? 1
+    }, otherCellAttributes));
   }));
 };
 var _default = exports.default = TableBodyRow;

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

@@ -131,7 +131,7 @@ const TableHeadCell = props => {
           minWidth: 275,
           padding: '8px'
         }
-      }, column.meta?.showOperator !== false && column.meta?.typeFilter !== 'DateRange' && column.meta?.typeFilter !== 'NumberRange' && /*#__PURE__*/_react.default.createElement("div", {
+      }, column.meta?.hideOperator === true && column.meta?.typeFilter !== 'DateRange' && column.meta?.typeFilter !== 'NumberRange' && /*#__PURE__*/_react.default.createElement("div", {
         className: 'mb-1'
       }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Select, {
         options: (0, _hooks.translateOption)(operatorOptions, t),

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

@@ -61,7 +61,7 @@ const Grid = props => {
     columnFilters,
     setColumnOrder,
     rowSelection,
-    classNames: tableClassNames,
+    className: tableClassNames,
     ...rest
   } = props;
   const [isSelectionChange, setIsSelectionChange] = _react.default.useState({

package/package.json

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