es-grid-template 1.7.40 → 1.7.42

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

@@ -57,6 +57,7 @@ export declare const updateData: <Record_1 = AnyObject>(initData: Record_1[], ro
 export declare const parseBooleanToValue: (value: boolean, type: 'boolean' | 'number') => number | boolean;
 export declare const genPresets: (presets?: import("@ant-design/colors").PalettesProps) => import("antd/es/color-picker/interface").PresetsItem[];
 export declare function findAllChildrenKeys<RecordType>(data: readonly RecordType[], getRowKey: GetRowKey<RecordType>, childrenColumnName: string): Key[];
+export declare function findAllChildrenKeys2<RecordType>(data: readonly RecordType[], rowKey: any, childrenColumnName: string): Key[];
 export declare const flattenArray: <RecordType extends AnyObject = AnyObject>(arr: any[]) => RecordType[];
 export declare const flattenData: <RecordType extends AnyObject = AnyObject>(childrenColumnName: string, data?: RecordType[]) => RecordType[];
 export declare const unFlattenData: <RecordType extends AnyObject = AnyObject>(data: RecordType[]) => RecordType[];

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

@@ -447,6 +447,17 @@ export function findAllChildrenKeys(data, getRowKey, childrenColumnName) {
   dig(data);
   return keys;
 }
+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 const flattenArray = arr => {
   if (!arr) {
     return [];

package/es/table-component/InternalTable.js

@@ -29,15 +29,16 @@ import Grid from "./table/Grid";
 
 // import { Tooltip } from 'react-tooltip'
 // import ContextMenu from './ContextMenu'
-import { addRowIdArray, convertToObj,
+import { addRowIdArray, convertToObj, convertToObjTrue,
 // convertFilters,
-filterDataByColumns, flatColumns2,
+filterDataByColumns, findAllChildrenKeys2, flatColumns2,
 // filterDataByColumns,
-getAllRowKey, getDiffent2Array, getFixedFields, getInvisibleColumns, groupArrayByColumns, isTree } from "./hook/utils";
+getAllRowKey, getDiffent2Array, getFixedFields, getInvisibleColumns, groupArrayByColumns, isTreeArray, updateWidthsByOther } from "./hook/utils";
 // import GridEdit from './table/GridEdit'
 import { convertToTanStackColumns } from "./hook/useColumns";
 import { convertColumns } from "./hook/convert";
 import { Modal } from 'antd';
+// import { findAllChildrenKeys2 } from '../grid-component/hooks'
 // import { columns111 } from '../test-2/columns'
 
 dayjs.extend(customParseFormat);
@@ -62,6 +63,7 @@ const InternalTable = props => {
     groupSetting,
     groupColumns,
     selectionSettings,
+    expandable,
     // contextMenuClick,
     // contextMenuOpen,
     height,
@@ -70,6 +72,10 @@ const InternalTable = props => {
   const id = React.useMemo(() => {
     return faker.string.alpha(20);
   }, []);
+  const {
+    defaultExpandedRowKeys,
+    defaultExpandAllRows
+  } = expandable || {};
   const rowKey = 'rowId';
   const prefix = 'ui-rc';
   const getWindowSize = () => {
@@ -97,7 +103,8 @@ const InternalTable = props => {
   const [isFullScreen, setIsFullScreen] = React.useState(false);
   const [columns, setColumns] = React.useState([]);
   React.useEffect(() => {
-    setColumns(propsColumns);
+    // setColumns(propsColumns as any)
+    setColumns(updateWidthsByOther(propsColumns, columns));
   }, [propsColumns]);
   const [expanded, setExpanded] = React.useState({});
   const convertData = React.useMemo(() => {
@@ -110,17 +117,14 @@ const InternalTable = props => {
     return convertToTanStackColumns({
       t,
       columns,
-      // expanded,
-      // setExpanded,
-      // expandable,
       format,
       editAble
     });
 
-    // return convertToTanStackColumns<RecordType>(columns, expanded, setExpanded, expandable)
+    // return convertToTanStackColumns<RecordType>(columns)
   }, [t, columns, format, editAble]);
   const isDataTree = React.useMemo(() => {
-    return isTree(dataSource);
+    return isTreeArray(dataSource);
   }, [dataSource]);
   const columnPinning = React.useMemo(() => {
     return {
@@ -133,6 +137,16 @@ const InternalTable = props => {
   const [mergedFilterKeys, setMergedFilterKeys] = useMergedState(getAllRowKey(convertData), {
     value: undefined
   });
+  React.useEffect(() => {
+    if (defaultExpandAllRows) {
+      const allKeys = findAllChildrenKeys2(convertData, rowKey, 'children');
+      setExpanded(convertToObjTrue(allKeys));
+    } else {
+      if (defaultExpandedRowKeys) {
+        setExpanded(convertToObjTrue(defaultExpandedRowKeys ?? []));
+      }
+    }
+  }, [defaultExpandAllRows, convertData, defaultExpandedRowKeys]);
 
   // ========================= Keys =========================
 
@@ -196,7 +210,9 @@ const InternalTable = props => {
     height: height,
     isDataTree: isDataTree,
     selectionSettings: selectionSettings,
-    mergedSelectedKeys: mergedSelectedKeys
+    mergedSelectedKeys: mergedSelectedKeys,
+    expandable: expandable,
+    setColumns: setColumns
   })), /*#__PURE__*/React.createElement(Modal, {
     open: isFullScreen,
     footer: null,
@@ -265,7 +281,9 @@ const InternalTable = props => {
     windowSize: windowSize,
     isDataTree: isDataTree,
     selectionSettings: selectionSettings,
-    mergedSelectedKeys: mergedSelectedKeys
+    mergedSelectedKeys: mergedSelectedKeys,
+    expandable: expandable,
+    setColumns: setColumns
   })))));
 };
 export default InternalTable;

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

@@ -2,7 +2,7 @@ import type { Table } from "@tanstack/react-table";
 import { type Column } from "@tanstack/react-table";
 import type { VirtualItem } from "@tanstack/react-virtual";
 import type { AnyObject, ColumnsTable, ColumnTable, EditType, FilterOperator, IColumnType, IFormat, RangeState, Sorter, TypeFilter } from "./../type";
-import { type CSSProperties } from "react";
+import { Key, type CSSProperties } from "react";
 import dayjs from "dayjs";
 import type { IPositionCell } from "../useContext";
 import type { ColumnDef } from "@tanstack/react-table";
@@ -136,3 +136,7 @@ export declare const convertToObjTrue: (arr: any) => {
 export declare const getDiffent2Array: (a: any[], b: any[]) => any[];
 export declare function isTree(arr: any[]): boolean;
 export declare function findFirst(items: Column<any>[]): Column<any, unknown>;
+export declare function isTreeArray(arr: any[]): boolean;
+export declare function updateColumnWidthsRecursive(columns: any[], sizing: Record<string, number>): any[];
+export declare function updateWidthsByOther(source: any[], target: any[]): any[];
+export declare function findAllChildrenKeys2<RecordType>(data: readonly RecordType[], rowKey: any, childrenColumnName: string): Key[];

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

@@ -1877,14 +1877,24 @@ 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;
@@ -1898,4 +1908,73 @@ 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)) return false;
+  return arr.every(item => {
+    if ("children" in item) {
+      return Array.isArray(item.children) && item.children.length > 0;
+    }
+    return true; // node lá thì hợp lệ
+  });
+}
+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;
 }

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

@@ -8,6 +8,7 @@ type Props<T> = Omit<TableProps<T>, 'columns'> & {
     prefix: string;
     columns: ColumnDef<T>[];
     propsColumns: ColumnsTable<T>;
+    setColumns: Dispatch<SetStateAction<ColumnsTable<T>>>;
     columnHidden: VisibilityState;
     expanded: ExpandedState;
     setExpanded: any;

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

@@ -17,7 +17,7 @@ import { arrayMove } from '@dnd-kit/sortable';
 import React from 'react';
 import TableContainer from "../TableContainer";
 import { OperatorFeature } from "../features/operator";
-import { convertFilters, convertToObjTrue, filterDataByColumns, getAllRowKey } from "../hook/utils";
+import { convertFilters, convertToObjTrue, filterDataByColumns, getAllRowKey, updateColumnWidthsRecursive } from "../hook/utils";
 import TableContainerEdit from "../TableContainerEdit";
 const Grid = props => {
   const {
@@ -28,6 +28,7 @@ const Grid = props => {
     originData,
     columns,
     propsColumns,
+    setColumns,
     pagination,
     expanded,
     setExpanded,
@@ -64,6 +65,7 @@ const Grid = props => {
   const [rowSelection, setRowSelection] = React.useState(convertToObjTrue(mergedSelectedKeys));
   const [grouping, setGrouping] = React.useState([]);
   const [columnSizing, setColumnSizing] = React.useState({});
+  const [columnSizingInfo, setColumnSizingInfo] = React.useState({});
   // const [manualUpdate, setManualUpdate] = React.useState(false)
   // const [manualResize, setManualResize] = React.useState(false)
 
@@ -112,6 +114,7 @@ const Grid = props => {
     columnResizeMode,
     columnResizeDirection,
     onColumnSizingChange: setColumnSizing,
+    onColumnSizingInfoChange: setColumnSizingInfo,
     // ColumnSizing
 
     // ColumnSorting
@@ -148,6 +151,12 @@ const Grid = props => {
       }
     }
   }, [columnHidden, table]);
+  React.useEffect(() => {
+    if (columnSizingInfo.isResizingColumn === false) {
+      const aa = updateColumnWidthsRecursive(propsColumns, columnSizing);
+      setColumns(aa);
+    }
+  }, [columnSizingInfo]);
   React.useEffect(() => {
     // if (!manualUpdate) {
     if (Object.keys(rowSelection) !== Object.keys(mergedSelectedKeys)) {

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

@@ -57,6 +57,7 @@ export declare const updateData: <Record_1 = AnyObject>(initData: Record_1[], ro
 export declare const parseBooleanToValue: (value: boolean, type: 'boolean' | 'number') => number | boolean;
 export declare const genPresets: (presets?: import("@ant-design/colors").PalettesProps) => import("antd/es/color-picker/interface").PresetsItem[];
 export declare function findAllChildrenKeys<RecordType>(data: readonly RecordType[], getRowKey: GetRowKey<RecordType>, childrenColumnName: string): Key[];
+export declare function findAllChildrenKeys2<RecordType>(data: readonly RecordType[], rowKey: any, childrenColumnName: string): Key[];
 export declare const flattenArray: <RecordType extends AnyObject = AnyObject>(arr: any[]) => RecordType[];
 export declare const flattenData: <RecordType extends AnyObject = AnyObject>(childrenColumnName: string, data?: RecordType[]) => RecordType[];
 export declare const unFlattenData: <RecordType extends AnyObject = AnyObject>(data: RecordType[]) => RecordType[];

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

@@ -17,6 +17,7 @@ exports.convertFormat = convertFormat;
 exports.filterDataByColumns3 = exports.filterDataByColumns2 = exports.filterDataByColumns = exports.editAbleColumns = exports.detectSeparators = exports.customWeekStartEndFormat = exports.customFilterOption = exports.countItemsBeforeIndex = exports.convertLabelToTitle = void 0;
 exports.filterDataByColumns4 = filterDataByColumns4;
 exports.findAllChildrenKeys = findAllChildrenKeys;
+exports.findAllChildrenKeys2 = findAllChildrenKeys2;
 exports.getAllVisibleKeys = exports.getAllRowKey = exports.genPresets = exports.flattenData = exports.flattenArray = exports.findItemPath = exports.findItemByKey = void 0;
 exports.getBottomRowCells = getBottomRowCells;
 exports.getCellsByPosition = getCellsByPosition;
@@ -38,8 +39,8 @@ exports.isRightMostInRegion = isRightMostInRegion;
 exports.isTopMostInRegion = exports.isSelectedCell = void 0;
 exports.mergeWithFilter = mergeWithFilter;
 exports.mergeWithFilter2 = mergeWithFilter2;
-exports.removeInvisibleColumns = exports.removeFieldRecursive = exports.removeColumns = exports.removeClassCellIndexSelected = exports.removeClassBorderPasteCell = exports.removeBorderPasteClass = exports.removeBorderClass2 = exports.removeBorderClass = exports.parseCells = exports.parseBooleanToValue = exports.onRemoveBorderSelectedCell = exports.onRemoveBgSelectedCell = exports.onRemoveBgCellIndex = exports.onAddBorderSelectedCell = exports.onAddBgSelectedCell = exports.onAddBgCellIndex = exports.newGuid = exports.mergedSets = void 0;
-exports.updateData = exports.updateColumnsByGroup = exports.updateColumns = exports.updateArrayByKey = exports.unFlattenData = exports.transformColumns1 = exports.transformColumns = exports.totalFixedWidth = exports.sumDataByField = exports.sumByField = exports.sortedSetDSC = exports.sortedSetASC = exports.showDraggingPoint = exports.shouldInclude = exports.removeVietnameseTones = void 0;
+exports.removeFieldRecursive = exports.removeColumns = exports.removeClassCellIndexSelected = exports.removeClassBorderPasteCell = exports.removeBorderPasteClass = exports.removeBorderClass2 = exports.removeBorderClass = exports.parseCells = exports.parseBooleanToValue = exports.onRemoveBorderSelectedCell = exports.onRemoveBgSelectedCell = exports.onRemoveBgCellIndex = exports.onAddBorderSelectedCell = exports.onAddBgSelectedCell = exports.onAddBgCellIndex = exports.newGuid = exports.mergedSets = void 0;
+exports.updateData = exports.updateColumnsByGroup = exports.updateColumns = exports.updateArrayByKey = exports.unFlattenData = exports.transformColumns1 = exports.transformColumns = exports.totalFixedWidth = exports.sumDataByField = exports.sumByField = exports.sortedSetDSC = exports.sortedSetASC = exports.showDraggingPoint = exports.shouldInclude = exports.removeVietnameseTones = exports.removeInvisibleColumns = void 0;
 exports.updateDataByFilter = updateDataByFilter;
 exports.updateOrInsert = updateOrInsert;
 var _dayjs = _interopRequireDefault(require("dayjs"));
@@ -525,6 +526,17 @@ function findAllChildrenKeys(data, getRowKey, childrenColumnName) {
   dig(data);
   return keys;
 }
+function findAllChildrenKeys2(data, rowKey, childrenColumnName) {
+  const keys = [];
+  function dig(list) {
+    (list || []).forEach(item => {
+      keys.push(item[rowKey]);
+      dig(item[childrenColumnName]);
+    });
+  }
+  dig(data);
+  return keys;
+}
 const flattenArray = arr => {
   if (!arr) {
     return [];

package/lib/table-component/InternalTable.js

@@ -44,6 +44,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 
 // import GridEdit from './table/GridEdit'
 
+// import { findAllChildrenKeys2 } from '../grid-component/hooks'
 // import { columns111 } from '../test-2/columns'
 
 _dayjs.default.extend(_customParseFormat.default);
@@ -68,6 +69,7 @@ const InternalTable = props => {
     groupSetting,
     groupColumns,
     selectionSettings,
+    expandable,
     // contextMenuClick,
     // contextMenuOpen,
     height,
@@ -76,6 +78,10 @@ const InternalTable = props => {
   const id = _react.default.useMemo(() => {
     return _faker.faker.string.alpha(20);
   }, []);
+  const {
+    defaultExpandedRowKeys,
+    defaultExpandAllRows
+  } = expandable || {};
   const rowKey = 'rowId';
   const prefix = 'ui-rc';
   const getWindowSize = () => {
@@ -103,7 +109,8 @@ const InternalTable = props => {
   const [isFullScreen, setIsFullScreen] = _react.default.useState(false);
   const [columns, setColumns] = _react.default.useState([]);
   _react.default.useEffect(() => {
-    setColumns(propsColumns);
+    // setColumns(propsColumns as any)
+    setColumns((0, _utils.updateWidthsByOther)(propsColumns, columns));
   }, [propsColumns]);
   const [expanded, setExpanded] = _react.default.useState({});
   const convertData = _react.default.useMemo(() => {
@@ -116,17 +123,14 @@ const InternalTable = props => {
     return (0, _useColumns.convertToTanStackColumns)({
       t,
       columns,
-      // expanded,
-      // setExpanded,
-      // expandable,
       format,
       editAble
     });
 
-    // return convertToTanStackColumns<RecordType>(columns, expanded, setExpanded, expandable)
+    // return convertToTanStackColumns<RecordType>(columns)
   }, [t, columns, format, editAble]);
   const isDataTree = _react.default.useMemo(() => {
-    return (0, _utils.isTree)(dataSource);
+    return (0, _utils.isTreeArray)(dataSource);
   }, [dataSource]);
   const columnPinning = _react.default.useMemo(() => {
     return {
@@ -139,6 +143,16 @@ const InternalTable = props => {
   const [mergedFilterKeys, setMergedFilterKeys] = (0, _useMergedState.default)((0, _utils.getAllRowKey)(convertData), {
     value: undefined
   });
+  _react.default.useEffect(() => {
+    if (defaultExpandAllRows) {
+      const allKeys = (0, _utils.findAllChildrenKeys2)(convertData, rowKey, 'children');
+      setExpanded((0, _utils.convertToObjTrue)(allKeys));
+    } else {
+      if (defaultExpandedRowKeys) {
+        setExpanded((0, _utils.convertToObjTrue)(defaultExpandedRowKeys ?? []));
+      }
+    }
+  }, [defaultExpandAllRows, convertData, defaultExpandedRowKeys]);
 
   // ========================= Keys =========================
 
@@ -202,7 +216,9 @@ const InternalTable = props => {
     height: height,
     isDataTree: isDataTree,
     selectionSettings: selectionSettings,
-    mergedSelectedKeys: mergedSelectedKeys
+    mergedSelectedKeys: mergedSelectedKeys,
+    expandable: expandable,
+    setColumns: setColumns
   })), /*#__PURE__*/_react.default.createElement(_antd.Modal, {
     open: isFullScreen,
     footer: null,
@@ -271,7 +287,9 @@ const InternalTable = props => {
     windowSize: windowSize,
     isDataTree: isDataTree,
     selectionSettings: selectionSettings,
-    mergedSelectedKeys: mergedSelectedKeys
+    mergedSelectedKeys: mergedSelectedKeys,
+    expandable: expandable,
+    setColumns: setColumns
   })))));
 };
 var _default = exports.default = InternalTable;

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

@@ -2,7 +2,7 @@ import type { Table } from "@tanstack/react-table";
 import { type Column } from "@tanstack/react-table";
 import type { VirtualItem } from "@tanstack/react-virtual";
 import type { AnyObject, ColumnsTable, ColumnTable, EditType, FilterOperator, IColumnType, IFormat, RangeState, Sorter, TypeFilter } from "./../type";
-import { type CSSProperties } from "react";
+import { Key, type CSSProperties } from "react";
 import dayjs from "dayjs";
 import type { IPositionCell } from "../useContext";
 import type { ColumnDef } from "@tanstack/react-table";
@@ -136,3 +136,7 @@ export declare const convertToObjTrue: (arr: any) => {
 export declare const getDiffent2Array: (a: any[], b: any[]) => any[];
 export declare function isTree(arr: any[]): boolean;
 export declare function findFirst(items: Column<any>[]): Column<any, unknown>;
+export declare function isTreeArray(arr: any[]): boolean;
+export declare function updateColumnWidthsRecursive(columns: any[], sizing: Record<string, number>): any[];
+export declare function updateWidthsByOther(source: any[], target: any[]): any[];
+export declare function findAllChildrenKeys2<RecordType>(data: readonly RecordType[], rowKey: any, childrenColumnName: string): Key[];

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

@@ -20,6 +20,7 @@ exports.convertFilters = exports.convertDayjsToDate = exports.convertDateToDayjs
 exports.convertFormat = convertFormat;
 exports.extendsObject = exports.detectSeparators = exports.customWeekStartEndFormat = exports.convertToObjTrue = exports.convertToObj = exports.convertLabelToTitle = void 0;
 exports.filterDataByColumns = filterDataByColumns;
+exports.findAllChildrenKeys2 = findAllChildrenKeys2;
 exports.findFirst = findFirst;
 exports.getAllVisibleKeys1 = exports.getAllVisibleKeys = exports.getAllRowKey = exports.genPresets = exports.flattenData = exports.flattenArray = exports.flatColumns2 = exports.findItemByKey = void 0;
 exports.getCellsByPosition = getCellsByPosition;
@@ -39,10 +40,14 @@ exports.isEqualSet = isEqualSet;
 exports.isObjEmpty = exports.isNullOrUndefined = exports.isNameColor = exports.isFormattedNumber = void 0;
 exports.isObjEqual = isObjEqual;
 exports.isTree = isTree;
+exports.isTreeArray = isTreeArray;
 exports.sortByType = exports.shouldInclude = exports.removeVietnameseTones = exports.parseBooleanToValue = exports.onRemoveBgSelectedCell = exports.onAddBgSelectedCell = exports.newGuid = void 0;
 exports.sortData = sortData;
-exports.updateColumns1 = exports.updateArrayByKey = exports.unFlattenData = exports.sumSize = void 0;
+exports.updateArrayByKey = exports.unFlattenData = exports.sumSize = void 0;
+exports.updateColumnWidthsRecursive = updateColumnWidthsRecursive;
+exports.updateColumns1 = void 0;
 exports.updateOrInsert = updateOrInsert;
+exports.updateWidthsByOther = updateWidthsByOther;
 var _useSelection = require("rc-master-ui/es/table/hooks/useSelection");
 var _uuid = require("uuid");
 var _colors = require("@ant-design/colors");
@@ -1978,14 +1983,24 @@ const getDiffent2Array = (a, b) => {
 };
 exports.getDiffent2Array = getDiffent2Array;
 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;
@@ -1999,4 +2014,73 @@ function findFirst(items) {
   const leftItem = items.find(item => item.getIsPinned() === 'left');
   if (leftItem) return leftItem;
   return null;
+}
+function isTreeArray(arr) {
+  if (!Array.isArray(arr)) return false;
+  return arr.every(item => {
+    if ("children" in item) {
+      return Array.isArray(item.children) && item.children.length > 0;
+    }
+    return true; // node lá thì hợp lệ
+  });
+}
+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;
+  });
+}
+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);
+}
+function findAllChildrenKeys2(data, rowKey, childrenColumnName) {
+  const keys = [];
+  function dig(list) {
+    (list || []).forEach(item => {
+      keys.push(item[rowKey]);
+      dig(item[childrenColumnName]);
+    });
+  }
+  dig(data);
+  return keys;
 }

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

@@ -8,6 +8,7 @@ type Props<T> = Omit<TableProps<T>, 'columns'> & {
     prefix: string;
     columns: ColumnDef<T>[];
     propsColumns: ColumnsTable<T>;
+    setColumns: Dispatch<SetStateAction<ColumnsTable<T>>>;
     columnHidden: VisibilityState;
     expanded: ExpandedState;
     setExpanded: any;

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

@@ -30,6 +30,7 @@ const Grid = props => {
     originData,
     columns,
     propsColumns,
+    setColumns,
     pagination,
     expanded,
     setExpanded,
@@ -66,6 +67,7 @@ const Grid = props => {
   const [rowSelection, setRowSelection] = _react.default.useState((0, _utils.convertToObjTrue)(mergedSelectedKeys));
   const [grouping, setGrouping] = _react.default.useState([]);
   const [columnSizing, setColumnSizing] = _react.default.useState({});
+  const [columnSizingInfo, setColumnSizingInfo] = _react.default.useState({});
   // const [manualUpdate, setManualUpdate] = React.useState(false)
   // const [manualResize, setManualResize] = React.useState(false)
 
@@ -114,6 +116,7 @@ const Grid = props => {
     columnResizeMode,
     columnResizeDirection,
     onColumnSizingChange: setColumnSizing,
+    onColumnSizingInfoChange: setColumnSizingInfo,
     // ColumnSizing
 
     // ColumnSorting
@@ -150,6 +153,12 @@ const Grid = props => {
       }
     }
   }, [columnHidden, table]);
+  _react.default.useEffect(() => {
+    if (columnSizingInfo.isResizingColumn === false) {
+      const aa = (0, _utils.updateColumnWidthsRecursive)(propsColumns, columnSizing);
+      setColumns(aa);
+    }
+  }, [columnSizingInfo]);
   _react.default.useEffect(() => {
     // if (!manualUpdate) {
     if (Object.keys(rowSelection) !== Object.keys(mergedSelectedKeys)) {

package/package.json

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