今天小编给大家分享一下react如何实现表头固定的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

站在用户的角度思考问题，与客户深入沟通，找到临猗网站设计与临猗网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：网站建设、做网站、企业官网、英文网站、手机端网站、网站推广、域名与空间、虚拟空间、企业邮箱。业务覆盖临猗地区。

react实现表头固定的方法：1、通过Ant Design的Table组件实现表格固定表头；2、使用“rc-table”实现移动端表格表头固定；3、通过监听div的onscroll事件，改变div的scrollLeft属性。

React表格固定表头/锁定列

Ant Design的Table组件挺好用，固定表头及锁定列的功能不在话下，但Ant Design Mobile没有Table组件。移动端要实现表格固定表头及锁定列的功能应该可以使用rc-table，当然也可以自己写一个。

通过分析AntD的Table，可以看出固定表头的表格是由上下两个标签组成的，它们分别嵌套在div内，上面的是表头，只包含，下边是表格内容，只包含。应该是通过监听下面div的onscroll事件，改变上面div的scrollLeft属性，这样在水平滚动表格时，表头也会同步滚动。固定列是通过设置th及td的CSS属性position为sticky并且设置left或right为0实现，同时设置z-index，让锁定的列始终显示在上方。

原理整明白了，写代码就比较容易了。

components/ScrollableTable/interface.tsx

import * as React from 'react';
export declare type AlignType = 'left' | 'center' | 'right';
export interface ColumnType {
  align?: AlignType;
  className?: string;
  dataKey?: string;
  fixed?: boolean;
  title?: React.ReactNode;
  width?: number;
  render?: (value: any, record: any, index: number) => React.ReactNode;
}
export interface TableProps {
  className?: string;
  style?: React.CSSProperties;
  columns?: ColumnType[];
  dataSource?: any[];
  width?: number;
  height?: number;
}

components/ScrollableTable/index.tsx

import React, { FunctionComponent, useRef } from 'react';
import { TableProps, ColumnType } from './interface';
import './index.less';
const ScrollableTable: FunctionComponent = (props: TableProps) => {
  const style: React.CSSProperties = props.style || {};
  const maxHeight: string = props.width ? (props.height + 'px') : 'unset';
  const columns: ColumnType[] = props.columns || [];
  const dataSource: any[] = props.dataSource || [];
  let maxWidth: number = 0;
  if (props.width) style.width = props.width;
  if (columns.length === 0) {
    columns.push({
      dataKey: 'key'
    });
  }
  columns.forEach((column: ColumnType) => {
    const width: number = column.width || 50;
    maxWidth += width;
  });
  const fixedColumns: number[][] = getFixedColumns(columns);
  const leftFixedColumns: number[] = fixedColumns[0];
  const rightFixedColumns: number[] = fixedColumns[1];
  const tableBody: any = useRef();
  const handleScroll = (target: any) => {
    const scrollLeft: number = target.scrollLeft;
    const tableHeaders: any = target.parentElement.getElementsByClassName('st-table-header');
    if (tableHeaders.length > 0) {
      tableHeaders[0].scrollLeft = scrollLeft;
    }
  };
  return (
    

      
        

                      {               renderCols(columns)             }                                                  {                 columns.map((column: ColumnType, index: number) => {                   const align: any = column.align || undefined;                   const title: React.ReactNode = column.title || '';                   const fixed: string = leftFixedColumns.includes(index) ? 'left' : (rightFixedColumns.includes(index) ? 'right' : '');                   const fixedClassName: string = fixed ? ('st-table-cell-fix-' + fixed) : '';                   return (                                        );                 })               }                                 

{title}