《React:Table 那些事》系列文章,会逐渐给大家呈现一个基于 React 的 Table 组件的定义、设计、开发过程。每篇文章都会针对 Table 的某个具体功能展开分析:
这个即将诞生的 React Table 组件,就命名为 webj2ee-table。
这一篇实现 webj2ee-table 的2个功能
1. 数据行的斑马纹效果
2. 固定表头
1. 斑马纹 - UI 效果
斑马纹
就是指隔行换色
2. 斑马纹 - API 接口
在 <Table> 组件上扩充
stripe 属性控制斑马纹效果
3. 斑马纹 - 代码实现
结构性伪类选择器
nth-child、nth-of-type
就能轻松搞定这个需求
下面实现复杂一些的
固定表头效果
4. 固定表头 - UI 效果
固定表头就是
当表体有竖向滚动条且[竖向]滚动时
表头固定不动的效果
5. 固定表头 - API 接口
固定表头通常是 表格高度控制的附加效果
6. 固定表头 - 注意事项
【第一】
固定表头是动态效果
由 Table 高度、数据量共同作用
【第二】
数据区出现竖向滚动条时
表头、表尾必须留出滚动条宽度
否则会出现列对不齐现象
【第三】
表头、表体、表尾由独立结构组成
当表体区域横向滚动时
表头、表尾要能够同步滚动
【第四】
在 Table 尺寸动态变化时
(比如:浏览器缩放)
上述三条也需要成立
7. 固定表头 - 代码实现
【第一】
表头、表体、表尾
的同步横向滚动通过 onScroll 实现
【第二】
动态计算表体是否存在竖向滚动条
决定是否在表头中增加 gutter
避免表头、表体对不齐
为了保持表头、表体能自然对齐
并且充分利用 <table> 的 css 特性
所以 gutter 独立于 header 存在
并利用 BFC 特性固定于右侧
效果展示