es-grid-template 1.7.41 → 1.7.43

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/TableContainerEdit.d.ts

@@ -1,6 +1,6 @@
 import type { Dispatch, SetStateAction } from "react";
 import React from "react";
-import type { ColumnDef, Table } from "@tanstack/react-table";
+import type { ColumnDef, ColumnSizingInfoState, ColumnSizingState, Table } from "@tanstack/react-table";
 import type { ColumnsTable, TableProps } from "./type";
 type TableContainerProps<T> = Omit<TableProps<T>, 'columns'> & {
     table: Table<T>;
@@ -32,6 +32,10 @@ type TableContainerProps<T> = Omit<TableProps<T>, 'columns'> & {
     columnHidden: any;
     isFullScreen: boolean;
     setIsFullScreen: Dispatch<SetStateAction<boolean>>;
+    setColumnSizing: Dispatch<SetStateAction<any>>;
+    setColumns: Dispatch<SetStateAction<any>>;
+    columnSizingInfo: ColumnSizingInfoState;
+    columnSizing: ColumnSizingState;
 };
 declare const TableContainerEdit: <RecordType extends object>(props: TableContainerProps<RecordType>) => React.JSX.Element;
 export default TableContainerEdit;

package/es/table-component/TableContainerEdit.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { Fragment } from "react";
 import { checkDecimalSeparator, checkThousandSeparator, detectSeparators, findItemByKey, flattenArray, flattenData, getAllRowKey, getColIdsBetween, getDefaultValue, getFormat, getRowIdsBetween, getSelectedCellMatrix, isEditable, isFormattedNumber, newGuid, sumSize,
 // sumSize,
-unFlattenData, updateArrayByKey, updateOrInsert } from "./hook/utils";
+unFlattenData, updateArrayByKey, updateColumnWidthsRecursive, updateOrInsert } from "./hook/utils";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { useForm } from 'react-hook-form';
 import { Button, Modal, Typography, Dropdown } from "antd";
@@ -117,7 +117,11 @@ const TableContainerEdit = props => {
     showDefaultContext,
     commandSettings,
     isDataTree,
-    onCellClick
+    onCellClick,
+    // setColumnSizing,
+    setColumns,
+    columnSizing,
+    columnSizingInfo
   } = props;
   const containerRef = React.useRef(null);
   const bottomToolbarRef = React.useRef(null);
@@ -352,7 +356,9 @@ const TableContainerEdit = props => {
     return startCell && endCell ? getRowIdsBetween(table, startCell.rowId, endCell.rowId) : [];
   }, [endCell, startCell, table]);
   const copySelectionToClipboard = React.useCallback(() => {
-    if (!startCell || !endCell) return;
+    if (!startCell || !endCell) {
+      return;
+    }
 
     // const allRows = table.getRowModel().rows;
     const allRows = table.getRowModel().flatRows;
@@ -665,19 +671,161 @@ const TableContainerEdit = props => {
     });
   }, [columnSizingState, columnVirtualizer]);
   React.useEffect(() => {
-    if (!containerRef.current) return;
-    const containerWidth = containerRef.current.offsetWidth - 1;
+    if (!tableContainerRef.current) {
+      return;
+    }
+    const containerWidth = tableContainerRef.current.offsetWidth;
     const totalWidth = table.getTotalSize();
+    if (totalWidth && totalWidth <= containerWidth) {
+      return;
+    }
+    if (columnSizingInfo.isResizingColumn === false) {
+      const aa = updateColumnWidthsRecursive(propsColumns, columnSizing);
+      setColumns(aa);
+    }
+  }, [columnSizingInfo]);
+  React.useEffect(() => {
+    // if (!containerRef.current || !tableContainerRef.current) { 
+    if (!tableContainerRef.current) {
+      return;
+    }
+
+    // const containerWidth = containerRef.current.offsetWidth - 1
+    // const containerWidth = tableContainerRef.current.offsetWidth
+    const containerWidth = tableContainerRef.current.offsetWidth - (tableContainerRef.current.scrollHeight > tableContainerRef.current.offsetHeight ? 15 : 0);
+    const totalWidth = table.getTotalSize() - (tableContainerRef.current.scrollHeight > tableContainerRef.current.offsetHeight ? 15 : 0);
+
+    // console.log('containerWidth', containerWidth)
+    // console.log('totalWidth', totalWidth)
+
     if (totalWidth && totalWidth < containerWidth) {
       const factor = containerWidth / totalWidth;
-      table.setColumnSizing(table.getAllLeafColumns().reduce((acc, col) => {
-        acc[col.id] = (col.getSize() || col.columnDef.size || 150) * factor;
+      const visibleCols = table.getVisibleLeafColumns();
+      const baseSizes = visibleCols.map(col => col.getSize() || col.columnDef.size || 150);
+      const scaledSizes = baseSizes.map(size => size * factor);
+      const roundedSizes = scaledSizes.map(size => Math.floor(size));
+      let diff = containerWidth - roundedSizes.reduce((a, b) => a + b, 0);
+
+      // phân bổ diff cho các cột từ trái qua phải
+      for (let i = 0; diff > 0; i = (i + 1) % roundedSizes.length) {
+        roundedSizes[i]++;
+        diff--;
+      }
+      const aaa = visibleCols.reduce((acc, col, idx) => {
+        acc[col.id] = roundedSizes[idx];
         return acc;
-      }, {}));
+      }, {});
+
+      // const aa =  updateColumnWidthsRecursive(propsColumns, aaa)
+
+      // setColumns(aa)
+
+      // console.log('aaa', aaa)
+
+      table.setColumnSizing(aaa);
+
+      // setColumnSizing?.(aaa)
     }
-  }, [table.getTotalSize(), windowSize.innerWidth, table.getState().columnSizing]);
+  }, [table.getTotalSize(), table.getState().columnSizing, dataSource.length]);
   // }, [table.getState().columnSizing, table.getTotalSize(), containerRef])
 
+  // React.useEffect(() => {
+
+  //   if (!tableContainerRef.current) { 
+  //     return 
+  //   }
+
+  //   const containerWidth = tableContainerRef.current.offsetWidth
+  //   const totalWidth = table.getTotalSize()
+
+  //   if (totalWidth && totalWidth <= containerWidth) {
+
+  //     return
+
+  //   }
+
+  //   if (columnSizingInfo.isResizingColumn === false) {
+
+  //     const aa =  updateColumnWidthsRecursive(propsColumns, columnSizing)
+  //     setColumns(aa)
+
+  //   }
+
+  // }, [columnSizing, columnSizingInfo, propsColumns, setColumns])
+
+  // React.useEffect(() => {
+
+  //   // if (!containerRef.current || !tableContainerRef.current) { 
+  //   if (!tableContainerRef.current) { 
+  //     return 
+  //   }
+
+  //   // const containerWidth = containerRef.current.offsetWidth - 1
+  //   const containerWidth = tableContainerRef.current.offsetWidth - (tableContainerRef.current.scrollHeight > tableContainerRef.current.offsetHeight ? 15 : 0 )
+
+  //   const totalWidth = table.getTotalSize()
+
+  //   if (totalWidth && totalWidth < containerWidth) {
+
+  //     const factor = containerWidth / totalWidth
+
+  //     const visibleCols = table.getVisibleLeafColumns()
+
+  //     const baseSizes = visibleCols.map(
+  //       (col) => col.getSize() || col.columnDef.size || 150
+  //     )
+
+  //     const scaledSizes = baseSizes.map((size) => size * factor)
+  //     const roundedSizes = scaledSizes.map((size) => Math.floor(size))
+
+  //     let diff = containerWidth - roundedSizes.reduce((a, b) => a + b, 0)
+
+  //     // phân bổ diff cho các cột từ trái qua phải
+  //     for (let i = 0; diff > 0; i = (i + 1) % roundedSizes.length) {
+  //       roundedSizes[i]++
+  //       diff--
+  //     }
+
+  //     const aaa = visibleCols.reduce((acc, col, idx) => {
+  //       acc[col.id] = roundedSizes[idx]
+  //       return acc
+  //     }, {} as Record<string, number>)
+
+  //     const aa =  updateColumnWidthsRecursive(propsColumns, aaa)
+
+  //     // setColumns(aa)
+
+  //     table.setColumnSizing(aaa)
+
+  //     // setColumnSizing?.(aaa)
+  //   }
+
+  // }, [windowSize.innerWidth, tableContainerRef, propsColumns, table.getState().columnSizing])
+  // // }, [windowSize.innerWidth, tableContainerRef, propsColumns, table.getState().columnSizing, dataSource.length])
+  // // }, [table.getState().columnSizing, table.getTotalSize(), containerRef])
+
+  // React.useEffect(() => {
+
+  //   if (!containerRef.current) return;
+
+  //   const containerWidth = containerRef.current.offsetWidth - 1;
+  //   const totalWidth = table.getTotalSize();
+
+  //   if (totalWidth && totalWidth < containerWidth) {
+
+  //     const factor = containerWidth / totalWidth;
+
+  //     table.setColumnSizing(
+  //       table.getVisibleLeafColumns().reduce((acc, col) => {
+  //         acc[col.id] = ((col.getSize() || col.columnDef.size || 150) * factor);
+  //         return acc;
+  //       }, {} as Record<string, number>)
+  //     );
+  //   }
+
+  // }, [table.getTotalSize(), windowSize.innerWidth, table.getState().columnSizing])
+  // // }, [table.getState().columnSizing, table.getTotalSize(), containerRef])
+
   React.useEffect(() => {
     const totalHeight = minHeight ?? height;
     if (totalHeight) {

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

@@ -425,7 +425,8 @@ const EditableCell = props => {
                 newState,
                 option: {
                   value: val,
-                  label: val
+                  label: val,
+                  searchTextAsValue: true
                 },
                 indexCol,
                 indexRow,
@@ -511,7 +512,8 @@ const EditableCell = props => {
                 newState,
                 option: {
                   value: val,
-                  label: val
+                  label: val,
+                  searchTextAsValue: true
                 },
                 indexCol,
                 indexRow,
@@ -636,7 +638,8 @@ const EditableCell = props => {
                 newState,
                 option: {
                   value: val,
-                  label: val
+                  label: val,
+                  searchTextAsValue: true
                 },
                 indexCol,
                 indexRow,

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

@@ -691,7 +691,8 @@ const TableBodyCellEdit = props => {
     }
   }
   const handleMouseDownIndex = rowId => {
-    const allColumns = table.getVisibleLeafColumns();
+    setIsSelecting?.(true);
+    const allColumns = table.getVisibleLeafColumns().filter(it => !nonActionColumn.includes(it.id));
     const firstCOl = findFirst(allColumns);
     const startCol = allColumns[0].id;
     const endCol = allColumns[allColumns.length - 1].id;
@@ -717,6 +718,31 @@ const TableBodyCellEdit = props => {
       colId: endCol
     }));
   };
+  const handleMouseEnterIndex = rowId => {
+    if (isSelecting) {
+      const allColumns = table.getVisibleLeafColumns().filter(it => !nonActionColumn.includes(it.id));
+
+      // const firstCOl = findFirst(allColumns)
+
+      // const startCol = allColumns[0].id
+      const endCol = allColumns[allColumns.length - 1].id;
+
+      // setStartCell?.({ rowId, colId: startCol });
+      setEndCell?.({
+        rowId,
+        colId: endCol
+      });
+    }
+  };
+  const handleMouseUpIndex = () => {
+    setIsSelecting?.(false);
+    // setIsPasting?.(false);
+
+    const selectState = getSelectedCellMatrix(table, startCell, endCell);
+    if (!isObjEqual(rangeState, selectState)) {
+      setRangeState?.(selectState);
+    }
+  };
   if (cell.column.id === "#") {
     return /*#__PURE__*/React.createElement("td", {
       key: cell.id,
@@ -756,7 +782,16 @@ const TableBodyCellEdit = props => {
 
           // reset?.()
         }
-      }
+      },
+      onMouseEnter: () => {
+        handleMouseEnterIndex(cell.row.id);
+      },
+      onMouseUp: handleMouseUpIndex
+      // onMouseUp={() => {
+
+      //   handleMouseUpIndex()
+
+      // }}
     }, cell.column.getIndex() === expandIconColumnIndex && isDataTree && /*#__PURE__*/React.createElement("div", {
       className: "ui-rc-table-row-expand-trigger",
       style: {

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

@@ -214,8 +214,8 @@ const TableHeadCell = props => {
       [`${prefix}-grid-cell-wrap`]: wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Header'),
       [`${prefix}-grid-cell-fix-left-last`]: isLastLeftPinnedColumn,
       [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn,
-      [`${prefix}-grid-cell-text-center`]: originalColumn?.headerTextAlign === 'center',
-      [`${prefix}-grid-cell-text-right`]: originalColumn?.headerTextAlign === 'right'
+      [`${prefix}-grid-cell-text-center`]: (originalColumn?.headerTextAlign ?? originalColumn?.textAlign) === 'center',
+      [`${prefix}-grid-cell-text-right`]: (originalColumn?.headerTextAlign ?? originalColumn.textAlign) === 'right'
     }),
     colSpan: colSpan,
     rowSpan: rowSpan,

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/style.scss

@@ -293,7 +293,7 @@ $fontFamily: "Montserrat", Helvetica, Arial, serif !default;
         }
 
         &.#{$prefix}-grid-cell-index-selected {
-          background-color: $cell-index-selected-bg;
+          background-color: $cell-index-selected-bg !important;
           color: #ffffff;
         }
 

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

@@ -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
@@ -141,13 +144,25 @@ const Grid = props => {
   React.useEffect(() => {
     if (columnHidden) {
       const abb = table.getVisibleLeafColumns()?.[0];
-      if (abb) {
+      if (abb && Object.keys(columnSizingInfo).length === 0) {
         setColumnSizing({
           "#": abb.getSize()
         });
       }
     }
-  }, [columnHidden, table]);
+  }, [columnHidden, columnSizingInfo]);
+
+  // 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)) {
@@ -267,7 +282,11 @@ const Grid = props => {
     setExpanded: setExpanded,
     expanded: expanded,
     infiniteScroll: infiniteScroll,
-    setMergedFilterKeys: setMergedFilterKeys
+    setMergedFilterKeys: setMergedFilterKeys,
+    setColumnSizing: setColumnSizing,
+    setColumns: setColumns,
+    columnSizing: columnSizing,
+    columnSizingInfo: columnSizingInfo
   }))));
 };
 export default Grid;

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

@@ -300,6 +300,10 @@ export type IEditSelectSettings = {
     fieldLabel?: string;
     /** cho phép nhập giá trị - onBlur: giá trị search được set thành value **/
     searchTextAsValue?: boolean;
+    /**
+     * @deprecated Please use `allowSorter` instead.
+     * @since  1.7.25
+     */
     inputKey?: string;
     filterKey?: string[];
     selectMode?: SelectMode;

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/TableContainerEdit.d.ts

@@ -1,6 +1,6 @@
 import type { Dispatch, SetStateAction } from "react";
 import React from "react";
-import type { ColumnDef, Table } from "@tanstack/react-table";
+import type { ColumnDef, ColumnSizingInfoState, ColumnSizingState, Table } from "@tanstack/react-table";
 import type { ColumnsTable, TableProps } from "./type";
 type TableContainerProps<T> = Omit<TableProps<T>, 'columns'> & {
     table: Table<T>;
@@ -32,6 +32,10 @@ type TableContainerProps<T> = Omit<TableProps<T>, 'columns'> & {
     columnHidden: any;
     isFullScreen: boolean;
     setIsFullScreen: Dispatch<SetStateAction<boolean>>;
+    setColumnSizing: Dispatch<SetStateAction<any>>;
+    setColumns: Dispatch<SetStateAction<any>>;
+    columnSizingInfo: ColumnSizingInfoState;
+    columnSizing: ColumnSizingState;
 };
 declare const TableContainerEdit: <RecordType extends object>(props: TableContainerProps<RecordType>) => React.JSX.Element;
 export default TableContainerEdit;

package/lib/table-component/TableContainerEdit.js

@@ -124,7 +124,11 @@ const TableContainerEdit = props => {
     showDefaultContext,
     commandSettings,
     isDataTree,
-    onCellClick
+    onCellClick,
+    // setColumnSizing,
+    setColumns,
+    columnSizing,
+    columnSizingInfo
   } = props;
   const containerRef = _react.default.useRef(null);
   const bottomToolbarRef = _react.default.useRef(null);
@@ -359,7 +363,9 @@ const TableContainerEdit = props => {
     return startCell && endCell ? (0, _utils.getRowIdsBetween)(table, startCell.rowId, endCell.rowId) : [];
   }, [endCell, startCell, table]);
   const copySelectionToClipboard = _react.default.useCallback(() => {
-    if (!startCell || !endCell) return;
+    if (!startCell || !endCell) {
+      return;
+    }
 
     // const allRows = table.getRowModel().rows;
     const allRows = table.getRowModel().flatRows;
@@ -672,19 +678,161 @@ const TableContainerEdit = props => {
     });
   }, [columnSizingState, columnVirtualizer]);
   _react.default.useEffect(() => {
-    if (!containerRef.current) return;
-    const containerWidth = containerRef.current.offsetWidth - 1;
+    if (!tableContainerRef.current) {
+      return;
+    }
+    const containerWidth = tableContainerRef.current.offsetWidth;
     const totalWidth = table.getTotalSize();
+    if (totalWidth && totalWidth <= containerWidth) {
+      return;
+    }
+    if (columnSizingInfo.isResizingColumn === false) {
+      const aa = (0, _utils.updateColumnWidthsRecursive)(propsColumns, columnSizing);
+      setColumns(aa);
+    }
+  }, [columnSizingInfo]);
+  _react.default.useEffect(() => {
+    // if (!containerRef.current || !tableContainerRef.current) { 
+    if (!tableContainerRef.current) {
+      return;
+    }
+
+    // const containerWidth = containerRef.current.offsetWidth - 1
+    // const containerWidth = tableContainerRef.current.offsetWidth
+    const containerWidth = tableContainerRef.current.offsetWidth - (tableContainerRef.current.scrollHeight > tableContainerRef.current.offsetHeight ? 15 : 0);
+    const totalWidth = table.getTotalSize() - (tableContainerRef.current.scrollHeight > tableContainerRef.current.offsetHeight ? 15 : 0);
+
+    // console.log('containerWidth', containerWidth)
+    // console.log('totalWidth', totalWidth)
+
     if (totalWidth && totalWidth < containerWidth) {
       const factor = containerWidth / totalWidth;
-      table.setColumnSizing(table.getAllLeafColumns().reduce((acc, col) => {
-        acc[col.id] = (col.getSize() || col.columnDef.size || 150) * factor;
+      const visibleCols = table.getVisibleLeafColumns();
+      const baseSizes = visibleCols.map(col => col.getSize() || col.columnDef.size || 150);
+      const scaledSizes = baseSizes.map(size => size * factor);
+      const roundedSizes = scaledSizes.map(size => Math.floor(size));
+      let diff = containerWidth - roundedSizes.reduce((a, b) => a + b, 0);
+
+      // phân bổ diff cho các cột từ trái qua phải
+      for (let i = 0; diff > 0; i = (i + 1) % roundedSizes.length) {
+        roundedSizes[i]++;
+        diff--;
+      }
+      const aaa = visibleCols.reduce((acc, col, idx) => {
+        acc[col.id] = roundedSizes[idx];
         return acc;
-      }, {}));
+      }, {});
+
+      // const aa =  updateColumnWidthsRecursive(propsColumns, aaa)
+
+      // setColumns(aa)
+
+      // console.log('aaa', aaa)
+
+      table.setColumnSizing(aaa);
+
+      // setColumnSizing?.(aaa)
     }
-  }, [table.getTotalSize(), windowSize.innerWidth, table.getState().columnSizing]);
+  }, [table.getTotalSize(), table.getState().columnSizing, dataSource.length]);
   // }, [table.getState().columnSizing, table.getTotalSize(), containerRef])
 
+  // React.useEffect(() => {
+
+  //   if (!tableContainerRef.current) { 
+  //     return 
+  //   }
+
+  //   const containerWidth = tableContainerRef.current.offsetWidth
+  //   const totalWidth = table.getTotalSize()
+
+  //   if (totalWidth && totalWidth <= containerWidth) {
+
+  //     return
+
+  //   }
+
+  //   if (columnSizingInfo.isResizingColumn === false) {
+
+  //     const aa =  updateColumnWidthsRecursive(propsColumns, columnSizing)
+  //     setColumns(aa)
+
+  //   }
+
+  // }, [columnSizing, columnSizingInfo, propsColumns, setColumns])
+
+  // React.useEffect(() => {
+
+  //   // if (!containerRef.current || !tableContainerRef.current) { 
+  //   if (!tableContainerRef.current) { 
+  //     return 
+  //   }
+
+  //   // const containerWidth = containerRef.current.offsetWidth - 1
+  //   const containerWidth = tableContainerRef.current.offsetWidth - (tableContainerRef.current.scrollHeight > tableContainerRef.current.offsetHeight ? 15 : 0 )
+
+  //   const totalWidth = table.getTotalSize()
+
+  //   if (totalWidth && totalWidth < containerWidth) {
+
+  //     const factor = containerWidth / totalWidth
+
+  //     const visibleCols = table.getVisibleLeafColumns()
+
+  //     const baseSizes = visibleCols.map(
+  //       (col) => col.getSize() || col.columnDef.size || 150
+  //     )
+
+  //     const scaledSizes = baseSizes.map((size) => size * factor)
+  //     const roundedSizes = scaledSizes.map((size) => Math.floor(size))
+
+  //     let diff = containerWidth - roundedSizes.reduce((a, b) => a + b, 0)
+
+  //     // phân bổ diff cho các cột từ trái qua phải
+  //     for (let i = 0; diff > 0; i = (i + 1) % roundedSizes.length) {
+  //       roundedSizes[i]++
+  //       diff--
+  //     }
+
+  //     const aaa = visibleCols.reduce((acc, col, idx) => {
+  //       acc[col.id] = roundedSizes[idx]
+  //       return acc
+  //     }, {} as Record<string, number>)
+
+  //     const aa =  updateColumnWidthsRecursive(propsColumns, aaa)
+
+  //     // setColumns(aa)
+
+  //     table.setColumnSizing(aaa)
+
+  //     // setColumnSizing?.(aaa)
+  //   }
+
+  // }, [windowSize.innerWidth, tableContainerRef, propsColumns, table.getState().columnSizing])
+  // // }, [windowSize.innerWidth, tableContainerRef, propsColumns, table.getState().columnSizing, dataSource.length])
+  // // }, [table.getState().columnSizing, table.getTotalSize(), containerRef])
+
+  // React.useEffect(() => {
+
+  //   if (!containerRef.current) return;
+
+  //   const containerWidth = containerRef.current.offsetWidth - 1;
+  //   const totalWidth = table.getTotalSize();
+
+  //   if (totalWidth && totalWidth < containerWidth) {
+
+  //     const factor = containerWidth / totalWidth;
+
+  //     table.setColumnSizing(
+  //       table.getVisibleLeafColumns().reduce((acc, col) => {
+  //         acc[col.id] = ((col.getSize() || col.columnDef.size || 150) * factor);
+  //         return acc;
+  //       }, {} as Record<string, number>)
+  //     );
+  //   }
+
+  // }, [table.getTotalSize(), windowSize.innerWidth, table.getState().columnSizing])
+  // // }, [table.getState().columnSizing, table.getTotalSize(), containerRef])
+
   _react.default.useEffect(() => {
     const totalHeight = minHeight ?? height;
     if (totalHeight) {

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

@@ -427,7 +427,8 @@ const EditableCell = props => {
                 newState,
                 option: {
                   value: val,
-                  label: val
+                  label: val,
+                  searchTextAsValue: true
                 },
                 indexCol,
                 indexRow,
@@ -513,7 +514,8 @@ const EditableCell = props => {
                 newState,
                 option: {
                   value: val,
-                  label: val
+                  label: val,
+                  searchTextAsValue: true
                 },
                 indexCol,
                 indexRow,
@@ -638,7 +640,8 @@ const EditableCell = props => {
                 newState,
                 option: {
                   value: val,
-                  label: val
+                  label: val,
+                  searchTextAsValue: true
                 },
                 indexCol,
                 indexRow,

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

@@ -697,7 +697,8 @@ const TableBodyCellEdit = props => {
     }
   }
   const handleMouseDownIndex = rowId => {
-    const allColumns = table.getVisibleLeafColumns();
+    setIsSelecting?.(true);
+    const allColumns = table.getVisibleLeafColumns().filter(it => !_constant.nonActionColumn.includes(it.id));
     const firstCOl = (0, _utils.findFirst)(allColumns);
     const startCol = allColumns[0].id;
     const endCol = allColumns[allColumns.length - 1].id;
@@ -723,6 +724,31 @@ const TableBodyCellEdit = props => {
       colId: endCol
     }));
   };
+  const handleMouseEnterIndex = rowId => {
+    if (isSelecting) {
+      const allColumns = table.getVisibleLeafColumns().filter(it => !_constant.nonActionColumn.includes(it.id));
+
+      // const firstCOl = findFirst(allColumns)
+
+      // const startCol = allColumns[0].id
+      const endCol = allColumns[allColumns.length - 1].id;
+
+      // setStartCell?.({ rowId, colId: startCol });
+      setEndCell?.({
+        rowId,
+        colId: endCol
+      });
+    }
+  };
+  const handleMouseUpIndex = () => {
+    setIsSelecting?.(false);
+    // setIsPasting?.(false);
+
+    const selectState = (0, _utils.getSelectedCellMatrix)(table, startCell, endCell);
+    if (!(0, _utils.isObjEqual)(rangeState, selectState)) {
+      setRangeState?.(selectState);
+    }
+  };
   if (cell.column.id === "#") {
     return /*#__PURE__*/_react.default.createElement("td", {
       key: cell.id,
@@ -762,7 +788,16 @@ const TableBodyCellEdit = props => {
 
           // reset?.()
         }
-      }
+      },
+      onMouseEnter: () => {
+        handleMouseEnterIndex(cell.row.id);
+      },
+      onMouseUp: handleMouseUpIndex
+      // onMouseUp={() => {
+
+      //   handleMouseUpIndex()
+
+      // }}
     }, cell.column.getIndex() === expandIconColumnIndex && isDataTree && /*#__PURE__*/_react.default.createElement("div", {
       className: "ui-rc-table-row-expand-trigger",
       style: {

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

@@ -223,8 +223,8 @@ const TableHeadCell = props => {
       [`${prefix}-grid-cell-wrap`]: wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Header'),
       [`${prefix}-grid-cell-fix-left-last`]: isLastLeftPinnedColumn,
       [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn,
-      [`${prefix}-grid-cell-text-center`]: originalColumn?.headerTextAlign === 'center',
-      [`${prefix}-grid-cell-text-right`]: originalColumn?.headerTextAlign === 'right'
+      [`${prefix}-grid-cell-text-center`]: (originalColumn?.headerTextAlign ?? originalColumn?.textAlign) === 'center',
+      [`${prefix}-grid-cell-text-right`]: (originalColumn?.headerTextAlign ?? originalColumn.textAlign) === 'right'
     }),
     colSpan: colSpan,
     rowSpan: rowSpan,

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/style.scss

@@ -293,7 +293,7 @@ $fontFamily: "Montserrat", Helvetica, Arial, serif !default;
         }
 
         &.#{$prefix}-grid-cell-index-selected {
-          background-color: $cell-index-selected-bg;
+          background-color: $cell-index-selected-bg !important;
           color: #ffffff;
         }
 

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
@@ -143,13 +146,25 @@ const Grid = props => {
   _react.default.useEffect(() => {
     if (columnHidden) {
       const abb = table.getVisibleLeafColumns()?.[0];
-      if (abb) {
+      if (abb && Object.keys(columnSizingInfo).length === 0) {
         setColumnSizing({
           "#": abb.getSize()
         });
       }
     }
-  }, [columnHidden, table]);
+  }, [columnHidden, columnSizingInfo]);
+
+  // React.useEffect(() => {
+  //   if (columnSizingInfo.isResizingColumn === false) {
+
+  //     const aa =  updateColumnWidthsRecursive(propsColumns, columnSizing)
+
+  //     setColumns(aa)
+
+  //   }
+
+  // }, [columnSizingInfo])
+
   _react.default.useEffect(() => {
     // if (!manualUpdate) {
     if (Object.keys(rowSelection) !== Object.keys(mergedSelectedKeys)) {
@@ -269,7 +284,11 @@ const Grid = props => {
     setExpanded: setExpanded,
     expanded: expanded,
     infiniteScroll: infiniteScroll,
-    setMergedFilterKeys: setMergedFilterKeys
+    setMergedFilterKeys: setMergedFilterKeys,
+    setColumnSizing: setColumnSizing,
+    setColumns: setColumns,
+    columnSizing: columnSizing,
+    columnSizingInfo: columnSizingInfo
   }))));
 };
 var _default = exports.default = Grid;

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

@@ -300,6 +300,10 @@ export type IEditSelectSettings = {
     fieldLabel?: string;
     /** cho phép nhập giá trị - onBlur: giá trị search được set thành value **/
     searchTextAsValue?: boolean;
+    /**
+     * @deprecated Please use `allowSorter` instead.
+     * @since  1.7.25
+     */
     inputKey?: string;
     filterKey?: string[];
     selectMode?: SelectMode;

package/package.json

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