es-grid-template 1.7.41 → 1.7.42

package/es/table-component/InternalTable.js

@@ -31,14 +31,14 @@ import Grid from "./table/Grid";
 // import ContextMenu from './ContextMenu'
 import { addRowIdArray, convertToObj, convertToObjTrue,
 // convertFilters,
-filterDataByColumns, flatColumns2,
+filterDataByColumns, findAllChildrenKeys2, flatColumns2,
 // filterDataByColumns,
-getAllRowKey, getDiffent2Array, getFixedFields, getInvisibleColumns, groupArrayByColumns, isTreeArray } 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 { findAllChildrenKeys2 } from '../grid-component/hooks'
 // import { columns111 } from '../test-2/columns'
 
 dayjs.extend(customParseFormat);
@@ -103,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(() => {
@@ -210,7 +211,8 @@ const InternalTable = props => {
     isDataTree: isDataTree,
     selectionSettings: selectionSettings,
     mergedSelectedKeys: mergedSelectedKeys,
-    expandable: expandable
+    expandable: expandable,
+    setColumns: setColumns
   })), /*#__PURE__*/React.createElement(Modal, {
     open: isFullScreen,
     footer: null,
@@ -280,7 +282,8 @@ const InternalTable = props => {
     isDataTree: isDataTree,
     selectionSettings: selectionSettings,
     mergedSelectedKeys: mergedSelectedKeys,
-    expandable: expandable
+    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";
@@ -137,3 +137,6 @@ 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

@@ -1917,4 +1917,64 @@ export function isTreeArray(arr) {
     }
     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/table-component/InternalTable.js

@@ -20,7 +20,6 @@ var _utils = require("./hook/utils");
 var _useColumns = require("./hook/useColumns");
 var _convert = require("./hook/convert");
 var _antd = require("antd");
-var _hooks = require("../grid-component/hooks");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 // import en from "rc-master-ui/es/date-picker/locale/en_US"
@@ -45,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);
@@ -109,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(() => {
@@ -144,7 +145,7 @@ const InternalTable = props => {
   });
   _react.default.useEffect(() => {
     if (defaultExpandAllRows) {
-      const allKeys = (0, _hooks.findAllChildrenKeys2)(convertData, rowKey, 'children');
+      const allKeys = (0, _utils.findAllChildrenKeys2)(convertData, rowKey, 'children');
       setExpanded((0, _utils.convertToObjTrue)(allKeys));
     } else {
       if (defaultExpandedRowKeys) {
@@ -216,7 +217,8 @@ const InternalTable = props => {
     isDataTree: isDataTree,
     selectionSettings: selectionSettings,
     mergedSelectedKeys: mergedSelectedKeys,
-    expandable: expandable
+    expandable: expandable,
+    setColumns: setColumns
   })), /*#__PURE__*/_react.default.createElement(_antd.Modal, {
     open: isFullScreen,
     footer: null,
@@ -286,7 +288,8 @@ const InternalTable = props => {
     isDataTree: isDataTree,
     selectionSettings: selectionSettings,
     mergedSelectedKeys: mergedSelectedKeys,
-    expandable: expandable
+    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";
@@ -137,3 +137,6 @@ 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;
@@ -42,8 +43,11 @@ 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");
@@ -2019,4 +2023,64 @@ function isTreeArray(arr) {
     }
     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.41",
+  "version": "1.7.42",
   "description": "es-grid-template",
   "keywords": [
     "react",