react怎么实现表头固定-前端问答-PHP中文网

首页

web前端

前端问答

react怎么实现表头固定

藏色散人

Jan 09, 2023 am 10:25 AM

react

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

react怎么实现表头固定

本教程操作环境：Windows10系统、react18.0.0版、Dell G3电脑。

react怎么实现表头固定？

React表格固定表头/锁定列

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

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

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

components/ScrollableTable/interface.tsx

import * as React from &#39;react&#39;;
export declare type AlignType = &#39;left&#39; | &#39;center&#39; | &#39;right&#39;;
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 &#39;react&#39;;
import { TableProps, ColumnType } from &#39;./interface&#39;;
import &#39;./index.less&#39;;
const ScrollableTable: FunctionComponent<any> = (props: TableProps) => {
  const style: React.CSSProperties = props.style || {};
  const maxHeight: string = props.width ? (props.height + &#39;px&#39;) : &#39;unset&#39;;
  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: &#39;key&#39;
    });
  }
  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(&#39;st-table-header&#39;);
    if (tableHeaders.length > 0) {
      tableHeaders[0].scrollLeft = scrollLeft;
    }
  };
  return (
    <div
      className={classNames(&#39;st-table-container&#39;, props.className)}
      style={style}
    >
      <div className="st-table-header">
        <table>
          <colgroup>
            {
              renderCols(columns)
            }
          </colgroup>
          <thead className="st-table-thead">
            <tr>
              {
                columns.map((column: ColumnType, index: number) => {
                  const align: any = column.align || undefined;
                  const title: React.ReactNode = column.title || &#39;&#39;;
                  const fixed: string = leftFixedColumns.includes(index) ? &#39;left&#39; : (rightFixedColumns.includes(index) ? &#39;right&#39; : &#39;&#39;);
                  const fixedClassName: string = fixed ? (&#39;st-table-cell-fix-&#39; + fixed) : &#39;&#39;;
                  return (
                    <th
                      key={index}
                      className={classNames(&#39;st-table-cell&#39;, fixedClassName, column.className)}
                      style={{textAlign: align}}
                    >
                      {title}
                    </th>
                  );
                })
              }
            </tr>
          </thead>
        </table>
      </div>
      <div
        ref={tableBody}
        className="st-table-body"
        style={{maxHeight: maxHeight}}
        onScroll={(e: any) => handleScroll(e.currentTarget)}
      >
        <table style={{width: maxWidth, minWidth: &#39;100%&#39;}}>
          <colgroup>
              {
                renderCols(columns)
              }
            </colgroup>
            <tbody className="st-table-tbody">
              {
                dataSource.map((record: any, index: number) => (
                  <tr key={index} className="st-table-row">
                    {
                      renderCells(columns, leftFixedColumns, rightFixedColumns, record, index)
                    }
                  </tr>
                ))
              }
            </tbody>
        </table>
      </div>
    </div>
  );
};
function classNames(...names: (string | undefined)[]) {
  const currentNames: string[] = [];
  names.forEach((name: (string | undefined)) => {
    if (name) currentNames.push(name);
  });
  return currentNames.join(&#39; &#39;);
}
function getFixedColumns(columns: ColumnType[]) {
  const total: number = columns.length;
  const leftFixedColumns: number[] = [];
  const rightFixedColumns: number[] = [];
  if (columns[0].fixed) {
    for (let i = 0; i < total; i++) {
      if (columns[i].fixed) {
        leftFixedColumns.push(i);
      } else {
        break;
      }
    }
  }
  if (columns[total - 1].fixed) {
    for (let i = total - 1; i >= 0; i--) {
      if (columns[i].fixed) {
        if (!leftFixedColumns.includes(i)) rightFixedColumns.push(i);
      } else {
        break;
      }
    }
  }
  return [leftFixedColumns, rightFixedColumns];
}
function renderCols(columns: ColumnType[]) {
  return columns.map((column: ColumnType, index: number) => {
    const width: number = column.width || 50;
    return (
      <col
        key={index}
        style={{width: width, minWidth: width}}
      />
    );
  });
}
function renderCells(columns: ColumnType[], leftFixedColumns: number[], rightFixedColumns: number[], record: any, index: number) {
  return columns.map((column: ColumnType, index: number) => {
    const align: any = column.align || undefined;
    const fixed: string = leftFixedColumns.includes(index) ? &#39;left&#39; : (rightFixedColumns.includes(index) ? &#39;right&#39; : &#39;&#39;);
    const className: string = classNames(&#39;st-table-cell&#39;, column.className, fixed ? (&#39;st-table-cell-fix-&#39; + fixed) : &#39;&#39;);
    const rawValue: any = (column.dataKey && column.dataKey in record) ? record[column.dataKey] : undefined;
    let value: any = undefined;
    if (column.render) {
      value = column.render(rawValue, record, index);
    } else {
      value = (rawValue === undefined || rawValue === null) ? &#39;&#39; : String(rawValue);
    }
    return (
      <td
        key={index}
        className={className}
        style={{textAlign: align}}
      >
        {value}
      </td>
    );
  });
}
export default ScrollableTable;

components/ScrollableTable/index.less

.st-table-container {
  border: 1px solid #f0f0f0;
  border-right: 0;
  border-bottom: 0;
  font-size: 14px;
  .st-table-header {
    border-right: 1px solid #f0f0f0;
    overflow: hidden;
    table {
      border-collapse: separate;
      border-spacing: 0;
      table-layout: fixed;
      width: 100%;
      thead.st-table-thead {
        tr {
          th.st-table-cell {
            background: #fafafa;
            border-bottom: 1px solid #f0f0f0;
            border-right: 1px solid #f0f0f0;
            color: rgba(0, 0, 0, .85);
            font-weight: 500;
            padding: 8px;
            text-align: left;
            &:last-child {
              border-right: 0;
            }
          }
        }
      }
    }
  }
  .st-table-body {
    overflow: auto scroll;
    border-bottom: 1px solid #f0f0f0;
    border-right: 1px solid #f0f0f0;
    table {
      border-collapse: separate;
      border-spacing: 0;
      table-layout: fixed;
      tbody.st-table-tbody {
        tr.st-table-row {
          td.st-table-cell  {
            border-bottom: 1px solid #f0f0f0;
            border-right: 1px solid #f0f0f0;
            color: rgba(0, 0, 0, .65);
            padding: 8px;
            text-align: left;
            &:last-child {
              border-right: 0;
            }
          }
          &:last-child {
            td.st-table-cell  {
              border-bottom: 0;
            }
          }
        }
      }
    }
  }
  table {
    .st-table-cell {
      &.st-table-cell-fix-left {
        background: #fff;
        position: sticky;
        left: 0;
        z-index: 2;
      }
      &.st-table-cell-fix-right {
        background: #fff;
        position: sticky;
        right: 0;
        z-index: 2;
      }
    }
  }
}

然后可以这样使用：

views/Test/index.tsx
import React, { FunctionComponent } from &#39;react&#39;;
import Page from &#39;../../components/Page&#39;;
import ScrollableTable from &#39;../../components/ScrollableTable&#39;;
import StoreProvider from &#39;../../stores/products/context&#39;;
import &#39;./index.less&#39;;
const Test: FunctionComponent<any> = (props: any) => {
  let records: any[] = [{
    id: 1,
    productName: &#39;淡泰&#39;,
    amount1: 198,
    amount2: 200,
    amount3: 205.5,
    currency: &#39;人民币&#39;,
    ca: &#39;Amy&#39;
  }, {
    productName: &#39;方润&#39;,
    amount1: 105.5,
    amount2: 100,
    amount3: 108,
    currency: &#39;港元&#39;,
    ca: &#39;Baby&#39;
  }, {
    productName: &#39;医疗基金-1&#39;,
    amount1: 153,
    amount2: 150,
    amount3: 155,
    currency: &#39;人民币&#39;,
    ca: &#39;Emily&#39;
  }, {
    productName: &#39;医疗基金-2&#39;,
    amount1: 302,
    amount2: 300,
    amount3: 290,
    currency: &#39;美元&#39;,
    ca: &#39;Baby&#39;
  }, {
    productName: &#39;医疗基金-3&#39;,
    amount1: 108.8,
    amount2: 100,
    amount3: 130,
    currency: &#39;人民币&#39;,
    ca: &#39;Amy&#39;
  }, {
    productName: &#39;医疗基金-4&#39;,
    amount1: 205,
    amount2: 200,
    amount3: 208,
    currency: &#39;美元&#39;,
    ca: &#39;吴丹&#39;
  }, {
    productName: &#39;医疗基金-5&#39;,
    amount1: 315.5,
    amount2: 300,
    amount3: 280,
    currency: &#39;人民币&#39;,
    ca: &#39;Baby&#39;
  }, {
    productName: &#39;医疗基金-6&#39;,
    amount1: 109,
    amount2: 95,
    amount3: 106,
    currency: &#39;人民币&#39;,
    ca: &#39;Emily&#39;
  }, {
    productName: &#39;恒大私募债&#39;,
    amount1: 213,
    amount2: 200,
    amount3: 208,
    currency: &#39;港元&#39;,
    ca: &#39;吴丹&#39;
  }];
  const totalRecord: any = {
    productName: &#39;合计&#39;,
    amount1: {},
    amount2: {},
    amount3: {}
  };
  records.forEach((record: any) => {
    const currency: string = record.currency;
    [&#39;amount1&#39;, &#39;amount2&#39;, &#39;amount3&#39;].forEach((key: string) => {
      const value: any = totalRecord[key];
      if (!(currency in value)) value[currency] = 0;
      value[currency] += record[key];
    });
  });
  records.push(totalRecord);
  const columns: any[] = [{
    dataKey: &#39;productName&#39;,
    title: &#39;产品名称&#39;,
    width: 90,
    fixed: true
  }, {
    dataKey: &#39;amount1&#39;,
    title: <React.Fragment>上周缴款金额<br/>（万）</React.Fragment>,
    width: 140,
    align: &#39;center&#39;,
    className: &#39;amount&#39;,
    render: calculateTotal
  }, {
    dataKey: &#39;amount2&#39;,
    title: <React.Fragment>上周预约金额<br/>（万）</React.Fragment>,
    width: 140,
    align: &#39;center&#39;,
    className: &#39;amount&#39;,
    render: calculateTotal
  }, {
    dataKey: &#39;amount3&#39;,
    title: <React.Fragment>待本周跟进金额<br/>（万）</React.Fragment>,
    width: 140,
    align: &#39;center&#39;,
    className: &#39;amount&#39;,
    render: calculateTotal
  }, {
    dataKey: &#39;currency&#39;,
    title: &#39;币种&#39;,
    width: 80
  }, {
    dataKey: &#39;ca&#39;,
    title: &#39;CA&#39;,
    width: 80
  }];
  return (
    <StoreProvider>
      <Page
        {...props}
        title="销售统计"
        className="test"
      >
        <div style={{padding: 15}}>
          <ScrollableTable
            width={window.innerWidth - 30}
            height={196}
            columns={columns}
            dataSource={records}
          />
        </div>
      </Page>
    </StoreProvider>
  );
};
function calculateTotal(value: any) {
  if (value instanceof Object) {
    const keys: any[] = Object.keys(value);
    return (
      <React.Fragment>
        {
          keys.map((key: string, index: number) => (
            <span key={index}>
              {`${value[key].toFixed(2)}万${key}`}
            </span>
          ))
        }
      </React.Fragment>
    )
  }
  return value.toFixed(2);
}
export default Test;

views/Test/index.less

.st-table-container {
  .st-table-body {
    td.st-table-cell.amount {
      padding-right: 20px !important;
      text-align: right !important;
      span {
        display: block;
      }
    }
  }
}

推荐学习：《react视频教程》

以上是react怎么实现表头固定的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

html内部的反应：集成了动态网页的JavaScriptApr 16, 2025 am 12:06 AM

要将React集成到HTML中，需遵循以下步骤：1.在HTML文件中引入React和ReactDOM。2.定义一个React组件。3.使用ReactDOM将组件渲染到HTML元素中。通过这些步骤，可以将静态HTML页面转化为动态、交互式的体验。

反应的好处：性能，可重用性等等Apr 15, 2025 am 12:05 AM

React受欢迎的原因包括其性能优化、组件复用和丰富的生态系统。1.性能优化通过虚拟DOM和diffing机制实现高效更新。2.组件复用通过可复用组件减少重复代码。3.丰富的生态系统和单向数据流增强了开发体验。

反应：创建动态和交互式用户界面Apr 14, 2025 am 12:08 AM

React是构建动态和交互式用户界面的首选工具。1)组件化与JSX使UI拆分和复用变得简单。2)状态管理通过useState钩子实现，触发UI更新。3)事件处理机制响应用户交互，提升用户体验。

React与后端框架：比较Apr 13, 2025 am 12:06 AM

React是前端框架，用于构建用户界面；后端框架用于构建服务器端应用程序。React提供组件化和高效的UI更新，后端框架提供完整的后端服务解决方案。选择技术栈时需考虑项目需求、团队技能和可扩展性。

HTML和React：标记与组件之间的关系Apr 12, 2025 am 12:03 AM

HTML和React的关系是前端开发的核心，它们共同构建现代Web应用的用户界面。1)HTML定义内容结构和语义，React通过组件化构建动态界面。2)React组件使用JSX语法嵌入HTML，实现智能渲染。3)组件生命周期管理HTML渲染，根据状态和属性动态更新。4)使用组件优化HTML结构，提高可维护性。5)性能优化包括避免不必要渲染，使用key属性，保持组件单一职责。

反应与前端：建立互动体验Apr 11, 2025 am 12:02 AM

React是构建交互式前端体验的首选工具。1)React通过组件化和虚拟DOM简化UI开发。2)组件分为函数组件和类组件，函数组件更简洁，类组件提供更多生命周期方法。3)React的工作原理依赖虚拟DOM和调和算法，提高性能。4)状态管理使用useState或this.state，生命周期方法如componentDidMount用于特定逻辑。5)基本用法包括创建组件和管理状态，高级用法涉及自定义钩子和性能优化。6)常见错误包括状态更新不当和性能问题，调试技巧包括使用ReactDevTools和优

React和前端堆栈：工具和技术Apr 10, 2025 am 09:34 AM

React是一个用于构建用户界面的JavaScript库，其核心是组件化和状态管理。1)通过组件化和状态管理简化UI开发。2)工作原理包括调和和渲染，优化可通过React.memo和useMemo实现。3)基本用法是创建并渲染组件，高级用法包括使用Hooks和ContextAPI。4)常见错误如状态更新不当，可使用ReactDevTools调试。5)性能优化包括使用React.memo、虚拟化列表和CodeSplitting，保持代码可读性和可维护性是最佳实践。