bug fix

src/view/Manage/AssetManage/Component/AssetTable.jsx

 import React,{ useState, useEffect, useRef, useContext, useMemo } from "react";
-import { Button, Pagination, Space, Modal, Input, Table, Tooltip, Checkbox, Typography, Dropdown, Menu, Divider, Select } from "antd";
+import { Button, Pagination, Space, Modal, Input, Tooltip, Checkbox, Typography, Dropdown, Menu, Divider, Select } from "antd";
 import classNames from 'classnames';
 import { Resizable } from 'react-resizable';
 import ResizeObserver from 'rc-resize-observer';
@@ -19,6 +19,7 @@ import { FullScreenSvg, CancelFullScreenSvg } from './AssetSvg';
 import AssetDeleteModal from './AssetDeleteModal';
 import { AppContext, appId } from "../../../../App";
 import StartFlowModal from "./StartFlow";
+import Table from '../../ResizeableTable';
 
 import "./AssetTable.less";
 import 'react-contexify/dist/ReactContexify.css';
@@ -87,36 +88,6 @@ const AssetItem = (props) => {
   );
 }
 
-const ResizeableHeaderCell = props => {
-  const { onResize, width, onClick, ...restProps } = props;
-
-  if (!width) {
-    return <th {...restProps} />;
-  }
-
-  return (
-    <Resizable
-      width={width}
-      height={0}
-      handle={
-        <span
-          className="react-resizable-handle"
-          onClick={(e) => {
-            e.stopPropagation();
-          }}
-        />
-      }
-      onResize={onResize}
-      draggableOpts={{ enableUserSelectHack: false }}
-    >
-      <th
-        onClick={onClick}
-        {...restProps}
-      />
-    </Resizable>
-  );
-};
-
 export const listSubject = new Subject();
 
 const AssetTable = (props) => {
@@ -131,7 +102,6 @@ const AssetTable = (props) => {
 
   const [ loading, setLoading ] = useState(false);
   const [ columns, setColumns ] = useState([]);
-  const [ realColumns, setRealColumns ] = useState([]);
   const [ assets, setAssets ] = useState([]);
   const [ total, setTotal ] = useState(0);
   const [ selectItem, setSelectItem ] = useState({});
@@ -208,24 +178,6 @@ const AssetTable = (props) => {
   }
 
   useEffect(() => {
-    if (TableWidth>0 && columns.length>0) {
-      const newColumns = [...columns, actionCol];
-      const currentWidth = (newColumns.reduce((preVal, col) => (col.width?col.width:0) + preVal, 0)) + 32.0;
-
-      if (currentWidth < TableWidth) {
-        newColumns.forEach(column => {
-          column.width = (TableWidth - 32.0)/newColumns.length;
-        })
-      }
-
-      setRealColumns([...newColumns, <Column key='auto' />]);
-    } else {
-      setRealColumns([]);
-    }
-
-  }, [columns, TableWidth])
-
-  useEffect(() => {
     getUsers();
     if (reference === AssetRecycleReference) {
       getTemplates()
@@ -885,16 +837,6 @@ const AssetTable = (props) => {
     }
   }
 
-  const handleResize = index => (e, { size }) => {
-    const nextColumns = [...realColumns];
-    nextColumns[index] = {
-      ...nextColumns[index],
-      width: size.width,
-    };
-
-    setRealColumns(nextColumns);
-  };
-
   const displayMenu = (e) => {
     show({
       event: e
@@ -1177,11 +1119,6 @@ const AssetTable = (props) => {
         >
           <Table
             rowSelection={rowSelection}
-            components={{
-              header: {
-                cell: ResizeableHeaderCell,
-              }
-            }}
             onRow={(record) => {
               return {
                 id: `data-asset-${record?.id}`,
@@ -1212,17 +1149,7 @@ const AssetTable = (props) => {
               return classNames.join(' ');
             }}
             loading={loading}
-            columns={
-              (realColumns||[]).map((column, index) => { 
-                return {
-                  ...column,
-                  onHeaderCell: column => ({
-                    width: column.width,
-                    onResize: handleResize(index),
-                  }),
-                };
-              })
-            } 
+            columns={[...columns, actionCol]} 
             rowKey='id'
             dataSource={realAssets}
             pagination={false}

src/view/Manage/ResizeableTable/index.jsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState, useRef, useMemo } from 'react';
 import { Table } from 'antd';
 import { Resizable } from 'react-resizable';
 import ResizeObserver from 'rc-resize-observer'
+import produce from 'immer';
 
 const scrollbarWidth = getScrollbarWidth()
 
@@ -62,10 +63,19 @@ const ResizeableTable = (props) => {
   useEffect(() => {
     if (!!columns && tableWidth > 0) {
       const contentWidth = getWidth(tableWidth, extraColWidth)
-      setDefaultWidth(columns, contentWidth)
+      let newCols = produce(columns, (draft) => {
+        (draft??[]).forEach(item => {
+          const index = (cols??[]).findIndex(_item => item.dataIndex === _item.dataIndex && item.title === _item.title)
+          if (index !== -1) {
+            item.width = cols[index].width
+          }
+        })
+      })
+      
+      setDefaultWidth(newCols, contentWidth)
       paddingCol.current.width = 0
 
-      const cols = columns
+      newCols = (newCols??[])
         .map((col, index) => {
           const colWidth = col.width ?? 100;
           return {
@@ -78,7 +88,7 @@ const ResizeableTable = (props) => {
             }),
           };
         })
-      setCols(cols)
+      setCols(newCols)
     }
   }, [columns, tableWidth, extraColWidth])