es-grid-template 1.7.42 → 1.7.44

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;
@@ -660,24 +666,178 @@ const TableContainerEdit = props => {
   }, [dataSource, editingKey, id, onBlur]);
   const columnSizingState = table.getState().columnSizing;
   React.useEffect(() => {
-    requestAnimationFrame(() => {
-      columnVirtualizer.measure();
-    });
+
+    // requestAnimationFrame(() => {
+
+    //   columnVirtualizer.measure()
+    // })
   }, [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) {
+    if (totalWidth && totalWidth <= containerWidth) {
+      return;
+    }
+    if (columnSizingInfo.isResizingColumn === false) {
+      const aa = updateColumnWidthsRecursive(propsColumns, columnSizing);
+      setColumns(aa);
+      requestAnimationFrame(() => {
+        columnVirtualizer.measure();
+      });
+    }
+  }, [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);
+    if (totalWidth && totalWidth > 0 && 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);
+      table.setColumnSizing(aaa);
+      requestAnimationFrame(() => {
+        columnVirtualizer.measure();
+      });
+
+      // setColumnSizing?.(aaa)
+    } else {
+      if (columnHidden) {
+        const abb = table.getVisibleLeafColumns()?.[0];
+        if (abb && Object.keys(columnSizingInfo).length === 0) {
+          // setColumnSizing({ "#": abb.getSize() })
+          table.setColumnSizing({
+            "#": abb.getSize()
+          });
+          requestAnimationFrame(() => {
+            columnVirtualizer.measure();
+          });
+        }
+      }
     }
-  }, [table.getTotalSize(), windowSize.innerWidth, table.getState().columnSizing]);
+  }, [table.getTotalSize(), dataSource.length, windowSize.innerWidth, columnVirtualizer]);
   // }, [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/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.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, updateColumnWidthsRecursive } from "../hook/utils";
+import { convertFilters, convertToObjTrue, filterDataByColumns, getAllRowKey } from "../hook/utils";
 import TableContainerEdit from "../TableContainerEdit";
 const Grid = props => {
   const {
@@ -141,22 +141,30 @@ const Grid = props => {
 
     // debugTable: true
   });
-  React.useEffect(() => {
-    if (columnHidden) {
-      const abb = table.getVisibleLeafColumns()?.[0];
-      if (abb) {
-        setColumnSizing({
-          "#": abb.getSize()
-        });
-      }
-    }
-  }, [columnHidden, table]);
-  React.useEffect(() => {
-    if (columnSizingInfo.isResizingColumn === false) {
-      const aa = updateColumnWidthsRecursive(propsColumns, columnSizing);
-      setColumns(aa);
-    }
-  }, [columnSizingInfo]);
+
+  // React.useEffect(() => {
+  //   if (columnHidden) {
+  //     const abb = table.getVisibleLeafColumns()?.[0]
+
+  //     if (abb && Object.keys(columnSizingInfo).length === 0
+  //     ) {
+  //       setColumnSizing({ "#": abb.getSize() })
+  //     }
+  //   }
+
+  // }, [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)) {
@@ -276,7 +284,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/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;
@@ -667,24 +673,178 @@ const TableContainerEdit = props => {
   }, [dataSource, editingKey, id, onBlur]);
   const columnSizingState = table.getState().columnSizing;
   _react.default.useEffect(() => {
-    requestAnimationFrame(() => {
-      columnVirtualizer.measure();
-    });
+
+    // requestAnimationFrame(() => {
+
+    //   columnVirtualizer.measure()
+    // })
   }, [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) {
+    if (totalWidth && totalWidth <= containerWidth) {
+      return;
+    }
+    if (columnSizingInfo.isResizingColumn === false) {
+      const aa = (0, _utils.updateColumnWidthsRecursive)(propsColumns, columnSizing);
+      setColumns(aa);
+      requestAnimationFrame(() => {
+        columnVirtualizer.measure();
+      });
+    }
+  }, [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);
+    if (totalWidth && totalWidth > 0 && 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 = (0, _utils.updateColumnWidthsRecursive)(propsColumns, aaa);
+      setColumns(aa);
+      table.setColumnSizing(aaa);
+      requestAnimationFrame(() => {
+        columnVirtualizer.measure();
+      });
+
+      // setColumnSizing?.(aaa)
+    } else {
+      if (columnHidden) {
+        const abb = table.getVisibleLeafColumns()?.[0];
+        if (abb && Object.keys(columnSizingInfo).length === 0) {
+          // setColumnSizing({ "#": abb.getSize() })
+          table.setColumnSizing({
+            "#": abb.getSize()
+          });
+          requestAnimationFrame(() => {
+            columnVirtualizer.measure();
+          });
+        }
+      }
     }
-  }, [table.getTotalSize(), windowSize.innerWidth, table.getState().columnSizing]);
+  }, [table.getTotalSize(), dataSource.length, windowSize.innerWidth, columnVirtualizer]);
   // }, [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/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.js

@@ -143,22 +143,30 @@ const Grid = props => {
 
     // debugTable: true
   });
-  _react.default.useEffect(() => {
-    if (columnHidden) {
-      const abb = table.getVisibleLeafColumns()?.[0];
-      if (abb) {
-        setColumnSizing({
-          "#": abb.getSize()
-        });
-      }
-    }
-  }, [columnHidden, table]);
-  _react.default.useEffect(() => {
-    if (columnSizingInfo.isResizingColumn === false) {
-      const aa = (0, _utils.updateColumnWidthsRecursive)(propsColumns, columnSizing);
-      setColumns(aa);
-    }
-  }, [columnSizingInfo]);
+
+  // React.useEffect(() => {
+  //   if (columnHidden) {
+  //     const abb = table.getVisibleLeafColumns()?.[0]
+
+  //     if (abb && Object.keys(columnSizingInfo).length === 0
+  //     ) {
+  //       setColumnSizing({ "#": abb.getSize() })
+  //     }
+  //   }
+
+  // }, [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)) {
@@ -278,7 +286,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.42",
+  "version": "1.7.44",
   "description": "es-grid-template",
   "keywords": [
     "react",