react实现表格置顶

实现表格置顶的步骤

使用React实现表格置顶功能，可以通过CSS的position: sticky属性或结合滚动事件监听实现。以下是两种常见方法：

使用CSS的position: sticky

通过CSS直接设置表头（thead）为粘性定位，无需额外JavaScript代码。

import React from 'react';

const StickyTable = () => {
  return (
    <div style={{ height: '300px', overflow: 'auto' }}>
      <table style={{ width: '100%' }}>
        <thead style={{ position: 'sticky', top: 0, background: 'white', zIndex: 1 }}>
          <tr>
            <th>Header 1</th>
            <th>Header 2</th>
          </tr>
        </thead>
        <tbody>
          {Array.from({ length: 20 }).map((_, i) => (
            <tr key={i}>
              <td>Row {i + 1}</td>
              <td>Data {i + 1}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default StickyTable;

关键点：

• position: sticky和top: 0确保表头在滚动时固定在顶部。
• z-index防止表头被其他元素遮盖。
• 外层容器需设置overflow: auto和固定高度。

通过滚动事件动态控制

如果需要更复杂的逻辑（如动态计算位置），可以通过监听滚动事件实现。

import React, { useState, useRef, useEffect } from 'react';

const DynamicStickyTable = () => {
  const tableRef = useRef(null);
  const [isSticky, setIsSticky] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      if (tableRef.current) {
        const { top } = tableRef.current.getBoundingClientRect();
        setIsSticky(top <= 0);
      }
    };

    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  return (
    <div style={{ paddingTop: isSticky ? '40px' : '0' }}>
      <table ref={tableRef} style={{ width: '100%' }}>
        <thead style={{ 
          position: isSticky ? 'fixed' : 'static', 
          top: 0, 
          background: 'white', 
          width: '100%' 
        }}>
          <tr>
            <th>Header 1</th>
            <th>Header 2</th>
          </tr>
        </thead>
        <tbody>
          {Array.from({ length: 20 }).map((_, i) => (
            <tr key={i}>
              <td>Row {i + 1}</td>
              <td>Data {i + 1}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default DynamicStickyTable;

关键点：

• 通过useRef获取表格的DOM节点。
• 监听滚动事件，动态切换position: fixed。
• 滚动时调整paddingTop避免内容跳动。

注意事项

1. 浏览器兼容性：position: sticky在IE和旧版Edge中不支持，需使用polyfill或回退方案。
2. 性能优化：滚动事件监听可能触发频繁，建议添加防抖（debounce）。
3. 复杂布局：如果表格嵌套在多层容器中，需确保sticky的父容器没有overflow: hidden。

以上方法可根据实际需求选择，CSS方案更简洁，事件监听方案更灵活。