企业官网建设流程全解析

• 前端
• UI组件

本篇文章围绕 rsuite 官方文档中的 "Sticky Table"（固定表格）方案展开，讲解Table组件的affixHeader与affixHorizontalScrollbar两个核心属性：如何让表头在页面滚动时始终可见、让横向滚动条吸附在页面底部，从而改善大型数据表格的浏览体验。读完本文，你将掌握这两个属性的布尔/数字两种取值方式、与其搭配的列固定与列宽调整配置，以及背后依赖的源码实现，能够直接在真实项目中复现文档示例。

为什么需要"固定表头 + 固定横向滚动条"

当表格数据量大、列数多时，用户通常要面对两个尴尬场景：

• 纵向滚动页面浏览数据，表头滚出视口后，用户很难记住每一列的含义；
• 表格总列宽超过可视宽度时，横向滚动条出现在表格底部，而它往往在页面底部之外，需要滚到底部才能拖动，浏览中途操作很不方便。

rsuite 的Table不仅支持通过Column的fixed属性固定表头和列，还支持将表头和横向滚动条吸附（affix）到页面视口的指定位置。这一能力在官方文档中被归类为 "Sticky Table"（固定表格），其英文说明如下（摘自 docs/pages/components/table-affix/en-US/index.md）：

TheTablecomponent not only supports affixing the table header and columns, but also allows affixing the table header and horizontal scrollbar to specific positions on the page. This enhanced functionality improves usability for large data tables, enabling users to always see the header and operate the scrollbar while browsing long tables.

简单说：表头吸顶、滚动条吸底，让用户在长表格中随时知道自己在看哪一列，也随时能拖动横向滚动条。

核心 API：两个布尔/数字双态属性

要开启这一能力，只需给<Table>设置两个属性：

该属性定义同时出现在 docs/pages/components/table/en-US/index.md 的<Table>属性表中，中英文档语义一致：

• affixHeader：将表头固定到页面上的指定位置；
• affixHorizontalScrollbar：将横向滚动条固定在页面底部（或指定位置）。

其中"数字"取值的典型用法是避开站点自身的固定导航栏/页脚。例如affixHeader={56}表示表头吸附在距页面顶部 56px 处（为顶部导航让出空间），affixHorizontalScrollbar={0}表示滚动条吸附在页面最底部。

完整示例：表头与横向滚动条同时固定

官方文档在 docs/pages/components/table-affix/fragments/affix-horizontal-scrollbar.md 中给出了可直接运行的完整示例：用mockUsers(100)生成 100 行模拟数据，11 列宽列撑出横向滚动条，同时开启affixHeader与affixHorizontalScrollbar。完整代码如下：

import { Table } from 'rsuite'; import { mockUsers } from './mock'; const { Column, HeaderCell, Cell } = Table; const data = mockUsers(100); const App = () => { return ( <Table height={420} data={data} bordered cellBordered autoHeight affixHeader affixHorizontalScrollbar > <Column width={50} align="center" fixed resizable> <HeaderCell>Id</HeaderCell> <Cell dataKey="id" /> </Column> <Column width={100} fixed resizable> <HeaderCell>First Name</HeaderCell> <Cell dataKey="firstName" /> </Column> <Column width={100} resizable> <HeaderCell>Last Name</HeaderCell> <Cell dataKey="lastName" /> </Column> <Column width={200}> <HeaderCell>Company</HeaderCell> <Cell dataKey="company" /> </Column> <Column width={200} resizable> <HeaderCell>City</HeaderCell> <Cell dataKey="city" /> </Column> <Column width={200}> <HeaderCell>Street</HeaderCell> <Cell dataKey="street" /> </Column> <Column width={100}> <HeaderCell>Gender</HeaderCell> <Cell dataKey="gender" /> </Column> <Column width={100}> <HeaderCell>Age</HeaderCell> <Cell dataKey="age" /> </Column> <Column width={150}> <HeaderCell>Postcode</HeaderCell> <Cell dataKey="postcode" /> </Column> <Column width={300}> <HeaderCell>Email</HeaderCell> <Cell dataKey="email" /> </Column> <Column width={200}> <HeaderCell>Phone</HeaderCell> <Cell dataKey="phone" /> </Column> </Table> ); }; ReactDOM.render(<App />, document.getElementById('root'));

运行效果：页面滚动时，表头始终吸附在视口顶部；当表格出现横向滚动条时，滚动条始终吸附在视口底部，无需滚动到表格末尾即可操作。

示例逐段拆解

数据来源：mockUsers模拟接口

示例中的mockUsers(100)来自文档侧的模拟数据工具 docs/utils/mock.ts，基于@faker-js/faker生成。每个数据行包含id、firstName、lastName、company、city、street、gender、age、postcode、email、phone等字段，正好与下方 11 个Column的dataKey一一对应。文档页面通过sandboxFiles将mock.js注入到在线运行环境（见 docs/pages/components/table-affix/index.tsx），因此你可以在文档站点的示例中直接修改数据量验证效果。

列配置：fixed与resizable

示例中的列配置覆盖了三种典型场景：

• fixed（固定列）：Id与First Name两列设置为fixed，在横向滚动时始终停留在表格左侧。fixed在Column上的完整取值是boolean | 'left' | 'right'，可精确控制固定方向；
• resizable（可拖拽调整宽度）：多数列开启了resizable，鼠标移动到列分隔线会出现拖拽手柄，左右拖动即可调整列宽（该能力在 docs/pages/components/table/en-US/index.md 的 Resizable 一节有详细说明）；
• 普通列：仅设置width，如Company、Street、Gender等。

表格级组合：bordered、cellBordered与autoHeight

• bordered：为表格整体显示边框；
• cellBordered：为每个单元格显示边框；
• autoHeight：表格高度随数据行数自动扩展，不出现纵向滚动条（这一点与affixHorizontalScrollbar配合很重要——纵向不滚、横向吸附，焦点完全落在"页面滚动"这一交互上）。

需要说明的是：autoHeight与fillHeight互斥，后者强制表格高度等于父容器高度，官方文档明确提示二者不能同时使用。

从源码看实现与调用链

Table是 rsuite-table 的包装层

rsuite 的Table组件（src/Table/Table.tsx）本身是一个包装组件：它通过useCustom合并默认值与国际化配置，然后直接渲染rsuite-table导出的RsTable，并透传affixHeader、affixHorizontalScrollbar等全部TableProps。这一点可以从两处得到印证：

• package.json中声明了底层依赖"rsuite-table": "^5.19.2"；
• src/Table/Table.tsx 中import { Table as RsTable, TableProps, ... } from 'rsuite-table'，并将{...rest}原样传给RsTable。

因此affixHeader/affixHorizontalScrollbar的吸附计算（滚动监听、偏移量判断）实际发生在rsuite-table的表核心中；Table的子组件（Column、HeaderCell、Cell、ColumnGroup）同样由 src/Table/index.tsx 从rsuite-table重新导出，保证 API 与类型完整一致。

吸附技术的同源参考：Affix组件

虽然表格内部的吸附逻辑封装在rsuite-table中，但 rsuite 仓库自带的Affix组件（src/Affix/Affix.tsx）展示了同类的"固定定位"实现思路，可作为理解原理的参考：

• 通过getOffset（来自dom-lib）测量挂载元素相对页面的位置与尺寸；
• 监听window的scroll（防抖 100ms）与resize事件；
• 核心判断：scrollY - (offset.top - top) >= 0时进入固定态，position: fixed并保留top偏移；
• 固定后渲染一个与原元素同宽高的占位符（placeholder），避免内容跳动。

可以看到，"距页面顶/底指定偏移量"正是通过这种scrollY与元素位置比对实现的，affixHeader/affixHorizontalScrollbar的数字取值对应同样的"偏移量"语义（header 相对页面顶部、scrollbar 相对页面底部）。

使用注意事项与最佳实践

1. 数字偏移量用于避让站点固定元素：如果你的页面有固定导航栏或页脚，请使用affixHeader={导航高度}、affixHorizontalScrollbar={页脚高度}的形式，而不是简单的true。
2. 保证横向滚动条确实存在：affixHorizontalScrollbar只在表格出现横向滚动条时有实际意义。示例中 11 列总宽度远大于容器宽度，因此滚动条必然出现。若列宽总和小于表格宽度，可改用flexGrow让列自动填充剩余空间（注意flexGrow与width、resizable互斥，可配合minWidth设置最小宽度）。
3. 与autoHeight的搭配：示例同时开启autoHeight，表格不产生纵向滚动条，滚动完全交给页面，此时"表头吸顶、滚动条吸底"的体验最自然。
4. 加载状态与自定义渲染：结合loading与renderLoading可自定义加载占位内容（docs/pages/components/table/fragments/loading.md 提供了Loader与Placeholder两种方案），固定功能不受影响。
5. 无障碍语义：Table自带role="grid"等语义，列头为columnheader，单元格为gridcell，行数据为row，并支持aria-rowcount、aria-colcount、aria-sort等属性，固定表头/滚动条不改变这些语义。

导入方式与延伸阅读

Table支持两种导入方式（导入指引由 docs/components/ImportGuide/ImportGuide.tsx 动态生成）：

// 方式一：整体导入 import { Table } from 'rsuite'; // 方式二：按需导入单个组件 import Table from 'rsuite/Table';

固定表格相关的更多场景可参考官方文档目录：

• docs/pages/components/table-affix/en-US/index.md 与 docs/pages/components/table-affix/zh-CN/index.md：Sticky Table 总览；
• docs/pages/components/table/en-US/index.md：<Table>全部属性、列配置与无障碍说明；
• docs/pages/components/table/fragments/height.md、fill-height.md：表格高度控制，便于理解autoHeight的边界。

综上，affixHeader+affixHorizontalScrollbar是 rsuite 处理"大表 + 长页"场景的官方推荐组合：一行属性即可让表头与横向滚动条随页面滚动常驻视口，配合fixed固定列与resizable列宽调整，足以支撑起数据看板、管理后台等高频浏览与分析场景。

• 前端
• UI组件