es-grid-template 1.7.32 → 1.7.34

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

@@ -22,6 +22,7 @@ type Props<T> = Omit<TableProps<T>, 'columns'> & {
     onContextMenu?: (data: T) => (event: any) => void;
     triggerChangeColumns?: (args: any, keys: any) => void;
     windowSize: any;
+    isDataTree: boolean;
 };
 declare const Grid: <RecordType extends object>(props: Props<RecordType>) => React.JSX.Element;
 export default Grid;

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

@@ -218,6 +218,7 @@ const Grid = props => {
     sensors: sensors
   }, /*#__PURE__*/React.createElement(ContainerComponent, _extends({}, rest, {
     id: id,
+    t: t,
     table: table,
     editAble: editAble,
     dataSource: dataSource,
@@ -236,7 +237,8 @@ const Grid = props => {
     columnHidden: columnHidden,
     setExpanded: setExpanded,
     expanded: expanded,
-    infiniteScroll: infiniteScroll
+    infiniteScroll: infiniteScroll,
+    setMergedFilterKeys: setMergedFilterKeys
   }))));
 };
 export default Grid;

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

@@ -167,12 +167,12 @@ const TableWrapper = props => {
   return /*#__PURE__*/React.createElement("div", {
     style: {
       position: 'relative'
-    }
-  }, /*#__PURE__*/React.createElement("div", {
+    },
     className: classNames(`${prefix}-grid-container`, {
       'ui-rc-table-ping-right': tableContainerRef && (tableContainerRef.current?.scrollLeft ?? 0) >= 0 && (tableContainerRef.current?.scrollLeft ?? 0) + (tableContainerRef.current?.clientWidth ?? 0) < (tableContainerRef.current?.scrollWidth ?? 0),
       'ui-rc-table-ping-left': tableContainerRef && (tableContainerRef.current?.scrollLeft ?? 0) > 0
-    }),
+    })
+  }, /*#__PURE__*/React.createElement("div", {
     id: id,
     ref: tableContainerRef,
     style: {
@@ -191,8 +191,8 @@ const TableWrapper = props => {
     onScroll: handleScroll
   }, /*#__PURE__*/React.createElement("table", {
     style: {
-      display: 'grid'
-      // minWidth: table.getTotalSize()
+      display: 'grid',
+      minWidth: table.getTotalSize()
     }
   }, /*#__PURE__*/React.createElement(TableHead, {
     tableContainerRef: tableContainerRef,

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

@@ -85,7 +85,6 @@ export type ColumnTable<RecordType = AnyObject> = {
     width?: number;
     maxWidth?: number;
     minWidth?: number;
-    align?: ITextAlign;
     type?: IColumnType;
     haveSum?: boolean;
     isSummary?: boolean;
@@ -106,9 +105,19 @@ export type ColumnTable<RecordType = AnyObject> = {
     source?: any[];
     showFilterSearch?: boolean;
     headerText?: string;
+    /**
+      * @deprecated Please use `visible` instead.
+      * @since  1.7.33
+      */
+    hidden?: boolean;
     visible?: boolean;
     headerTooltip?: boolean | string | (() => ReactNode | ReactElement);
     columnGroupText?: string;
+    /**
+     * @deprecated Please use `textAlign` instead.
+     * @since  1.7.34
+     */
+    align?: ITextAlign;
     textAlign?: ITextAlign;
     headerTextAlign?: ITextAlign;
     template?: ReactNode | ReactElement | ((args: ColumnTemplate<RecordType>) => ReactNode | ReactElement);
@@ -135,6 +144,10 @@ export type ColumnTable<RecordType = AnyObject> = {
      */
     fixedType?: FixedType;
     fixed?: FixedType;
+    /**
+      * @deprecated Please use `wrapSettings` instead.
+      * @since 1.7.34
+      */
     headerTextWrap?: boolean;
     ellipsis?: boolean;
     allowResizing?: boolean;

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

@@ -1,11 +1,13 @@
 import type { Dispatch, SetStateAction } from 'react';
 import type { ExpandableConfig, IFormat, IWrapSettings, Locale, RangeState, RecordDoubleClickEventArgs, SelectionSettings } from "./type";
 import type { SubmitHandler } from "react-hook-form";
+import type { ExpandedState } from '@tanstack/react-table';
 export type IPositionCell = {
     rowId: string;
     colId: string;
 } | undefined;
 export interface IContext<T> {
+    t?: any;
     prefix: string;
     id: string;
     rowKey: string;
@@ -14,8 +16,8 @@ export interface IContext<T> {
     format?: IFormat;
     expandable?: ExpandableConfig<T>;
     wrapSettings?: IWrapSettings;
-    setExpanded: any;
-    expanded: any;
+    setExpanded: Dispatch<SetStateAction<ExpandedState>>;
+    expanded: ExpandedState;
     recordDoubleClick?: (args: RecordDoubleClickEventArgs<T>) => void;
     selectionSettings?: SelectionSettings;
     setIsSelectionChange: Dispatch<SetStateAction<{
@@ -63,6 +65,7 @@ export interface IContext<T> {
     handleDeleteContent?: () => void;
     handleAddMulti?: (item: any, n: number, id?: string) => void;
     dataErrors?: any[];
+    isDataTree: boolean;
 }
 export declare const TableContext: import("react").Context<IContext<any>>;
 export type ContextCellChange = {

package/es/table-component/useContext.js

@@ -2,6 +2,7 @@ import { createContext } from 'react';
 export const TableContext = /*#__PURE__*/createContext({
   prefix: 'ui-rc',
   id: '',
+  isDataTree: false,
   rowKey: 'rowId',
   dataSource: [],
   originData: [],

package/lib/grid-component/ColumnsChoose.js

@@ -227,7 +227,6 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 //
 //   const onCheck = (keys: string[]) => {
 //
-//     console.log('keys', keys)
 //     // setSelectedKeys(keys)
 //     setMergedSelectedKeys(keys)
 //     // setIsManualUpdate(true)
@@ -236,12 +235,10 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 //
 //   const handleAccept = () => {
 //
-//     console.log('mergedSelectedKeys', mergedSelectedKeys)
 //
 //     // const rs1  =  updateColumns(propsColumns, selectedKeys)
 //     const rs1  =  updateColumns(propsColumns, mergedSelectedKeys)
 //
-//     console.log('rs1', rs1)
 //
 //     triggerChangeColumns?.(rs1, 'columnChoose')
 //

package/lib/grid-component/InternalTable.js

@@ -307,7 +307,6 @@ const InternalTable = props => {
     setColumns(propsColumns);
   }, [propsColumns]);
   const handleOnFilter = queries => {
-    console.log('queries', queries);
     if (onFilter) {
       onFilter?.((0, _hooks.convertFilters)(queries));
     } else {
@@ -353,8 +352,6 @@ const InternalTable = props => {
       searchValue,
       setSearchValue
     }) => {
-      // console.log('selectedKeys', selectedKeys)
-
       const type = (0, _hooks.getTypeFilter)(column);
       // const operatorOptions = type === ('Checkbox' || 'Dropdown' || 'DropTree' || 'CheckboxDropdown') ? booleanOperator : (!type || type === 'Text' ? stringOperator : numberOperator)
 
@@ -907,7 +904,6 @@ const InternalTable = props => {
     }
   };
   const handleChange = (paging, filters, sorter) => {
-    console.log('sorter', sorter);
     onSorter?.(sorter);
   };
 

package/lib/grid-component/TableGrid.js

@@ -351,10 +351,6 @@ const TableGrid = props => {
       hideSelectAll: !type || type === 'single' || mode === 'radio' ? true : hideSelectAll ?? type !== 'multiple'
     }
 
-    // onScroll={(event) => {
-    //   console.log('event', event)
-    // }}
-
     // onFilter={(val: any) => {
     //   handleOnFilter(val)
     //   // triggerFilter?.(convertFilters(val))

package/lib/grid-component/TempTable.js

@@ -21,6 +21,8 @@ const TempTable = props => {
 
   // const TabComponent = groupAble ? InternalTable  : Table
   const TabComponent = editAble ? _tableComponent.default : _InternalTable.default;
+  // const TabComponent = InternalTable
+
   return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(TabComponent, (0, _extends2.default)({}, rest, {
     infiniteScroll: infiniteScroll,
     groupAble: groupAble,

package/lib/grid-component/hooks/columns/index.js

@@ -79,9 +79,6 @@ const getValueCell = (column, value, record, rowIndex, colIndex, format) => {
       // const contentNumber = !isEmpty(value) ? ((dec || dec === 0) ? parseFloat(Number(value).toFixed(dec)).toString() : value.toString()) : '0'
 
       const tmpval = typeof value === 'string' ? Number(value) : value;
-
-      // console.log('aaaaa', Number(value))
-
       const numericFormatProps = {
         thousandSeparator: (0, _utils.checkThousandSeparator)(thousandSeparator, decimalSeparator),
         decimalSeparator: (0, _utils.checkDecimalSeparator)(thousandSeparator, decimalSeparator),
@@ -95,7 +92,6 @@ const getValueCell = (column, value, record, rowIndex, colIndex, format) => {
       // if ( typeof value === "string") {
       //   const ttt =  removeNumericFormat(value, undefined, numericFormatProps )
       //
-      //   console.log('ttt', ttt)
       // }
 
       const contentNumber = !(0, _utils.isEmpty)(value) ? dec || dec === 0 ? parseFloat(tmpval.toFixed(dec)).toString() : tmpval.toString() : '0';
@@ -140,9 +136,6 @@ const renderValueCell = (column, value, record, rowIndex, colIndex, format, edit
       // const contentNumber = !isEmpty(value) ? ((dec || dec === 0) ? parseFloat(Number(value).toFixed(dec)).toString() : value.toString()) : '0'
 
       const tmpval = typeof value === 'string' ? Number(value) : value;
-
-      // console.log('aaaaa', Number(value))
-
       const numericFormatProps = {
         thousandSeparator: (0, _utils.checkThousandSeparator)(thousandSeparator, decimalSeparator),
         decimalSeparator: (0, _utils.checkDecimalSeparator)(thousandSeparator, decimalSeparator),
@@ -156,7 +149,6 @@ const renderValueCell = (column, value, record, rowIndex, colIndex, format, edit
       // if ( typeof value === "string") {
       //   const ttt =  removeNumericFormat(value, undefined, numericFormatProps )
       //
-      //   console.log('ttt', ttt)
       // }
 
       const contentNumber = !(0, _utils.isEmpty)(value) ? dec || dec === 0 ? parseFloat(tmpval.toFixed(dec)).toString() : tmpval.toString() : '0';

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

@@ -691,7 +691,6 @@ function addRowsDownWithCtrl(arr, n) {
 
   // Hàm kiểm tra kiểu date hợp lệ
   const isValidDate = item => {
-    // console.log('!isNaN(Date.parse(d))', !isNaN(Date.parse(d)))
     // return !isNaN(Date.parse(d))
 
     if (typeof item === 'number') {
@@ -831,7 +830,6 @@ function addRowsDown(arr, n) {
   // const isValidDate = (item: any) => {
   //
   //
-  //   // console.log('!isNaN(Date.parse(d))', !isNaN(Date.parse(d)))
   //   // return !isNaN(Date.parse(d))
   //
   //   if (typeof item === 'number') {
@@ -978,7 +976,6 @@ function addRowsUpWithCtrl(array, n) {
 
   // Hàm kiểm tra kiểu date hợp lệ
   const isValidDate = item => {
-    // console.log('!isNaN(Date.parse(d))', !isNaN(Date.parse(d)))
     // return !isNaN(Date.parse(d))
 
     if (typeof item === 'number') {
@@ -1122,7 +1119,6 @@ function addRowsUp(array, n) {
   // const isValidDate = (item: any) => {
   //
   //
-  //   // console.log('!isNaN(Date.parse(d))', !isNaN(Date.parse(d)))
   //   // return !isNaN(Date.parse(d))
   //
   //   if (typeof item === 'number') {
@@ -2706,17 +2702,12 @@ function mergeWithFilter(dataArray, dataFilter) {
   const result = [...dataArray];
   dataFilter.forEach((filterItem, i) => {
     const existsInArray = result.find(item => item.rowId === filterItem.rowId);
-
-    // console.log('existsInArray', existsInArray)
-
     if (!existsInArray) {
       // tìm index của phần tử trước đó trong dataFilter
       for (let j = i - 1; j >= 0; j--) {
         const prevFilterItem = dataFilter[j];
         const indexInResult = result.findIndex(item => item.rowId === prevFilterItem.rowId);
         if (indexInResult !== -1) {
-          // console.log('filterItem', filterItem)
-
           result.splice(indexInResult + 1, 0, filterItem);
           return;
         }
@@ -2736,17 +2727,12 @@ function mergeWithFilter2(dataArray, dataFilter) {
   const result = [...dataArray];
   dataFilter.forEach((filterItem, i) => {
     const existsInArray = result.find(item => item.rowId === filterItem.rowId);
-
-    // console.log('existsInArray', existsInArray)
-
     if (!existsInArray) {
       // tìm index của phần tử trước đó trong dataFilter
       for (let j = i - 1; j >= 0; j--) {
         const prevFilterItem = dataFilter[j];
         const indexInResult = result.findIndex(item => item.rowId === prevFilterItem.rowId);
         if (indexInResult !== -1) {
-          // console.log('filterItem', filterItem)
-
           result.splice(indexInResult + 1, 0, filterItem);
           return;
         }

package/lib/grid-component/table/GridEdit.js

@@ -742,7 +742,7 @@ const GridEdit = props => {
       const newExpandedKeys = [...mergedExpandedKeys, key];
       setInnerExpandedKeys(newExpandedKeys);
     }
-  }, [dataSource, defaultValue, getRowKey, mergedExpandedKeys, rowKey, rowsFocus, triggerChangeData]);
+  }, [dataSource, defaultValue, getRowKey, mergedExpandedKeys, mergedFilterKeys, originData, rowKey, rowsFocus, setMergedFilterKeys, triggerChangeData]);
   const handleDeleteRows = _react.default.useCallback(item => {
     // setTimeout(() => {
     // onAddBgSelectedCell(selectedCells.current, id)
@@ -808,7 +808,6 @@ const GridEdit = props => {
       indexRow,
       key
     } = args;
-    console.log('changeType', changeType);
     if (changeType === 'blur') {
       const handleChangeCallback = callbackData => {
         const callbackRecord = callbackData;
@@ -854,7 +853,7 @@ const GridEdit = props => {
       onSubmit(record);
     }
   };
-  const handleDeleteContent = _react.default.useCallback(() => {
+  const handleDeleteContent = () => {
     if (selectedCells.current.size > 0) {
       const newData = [...dataSource];
 
@@ -894,7 +893,7 @@ const GridEdit = props => {
       const rsFilterData = (0, _hooks.updateOrInsert)((0, _hooks.flattenArray)([...originData]), newData);
       triggerChangeData?.([...rsFilterData], 'DELETE_CONTENT');
     }
-  }, [dataSource, getRowKey, handleCellChange, originData, triggerChangeData, visibleCols]);
+  };
   const toolbarItemsBottom = (0, _react.useMemo)(() => {
     if (!rowsFocus || rowsFocus.length === 0) {
       return toolbarItems?.filter(it => it.position === 'Bottom' && it.visible !== false && it.key !== 'DUPLICATE' && it.key !== 'INSERT_BEFORE' && it.key !== 'INSERT_AFTER' && it.key !== 'DELETE_ROWS' && it.key !== 'INSERT_CHILDREN').map(item => {
@@ -1467,7 +1466,6 @@ const GridEdit = props => {
     row.replace(/\r/g, "").split("\t")
 
     // {
-    //   console.log('row', row)
     //   return row.replace(/\r/g, "").split("\t")
     // }
     );

package/lib/table-component/InternalTable.js

@@ -152,6 +152,9 @@ const InternalTable = props => {
 
     // return convertToTanStackColumns<RecordType>(columns, expanded, setExpanded, expandable)
   }, [t, columns, format, editAble]);
+  const isDataTree = _react.default.useMemo(() => {
+    return (0, _utils.isTree)(dataSource);
+  }, [dataSource]);
   const columnPinning = _react.default.useMemo(() => {
     return {
       left: (0, _utils.getFixedFields)(columns, 'left'),
@@ -283,7 +286,9 @@ const InternalTable = props => {
     setExpanded: setExpanded,
     isFullScreen: isFullScreen,
     setIsFullScreen: setIsFullScreen,
-    windowSize: windowSize
+    windowSize: windowSize,
+    height: height,
+    isDataTree: isDataTree
   })), /*#__PURE__*/_react.default.createElement(_antd.Modal, {
     open: isFullScreen,
     footer: null,
@@ -346,7 +351,8 @@ const InternalTable = props => {
     isFullScreen: isFullScreen,
     setIsFullScreen: setIsFullScreen,
     height: windowSize.innerHeight - 70,
-    windowSize: windowSize
+    windowSize: windowSize,
+    isDataTree: isDataTree
   })))));
 };
 var _default = exports.default = InternalTable;

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

@@ -31,6 +31,7 @@ type TableContainerProps<T> = Omit<TableProps<T>, 'columns'> & {
     columnHidden: any;
     isFullScreen: boolean;
     setIsFullScreen: Dispatch<SetStateAction<boolean>>;
+    isDataTree: boolean;
 };
 declare const TableContainer: <RecordType extends object>(props: TableContainerProps<RecordType>) => React.JSX.Element;
 export default TableContainer;

package/lib/table-component/TableContainer.js

@@ -79,7 +79,8 @@ const TableContainer = props => {
     contextMenuClick,
     contextMenuHidden,
     isFullScreen,
-    setIsFullScreen
+    setIsFullScreen,
+    isDataTree
   } = props;
   const tableContainerRef = _react.default.useRef(null);
   const containerRef = _react.default.useRef(null);
@@ -132,6 +133,12 @@ const TableContainer = props => {
     virtualPaddingRight = fixedRightColumns && fixedRightColumns.length > 0 ? pdRight - rightWidth > 0 ? pdRight - rightWidth : 0 : pdRight;
     // virtualPaddingRight = columnVirtualizer.getTotalSize() - (virtualColumns[virtualColumns.length - 1]?.end ?? 0)
   }
+  const columnSizingState = table.getState().columnSizing;
+  _react.default.useEffect(() => {
+    requestAnimationFrame(() => {
+      columnVirtualizer.measure();
+    });
+  }, [columnSizingState, columnVirtualizer]);
   const triggerCommandClick = () => {};
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: containerRef,
@@ -192,6 +199,7 @@ const TableContainer = props => {
     triggerChangeColumns: triggerChangeColumns
   })))), /*#__PURE__*/_react.default.createElement(_useContext.TableContext.Provider, {
     value: {
+      t,
       locale,
       prefix,
       id,
@@ -210,7 +218,8 @@ const TableContainer = props => {
       onContextMenu,
       setSorterChange,
       setFilterChange,
-      windowSize
+      windowSize,
+      isDataTree
     }
   }, /*#__PURE__*/_react.default.createElement(_TableWrapper.default, {
     contextMenuItems: contextMenuItems,

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

@@ -18,11 +18,11 @@ type TableContainerProps<T> = Omit<TableProps<T>, 'columns'> & {
     setFilterChange: Dispatch<SetStateAction<boolean>>;
     onContextMenu?: (data: T) => (event: any) => void;
     tableHeight?: number;
+    isDataTree: boolean;
     windowSize: {
         innerHeight: number;
         innerWidth: number;
     };
-    triggerPaste?: (pastedRows: T[], pastedColumnsArray: string[], newData: T[], copyRows: T[]) => void;
     mergedFilterKeys?: any;
     setMergedFilterKeys?: any;
     setExpanded?: any;

package/lib/table-component/TableContainerEdit.js

@@ -122,7 +122,8 @@ const TableContainerEdit = props => {
     contextMenuClick,
     contextMenuHidden,
     showDefaultContext,
-    commandSettings
+    commandSettings,
+    isDataTree
   } = props;
   const containerRef = _react.default.useRef(null);
   const bottomToolbarRef = _react.default.useRef(null);
@@ -284,6 +285,8 @@ const TableContainerEdit = props => {
     }
   }, [validate, dataSource]);
   const visibleColumns = table.getVisibleLeafColumns();
+  // const visibleColumns = table.getVisibleFlatColumns();
+
   const fixedLeftColumns = table.getState().columnPinning.left ? visibleColumns.filter(vc => table.getState().columnPinning.left?.includes(vc.id)) : [];
   const fixedRightColumns = table.getState().columnPinning.right ? visibleColumns.filter(vc => table.getState().columnPinning.right?.includes(vc.id)) : [];
 
@@ -300,7 +303,7 @@ const TableContainerEdit = props => {
     // },
 
     measureElement: typeof window !== 'undefined' && navigator.userAgent.indexOf('Firefox') === -1 ? element => element?.getBoundingClientRect().height : undefined,
-    overscan: 1 //how many columns to render on each side off screen each way (adjust this for performance)
+    overscan: 0 //how many columns to render on each side off screen each way (adjust this for performance)
   });
   const virtualColumns = columnVirtualizer.getVirtualItems();
   const cacheColumns = columnVirtualizer.measurementsCache;
@@ -387,7 +390,7 @@ const TableContainerEdit = props => {
   }, [onDataChange]);
   const triggerPaste = _react.default.useCallback((pastedRows, pastedColumnsArray, newData, copyRows) => {
     const handlePasteCallback = callbackData => {
-      const rsFilterData = (0, _utils.updateOrInsert)((0, _utils.flattenArray)([...dataSource]), callbackData);
+      const rsFilterData = (0, _utils.updateOrInsert)((0, _utils.flattenArray)([...originData]), callbackData);
       const rs = (0, _utils.unFlattenData)(rsFilterData);
       triggerChangeData(rs);
     };
@@ -398,7 +401,7 @@ const TableContainerEdit = props => {
           pasteData: pastedRows,
           copyRows,
           type: 'onPaste',
-          data: dataSource,
+          data: originData,
           pastedColumns: pastedColumnsArray
         }, handlePasteCallback);
       } else {
@@ -407,7 +410,7 @@ const TableContainerEdit = props => {
           pasteData: pastedRows,
           type: 'onPaste',
           copyRows,
-          data: dataSource,
+          data: originData,
           pastedColumns: pastedColumnsArray
         }, handlePasteCallback);
         triggerChangeData(newData);
@@ -415,7 +418,7 @@ const TableContainerEdit = props => {
     } else {
       triggerChangeData(newData);
     }
-  }, [dataSource, onCellPaste, triggerChangeData]);
+  }, [onCellPaste, originData, triggerChangeData]);
   const handlePasted = _react.default.useCallback(pasteData => {
     if (!startCell) {
       return;
@@ -613,7 +616,7 @@ const TableContainerEdit = props => {
   }, [startCell, endCell, table, copySelectionToClipboard]);
   _react.default.useEffect(() => {
     const handlePaste = e => {
-      if (startCell) {
+      if (startCell && !editingKey) {
         e.preventDefault(); // Chặn hành vi mặc định
         const clipboardText = e.clipboardData?.getData('text/plain') ?? '';
         handlePasteToTable(clipboardText);
@@ -621,7 +624,7 @@ const TableContainerEdit = props => {
     };
     window.addEventListener('paste', handlePaste);
     return () => window.removeEventListener('paste', handlePaste);
-  }, [startCell, endCell, table, handlePasteToTable]);
+  }, [startCell, endCell, table, handlePasteToTable, editingKey]);
   _react.default.useEffect(() => {
     const handleClickOutside = event => {
       const element = event.target;
@@ -634,7 +637,7 @@ const TableContainerEdit = props => {
       const isInsideContainerContext = containerContextMenu && element.closest(".popup-context-menu");
       const isInsideToolbar = element.closest(`.ui-rc-toolbar-selection-overflow-item`) && itemContainer;
       const isInsideHeader = itemHeader && itemHeader.contains(event.target);
-      if (isInsideContainer || isInsideToolbar || isInsideHeader || isInsideContainerContext) {
+      if (isInsideContainer || isInsideToolbar || isInsideHeader || isInsideContainerContext || element.id === id) {
         return;
       }
       if (containerRef.current && tableBody && !tableBody.contains(event.target)) {
@@ -661,14 +664,30 @@ const TableContainerEdit = props => {
       // document.removeEventListener('touchstart', handleClickOutside)
     };
   }, [dataSource, editingKey, id, onBlur]);
+  const columnSizingState = table.getState().columnSizing;
+  _react.default.useEffect(() => {
+    requestAnimationFrame(() => {
+      columnVirtualizer.measure();
+    });
+  }, [columnSizingState, columnVirtualizer]);
 
   // React.useEffect(() => {
-  //   const totalHeight = height
+  //   if (!containerRef.current) return;
+
+  //   const containerWidth = containerRef.current.offsetWidth - 2;
+  //   const totalWidth = table.getTotalSize();
+
+  //   if (totalWidth && totalWidth < containerWidth) {
+  //     const factor = containerWidth / totalWidth;
 
-  //   if (totalHeight && topToolbarRef.current && bottomToolbarRef.current) {
-  //     settableHeight(totalHeight - topToolbarRef.current.offsetHeight - bottomToolbarRef.current.offsetHeight)
+  //     table.setColumnSizing(
+  //       table.getAllLeafColumns().reduce((acc, col) => {
+  //         acc[col.id] = ((col.getSize() || col.columnDef.size || 150) * factor);
+  //         return acc;
+  //       }, {} as Record<string, number>)
+  //     );
   //   }
-  // }, [id, height, editAble])
+  // }, [table.getTotalSize(), windowSize.innerWidth])
 
   _react.default.useEffect(() => {
     const totalHeight = minHeight ?? height;
@@ -1491,6 +1510,8 @@ const TableContainerEdit = props => {
     onSubmit: handleSubmit(onSubmit)
   }, /*#__PURE__*/_react.default.createElement(_useContext.TableContext.Provider, {
     value: {
+      t,
+      isDataTree,
       locale,
       prefix,
       id,

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

@@ -50,7 +50,7 @@ const filterTreeNode = (input, treeNode) => {
 };
 const EditableCell = props => {
   const {
-    t,
+    // t,
     // editing,
     dataIndex,
     editType,
@@ -71,7 +71,8 @@ const EditableCell = props => {
     errors,
     id,
     startCell,
-    rowKey
+    rowKey,
+    t
   } = (0, _react.useContext)(_useContext.TableContext);
   const datePickerRef = _react.default.useRef(null);
   const dateTimePickerRef = _react.default.useRef(null);