如何在React Bootstrap- FIx -Next中相对于数据单元格动态调整表头列宽

import React, { useState } from 'react';
import { Table } from 'react-bootstrap';
import { ResizableBox } from 'react-resizable';

const DynamicTable = () => {
  const [columnWidths, setColumnWidths] = useState({
    col1: 100,
    col2: 150,
    col3: 200,
  });

  const handleResize = (column, width) => {
    setColumnWidths((prevWidths) => ({
      ...prevWidths,
      [column]: width,
    }));
  };

  return (
    <Table>
      <thead>
        <tr>
          <th>
            <ResizableBox
              width={columnWidths.col1}
              height={0}
              onResize={(e, { size }) => handleResize('col1', size.width)}
            >
              Column 1
            </ResizableBox>
          </th>
          <th>
            <ResizableBox
              width={columnWidths.col2}
              height={0}
              onResize={(e, { size }) => handleResize('col2', size.width)}
            >
              Column 2
            </ResizableBox>
          </th>
          <th>
            <ResizableBox
              width={columnWidths.col3}
              height={0}
              onResize={(e, { size }) => handleResize('col3', size.width)}
            >
              Column 3
            </ResizableBox>
          </th>
        </tr>
      </thead>
      <tbody>
        {/* 数据单元格 */}
      </tbody>
    </Table>
  );
};

export default DynamicTable;