AntV S2 和 Antd Table 有什么区别?

苏泊

基本介绍

S2 是 AntV 团队推出的数据表可视化引擎,旨在提供高性能、易扩展、美观、易用的多维表格。不仅有丰富的分析表格形态,还内置丰富的交互能力,帮助用户更好的看数和做决策。
 title=
普通表格是用于展示大量结构化数据的组件,当需要对数据进行排序、搜索、分页、自定义操作等复杂行为时,Antd Table 有比较好的内置交互和实现。
 title=

功能分析

两者都能用于行列数据的展示,都有非常良好的交互和性能表现。在做技术选型前,需要对两者的功能特性有全面的了解,以下是对两种表格的功能特性梳理。

Antd Table

使用介绍
需要 dataSourcecolumns。即渲染表格需要数据和列配置。

<Table dataSource={dataSource} columns={columns} />

单元格内容
Antd Table 单元格可自定义渲染,只需要在 render 函数中输出 react dom 即可。用户可在单元格渲染任何形态,比如 链接、tag、图片、checkbox 等。
 title=

可选择
Antd Table 内置了行选的操作,增加 rowSelection即可实现

<Table rowSelection={rowSelection} columns={columns} dataSource={data} />

 title=

行列合并
在配置 columns 里面,通过 onCell 回调,设置 colSpan 的数值,0 代表不渲染,2 代表渲染 2 格。

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    render: (text, row, index) => <a>{text}</a>,
    onCell: (_, index) => ({
      colSpan: index < 4 ? 1 : 5,
    }),
  }
 ]

 title=

树状形态
在数据源 dataSource 中增加 children 即可。

const data = [
  {
    key: 1,
    name: 'John Brown sr.',
    age: 60,
    address: 'New York No. 1 Lake Park',
    children: [
      {
        key: 11,
        name: 'John Brown',
        age: 42,
        address: 'New York No. 2 Lake Park',
      }
    ]
  }
]

 title=

冻结行列头
通过设置滚动坐标实现,比如:

<Table columns={columns} dataSource={data} scroll={{ x: 100, y: 240 }}

即 y 滚动轴从 240 坐标位置开始滚动,x 轴从 100 坐标位置开始滚动。

另外,Antd Table 还可实现 排序、筛选、可展开、表头分组、编辑单元格、自定义表头和表尾等功能,更多参考官网文档

AntV S2

使用介绍
一样的,准备数据 (dataCfg) 和配置 (option) 即可渲染初始透视表。

const s2 = new PivotSheet(dom, dataConfig, options) // 方式一:类

<SheetComponent dataCfg={dataConfig} options={options} /> // 方式二:react组件

形态
S2 提供「明细」和「透视」两种形态,明细形态和 Antd Table类似:
 title=
我们可以从 @antv/s2 包中分别导出两个基类进行使用:PivotSheet(透视表)、TableSheet(明细表)。

如果应用基于 react, 导出 @antv/s2-react 中的组件,并用 sheetType 参数区分渲染不同的表格。

交互
S2 提供了 hover、点选、全选、布局调整、单元格合并、链接跳转、隐藏列头等能力,还提供了开放接口给开发者自定义。
 title=
 title=
 title=
 title=

分析能力
S2 分析能力上,提供了条件格式、下钻、排序、导出、行列切换等功能 title=

主题
实际业务中往往需要定制业务主题,S2 内置了默认、多彩蓝、简约灰三套主题。用户也可以自定义色板,实现快速自定义主题包。
 title=

性能
S2 选择 canvas 作为渲染主体,保证交互丰富和跨平台兼容的前提下,提供了大数据场景下的高性能渲染,通过按需渲染、虚拟滚动等方式,保证在百万级别数据量下也能秒级渲染、滚动不卡顿。

另外,AntV S2 还可以实现自定义布局、主题、渲染等,有着丰富的扩展机制,几乎可以改任何看到的内容。更多参考官网文档

两者对比

从多个方面来对比 AntV S2 和 Antd Table,希望提供一些技术选型的标准给到大家。

canvas 和 html dom

S2 是用过 @antv/g 渲染的 canvas 表格,Antd Table 是通过 html dom 实现的表格,两者差别可以对应到 canvas 和 html dom 的差别。

最明显的差别是,两者对事件处理不一样。html dom 方式可以准确监听任何 dom 的事件,而 canvas 只能监听到最外层 canvas 的事件,需要通过事件委托实现,判断当前点击的目标(target)。

另一个差别是,性能方面。当数据量大时(比如 10w+ 级别),随着复杂度增加时,html dom渲染速速会降低。canvas 因为只有一个 DOM 重复渲染低,耗时在内部计算和 canvas 绘制。因此在大数据场景, canvas 性能会好一些。

Antd Table 10w 性能表现:
 title=

AntV S2 10w 性能表现:
 title=

两者还有其他的一些差别,比如 canvas 依赖分辨率、能保存成 png 等,适合图像密集型场景等等。

交互能力

Antd Table 支持行选、筛选、排序等,能满足基本需求。

AntV S2 支持 hover 十字定位、单选、多选、圈选、刷选、拖拽调整行列高宽等,提供了下钻、排序、导出等功能。

相对来说,Antd Table 提供基础交互功能,AntV S2 提供进阶交互功能,可自定义注册用户交互。

怎么做技术选型

Antd Table 适合普通明细表格,如果你是后台管理系统,如果你的设计稿和 Antd Table 官网例子差别不大,直接用 Antd Table 即可。

哪些情况可以选择 S2 呢?

  • 当你需要透视模式时,可以选择 S2 。
  • 当你需要大量交互时,比如 hover 十字定位、圈选、行列选等,可以选择 S2。
  • 当你需要分析能力,比如条件格式、下钻筛选、高级排序等,可以选择 S2。
  • 当你需要专业的数据分析型表格,可以选择 S2。
  • 如果你不知道是否需要 S2 时, 那么就是不需要。

结语

关于表技术选型的心得已经分享完了。简而言之,在了解两者功能特性后,选择能帮助你更好实现业务需求,更快完成开发目标的技术。如果关于 AntV S2 的功能特性和判断功能能否实现有疑惑,可以钉钉进「用户交流群」,所有开发者在线答疑。
image.png

最后,如果看完这篇文章的你有所收获,欢迎给我们仓库 star 🌟🌟🌟🌟 鼓励,谢谢 🙏 。

参考链接:

阅读 666
1 声望
0 粉丝
0 条评论
1 声望
0 粉丝
文章目录
宣传栏