es-grid-template 1.8.64 → 1.8.66

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

@@ -0,0 +1,2263 @@
+import { SELECTION_COLUMN } from "rc-master-ui/es/table/hooks/useSelection";
+import { v4 as uuidv4 } from 'uuid';
+import { presetPalettes } from "@ant-design/colors";
+import dayjs from "dayjs";
+import moment from "moment";
+export const newGuid = () => {
+  for (let i = 0; i < 20; i++) {
+    return uuidv4();
+  }
+};
+export const convertDayjsToDate = (dateString, format) => {
+  const dayjsDate = dayjs(dateString, format); // Parse using the provided format
+  if (!dayjsDate.isValid()) {
+    throw new Error('Invalid date or format');
+  }
+  // return moment(dayjsDate.toDate()).format() // Convert to JavaScript Date
+  return dayjsDate.toDate(); // Convert to JavaScript Date
+};
+export const convertDateToDayjs = (date, format) => {
+  const dateValue = date ? dayjs(date).format(format) : null;
+  return dateValue ? dayjs(dateValue, format) : null;
+};
+export const getCommonPinningHeaderStyles = column => {
+  const isPinned = column.getIsPinned();
+  return {
+    left: isPinned === "left" ? `${column.getStart("left")}px` : undefined,
+    right: isPinned === "right" ? `${column.getAfter("right")}px` : undefined,
+    opacity: 1,
+    position: isPinned ? "sticky" : "relative",
+    // width: 'auto',
+    zIndex: isPinned ? 4 : 3
+  };
+};
+export const getCommonPinningStyles = column => {
+  const isPinned = column.getIsPinned();
+  return {
+    left: isPinned === "left" ? `${column.getStart("left")}px` : undefined,
+    right: isPinned === "right" ? `${column.getAfter("right")}px` : undefined,
+    opacity: 1,
+    position: isPinned ? "sticky" : "relative",
+    // width: 'auto',
+    zIndex: isPinned ? 2 : 0
+  };
+};
+export const getCommonPinningStyles2 = header => {
+  const isPinned = header.column.getIsPinned();
+  // const isLastLeftPinnedColumn = isPinned === "left" && column.getIsLastColumn("left");
+  // const isFirstRightPinnedColumn =isPinned === "right" && column.getIsFirstColumn("right");
+
+  return {
+    // boxShadow: isFirstRightPinnedColumn
+    //     ? "#e0e0e0 2px 0px 1px -1px inset"
+    //     : undefined,
+
+    left: isPinned === "left" ? `${header.getStart("left")}px` : undefined,
+    right: isPinned === "right" ? `${header.getAfter("right")}px` : undefined,
+    opacity: 1,
+    position: isPinned ? "sticky" : "relative",
+    width: 'auto',
+    zIndex: isPinned ? 2 : 0
+  };
+};
+export const sumSize = items => {
+  return items.reduce((total, item) => total + item.size, 0);
+};
+export const appendIfNotExists = (a, b) => {
+  const existingKeys = new Set(a.map(item => item.index));
+  b.forEach(item => {
+    if (!existingKeys.has(item.index)) {
+      a.push(item);
+    }
+  });
+  return a;
+};
+export const getNewItemsOnly = (a, b) => {
+  const existingKeys = new Set(a.map(item => item.key));
+  return b.filter(item => !existingKeys.has(item.key));
+};
+export const extendsObject = (...list) => {
+  const result = {
+    ...list[0]
+  };
+  for (let i = 1; i < list.length; i++) {
+    const obj = list[i];
+    if (obj) {
+      Object.keys(obj).forEach(key => {
+        const val = obj[key];
+        if (val !== undefined) {
+          result[key] = val;
+        }
+      });
+    }
+  }
+  return result;
+};
+export const isEmpty = d => {
+  return d === null || d === undefined || d === '';
+};
+export const getFormat = (colFormat, format) => {
+  return {
+    thousandSeparator: colFormat?.thousandSeparator ?? format?.thousandSeparator,
+    decimalSeparator: colFormat?.decimalSeparator ?? format?.decimalSeparator,
+    decimalScale: colFormat?.decimalScale ?? format?.decimalScale ? Number(colFormat?.decimalScale ?? format?.decimalScale) : colFormat?.decimalScale ?? format?.decimalScale,
+    allowNegative: colFormat?.allowNegative ?? format?.allowNegative,
+    // check nhập số âm
+    prefix: colFormat?.prefix ?? format?.prefix,
+    suffix: colFormat?.suffix ?? format?.suffix,
+    fixedDecimalScale: colFormat?.fixedDecimalScale ?? format?.fixedDecimalScale,
+    // mặc định thêm số 0 sau số thập phân
+    dateFormat: colFormat?.dateFormat ?? format?.dateFormat,
+    datetimeFormat: colFormat?.datetimeFormat ?? format?.datetimeFormat,
+    timeFormat: colFormat?.timeFormat ?? format?.timeFormat,
+    weekFormat: colFormat?.weekFormat ?? format?.weekFormat,
+    monthFormat: colFormat?.monthFormat ?? format?.monthFormat,
+    yearFormat: colFormat?.yearFormat ?? format?.yearFormat
+  };
+};
+export function convertFormat(formatStr) {
+  // return formatStr.split('').map((char, i) => {
+  //   if (char === 'D' || char === 'd') {
+  //     return 'd'; // ngày: lowercase
+  //   }
+  //   if (char === 'Y' || char === 'y') {
+  //     return 'y'; // năm: lowercase
+  //   }
+  //   if (char === 'M' || char === 'm') {
+  //     return char; // tháng: giữ nguyên
+  //   }
+  //   return char; // separator
+  // }).join('');
+
+  return formatStr.split('').map(char => {
+    if (char === 'D' || char === 'd') return 'd';
+    if (char === 'Y' || char === 'y') return 'y';
+    if ('Hhmsa'.includes(char)) return char; // giờ, phút, giây, am/pm
+    if (char === 'M' || char === 'm') return char; // tháng: giữ nguyên
+    return char; // dấu phân cách
+  }).join('');
+}
+export const getDatepickerFormat = (type, format) => {
+  const typeFormat = type ? type.toLowerCase() : '';
+  switch (typeFormat) {
+    case "date":
+    case "daterange":
+      return format?.dateFormat ?? 'DD/MM/YYYY';
+    case "datetime":
+      return format?.datetimeFormat ?? 'DD/MM/YYYY HH:mm';
+    case "week":
+      return format?.weekFormat ?? 'DD/MM';
+    case "month":
+      return format?.monthFormat ?? 'MM/YYYY';
+    case "quarter":
+      return format?.dateFormat ?? 'DD/MM/YYYY';
+    case "year":
+      return format?.yearFormat ?? 'YYYY';
+    case "time":
+      return format?.timeFormat ?? 'HH:mm';
+    default:
+      return 'DD/MM/YYYY';
+  }
+};
+export const getDateRangeFormat = (type, format) => {
+  const typeFormat = type ? type.toLowerCase() : '';
+  switch (typeFormat) {
+    case "date":
+    case "daterange":
+      return convertFormat(format?.dateFormat ?? 'dd/MM/yyyy');
+    case "datetime":
+      return format?.datetimeFormat ?? 'dd/MM/yyyy HH:mm';
+    case "week":
+      return format?.weekFormat ?? 'dd/MM';
+    case "month":
+      return format?.monthFormat ?? 'MM/yyyy';
+    case "quarter":
+      return format?.dateFormat ?? 'dd/MM/yyyy';
+    case "year":
+      return format?.yearFormat ?? 'yyyy';
+    case "time":
+      return format?.timeFormat ?? 'HH:mm';
+    default:
+      return 'dd/MM/yyyy';
+  }
+};
+export const getTypeFilter = col => {
+  if (col?.typeFilter) {
+    return col.typeFilter;
+  }
+  const type = col?.type ?? 'Text';
+  switch (type) {
+    case "number":
+      return 'Number';
+    case "date":
+      return 'Date';
+    case "datetime":
+      return 'Datetime';
+    case "boolean":
+      return 'Checkbox';
+    case "checkbox":
+      return 'Checkbox';
+
+    // case "week": return ''
+    // case "month": return 'Month'
+    // case "quarter": return col.format?.dateFormat ? col.format?.dateFormat : 'DD/MM/YYYY'
+    // case "year": return col.format?.yearFormat ? col.format?.yearFormat : 'YYYY'
+    // case "time": return col.format?.timeFormat ? col.format?.timeFormat : 'HH:mm'
+    case "string":
+    default:
+      return 'Text';
+  }
+};
+export const addRowIdArray = inputArray => {
+  if (inputArray) {
+    return inputArray.map(item => {
+      if (typeof item.children !== "string" && item.children && item.children.length > 0) {
+        item.children = addRowIdArray(item.children);
+      }
+
+      // return { ...item, rowId: item.rowId ?? item.id ?? newGuid() }
+      return {
+        ...item,
+        rowId: item.id ?? item.rowId ?? newGuid()
+      };
+    });
+  } else {
+    return [];
+  }
+};
+export function groupArrayByColumns(arr, columns) {
+  const result = [];
+  if (columns && columns.length > 0) {
+    arr.forEach(item => {
+      let currentLevel = result;
+      const parentChain = []; // Lưu rowId của mỗi level để biết parent
+
+      columns.forEach((column, index) => {
+        const value = item[column];
+
+        // Tạo key unique cho group dựa trên value của cột
+        // Tìm existing item ở level hiện tại
+        const existingItem = currentLevel.find(i => i[column] === value);
+        if (existingItem) {
+          // Item đã tồn tại, chỉ update parentChain
+          parentChain[index] = existingItem.rowId;
+          currentLevel = existingItem.children;
+        } else {
+          // Tạo item mới
+          const groupRowId = String(value);
+          const newItem = {
+            [column]: value,
+            field: column,
+            rowId: groupRowId,
+            id: groupRowId,
+            parentId: parentChain[index - 1] ?? null,
+            // Parent là rowId của level trước
+            children: []
+          };
+          currentLevel.push(newItem);
+          parentChain[index] = groupRowId;
+          currentLevel = newItem.children;
+        }
+      });
+
+      // Data item cuối cùng: parentId là rowId của group parent gần nhất (level cuối cùng)
+      currentLevel.push({
+        ...item,
+        rowId: item.id ?? item.rowId,
+        parentId: parentChain[columns.length - 1] ?? null
+      });
+    });
+    return result;
+  } else {
+    return arr;
+  }
+}
+export const flatColumns2 = columns => {
+  return columns.reduce((list, column) => {
+    const subColumns = column.children;
+    if (column === SELECTION_COLUMN) {
+      return [...list, {
+        ...column
+      }];
+    }
+    if (subColumns && subColumns.length > 0) {
+      return [...list, ...flatColumns2(subColumns).map(subColum => ({
+        ...subColum
+      }))];
+    }
+    return [...list, {
+      ...column
+    }];
+  }, []);
+};
+export const checkThousandSeparator = (thousandSeparator, decimalSeparator) => {
+  if (thousandSeparator) {
+    if (decimalSeparator) {
+      if (thousandSeparator === decimalSeparator) {
+        return ',';
+      } else {
+        return thousandSeparator;
+      }
+    } else {
+      return thousandSeparator;
+    }
+  } else {
+    return undefined;
+  }
+};
+export const checkDecimalSeparator = (thousandSeparator, decimalSeparator) => {
+  if (decimalSeparator) {
+    if (thousandSeparator) {
+      if (thousandSeparator === decimalSeparator) {
+        return '.';
+      } else {
+        return decimalSeparator;
+      }
+    } else {
+      return decimalSeparator;
+    }
+  } else {
+    if (thousandSeparator && thousandSeparator === '.') {
+      return ',';
+    }
+    return '.';
+  }
+};
+export const getFixedFields = (columns, type) => {
+  const result = [];
+  function traverse(cols) {
+    for (const col of cols) {
+      if ((col.fixed ?? col.fixedType) === type && col.field && (col.visible !== false || col.hidden)) {
+        result.push(col.field);
+      }
+      if (col.children && col.children.length > 0) {
+        traverse(col.children);
+      }
+    }
+  }
+  traverse(columns);
+  return result;
+};
+export function areStringArraysEqual(a, b) {
+  if (a.length !== b.length) return false;
+  const sortedA = [...a].sort();
+  const sortedB = [...b].sort();
+  return sortedA.every((val, index) => val === sortedB[index]);
+}
+export const getDefaultOperator = col => {
+  if (col.operator) {
+    return col.operator;
+  }
+  if (col.typeFilter) {
+    switch (col.typeFilter) {
+      case 'Number':
+      case 'Date':
+      case 'Datetime':
+      case 'Time':
+      case 'Month':
+      case 'Quarter':
+      case 'Year':
+      case 'Week':
+      case 'Dropdown':
+      case 'Checkbox':
+      case 'CheckboxDropdown':
+      case 'CheckboxTree':
+      case 'DropTree':
+        return 'equal';
+      case 'Text':
+      default:
+        return 'contains';
+    }
+  }
+  switch (col.type) {
+    case 'number':
+    case 'date':
+    case 'datetime':
+    case 'week':
+    case 'year':
+    case 'quarter':
+      return 'equal';
+    case 'string':
+    default:
+      return 'contains';
+  }
+};
+export function isEqualSet(setA, setB) {
+  if (setA.size !== setB.size) {
+    return false;
+  }
+  for (const item of setA) {
+    if (!setB.has(item)) {
+      return false;
+    }
+  }
+  return true;
+}
+export const getLastSelectCell = selectCells => {
+  if (selectCells.size === 0) {
+    return {
+      row: 0,
+      col: 0
+    };
+  }
+  const lastValue = [...selectCells].at(-1);
+  const [row, col] = lastValue.split("-").map(Number);
+  return {
+    row,
+    col
+  };
+};
+export function getCellsByPosition(cellSet, position = "bottom") {
+  const cells = Array.from(cellSet).map(key => {
+    const [row, col] = key.split("-").map(Number);
+    return {
+      row,
+      col,
+      key
+    };
+  });
+  switch (position) {
+    case "top":
+      {
+        // const minRow = Math.min(...cells.map(c => c.row));
+        // return cells.filter(c => c.row === minRow).map(c => c.key);
+
+        // const rows = cells.map(c => c.row).filter(r => r > 0);
+        // if (rows.length === 0) return [];
+        // const minRow = Math.min(...rows);
+        // return cells.filter(c => c.row === minRow).map(c => c.key);
+
+        const minRow = Math.min(...cells.map(c => c.row));
+        if (minRow === 0) {
+          return [];
+        } // Bỏ qua nếu rowIndex = 0
+
+        return cells.filter(c => c.row === minRow).map(c => `${c.row}-${c.col}`);
+      }
+    case "bottom":
+      {
+        const maxRow = Math.max(...cells.map(c => c.row));
+        return cells.filter(c => c.row === maxRow).map(c => c.key);
+      }
+    case "left":
+      {
+        // const minCol = Math.min(...cells.map(c => c.col));
+        // return cells.filter(c => c.col === minCol).map(c => c.key);
+
+        // const cols = cells.map(c => c.col).filter(c => c > 0);
+        // if (cols.length === 0) return [];
+        // const minCol = Math.min(...cols);
+        // return cells.filter(c => c.col === minCol).map(c => c.key);
+
+        const minCol = Math.min(...cells.map(c => c.col));
+        if (minCol === 0) {
+          return [];
+        } // Bỏ qua nếu colIndex = 0
+
+        // Trả về các ô cùng row, nhưng ở cột bên trái
+        return cells.filter(c => c.col === minCol).map(c => `${c.row}-${c.col}`);
+      }
+    case "right":
+      {
+        const maxCol = Math.max(...cells.map(c => c.col));
+        return cells.filter(c => c.col === maxCol).map(c => c.key);
+      }
+    default:
+      return [];
+  }
+}
+export const onAddBgSelectedCell = (selectedCells, id, isFocusCellIndex) => {
+  const selectors = Array.from(selectedCells).map(pos => {
+    const [row1, col1] = pos.split('-');
+    return `[data-row-index="${row1}"][data-col-index="${col1}"]`;
+  });
+  const table = document.querySelector(`#${id}`);
+
+  //// xóa class các ô đã chọn trước đó
+  const cellsSelected = table ? table?.querySelectorAll('.ui-rc-table-cell.selected-bg') : null;
+  if (cellsSelected) {
+    cellsSelected.forEach(cell => {
+      cell.classList.remove('selected-bg');
+    });
+  }
+
+  /// thêm class
+  const cells = table && selectors.length > 0 ? table?.querySelectorAll(selectors.join(',')) : null;
+  if (cells) {
+    cells.forEach(cell => {
+      cell.classList.add('selected-bg');
+    });
+  }
+  const rowsArray = [...new Set([...selectedCells].map(item => item.split("-")[0]))];
+  const rowsSelectors = rowsArray.map(r => `.rc-ui-cell-index[data-row-index="${r}"]`).join(", ");
+  const cellsIndex = table && rowsSelectors.length > 0 ? table?.querySelectorAll(rowsSelectors) : null;
+  if (cellsIndex && isFocusCellIndex !== false) {
+    cellsIndex.forEach(cell => {
+      cell.classList.add('focus');
+    });
+  }
+
+  // // tăng z-index để hiển thị round point paste
+  // const row  = getLastSelectCell(selectedCells).row
+  // const col  = getLastSelectCell(selectedCells).col
+  // const cell: any = table?.querySelector(`.ui-rc-table-cell[data-row-index="${row}"][data-col-index="${col}"]`)
+  //
+  // if (cell) {
+  //   cell.style.zIndex = 1
+  // }
+  //
+  // if (cell && cell.classList.contains('ui-rc-table-cell-fix-left')) {
+  //   cell.style.zIndex = 3;
+  // }
+
+  //  thêm class border selected
+
+  // addBorderClass(selectedCells, 'bottom', 'cell-border-bottom', id)
+  // addBorderClass(selectedCells, 'right', 'cell-border-right', id)
+  // addBorderClass(selectedCells, 'top', 'cell-border-top', id)
+  // addBorderClass(selectedCells, 'left', 'cell-border-left', id)
+};
+export const onRemoveBgSelectedCell = (selectedCells, id, rowsSelected) => {
+  const table = document.querySelector(`#${id}`);
+  const cells = table ? table?.querySelectorAll('.ui-rc-table-cell.selected-bg') : null;
+  if (cells) {
+    cells.forEach(cell => {
+      cell.classList.remove('selected-bg');
+    });
+  }
+  const cellsIndex = table ? table?.querySelectorAll('.ui-rc-table-cell.focus') : null;
+  if (cellsIndex) {
+    cellsIndex.forEach(cell => {
+      cell.classList.remove('focus');
+    });
+  }
+
+  // xóa class selected ô STT
+
+  if (rowsSelected && rowsSelected.size > 0) {
+    const rowsSelectedArray = [...new Set([...rowsSelected].map(item => item.split("-")[0]))];
+    const rowsSelectedSelectors = rowsSelectedArray.map(r => `.rc-ui-cell-index[data-row-index="${r}"]`).join(", ");
+    const cellsSelectedIndex = table && rowsSelectedSelectors.length > 0 ? table?.querySelectorAll(rowsSelectedSelectors) : null;
+    if (cellsSelectedIndex) {
+      cellsSelectedIndex.forEach(cell => {
+        cell.classList.remove('selected');
+      });
+    }
+  }
+};
+export function getColIdsBetween(table, a, b) {
+  const ids = table.getVisibleLeafColumns().map(c => c.id);
+  const [start, end] = [ids.indexOf(a), ids.indexOf(b)].sort((x, y) => x - y);
+  return ids.slice(start, end + 1);
+}
+export function getRowIdsBetween(table, a, b) {
+  // const ids = table.getRowModel().rows.map(r => r.id);
+  const ids = table.getRowModel().flatRows.map(r => r.id);
+  const [start, end] = [ids.indexOf(a), ids.indexOf(b)].sort((x, y) => x - y);
+  return ids.slice(start, end + 1);
+}
+export const updateArrayByKey = (arr, element, key) => {
+  if (arr) {
+    return arr.map(it => {
+      const item = {
+        ...it
+      };
+      if (item[key] === element[key]) {
+        return {
+          ...item,
+          ...element
+        };
+      } else if (item.children && item.children.length > 0) {
+        item.children = updateArrayByKey(item.children, element, key);
+      }
+      return item;
+    });
+  } else {
+    return [];
+  }
+};
+export const unFlattenData = data => {
+  const idToNodeMap = {};
+  const tree = [];
+
+  // Bước 1: Tạo map id -> node
+  data.forEach(item => {
+    // idToNodeMap[item.rowId] = { ...item, children: [] }
+    idToNodeMap[item.rowId] = {
+      ...item
+    };
+  });
+
+  // Bước 2: Gắn vào parent hoặc đẩy lên root nếu không có parent
+  data.forEach(item => {
+    const currentNode = idToNodeMap[item.rowId];
+    if (!item.parentId) {
+      tree.push(currentNode);
+    } else {
+      const parentNode = idToNodeMap[item.parentId];
+      if (parentNode) {
+        parentNode.children = parentNode.children ?? [];
+        parentNode.children.push(currentNode);
+      } else {
+        // Nếu parentId không tồn tại thì xem như root
+        tree.push(currentNode);
+      }
+    }
+  });
+  return tree;
+};
+export const flattenArray = arr => {
+  if (!arr) {
+    return [];
+  }
+  return arr.reduce((r, {
+    children,
+    ...rest
+  }) => {
+    r.push(rest);
+    if (children) {
+      r.push(...flattenArray(children));
+    }
+    return r;
+  }, []);
+};
+export function updateOrInsert(dataArray, dataFilter) {
+  const updatedArray = [...dataArray];
+  dataFilter.forEach(filterItem => {
+    const existingIndex = updatedArray.findIndex(item => item.rowId === filterItem.rowId);
+    if (existingIndex !== -1) {
+      // Cập nhật item đã tồn tại
+      updatedArray[existingIndex] = {
+        ...updatedArray[existingIndex],
+        ...filterItem
+      };
+    } else {
+      // Tìm vị trí cuối cùng của item trước đó trong dataFilter
+      const prevIndexInFilter = dataFilter.findIndex(f => f.rowId === filterItem.rowId) - 1;
+      if (prevIndexInFilter >= 0) {
+        const prevId = dataFilter[prevIndexInFilter].rowId;
+        const prevIndexInArray = updatedArray.findIndex(item => item.rowId === prevId);
+        if (prevIndexInArray !== -1) {
+          // Thêm ngay sau phần tử trước đó
+          updatedArray.splice(prevIndexInArray + 1, 0, filterItem);
+          return;
+        }
+      }
+
+      // Nếu không tìm thấy phần tử trước đó, hoặc là phần đầu tiên, thì push vào cuối
+      updatedArray.push(filterItem);
+    }
+  });
+  return updatedArray;
+}
+export const findItemByKey = (array, key, value) => {
+  for (let i = 0; i < array.length; i++) {
+    const item = array[i];
+    if (item[key] === value) {
+      return item;
+    }
+    if (item.children && item.children.length > 0) {
+      const foundInChildren = findItemByKey(item.children, key, value);
+      if (foundInChildren) {
+        return foundInChildren;
+      }
+    }
+  }
+  return null;
+};
+export const isFormattedNumber = str => {
+  if (!str) return false;
+  if (typeof str !== 'string') return false;
+  const regexUS = /^\d{1,3}(,\d{3})*(\.\d+)?$/; // 100,000.111
+  const regexEU = /^\d{1,3}(\.\d{3})*(,\d+)?$/; // 100.000,111
+
+  // Không có dấu hàng nghìn, chỉ dấu thập phân: 100000.1 hoặc 100000,01
+  const regexDecimalOnly = /^-?\d+([.,]\d{1,})$/;
+  return regexUS.test(str) || regexEU.test(str) || regexDecimalOnly.test(str);
+};
+export const detectSeparators = str => {
+  if (typeof str !== 'string') return null;
+  const hasComma = str.includes(',');
+  const hasDot = str.includes('.');
+
+  // Trường hợp có cả dấu , và .
+  if (hasComma && hasDot) {
+    const lastComma = str.lastIndexOf(',');
+    const lastDot = str.lastIndexOf('.');
+    return lastComma > lastDot ? {
+      thousandSeparator: '.',
+      decimalSeparator: ','
+    } : {
+      thousandSeparator: ',',
+      decimalSeparator: '.'
+    };
+  }
+
+  // Trường hợp chỉ có dấu phẩy
+  if (hasComma && !hasDot) {
+    const parts = str.split(',');
+    if (parts.length === 2) {
+      return parts[1].length === 3 ? {
+        thousandSeparator: ',',
+        decimalSeparator: undefined
+      } : {
+        thousandSeparator: undefined,
+        decimalSeparator: ','
+      };
+    }
+  }
+
+  // Trường hợp chỉ có dấu chấm
+  if (hasDot && !hasComma) {
+    const parts = str.split('.');
+    if (parts.length === 2) {
+      return parts[1].length === 3 ? {
+        thousandSeparator: '.',
+        decimalSeparator: undefined
+      } : {
+        thousandSeparator: undefined,
+        decimalSeparator: '.'
+      };
+    }
+  }
+
+  // Không có dấu hoặc không hợp lệ
+  return null;
+};
+function isDate(value) {
+  if (value instanceof Date) {
+    return !isNaN(value.getTime());
+  }
+  if (typeof value === "string") {
+    // Chỉ chấp nhận định dạng yyyy-mm-dd hoặc mm/yyyy
+    return /^\d{4}-\d{2}-\d{2}$/.test(value) || /^\d{2}\/\d{4}$/.test(value);
+  }
+  return false;
+}
+
+// Chuỗi MM/YYYY → Date
+export function isDateString(str) {
+  return typeof str === "string" && (/^\d{2}\/\d{4}$/.test(str) || /^\d{4}-\d{2}-\d{2}$/.test(str));
+}
+function parseToDate(str) {
+  if (/^\d{2}\/\d{4}$/.test(str)) {
+    const [month, year] = str.split('/');
+    return new Date(parseInt(year), parseInt(month) - 1, 1);
+  }
+  return new Date(str);
+}
+
+// So sánh ngày (cùng ngày/tháng/năm)
+export function compareDates(date1, date2) {
+  return date1.getDate() === date2.getDate() && date1.getMonth() === date2.getMonth() && date1.getFullYear() === date2.getFullYear();
+}
+
+// Helper: compare MM/YYYY date string with itemValue
+export function compareDate(itemValue, value) {
+  const [month, year] = value.split('/').map(Number);
+  const date = new Date(itemValue);
+  return date.getMonth() + 1 === month && date.getFullYear() === year;
+}
+export const removeVietnameseTones = str => {
+  if (!str) {
+    return '';
+  }
+  return str.normalize('NFD') // Tách các ký tự có dấu thành ký tự cơ bản + dấu
+  .replace(/[\u0300-\u036f]/g, '') // Xóa dấu
+  .replace(/đ/g, 'd') // Thay thế đ
+  .replace(/Đ/g, 'D').replace(/[^a-zA-Z0-9\s]/g, '') // Loại bỏ ký tự đặc biệt
+  .replace(/\s+/g, ' ') // Thay nhiều khoảng trắng thành 1 khoảng trắng
+  .trim();
+};
+export const shouldInclude = (item, queries) => {
+  if (item.isFilterState === true) {
+    return true;
+  }
+  let result = null;
+  for (const query of queries) {
+    const {
+      field,
+      value,
+      operator,
+      predicate
+    } = query;
+    const itemValue = item[field];
+    let condition = false;
+    const isDateComparison = isDate(itemValue) || isDateString(value);
+    const itemDate = isDateComparison ? new Date(itemValue) : null;
+    const queryDate = isDateComparison ? parseToDate(value) : null;
+    const itemStr = removeVietnameseTones(itemValue?.toString().toLowerCase?.() ?? '');
+    const queryStr = removeVietnameseTones(value?.toString().toLowerCase?.() ?? '');
+    switch (operator.toLowerCase()) {
+      case "equal":
+        condition = isDateComparison ? compareDates(itemDate, queryDate) : itemValue === value;
+        break;
+      case "notequal":
+        condition = isDateComparison ? !compareDates(itemDate, queryDate) : itemValue !== value;
+        break;
+      case "greaterthan":
+        // @ts-ignore
+        condition = isDateComparison ? itemDate > queryDate : itemValue > value;
+
+        // condition = isDateComparison ? invalidDate(itemDate) && invalidDate(queryDate) && itemDate > queryDate : itemValue > value;
+        break;
+      case "greaterthanorequal":
+        // @ts-ignore
+        condition = isDateComparison ? itemDate >= queryDate : itemValue >= value;
+        break;
+      case "lessthan":
+        // @ts-ignore
+        condition = isDateComparison ? itemDate < queryDate : itemValue < value;
+        break;
+      case "lessthanorequal":
+        // @ts-ignore
+        condition = isDateComparison ? itemDate <= queryDate : itemValue <= value;
+        break;
+      case "contains":
+        condition = itemStr?.includes(queryStr);
+        break;
+      case "startswith":
+        condition = itemStr?.startsWith(queryStr);
+        break;
+      case "endswith":
+        condition = itemStr?.endsWith(queryStr);
+        break;
+      default:
+        console.warn(`Unknown operator: ${operator}`);
+        break;
+    }
+    if (predicate === "and") {
+      result = result === null ? condition : result && condition;
+    } else if (predicate === "or") {
+      result = result === null ? condition : result || condition;
+    }
+  }
+  return result;
+};
+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;
+  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, sorter) {
+  const sorted = [...data].sort((a, b) => {
+    for (const {
+      field,
+      order
+    } of sorter) {
+      const result = compareValues(getSortValue(a, field), getSortValue(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, queries, sorter, keysFilter) {
+  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;
+}
+export const getAllRowKey = data => {
+  const a = flattenArray(data);
+  return a.length ? a.map(it => it.rowId) : undefined;
+};
+export const isEditable = (column, rowData) => {
+  if (column && typeof column.editEnable === 'function') {
+    return column.editEnable(rowData);
+  }
+  return column?.editEnable;
+};
+export const checkFieldKey = key => {
+  if (key) {
+    return key;
+  } else {
+    return 'value';
+  }
+};
+export const convertArrayWithIndent = (inputArray, parentIndent = 0) => {
+  if (inputArray) {
+    return inputArray.map(item => {
+      const indent = parentIndent;
+      if (item.children && item.children.length > 0) {
+        item.children = convertArrayWithIndent(item.children, indent + 1);
+      }
+      return {
+        ...item,
+        indent,
+        rowId: item.rowId ? item.rowId : item.id ? item.id : newGuid()
+      };
+    });
+  } else {
+    return [];
+  }
+};
+export const convertLabelToTitle = data => {
+  return data.map(item => {
+    const {
+      label,
+      title,
+      value,
+      key,
+      ...rest
+    } = item;
+    const newItem = {
+      ...rest,
+      value,
+      label,
+      key: key ?? value,
+      title: title ?? label
+    };
+    if (item.children) {
+      newItem.children = convertLabelToTitle(item.children);
+    }
+    return newItem;
+  });
+};
+export const isNullOrUndefined = d => {
+  return d === null || d === undefined;
+};
+export const isObjEmpty = obj => {
+  if (isNullOrUndefined(obj)) {
+    return true;
+  } else {
+    return Object.keys(obj).length === 0;
+  }
+};
+export const isDisable = (column, rowData) => {
+  if (column && typeof column?.disable === 'function') {
+    return column.disable(rowData);
+  }
+  return !!column?.disable;
+};
+export const customWeekStartEndFormat = (value, weekFormat) => {
+  return `${dayjs(value).startOf('week').format(weekFormat)} ~ ${dayjs(value).endOf('week').format(weekFormat)}`;
+};
+export const parseBooleanToValue = (value, type) => {
+  return type === 'boolean' ? value : Number(value);
+};
+export const isNameColor = strColor => {
+  const s = new Option().style;
+  s.color = strColor;
+  return s.color === strColor;
+};
+export const isColor = value => {
+  const hexRegex = /^#([0-9A-F]{3}){1,2}$/i;
+  const rgbRegex = /^rgb\((\d{1,3}), (\d{1,3}), (\d{1,3})\)$/;
+  const rgbaRegex = /^rgba\((\d{1,3}), (\d{1,3}), (\d{1,3}), (0|1|0?\.\d+)\)$/;
+  const hslRegex = /^hsl\(\d{1,3}, \d{1,3}%, \d{1,3}%\)$/;
+  const hslaRegex = /^hsla\(\d{1,3}, \d{1,3}%, \d{1,3}%, (0|1|0?\.\d+)\)$/;
+  const namedColors = /^(?:aqua|black|blue|fuchsia|gray|green|lime|maroon|navy|olive|purple|red|silver|teal|white|yellow)$/i;
+  return hexRegex.test(value) || rgbRegex.test(value) || rgbaRegex.test(value) || hslRegex.test(value) || hslaRegex.test(value) || namedColors.test(value) || isNameColor(value);
+};
+export const genPresets = (presets = presetPalettes) => {
+  return Object.entries(presets).map(([label, colors]) => ({
+    label,
+    colors,
+    key: label
+  }));
+};
+export const getEditType = (column, rowData) => {
+  if (column && typeof column.editType === 'function') {
+    return column.editType(rowData);
+  }
+  return column?.editType ?? 'text';
+};
+export const getDefaultValue = defaultValue => {
+  if (defaultValue && typeof defaultValue === 'function') {
+    return defaultValue();
+  }
+  return defaultValue;
+};
+export const flattenData = (childrenColumnName, data) => {
+  let list = [];
+  (data || []).forEach(record => {
+    list.push(record);
+    if (record && typeof record === 'object' && childrenColumnName in record) {
+      list = [...list, ...flattenData(childrenColumnName, record[childrenColumnName])];
+    }
+  });
+  return list;
+};
+export const getSelectedCellMatrix = (table, startCell, endCell) => {
+  if (!startCell || !endCell) return {
+    rowIds: [],
+    colIds: [],
+    startRowIndex: undefined,
+    endRowIndex: undefined,
+    startColIndex: undefined,
+    endColIndex: undefined,
+    colRange: [],
+    rowRange: []
+  };
+
+  // const rowIds = table.getRowModel().rows.map(r => r.id);
+  const rowIds = table.getRowModel().flatRows.map(r => r.id);
+  const colIds = table.getVisibleLeafColumns().map(c => c.id);
+
+  // const colIds = table.getAllLeafColumns().map(c => c.id);
+
+  const [startRowIndex, endRowIndex] = [rowIds.indexOf(startCell.rowId), rowIds.indexOf(endCell.rowId)].sort((a, b) => a - b);
+  const [startColIndex, endColIndex] = [colIds.indexOf(startCell.colId), colIds.indexOf(endCell.colId)].sort((a, b) => a - b);
+  return {
+    rowRange: rowIds.slice(startRowIndex, endRowIndex + 1),
+    colRange: colIds.slice(startColIndex, endColIndex + 1),
+    startRowIndex,
+    endRowIndex,
+    startColIndex,
+    endColIndex,
+    rowIds,
+    colIds
+  };
+};
+export function addRowsDownWithCtrl(arr, n) {
+  if (!Array.isArray(arr) || arr.length === 0) {
+    return {
+      combined: arr,
+      addedRows: []
+    };
+  }
+  const m = arr.length;
+  const numCols = arr[0].length;
+  const addedRows = [];
+
+  // Hàm kiểm tra kiểu date hợp lệ
+  const isValidDate = item => {
+    // return !isNaN(Date.parse(d))
+
+    if (typeof item === 'number') {
+      // return 'number'
+      return false;
+    }
+    if (typeof item === 'string') {
+      // Kiểm tra nếu là chuỗi ISO date hợp lệ
+      const date = new Date(item);
+      if (!isNaN(date.getTime()) && item.includes('T')) {
+        // return 'date'
+        return true;
+      }
+      // return 'string'
+      return false;
+    }
+    return !isNaN(Date.parse(item));
+  };
+
+  // Lấy giá trị mẫu của cột j từ hàng đầu tiên
+  const getSample = j => arr[0][j];
+
+  // Xác định chế độ xử lý cho mỗi cột:
+  // mode = 'number-stepping' | 'date-stepping' | 'number-constant' | 'cycle'
+  const modes = [];
+  const steps = []; // bước tăng, nếu có (cho number hoặc date)
+
+  for (let j = 0; j < numCols; j++) {
+    const sample = getSample(j);
+    if (m === 1) {
+      // Nếu mảng chỉ có 1 hàng: nếu là số thì giữ nguyên; nếu là date thì tăng 1 ngày; còn lại giữ nguyên.
+      if (typeof sample === "number") {
+        modes[j] = "number-constant";
+      } else if (isValidDate(sample)) {
+        modes[j] = "date-stepping";
+        steps[j] = 24 * 3600 * 1000; // 1 ngày = 86400000 ms
+      } else {
+        modes[j] = "cycle";
+      }
+    } else if (m === 2) {
+      // Nếu mảng có 2 hàng: nếu là số thì tính bước = row2 - row1, tương tự với date
+      const first = arr[0][j],
+        second = arr[1][j];
+      if (typeof first === "number" && typeof second === "number") {
+        modes[j] = "number-stepping";
+        steps[j] = second - first;
+      } else if (isValidDate(first) && isValidDate(second)) {
+        modes[j] = "date-stepping";
+        steps[j] = Date.parse(second) - Date.parse(first);
+      } else {
+        modes[j] = "cycle";
+      }
+    } else {
+      // Nếu mảng có >2 hàng
+      const first = arr[0][j],
+        second = arr[1][j],
+        third = arr[2][j];
+      if (typeof first === "number" && typeof second === "number" && typeof third === "number") {
+        const step1 = second - first;
+        const step2 = third - second;
+        if (step1 === step2) {
+          modes[j] = "number-stepping";
+          steps[j] = step1;
+        } else {
+          modes[j] = "cycle";
+        }
+      } else if (isValidDate(first) && isValidDate(second) && isValidDate(third)) {
+        const step1 = Date.parse(second) - Date.parse(first);
+        const step2 = Date.parse(third) - Date.parse(second);
+        if (step1 === step2) {
+          modes[j] = "date-stepping";
+          steps[j] = step1;
+        } else {
+          modes[j] = "cycle";
+        }
+      } else {
+        modes[j] = "cycle";
+      }
+    }
+  }
+
+  // Tạo các dòng mới (thêm n dòng)
+  // Với mỗi cột, nếu chế độ là stepping thì lấy giá trị cuối của mảng ban đầu và cộng thêm (i+1)*step
+  // Nếu chế độ là cycle thì dùng arr[i mod m][j]
+  for (let i = 0; i < n; i++) {
+    const newRow = [];
+    for (let j = 0; j < numCols; j++) {
+      let newValue;
+      switch (modes[j]) {
+        case "number-constant":
+          // Mảng có 1 hàng, số giữ nguyên
+          newValue = arr[0][j];
+          break;
+        case "number-stepping":
+          {
+            // Lấy giá trị cuối của cột j trong mảng ban đầu
+            const lastValue = arr[m - 1][j];
+            newValue = lastValue + (i + 1) * steps[j];
+          }
+          break;
+        case "date-stepping":
+          {
+            // Lấy giá trị cuối, chuyển về date, cộng thêm (i+1)*step, chuyển lại về định dạng ISO
+            const lastDate = new Date(arr[m - 1][j]);
+            const newTime = lastDate.getTime() + (i + 1) * steps[j];
+            newValue = moment(new Date(newTime)).format();
+          }
+          break;
+        case "cycle":
+        default:
+          // Lặp lại nội dung theo vòng tròn: dùng hàng thứ (i mod m)
+          newValue = arr[i % m][j];
+          break;
+      }
+      newRow.push(newValue);
+    }
+    addedRows.push(newRow);
+  }
+  const combined = arr.concat(addedRows);
+  return {
+    combined,
+    addedRows
+  };
+}
+export function addRowsDown(arr, n) {
+  if (!Array.isArray(arr) || arr.length === 0) {
+    return {
+      combined: arr,
+      addedRows: []
+    };
+  }
+  const m = arr.length;
+  const numCols = arr[0].length;
+  const addedRows = [];
+
+  // // Hàm kiểm tra kiểu date hợp lệ
+  // const isValidDate = (item: any) => {
+  //
+  //
+  //   // return !isNaN(Date.parse(d))
+  //
+  //   if (typeof item === 'number') {
+  //     // return 'number'
+  //     return false
+  //   }
+  //   if (typeof item === 'string') {
+  //     // Kiểm tra nếu là chuỗi ISO date hợp lệ
+  //     const date = new Date(item)
+  //     if (!isNaN(date.getTime()) && item.includes('T')) {
+  //       // return 'date'
+  //       return true
+  //     }
+  //     // return 'string'
+  //     return false
+  //   }
+  //
+  //   return !isNaN(Date.parse(item))
+  //
+  // }
+
+  // Lấy giá trị mẫu của cột j từ hàng đầu tiên
+  const getSample = j => arr[0][j];
+
+  // Xác định chế độ xử lý cho mỗi cột:
+  // mode = 'number-stepping' | 'date-stepping' | 'number-constant' | 'cycle'
+  const modes = [];
+  const steps = []; // bước tăng, nếu có (cho number hoặc date)
+
+  for (let j = 0; j < numCols; j++) {
+    const sample = getSample(j);
+    if (m === 1) {
+      // Nếu mảng chỉ có 1 hàng: nếu là số thì giữ nguyên; nếu là date thì tăng 1 ngày; còn lại giữ nguyên.
+      if (typeof sample === "number") {
+        modes[j] = "number-constant";
+      }
+      // else if (isValidDate(sample)) {
+      //   modes[j] = "date-stepping"
+      //   steps[j] = 24 * 3600 * 1000 // 1 ngày = 86400000 ms
+      // }
+      else {
+        modes[j] = "cycle";
+      }
+    } else if (m === 2) {
+      // Nếu mảng có 2 hàng: nếu là số thì tính bước = row2 - row1, tương tự với date
+      const first = arr[0][j],
+        second = arr[1][j];
+      if (typeof first === "number" && typeof second === "number") {
+        modes[j] = "number-stepping";
+        steps[j] = second - first;
+      }
+      // else if (isValidDate(first) && isValidDate(second)) {
+      //   modes[j] = "date-stepping"
+      //   steps[j] = Date.parse(second) - Date.parse(first)
+      // }
+      else {
+        modes[j] = "cycle";
+      }
+    } else {
+      // Nếu mảng có >2 hàng
+      const first = arr[0][j],
+        second = arr[1][j],
+        third = arr[2][j];
+      if (typeof first === "number" && typeof second === "number" && typeof third === "number") {
+        const step1 = second - first;
+        const step2 = third - second;
+        if (step1 === step2) {
+          modes[j] = "number-stepping";
+          steps[j] = step1;
+        } else {
+          modes[j] = "cycle";
+        }
+      }
+      // else if (isValidDate(first) && isValidDate(second) && isValidDate(third)) {
+      //   const step1 = Date.parse(second) - Date.parse(first)
+      //   const step2 = Date.parse(third) - Date.parse(second)
+      //   if (step1 === step2) {
+      //     modes[j] = "date-stepping"
+      //     steps[j] = step1
+      //   } else {
+      //     modes[j] = "cycle"
+      //   }
+      // }
+      else {
+        modes[j] = "cycle";
+      }
+    }
+  }
+
+  // Tạo các dòng mới (thêm n dòng)
+  // Với mỗi cột, nếu chế độ là stepping thì lấy giá trị cuối của mảng ban đầu và cộng thêm (i+1)*step
+  // Nếu chế độ là cycle thì dùng arr[i mod m][j]
+  for (let i = 0; i < n; i++) {
+    const newRow = [];
+    for (let j = 0; j < numCols; j++) {
+      let newValue;
+      switch (modes[j]) {
+        case "number-constant":
+          // Mảng có 1 hàng, số giữ nguyên
+          newValue = arr[0][j];
+          break;
+        case "number-stepping":
+          {
+            // Lấy giá trị cuối của cột j trong mảng ban đầu
+            const lastValue = arr[m - 1][j];
+            newValue = lastValue + (i + 1) * steps[j];
+          }
+          break;
+        // case "date-stepping":
+        // {
+        //   // Lấy giá trị cuối, chuyển về date, cộng thêm (i+1)*step, chuyển lại về định dạng ISO
+        //   const lastDate = new Date(arr[m - 1][j])
+        //   const newTime = lastDate.getTime() + (i + 1) * steps[j]
+        //   newValue = moment(new Date(newTime)).format()
+        // }
+        //   break
+        case "cycle":
+        default:
+          // Lặp lại nội dung theo vòng tròn: dùng hàng thứ (i mod m)
+          newValue = arr[i % m][j];
+          break;
+      }
+      newRow.push(newValue);
+    }
+    addedRows.push(newRow);
+  }
+  const combined = arr.concat(addedRows);
+  return {
+    combined,
+    addedRows
+  };
+}
+export function addRowsUpWithCtrl(array, n) {
+  const arr = array.reverse();
+  if (!Array.isArray(arr) || arr.length === 0) {
+    return {
+      combined: arr,
+      addedRows: []
+    };
+  }
+  const m = arr.length;
+  const numCols = arr[0].length;
+  const addedRows = [];
+
+  // Hàm kiểm tra kiểu date hợp lệ
+  const isValidDate = item => {
+    // return !isNaN(Date.parse(d))
+
+    if (typeof item === 'number') {
+      // return 'number'
+      return false;
+    }
+    if (typeof item === 'string') {
+      // Kiểm tra nếu là chuỗi ISO date hợp lệ
+      const date = new Date(item);
+      if (!isNaN(date.getTime()) && item.includes('T')) {
+        // return 'date'
+        return true;
+      }
+      // return 'string'
+      return false;
+    }
+    return !isNaN(Date.parse(item));
+  };
+
+  // Lấy giá trị mẫu của cột j từ hàng đầu tiên
+  const getSample = j => arr[0][j];
+
+  // Xác định chế độ xử lý cho mỗi cột:
+  // mode = 'number-stepping' | 'date-stepping' | 'number-constant' | 'cycle'
+  const modes = [];
+  const steps = []; // bước tăng, nếu có (cho number hoặc date)
+
+  for (let j = 0; j < numCols; j++) {
+    const sample = getSample(j);
+    if (m === 1) {
+      // Nếu mảng chỉ có 1 hàng: nếu là số thì giữ nguyên; nếu là date thì tăng 1 ngày; còn lại giữ nguyên.
+      if (typeof sample === "number") {
+        modes[j] = "number-constant";
+      } else if (isValidDate(sample)) {
+        modes[j] = "date-stepping";
+        steps[j] = 24 * 3600 * 1000; // 1 ngày = 86400000 ms
+      } else {
+        modes[j] = "cycle";
+      }
+    } else if (m === 2) {
+      // Nếu mảng có 2 hàng: nếu là số thì tính bước = row2 - row1, tương tự với date
+      const first = arr[0][j],
+        second = arr[1][j];
+      if (typeof first === "number" && typeof second === "number") {
+        modes[j] = "number-stepping";
+        steps[j] = second - first;
+      } else if (isValidDate(first) && isValidDate(second)) {
+        modes[j] = "date-stepping";
+        steps[j] = Date.parse(second) - Date.parse(first);
+      } else {
+        modes[j] = "cycle";
+      }
+    } else {
+      // Nếu mảng có >2 hàng
+      const first = arr[0][j],
+        second = arr[1][j],
+        third = arr[2][j];
+      if (typeof first === "number" && typeof second === "number" && typeof third === "number") {
+        const step1 = second - first;
+        const step2 = third - second;
+        if (step1 === step2) {
+          modes[j] = "number-stepping";
+          steps[j] = step1;
+        } else {
+          modes[j] = "cycle";
+        }
+      } else if (isValidDate(first) && isValidDate(second) && isValidDate(third)) {
+        const step1 = Date.parse(second) - Date.parse(first);
+        const step2 = Date.parse(third) - Date.parse(second);
+        if (step1 === step2) {
+          modes[j] = "date-stepping";
+          steps[j] = step1;
+        } else {
+          modes[j] = "cycle";
+        }
+      } else {
+        modes[j] = "cycle";
+      }
+    }
+  }
+
+  // Tạo các dòng mới (thêm n dòng)
+  // Với mỗi cột, nếu chế độ là stepping thì lấy giá trị cuối của mảng ban đầu và cộng thêm (i+1)*step
+  // Nếu chế độ là cycle thì dùng arr[i mod m][j]
+  for (let i = n - 1; i >= 0; i--) {
+    const newRow = [];
+    for (let j = 0; j < numCols; j++) {
+      let newValue;
+      switch (modes[j]) {
+        case "number-constant":
+          // Mảng có 1 hàng, số giữ nguyên
+          newValue = arr[0][j];
+          break;
+        case "number-stepping":
+          {
+            // Lấy giá trị cuối của cột j trong mảng ban đầu
+
+            const lastValue = arr[m - 1][j];
+            newValue = lastValue - (i + 1) * steps[j] * -1;
+          }
+          break;
+        case "date-stepping":
+          {
+            // Lấy giá trị cuối, chuyển về date, cộng thêm (i+1)*step, chuyển lại về định dạng ISO
+
+            const lastDate = new Date(arr[m - 1][j]);
+            const newTime = m === 1 ? lastDate.getTime() - (i + 1) * steps[j] : lastDate.getTime() - (i + 1) * steps[j] * -1;
+            newValue = moment(new Date(newTime)).format();
+          }
+          break;
+        case "cycle":
+        default:
+          // Lặp lại nội dung theo vòng tròn: dùng hàng thứ (i mod m)
+
+          newValue = arr[i % m][j];
+          break;
+      }
+      newRow.push(newValue);
+    }
+    addedRows.push(newRow);
+  }
+  const combined = arr.concat(addedRows);
+  return {
+    combined,
+    addedRows
+  };
+}
+export function addRowsUp(array, n) {
+  const arr = array.reverse();
+  if (!Array.isArray(arr) || arr.length === 0) {
+    return {
+      combined: arr,
+      addedRows: []
+    };
+  }
+  const m = arr.length;
+  const numCols = arr[0].length;
+  const addedRows = [];
+
+  // Hàm kiểm tra kiểu date hợp lệ
+  // const isValidDate = (item: any) => {
+  //
+  //
+  //   // return !isNaN(Date.parse(d))
+  //
+  //   if (typeof item === 'number') {
+  //     // return 'number'
+  //     return false
+  //   }
+  //   if (typeof item === 'string') {
+  //     // Kiểm tra nếu là chuỗi ISO date hợp lệ
+  //     const date = new Date(item)
+  //     if (!isNaN(date.getTime()) && item.includes('T')) {
+  //       // return 'date'
+  //       return true
+  //     }
+  //     // return 'string'
+  //     return false
+  //   }
+  //
+  //   return !isNaN(Date.parse(item))
+  //
+  // }
+
+  // Lấy giá trị mẫu của cột j từ hàng đầu tiên
+  const getSample = j => arr[0][j];
+
+  // Xác định chế độ xử lý cho mỗi cột:
+  // mode = 'number-stepping' | 'date-stepping' | 'number-constant' | 'cycle'
+  const modes = [];
+  const steps = []; // bước tăng, nếu có (cho number hoặc date)
+
+  for (let j = 0; j < numCols; j++) {
+    const sample = getSample(j);
+    if (m === 1) {
+      // Nếu mảng chỉ có 1 hàng: nếu là số thì giữ nguyên; nếu là date thì tăng 1 ngày; còn lại giữ nguyên.
+      if (typeof sample === "number") {
+        modes[j] = "number-constant";
+      } else {
+        modes[j] = "cycle";
+      }
+    } else if (m === 2) {
+      // Nếu mảng có 2 hàng: nếu là số thì tính bước = row2 - row1, tương tự với date
+      const first = arr[0][j],
+        second = arr[1][j];
+      if (typeof first === "number" && typeof second === "number") {
+        modes[j] = "number-stepping";
+        steps[j] = second - first;
+      } else {
+        modes[j] = "cycle";
+      }
+    } else {
+      // Nếu mảng có >2 hàng
+      const first = arr[0][j],
+        second = arr[1][j],
+        third = arr[2][j];
+      if (typeof first === "number" && typeof second === "number" && typeof third === "number") {
+        const step1 = second - first;
+        const step2 = third - second;
+        if (step1 === step2) {
+          modes[j] = "number-stepping";
+          steps[j] = step1;
+        } else {
+          modes[j] = "cycle";
+        }
+      } else {
+        modes[j] = "cycle";
+      }
+    }
+  }
+
+  // Tạo các dòng mới (thêm n dòng)
+  // Với mỗi cột, nếu chế độ là stepping thì lấy giá trị cuối của mảng ban đầu và cộng thêm (i+1)*step
+  // Nếu chế độ là cycle thì dùng arr[i mod m][j]
+  for (let i = n - 1; i >= 0; i--) {
+    const newRow = [];
+    for (let j = 0; j < numCols; j++) {
+      let newValue;
+      switch (modes[j]) {
+        case "number-constant":
+          // Mảng có 1 hàng, số giữ nguyên
+          newValue = arr[0][j];
+          break;
+        case "number-stepping":
+          {
+            // Lấy giá trị cuối của cột j trong mảng ban đầu
+
+            const lastValue = arr[m - 1][j];
+            newValue = lastValue - (i + 1) * steps[j] * -1;
+          }
+          break;
+        case "cycle":
+        default:
+          // Lặp lại nội dung theo vòng tròn: dùng hàng thứ (i mod m)
+
+          newValue = arr[i % m][j];
+          break;
+      }
+      newRow.push(newValue);
+    }
+    addedRows.push(newRow);
+  }
+  const combined = arr.concat(addedRows);
+  return {
+    combined,
+    addedRows
+  };
+}
+export const convertFilters = filters => {
+  const result = [];
+  filters.forEach(({
+    key,
+    column,
+    filteredKeys,
+    operator
+  }) => {
+    if (!filteredKeys || filteredKeys.length === 0) {
+      return;
+    }
+    if (column?.typeFilter === "DateRange" && filteredKeys.length === 2) {
+      result.push({
+        key,
+        field: column?.field,
+        value: filteredKeys[0],
+        predicate: "and",
+        operator: "greaterthanorequal"
+      }, {
+        key,
+        field: column?.field,
+        value: filteredKeys[1],
+        predicate: "and",
+        operator: "lessthanorequal"
+      });
+    } else if (column?.typeFilter === "NumberRange") {
+      if ((filteredKeys[0] || filteredKeys[0] === 0) && !filteredKeys[1]) {
+        result.push({
+          key,
+          field: column?.field,
+          value: filteredKeys[0],
+          predicate: "and",
+          operator: "greaterthanorequal"
+        });
+      }
+      if ((filteredKeys[1] || filteredKeys[1] === 0) && !filteredKeys[0]) {
+        result.push({
+          key,
+          field: column?.field,
+          value: filteredKeys[1],
+          predicate: "and",
+          operator: "lessthanorequal"
+        });
+      }
+      if ((filteredKeys[0] || filteredKeys[0] === 0) && (filteredKeys[1] || filteredKeys[1] === 0)) {
+        result.push({
+          key,
+          field: column?.field,
+          value: filteredKeys[0],
+          predicate: "and",
+          operator: "greaterthanorequal"
+        }, {
+          key,
+          field: column?.field,
+          value: filteredKeys[1],
+          predicate: "and",
+          operator: "lessthanorequal"
+        });
+      }
+    } else if (column?.typeFilter === 'Checkbox') {
+      filteredKeys.forEach(value => {
+        result.push({
+          key,
+          field: column?.field,
+          value,
+          predicate: "or",
+          operator
+        });
+      });
+    } else {
+      result.push({
+        key,
+        field: column?.field,
+        value: filteredKeys[0],
+        predicate: 'and',
+        operator
+      });
+    }
+  });
+  return result;
+};
+
+// export function getInvisibleColumns(columns: ColumnTable[]): Record<string, boolean> {
+//   const result: Record<string, boolean> = {};
+//   for (const col of columns) {
+//     if (col.visible === false || col.hidden) {
+//       result[col.field ?? ''] = false;
+//     }
+//   }
+//   return result;
+// }
+
+export function getInvisibleColumns(columns) {
+  const result = {};
+  function traverse(cols) {
+    for (const col of cols) {
+      if (col.visible === false) {
+        result[col.field ?? ''] = false;
+      }
+      if (col.children && col.children.length > 0) {
+        traverse(col.children);
+      }
+    }
+  }
+  traverse(columns);
+  return result;
+}
+export const getAllVisibleKeys = columns => {
+  const keys = [];
+  const traverse = (cols, parentHidden = false) => {
+    for (const col of cols) {
+      if (col.hidden || parentHidden) {
+        continue;
+      }
+      if (col.key) {
+        keys.push(col.key);
+      }
+      if (col.children) {
+        traverse(col.children, col.hidden);
+      }
+    }
+  };
+  traverse(columns);
+  return keys;
+};
+export const getAllVisibleKeys1 = columns => {
+  const keys = [];
+  const traverse = (cols, parentHidden = false) => {
+    for (const col of cols) {
+      if (col.visible === false || col.hidden || parentHidden) {
+        continue;
+      }
+      if (col.field) {
+        keys.push(col.field);
+      }
+      if (col.children) {
+        traverse(col.children, col.visible);
+      }
+    }
+  };
+  traverse(columns);
+  return keys;
+};
+export function getHiddenParentKeys(columns, parentKeys = []) {
+  const hiddenParents = new Set();
+  for (const column of columns) {
+    if (column.children) {
+      const currentPath = column.key ? [...parentKeys, column.key] : [...parentKeys];
+      const childHiddenParents = getHiddenParentKeys(column.children, currentPath);
+      if (childHiddenParents.length > 0) {
+        childHiddenParents.forEach(key => hiddenParents.add(key));
+        currentPath.forEach(key => hiddenParents.add(key));
+      }
+    } else if (column.hidden) {
+      parentKeys.forEach(key => hiddenParents.add(key));
+    }
+  }
+  return Array.from(hiddenParents);
+}
+export function getHiddenParentKeys1(columns, parentKeys = []) {
+  const hiddenParents = new Set();
+  for (const column of columns) {
+    if (column.children) {
+      const currentPath = column.field ? [...parentKeys, column.field] : [...parentKeys];
+      const childHiddenParents = getHiddenParentKeys1(column.children, currentPath);
+      if (childHiddenParents.length > 0) {
+        childHiddenParents.forEach(key => hiddenParents.add(key));
+        currentPath.forEach(key => hiddenParents.add(key));
+      }
+    } else if (column.visible !== false && column.hidden !== true) {
+      parentKeys.forEach(key => hiddenParents.add(key));
+    }
+  }
+  return Array.from(hiddenParents);
+}
+export const getVisibleColumnKeys = columns => {
+  const allKeys = getAllVisibleKeys(columns);
+  const allParentKeys = getHiddenParentKeys(columns);
+  return allKeys.filter(item => !allParentKeys.includes(item));
+};
+export const getVisibleColumnKeys1 = columns => {
+  const allKeys = getAllVisibleKeys1(columns);
+  const allParentKeys = getHiddenParentKeys1(columns);
+  return allKeys.filter(item => !allParentKeys.includes(item));
+};
+export function isObjEqual(obj1, obj2) {
+  // Trường hợp tham chiếu bằng nhau
+  if (obj1 === obj2) return true;
+
+  // Nếu 1 trong 2 không phải object hoặc null thì so sánh trực tiếp
+  if (typeof obj1 !== 'object' || obj1 === null || typeof obj2 !== 'object' || obj2 === null) {
+    return obj1 === obj2;
+  }
+
+  // Lấy danh sách key
+  const keys1 = Object.keys(obj1);
+  const keys2 = Object.keys(obj2);
+
+  // Nếu số key khác nhau thì khác nhau
+  if (keys1.length !== keys2.length) return false;
+
+  // Duyệt và so sánh từng key
+  for (const key of keys1) {
+    if (!keys2.includes(key)) return false;
+    if (!isObjEqual(obj1[key], obj2[key])) return false;
+  }
+  return true;
+}
+
+// Sorting function
+export const sortByType = arr => {
+  if (arr) {
+    return arr.sort((a, b) => {
+      if ((a.fixed ?? a.fixedType) === 'left' && (b.fixed ?? b.fixedType) !== 'left') {
+        return -1;
+      } else if ((a.fixed ?? a.fixedType) !== 'left' && (b.fixed ?? b.fixedType) === 'left') {
+        return 1;
+      } else if ((a.fixed ?? a.fixedType) === 'right' && (b.fixed ?? b.fixedType) !== 'right') {
+        return 1;
+      } else if ((a.fixed ?? a.fixedType) !== 'right' && (b.fixed ?? b.fixedType) === 'right') {
+        return -1;
+      }
+      return 0;
+    });
+  } else {
+    return [];
+  }
+};
+export function convertColumnsToTreeData(columns, groupColumns) {
+  // return columns.map((col) => {
+  //   const node: TreeDataNode = {
+  //     key: String(col.id ?? col.id ?? col.header), // key duy nhất
+  //     title: String(col.header ?? col.id ?? ''),            // tiêu đề
+  //   }
+
+  //   // Nếu có children (nested columns)
+  //   if ('columns' in col && Array.isArray((col as any).columns)) {
+  //     node.children = convertColumnsToTreeData(
+  //       (col as any).columns as ColumnDef<T, any>[]
+  //     )
+  //   }
+
+  //   return node
+  // })
+
+  return columns.filter(col => {
+    const meta = col.meta ?? {};
+    const inGroup = groupColumns ? groupColumns.includes(String(col.id ?? col.id)) : false;
+
+    // Điều kiện filter:
+    // - Nếu meta.showInColumnChoose = false => loại bỏ
+    // - Nếu không nằm trong groupColumns và không phải column group => loại bỏ
+    if (meta.showInColumnChoose === false) return false;
+    if (inGroup && !('columns' in col && Array.isArray(col.columns))) {
+      return false;
+    }
+    return true;
+  }).map(col => {
+    const node = {
+      key: String(col.id ?? col.id ?? col.header),
+      // title: () => col.header as any
+      title: col.header
+
+      // title: String(col.header ?? col.id ?? ''),
+    };
+    if ('columns' in col && Array.isArray(col.columns)) {
+      const children = convertColumnsToTreeData(col.columns, groupColumns);
+      if (children.length > 0) {
+        node.children = children;
+      }
+    }
+    return node;
+  });
+}
+export const updateColumns1 = (columns, includes) => {
+  return columns.map(column => {
+    const newColumn = {
+      ...column
+    };
+    let hasVisibleChild = false;
+    if (!column.field) {
+      return column;
+    }
+    if (newColumn.children) {
+      newColumn.children = updateColumns1(newColumn.children, includes);
+      hasVisibleChild = newColumn.children.some(child => !child.hidden);
+    }
+    newColumn.visible = !!(newColumn.field && includes.includes(newColumn.field));
+    if (newColumn.children && newColumn.children.length > 0) {
+      newColumn.visible = !hasVisibleChild;
+    }
+    return newColumn;
+  });
+};
+export const convertToObj = arr => {
+  // const result = Object.keys(obj).reduce((acc: any, key) => {
+  //   acc[key] = false;
+  //   return acc;
+  // }, {});
+
+  // return result
+
+  return Object.fromEntries(arr.map(key => [key, false]));
+};
+export const convertToObjTrue = arr => {
+  // const result = Object.keys(obj).reduce((acc: any, key) => {
+  //   acc[key] = false;
+  //   return acc;
+  // }, {});
+
+  // return result
+
+  return Object.fromEntries(arr.map(key => [key, true]));
+};
+export const getDiffent2Array = (a, b) => {
+  return [...a.filter(x => !b.includes(x)), ...b.filter(x => !a.includes(x))];
+};
+export function findFirst(items) {
+  const leftItem = items.find(item => item.getIsPinned() === 'left');
+  if (leftItem) return leftItem;
+  return null;
+}
+export function isTreeArray(arr) {
+  if (!Array.isArray(arr) || arr.length === 0) {
+    return false;
+  }
+  for (const item of arr) {
+    if (!item) {
+      return false;
+    }
+    if (item.children?.length > 0) {
+      return true;
+    }
+  }
+  return false;
+}
+export function updateColumnWidthsRecursive(columns, sizing) {
+  return columns.map(col => {
+    const updated = {
+      ...col
+    };
+
+    // cập nhật width nếu có trong sizing
+    if (sizing[col.field] !== undefined) {
+      updated.width = sizing[col.field];
+    }
+
+    // nếu có children thì gọi đệ quy
+    if (col.children && col.children.length > 0) {
+      updated.children = updateColumnWidthsRecursive(col.children, sizing);
+    }
+    return updated;
+  });
+}
+export function updateWidthsByOther(source, target) {
+  const targetMap = new Map();
+
+  // tạo map {field -> width} từ target
+  const buildMap = cols => {
+    cols.forEach(col => {
+      if (col.width !== undefined) {
+        targetMap.set(col.field, col.width);
+      }
+      if (col.children) {
+        buildMap(col.children);
+      }
+    });
+  };
+  buildMap(target);
+
+  // cập nhật width từ map
+  const update = cols => cols.map(col => {
+    const updated = {
+      ...col
+    };
+    if (targetMap.has(col.field)) {
+      updated.width = targetMap.get(col.field);
+    }
+    if (col.children) {
+      updated.children = update(col.children);
+    }
+    return updated;
+  });
+  return update(source);
+}
+export function findAllChildrenKeys2(data, rowKey, childrenColumnName) {
+  const keys = [];
+  function dig(list) {
+    (list || []).forEach(item => {
+      keys.push(item[rowKey]);
+      dig(item[childrenColumnName]);
+    });
+  }
+  dig(data);
+  return keys;
+}
+export function parseExcelText(text) {
+  // const text = e.clipboardData?.getData('text/plain') ?? '';
+  if (!text) return [];
+
+  // Excel thường dùng \r\n giữa dòng, \t giữa cột
+  const rows = text.split(/\r?\n/) // tách theo dòng
+  .filter(r => r.trim() !== '') // bỏ dòng trống
+  .map(row => row.split('\t') // tách theo cột
+  .map(cell => cell.replace(/\r/g, '').replace(/\n/g, '\n')) // giữ xuống dòng trong ô
+  );
+  return rows;
+}
+export function parseExcelClipboard(e) {
+  const text = e.clipboardData?.getData('text/plain') ?? '';
+  if (!text) return [];
+
+  // Excel thường dùng \r\n giữa dòng, \t giữa cột
+  const rows = text.split(/\r?\n/) // tách theo dòng
+  .filter(r => r.trim() !== '') // bỏ dòng trống
+  .map(row => row.split('\t') // tách theo cột
+  .map(cell => cell.replace(/\r/g, '').replace(/\n/g, '\n')) // giữ xuống dòng trong ô
+  );
+  return rows;
+}
+export function parseExcelClipboardText(text) {
+  const rows = [];
+  let curRow = [];
+  let curCell = '';
+  let inQuotes = false;
+  for (let i = 0; i < text.length; i++) {
+    const ch = text[i];
+    if (ch === '"') {
+      // "" -> an escaped quote inside quoted field
+      if (inQuotes && text[i + 1] === '"') {
+        curCell += '"';
+        i++; // skip next
+      } else {
+        inQuotes = !inQuotes; // open/close quote
+      }
+      continue;
+    }
+
+    // tab as column separator (only if not inside quotes)
+    if (ch === '\t' && !inQuotes) {
+      curRow.push(curCell);
+      curCell = '';
+      continue;
+    }
+
+    // newline as row separator (handle \r\n and lone \r or \n), only outside quotes
+    if ((ch === '\r' || ch === '\n') && !inQuotes) {
+      // handle CRLF
+      if (ch === '\r' && text[i + 1] === '\n') i++;
+      curRow.push(curCell);
+      curCell = '';
+      rows.push(curRow);
+      curRow = [];
+      continue;
+    }
+
+    // normal character
+    curCell += ch;
+  }
+
+  // push last cell/row (if any)
+  // avoid adding one spurious empty row when text ends with newline (we already pushed that row)
+  if (curCell !== '' || curRow.length > 0) {
+    curRow.push(curCell);
+    rows.push(curRow);
+  }
+
+  // if the whole input was empty, return []
+  if (rows.length === 1 && rows[0].length === 1 && rows[0][0] === '' && text.trim() === '') {
+    return [];
+  }
+  return rows;
+}
+export function parseClipboardEvent(e) {
+  const dataTransfer = e.clipboardData ?? e.nativeEvent?.clipboardData;
+  if (!dataTransfer) return [];
+
+  // 1) try HTML (better fidelity for Excel)
+  const html = dataTransfer.getData?.('text/html');
+  if (html) {
+    try {
+      const doc = new DOMParser().parseFromString(html, 'text/html');
+      const table = doc.querySelector('table');
+      if (table) {
+        const result = [];
+        for (const tr of Array.from(table.rows)) {
+          const row = [];
+          for (const cell of Array.from(tr.cells)) {
+            // innerText preserves newlines from <br>
+            row.push(cell.innerText ?? '');
+          }
+          result.push(row);
+        }
+        if (result.length) return result;
+      }
+    } catch {
+      // fallback to text parsing
+    }
+  }
+
+  // 2) fallback: parse plain text (TSV with quoted fields)
+  const text = dataTransfer.getData?.('text/plain') ?? '';
+  return parseExcelClipboardText(text);
+}
+export function arraysEqualIgnoreOrderFast(a, b) {
+  if (a.length !== b.length) return false;
+  const count = Object.create(null);
+  for (let i = 0; i < a.length; i++) {
+    const key = a[i];
+    count[key] = (count[key] || 0) + 1;
+  }
+  for (let i = 0; i < b.length; i++) {
+    const key = b[i];
+    if (!count[key]) return false;
+    count[key]--;
+    if (count[key] === 0) delete count[key];
+  }
+  return Object.keys(count).length === 0;
+}
+export function filterByIds(a, b) {
+  const idSet = new Set(a);
+  return b.filter(item => idSet.has(item.id));
+}
+export function excludeItems(arrayA, arrayB) {
+  const idsInB = new Set(arrayB.map(item => item.id));
+
+  // Lọc A, chỉ giữ lại phần tử không có trong B
+  return arrayA.filter(item => !idsInB.has(item.id));
+}
+export function getAllChildren(row) {
+  const children = row.subRows ?? [];
+  return children.reduce((acc, child) => {
+    return acc.concat(child, getAllChildren(child));
+  }, []);
+}
+
+// export function toggleSelectAllChildren(row: any) {
+//   const children = row.subRows ?? [];
+
+//   return children.reduce((acc: any, child: any) => {
+//     return acc.concat(child, getAllChildren(child));
+//   }, []);
+// }
+
+export function toggleRowAndChildren(row, isSelected) {
+  // Toggle chính row hiện tại
+  row.toggleSelected(isSelected);
+
+  // Nếu có subRows thì gọi đệ quy
+  if (row.subRows && row.subRows.length > 0) {
+    row.subRows.forEach(subRow => toggleRowAndChildren(subRow, isSelected));
+  }
+}
+export function countUnselectedChildren(row) {
+  const parent = row.getParentRow();
+  if (!parent) return 0; // Không có cha thì return 0
+
+  const unselectedCount = parent.subRows.filter(child => !child.getIsSelected()).length;
+  return unselectedCount;
+}
+export function removeDuplicatesByKey(arr, key = 'id') {
+  const map = new Map();
+  for (const item of arr) {
+    if (!map.has(item[key])) {
+      map.set(item[key], item);
+    }
+  }
+  return Array.from(map.values());
+}
+export const getTableHeight = (height, minHeight) => {
+  if (height && !minHeight) {
+    return height;
+  }
+  if (minHeight && !height) {
+    return minHeight;
+  }
+  if (minHeight && height) {
+    return Math.max(minHeight, height);
+    // if (height > minHeight) {
+    //   return height
+    // }
+
+    // if (minHeight > height) {
+    //   return minHeight
+    // }
+  }
+};
+export const convertFlatColumn1 = array => {
+  const tmp = [...array];
+  let result = [];
+  tmp.forEach(item => {
+    if (item.children) {
+      result = result.concat(convertFlatColumn1(item.children));
+    } else {
+      result.push(item);
+    }
+  });
+  return result;
+};
+
+// export const updateColumnsByGroup = (columns: ColumnsTable, columnsGroup: string[]) => {
+//   return columns.map(column => {
+//     const newColumn = { ...column }
+//     let hasVisibleChild = false
+//     if (column.field) {
+//       return  column
+//     }
+
+//     if (newColumn.children) {
+//       newColumn.children = updateColumnsByGroup(newColumn.children, columnsGroup)
+
+//       hasVisibleChild = newColumn.children.some((child: any) => !!child.visible)
+//     }
+
+//     newColumn.visible = !(newColumn.field && columnsGroup.includes(newColumn.field))
+
+//     if (newColumn.children && newColumn.children.length > 0) {
+//       newColumn.visible = !!hasVisibleChild
+//     }
+
+//     return newColumn
+//   })
+// }
+
+export const updateColumnsByGroup = (columns, columnsGroup) => {
+  return columns.map(column => {
+    const newColumn = {
+      ...column
+    };
+    let hasVisibleChild = false;
+    if (!column.field) {
+      return column;
+    }
+    if (newColumn.children) {
+      newColumn.children = updateColumnsByGroup(newColumn.children, columnsGroup);
+      hasVisibleChild = newColumn.children.some(child => child.visible !== false);
+    }
+
+    // Map previous behaviour (hidden = true when field in columnsGroup)
+    // to the new `visible` property: visible = !hidden
+    if (newColumn.field && columnsGroup.includes(newColumn.field)) {
+      newColumn.visible = !(newColumn.field && columnsGroup.includes(newColumn.field));
+    }
+
+    // For parent columns, visibility depends on whether any child is visible
+    if (newColumn.children && newColumn.children.length > 0) {
+      newColumn.visible = !!hasVisibleChild;
+    }
+    return newColumn;
+  });
+};
+export function removeKeys(obj, keys) {
+  const newObj = {
+    ...obj
+  };
+  keys.forEach(key => {
+    delete newObj[key];
+  });
+  return newObj;
+}