useReColumnWidth自适应Table列宽hooks

useReColumnWidth 是一个用于自适应表格列宽的 React Hook。以下是一个简单的实现示例：

import { useState, useEffect } from 'react';
 
function useReColumnWidth(tableRef, columns) {
  const [columnWidths, setColumnWidths] = useState(columns.map(() => 'auto'));
 
  useEffect(() => {
    const handleResize = () => {
      if (tableRef.current) {
        const newColumnWidths = Array.from(tableRef.current.querySelectorAll('th')).map(th => th.offsetWidth + 'px');
        setColumnWidths(newColumnWidths);
      }
    };
 
    handleResize();
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, [tableRef]);
 
  return columnWidths;
}
 
// 使用示例
import React, { useRef } from 'react';
 
const MyTableComponent = () => {
  const tableRef = useRef(null);
  const columns = ['Column 1', 'Column 2', 'Column 3'];
  const columnWidths = useReColumnWidth(tableRef, columns);
 
  return (
    <table ref={tableRef}>
      <thead>
        <tr>
          {columns.map((col, index) => (
            <th style={{ width: columnWidths[index] }} key={col}>{col}</th>
          ))}
        </tr>
      </thead>
      <tbody>
        {/* ...表格内容... */}
      </tbody>
    </table>
  );
};

这个 Hook 的作用是监听窗口大小的变化，并且动态计算表头单元格的宽度，然后将这些宽度应用到表格列上。这样用户就不需要手动设置每列的宽度，而可以让浏览器自动调整。