react中表格如何固定头部js

固定表格头部的实现方法

在React中实现固定表格头部，可以通过CSS和JavaScript结合的方式完成。以下是几种常见的方法：

使用CSS position属性

通过设置表格头部的position: sticky属性，可以轻松实现固定头部效果。这种方法简单且性能较好。

import React from 'react';
import './Table.css';

const FixedHeaderTable = ({ data }) => {
  return (
    <div className="table-container">
      <table>
        <thead>
          <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
          </tr>
        </thead>
        <tbody>
          {data.map((row, index) => (
            <tr key={index}>
              <td>{row.col1}</td>
              <td>{row.col2}</td>
              <td>{row.col3}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

对应的CSS样式：

.table-container {
  height: 300px;
  overflow-y: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

thead th {
  position: sticky;
  top: 0;
  background: white;
  z-index: 10;
}

分离表头和表体

对于更复杂的场景，可以将表头和表体分离为两个独立的表格，通过JavaScript同步它们的滚动。

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

const SeparatedTable = ({ data }) => {
  const headerRef = useRef(null);
  const bodyRef = useRef(null);

  useEffect(() => {
    const syncScroll = () => {
      if (headerRef.current && bodyRef.current) {
        headerRef.current.scrollLeft = bodyRef.current.scrollLeft;
      }
    };

    if (bodyRef.current) {
      bodyRef.current.addEventListener('scroll', syncScroll);
    }

    return () => {
      if (bodyRef.current) {
        bodyRef.current.removeEventListener('scroll', syncScroll);
      }
    };
  }, []);

  return (
    <div className="table-wrapper">
      <div className="table-header">
        <table ref={headerRef}>
          <thead>
            <tr>
              <th>Header 1</th>
              <th>Header 2</th>
              <th>Header 3</th>
            </tr>
          </thead>
        </table>
      </div>
      <div className="table-body" ref={bodyRef}>
        <table>
          <tbody>
            {data.map((row, index) => (
              <tr key={index}>
                <td>{row.col1}</td>
                <td>{row.col2}</td>
                <td>{row.col3}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
};

对应的CSS样式：

.table-wrapper {
  width: 100%;
  height: 300px;
}

.table-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: white;
}

.table-body {
  height: calc(100% - 40px);
  overflow-y: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

使用第三方库

对于更高级的需求，可以考虑使用专门处理表格的React库，如react-table或material-ui的表格组件。

import React from 'react';
import { useTable } from 'react-table';

const ReactTableExample = ({ columns, data }) => {
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
  } = useTable({ columns, data });

  return (
    <div style={{ height: '400px', overflow: 'auto' }}>
      <table {...getTableProps()}>
        <thead style={{ position: 'sticky', top: 0, background: 'white' }}>
          {headerGroups.map(headerGroup => (
            <tr {...headerGroup.getHeaderGroupProps()}>
              {headerGroup.headers.map(column => (
                <th {...column.getHeaderProps()}>{column.render('Header')}</th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody {...getTableBodyProps()}>
          {rows.map(row => {
            prepareRow(row);
            return (
              <tr {...row.getRowProps()}>
                {row.cells.map(cell => (
                  <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
                ))}
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
};

注意事项

• 确保为固定头部设置足够的z-index，使其能够覆盖滚动内容
• 考虑为固定头部添加背景色，避免内容透过
• 对于大量数据，考虑实现虚拟滚动以提高性能
• 在移动设备上测试效果，确保响应式布局正常工作

以上方法可以根据具体项目需求选择使用，CSS的position: sticky方法在大多数现代浏览器中都能良好工作，是最推荐的解决方案。