Ant Design实现表格行置顶功能

最近遇到客户一个需求，在之前的《Ant Design中实现表格的滚动加载》中基础上，用户滚动表格的时候，需要将特定的行置顶，比如合计这一行。这种在excel上显而易见的操作的方式，基于ant design的Table组件实现起来还有点麻烦，本文记录一下解决问题的过程，以供参考。

效果图

大约的需要如下。

在表头的下方会有一行，显示合计的数目，这一行客户希望在表格滚动的时候，贴到顶部就停在那里。

官方API

首先想到的是去看一下官方的API，很遗憾没有（ant design表格功能属实有点不太强）。既然官方不支持，只能自己去hack解决方案。

JS的方式实现

首先想到的是JS的方式，监听页面的滚动，但这个页面在之前的文章《Ant Design中实现表格的滚动加载》也提到过，已经监听了滚动了，再把这个逻辑加进去倒也行。

这种实现方式的好处是兼容性好，缺点就是挺麻烦的，处理不好也会影响页面性能。

更优雅的CSS实现

CSS的Position有个sticky属性，就是正好针对这个需求实现的，之前一段时间Chrome放弃支持，但后续的版本又陆续支持了，看了一下兼容性。

这个兼容力度在客户的场景中是完全OK的，于是使用ant design 中的 Table 组件的rowClassName来查找特定的数据行，并赋予给特定的className，然后给这个类赋予sticky属性就可以了。

.highlightRow {
  background-color: #FFC900;
  position: sticky;
  top: 0;
}

小结

随着CSS的发展，能用CSS解决的问题，就不必用JS了，以前JS需要上百行代码实现的能力，用CSS可能就是一行搞定。