当前位置：首页 > React

react实现表格置顶

2026-01-26 20:15:52React

实现表格置顶的步骤

使用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;

关键点：