es-grid-template 1.7.38 → 1.7.39

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

@@ -1,5 +1,5 @@
 import { SELECTION_COLUMN } from "rc-master-ui/es/table/hooks/useSelection";
-import { v4 as uuidv4 } from "uuid";
+import { v4 as uuidv4 } from 'uuid';
 import { presetPalettes } from "@ant-design/colors";
 
 // import type { AnyObject } from './type';
@@ -18,7 +18,7 @@ export const newGuid = () => {
 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");
+    throw new Error('Invalid date or format');
   }
   // return moment(dayjsDate.toDate()).format() // Convert to JavaScript Date
   return dayjsDate.toDate(); // Convert to JavaScript Date
@@ -83,7 +83,7 @@ export const extendsObject = (...list) => {
   return result;
 };
 export const isEmpty = d => {
-  return d === null || d === undefined || d === "";
+  return d === null || d === undefined || d === '';
 };
 export const getFormat = (colFormat, format) => {
   return {
@@ -118,82 +118,74 @@ export function convertFormat(formatStr) {
   //   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 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("");
+  }).join('');
 }
 export const getDatepickerFormat = (type, format) => {
-  const typeFormat = type ? type.toLowerCase() : "";
+  const typeFormat = type ? type.toLowerCase() : '';
   switch (typeFormat) {
     case "date":
     case "daterange":
-      return format?.dateFormat ?? "DD/MM/YYYY";
+      return format?.dateFormat ?? 'DD/MM/YYYY';
     case "datetime":
-      return format?.datetimeFormat ?? "DD/MM/YYYY HH:mm";
+      return format?.datetimeFormat ?? 'DD/MM/YYYY HH:mm';
     case "week":
-      return format?.weekFormat ?? "DD/MM";
+      return format?.weekFormat ?? 'DD/MM';
     case "month":
-      return format?.monthFormat ?? "MM/YYYY";
+      return format?.monthFormat ?? 'MM/YYYY';
     case "quarter":
-      return format?.dateFormat ?? "DD/MM/YYYY";
+      return format?.dateFormat ?? 'DD/MM/YYYY';
     case "year":
-      return format?.yearFormat ?? "YYYY";
+      return format?.yearFormat ?? 'YYYY';
     case "time":
-      return format?.timeFormat ?? "HH:mm";
+      return format?.timeFormat ?? 'HH:mm';
     default:
-      return "DD/MM/YYYY";
+      return 'DD/MM/YYYY';
   }
 };
 export const getDateRangeFormat = (type, format) => {
-  const typeFormat = type ? type.toLowerCase() : "";
+  const typeFormat = type ? type.toLowerCase() : '';
   switch (typeFormat) {
     case "date":
     case "daterange":
-      return convertFormat(format?.dateFormat ?? "dd/MM/yyyy");
+      return convertFormat(format?.dateFormat ?? 'dd/MM/yyyy');
     case "datetime":
-      return format?.datetimeFormat ?? "dd/MM/yyyy HH:mm";
+      return format?.datetimeFormat ?? 'dd/MM/yyyy HH:mm';
     case "week":
-      return format?.weekFormat ?? "dd/MM";
+      return format?.weekFormat ?? 'dd/MM';
     case "month":
-      return format?.monthFormat ?? "MM/yyyy";
+      return format?.monthFormat ?? 'MM/yyyy';
     case "quarter":
-      return format?.dateFormat ?? "dd/MM/yyyy";
+      return format?.dateFormat ?? 'dd/MM/yyyy';
     case "year":
-      return format?.yearFormat ?? "yyyy";
+      return format?.yearFormat ?? 'yyyy';
     case "time":
-      return format?.timeFormat ?? "HH:mm";
+      return format?.timeFormat ?? 'HH:mm';
     default:
-      return "dd/MM/yyyy";
+      return 'dd/MM/yyyy';
   }
 };
 export const getTypeFilter = col => {
   if (col?.typeFilter) {
     return col.typeFilter;
   }
-  const type = col?.type ?? "Text";
+  const type = col?.type ?? 'Text';
   switch (type) {
     case "number":
-      return "Number";
+      return 'Number';
     case "date":
-      return "Date";
+      return 'Date';
     case "datetime":
-      return "Datetime";
+      return 'Datetime';
     case "boolean":
-      return "Checkbox";
+      return 'Checkbox';
     case "checkbox":
-      return "Checkbox";
+      return 'Checkbox';
 
     // case "week": return ''
     // case "month": return 'Month'
@@ -202,7 +194,7 @@ export const getTypeFilter = col => {
     // case "time": return col.format?.timeFormat ? col.format?.timeFormat : 'HH:mm'
     case "string":
     default:
-      return "Text";
+      return 'Text';
   }
 };
 export const addRowIdArray = inputArray => {
@@ -223,7 +215,7 @@ export const addRowIdArray = inputArray => {
 export function groupArrayByColumns(arr, columns) {
   const result = [];
   const checkEmpty = d => {
-    return d === null || d === undefined || d === "";
+    return d === null || d === undefined || d === '';
   };
   if (columns) {
     arr.forEach(item => {
@@ -284,7 +276,7 @@ export const checkThousandSeparator = (thousandSeparator, decimalSeparator) => {
   if (thousandSeparator) {
     if (decimalSeparator) {
       if (thousandSeparator === decimalSeparator) {
-        return ",";
+        return ',';
       } else {
         return thousandSeparator;
       }
@@ -299,7 +291,7 @@ export const checkDecimalSeparator = (thousandSeparator, decimalSeparator) => {
   if (decimalSeparator) {
     if (thousandSeparator) {
       if (thousandSeparator === decimalSeparator) {
-        return ".";
+        return '.';
       } else {
         return decimalSeparator;
       }
@@ -307,10 +299,10 @@ export const checkDecimalSeparator = (thousandSeparator, decimalSeparator) => {
       return decimalSeparator;
     }
   } else {
-    if (thousandSeparator && thousandSeparator === ".") {
-      return ",";
+    if (thousandSeparator && thousandSeparator === '.') {
+      return ',';
     }
-    return ".";
+    return '.';
   }
 };
 export const getFixedFields = (columns, type) => {
@@ -329,9 +321,7 @@ export const getFixedFields = (columns, type) => {
   return result;
 };
 export function areStringArraysEqual(a, b) {
-  if (a.length !== b.length) {
-    return false;
-  }
+  if (a.length !== b.length) return false;
   const sortedA = [...a].sort();
   const sortedB = [...b].sort();
   return sortedA.every((val, index) => val === sortedB[index]);
@@ -342,36 +332,36 @@ export const getDefaultOperator = col => {
   }
   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":
+      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";
+        return 'contains';
     }
   }
   switch (col.type) {
-    case "number":
-    case "date":
-    case "datetime":
-    case "week":
-    case "year":
-    case "quarter":
-      return "equal";
-    case "string":
+    case 'number':
+    case 'date':
+    case 'datetime':
+    case 'week':
+    case 'year':
+    case 'quarter':
+      return 'equal';
+    case 'string':
     default:
-      return "contains";
+      return 'contains';
   }
 };
 export function isEqualSet(setA, setB) {
@@ -460,24 +450,24 @@ export function getCellsByPosition(cellSet, position = "bottom") {
 }
 export const onAddBgSelectedCell = (selectedCells, id, isFocusCellIndex) => {
   const selectors = Array.from(selectedCells).map(pos => {
-    const [row1, col1] = pos.split("-");
+    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;
+  const cellsSelected = table ? table?.querySelectorAll('.ui-rc-table-cell.selected-bg') : null;
   if (cellsSelected) {
     cellsSelected.forEach(cell => {
-      cell.classList.remove("selected-bg");
+      cell.classList.remove('selected-bg');
     });
   }
 
   /// thêm class
-  const cells = table && selectors.length > 0 ? table?.querySelectorAll(selectors.join(",")) : null;
+  const cells = table && selectors.length > 0 ? table?.querySelectorAll(selectors.join(',')) : null;
   if (cells) {
     cells.forEach(cell => {
-      cell.classList.add("selected-bg");
+      cell.classList.add('selected-bg');
     });
   }
   const rowsArray = [...new Set([...selectedCells].map(item => item.split("-")[0]))];
@@ -485,7 +475,7 @@ export const onAddBgSelectedCell = (selectedCells, id, isFocusCellIndex) => {
   const cellsIndex = table && rowsSelectors.length > 0 ? table?.querySelectorAll(rowsSelectors) : null;
   if (cellsIndex && isFocusCellIndex !== false) {
     cellsIndex.forEach(cell => {
-      cell.classList.add("focus");
+      cell.classList.add('focus');
     });
   }
 
@@ -511,16 +501,16 @@ export const onAddBgSelectedCell = (selectedCells, id, isFocusCellIndex) => {
 };
 export const onRemoveBgSelectedCell = (selectedCells, id, rowsSelected) => {
   const table = document.querySelector(`#${id}`);
-  const cells = table ? table?.querySelectorAll(".ui-rc-table-cell.selected-bg") : null;
+  const cells = table ? table?.querySelectorAll('.ui-rc-table-cell.selected-bg') : null;
   if (cells) {
     cells.forEach(cell => {
-      cell.classList.remove("selected-bg");
+      cell.classList.remove('selected-bg');
     });
   }
-  const cellsIndex = table ? table?.querySelectorAll(".ui-rc-table-cell.focus") : null;
+  const cellsIndex = table ? table?.querySelectorAll('.ui-rc-table-cell.focus') : null;
   if (cellsIndex) {
     cellsIndex.forEach(cell => {
-      cell.classList.remove("focus");
+      cell.classList.remove('focus');
     });
   }
 
@@ -532,7 +522,7 @@ export const onRemoveBgSelectedCell = (selectedCells, id, rowsSelected) => {
     const cellsSelectedIndex = table && rowsSelectedSelectors.length > 0 ? table?.querySelectorAll(rowsSelectedSelectors) : null;
     if (cellsSelectedIndex) {
       cellsSelectedIndex.forEach(cell => {
-        cell.classList.remove("selected");
+        cell.classList.remove('selected');
       });
     }
   }
@@ -658,12 +648,8 @@ export const findItemByKey = (array, key, value) => {
   return null;
 };
 export const isFormattedNumber = str => {
-  if (!str) {
-    return false;
-  }
-  if (typeof str !== "string") {
-    return false;
-  }
+  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
 
@@ -672,49 +658,47 @@ export const isFormattedNumber = str => {
   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(".");
+  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(".");
+    const lastComma = str.lastIndexOf(',');
+    const lastDot = str.lastIndexOf('.');
     return lastComma > lastDot ? {
-      thousandSeparator: ".",
-      decimalSeparator: ","
+      thousandSeparator: '.',
+      decimalSeparator: ','
     } : {
-      thousandSeparator: ",",
-      decimalSeparator: "."
+      thousandSeparator: ',',
+      decimalSeparator: '.'
     };
   }
 
   // Trường hợp chỉ có dấu phẩy
   if (hasComma && !hasDot) {
-    const parts = str.split(",");
+    const parts = str.split(',');
     if (parts.length === 2) {
       return parts[1].length === 3 ? {
-        thousandSeparator: ",",
+        thousandSeparator: ',',
         decimalSeparator: null
       } : {
         thousandSeparator: null,
-        decimalSeparator: ","
+        decimalSeparator: ','
       };
     }
   }
 
   // Trường hợp chỉ có dấu chấm
   if (hasDot && !hasComma) {
-    const parts = str.split(".");
+    const parts = str.split('.');
     if (parts.length === 2) {
       return parts[1].length === 3 ? {
-        thousandSeparator: ".",
+        thousandSeparator: '.',
         decimalSeparator: null
       } : {
         thousandSeparator: null,
-        decimalSeparator: "."
+        decimalSeparator: '.'
       };
     }
   }
@@ -739,7 +723,7 @@ export function isDateString(str) {
 }
 function parseToDate(str) {
   if (/^\d{2}\/\d{4}$/.test(str)) {
-    const [month, year] = str.split("/");
+    const [month, year] = str.split('/');
     return new Date(parseInt(year), parseInt(month) - 1, 1);
   }
   return new Date(str);
@@ -752,19 +736,19 @@ export function compareDates(date1, date2) {
 
 // Helper: compare MM/YYYY date string with itemValue
 export function compareDate(itemValue, value) {
-  const [month, year] = value.split("/").map(Number);
+  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 '';
   }
-  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
+  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) => {
@@ -784,8 +768,8 @@ export const shouldInclude = (item, queries) => {
     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?.() ?? "");
+    const itemStr = removeVietnameseTones(itemValue?.toString().toLowerCase?.() ?? '');
+    const queryStr = removeVietnameseTones(value?.toString().toLowerCase?.() ?? '');
     switch (operator.toLowerCase()) {
       case "equal":
         condition = isDateComparison ? compareDates(itemDate, queryDate) : itemValue === value;
@@ -834,15 +818,9 @@ export const shouldInclude = (item, queries) => {
 };
 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;
-  }
+  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") {
@@ -866,9 +844,7 @@ export function sortData(data, sorter) {
       order
     } of sorter) {
       const result = compareValues(a[field], b[field], order);
-      if (result !== 0) {
-        return result;
-      }
+      if (result !== 0) return result;
     }
     return 0;
   });
@@ -907,7 +883,7 @@ export const getAllRowKey = data => {
   return a.length ? a.map(it => it.rowId) : undefined;
 };
 export const isEditable = (column, rowData) => {
-  if (column && typeof column.editEnable === "function") {
+  if (column && typeof column.editEnable === 'function') {
     return column.editEnable(rowData);
   }
   return column?.editEnable;
@@ -916,7 +892,7 @@ export const checkFieldKey = key => {
   if (key) {
     return key;
   } else {
-    return "value";
+    return 'value';
   }
 };
 export const convertArrayWithIndent = (inputArray, parentIndent = 0) => {
@@ -969,16 +945,16 @@ export const isObjEmpty = obj => {
   }
 };
 export const isDisable = (column, rowData) => {
-  if (column && typeof column?.disable === "function") {
+  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)}`;
+  return `${dayjs(value).startOf('week').format(weekFormat)} ~ ${dayjs(value).endOf('week').format(weekFormat)}`;
 };
 export const parseBooleanToValue = (value, type) => {
-  return type === "boolean" ? value : Number(value);
+  return type === 'boolean' ? value : Number(value);
 };
 export const isNameColor = strColor => {
   const s = new Option().style;
@@ -1002,13 +978,13 @@ export const genPresets = (presets = presetPalettes) => {
   }));
 };
 export const getEditType = (column, rowData) => {
-  if (column && typeof column.editType === "function") {
+  if (column && typeof column.editType === 'function') {
     return column.editType(rowData);
   }
-  return column?.editType ?? "text";
+  return column?.editType ?? 'text';
 };
 export const getDefaultValue = defaultValue => {
-  if (defaultValue && typeof defaultValue === "function") {
+  if (defaultValue && typeof defaultValue === 'function') {
     return defaultValue();
   }
   return defaultValue;
@@ -1017,25 +993,23 @@ export const flattenData = (childrenColumnName, data) => {
   let list = [];
   (data || []).forEach(record => {
     list.push(record);
-    if (record && typeof record === "object" && childrenColumnName in 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: []
-    };
-  }
+  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);
@@ -1071,14 +1045,14 @@ export function addRowsDownWithCtrl(arr, n) {
   const isValidDate = item => {
     // return !isNaN(Date.parse(d))
 
-    if (typeof item === "number") {
+    if (typeof item === 'number') {
       // return 'number'
       return false;
     }
-    if (typeof item === "string") {
+    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")) {
+      if (!isNaN(date.getTime()) && item.includes('T')) {
         // return 'date'
         return true;
       }
@@ -1356,14 +1330,14 @@ export function addRowsUpWithCtrl(array, n) {
   const isValidDate = item => {
     // return !isNaN(Date.parse(d))
 
-    if (typeof item === "number") {
+    if (typeof item === 'number') {
       // return 'number'
       return false;
     }
-    if (typeof item === "string") {
+    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")) {
+      if (!isNaN(date.getTime()) && item.includes('T')) {
         // return 'date'
         return true;
       }
@@ -1661,7 +1635,7 @@ export const convertFilters = filters => {
           operator: "lessthanorequal"
         });
       }
-    } else if (column?.typeFilter === "Checkbox") {
+    } else if (column?.typeFilter === 'Checkbox') {
       filteredKeys.forEach(value => {
         result.push({
           key,
@@ -1676,7 +1650,7 @@ export const convertFilters = filters => {
         key,
         field: column?.field,
         value: filteredKeys[0],
-        predicate: "and",
+        predicate: 'and',
         operator
       });
     }
@@ -1687,7 +1661,7 @@ export function getInvisibleColumns(columns) {
   const result = {};
   for (const col of columns) {
     if (col.visible === false || col.hidden) {
-      result[col.field ?? ""] = false;
+      result[col.field ?? ''] = false;
     }
   }
   return result;
@@ -1772,12 +1746,10 @@ export const getVisibleColumnKeys1 = columns => {
 };
 export function isObjEqual(obj1, obj2) {
   // Trường hợp tham chiếu bằng nhau
-  if (obj1 === obj2) {
-    return true;
-  }
+  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) {
+  if (typeof obj1 !== 'object' || obj1 === null || typeof obj2 !== 'object' || obj2 === null) {
     return obj1 === obj2;
   }
 
@@ -1786,18 +1758,12 @@ export function isObjEqual(obj1, obj2) {
   const keys2 = Object.keys(obj2);
 
   // Nếu số key khác nhau thì khác nhau
-  if (keys1.length !== keys2.length) {
-    return false;
-  }
+  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;
-    }
+    if (!keys2.includes(key)) return false;
+    if (!isObjEqual(obj1[key], obj2[key])) return false;
   }
   return true;
 }
@@ -1806,13 +1772,13 @@ export function isObjEqual(obj1, obj2) {
 export const sortByType = arr => {
   if (arr) {
     return arr.sort((a, b) => {
-      if ((a.fixed ?? a.fixedType) === "left" && (b.fixed ?? b.fixedType) !== "left") {
+      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") {
+      } 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") {
+      } 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") {
+      } else if ((a.fixed ?? a.fixedType) !== 'right' && (b.fixed ?? b.fixedType) === 'right') {
         return -1;
       }
       return 0;
@@ -1845,10 +1811,8 @@ export function convertColumnsToTreeData(columns, groupColumns) {
     // Đ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))) {
+    if (meta.showInColumnChoose === false) return false;
+    if (inGroup && !('columns' in col && Array.isArray(col.columns))) {
       return false;
     }
     return true;
@@ -1860,7 +1824,7 @@ export function convertColumnsToTreeData(columns, groupColumns) {
 
       // title: String(col.header ?? col.id ?? ''),
     };
-    if ("columns" in col && Array.isArray(col.columns)) {
+    if ('columns' in col && Array.isArray(col.columns)) {
       const children = convertColumnsToTreeData(col.columns, groupColumns);
       if (children.length > 0) {
         node.children = children;
@@ -1913,32 +1877,25 @@ export const getDiffent2Array = (a, b) => {
   return [...a.filter(x => !b.includes(x)), ...b.filter(x => !a.includes(x))];
 };
 export function isTree(arr) {
-  if (!Array.isArray(arr)) {
-    return false;
-  }
+  if (!Array.isArray(arr)) return false;
   function checkNode(node) {
-    if (typeof node !== "object" || node === null) {
-      return false;
-    }
+    if (typeof node !== "object" || node === null) return false;
     if ("children" in node) {
-      if (!Array.isArray(node.children)) {
-        return false;
-      }
-      if (node.children.length === 0) {
-        return false;
-      }
+      if (!Array.isArray(node.children)) return false;
+      if (node.children.length === 0) return false;
       for (const child of node.children) {
-        if (!checkNode(child)) {
-          return false;
-        }
+        if (!checkNode(child)) return false;
       }
     }
     return true;
   }
   for (const item of arr) {
-    if (!checkNode(item)) {
-      return false;
-    }
+    if (!checkNode(item)) return false;
   }
   return true;
+}
+export function findFirst(items) {
+  const leftItem = items.find(item => item.getIsPinned() === 'left');
+  if (leftItem) return leftItem;
+  return null;
 }