logo

S2

  • 使用文档
  • API 文档
  • 图表示例
  • 在线体验
  • 更新日志
  • 所有产品antv logo arrow
  • 2.x
  • 简介
  • 快速上手
  • 基础教程
    • 基本概念
      Updated
    • 表形态
      • 透视表
        Updated
      • 明细表
        Updated
    • 字段标记
      Updated
    • 小计总计
    • 排序
      • 基础排序
        Updated
      • 组内排序
        Updated
    • 主题配置
      Updated
    • Tooltip
      Updated
    • 数据格式化
      New
    • 多行文本
      New
    • 国际化
    • 分页
      New
  • 进阶教程
    • 单元格渲染类型
      • 链接
      • 图片
        New
      • 视频
        New
      • 迷你图表
      • 结合@antv/g2
      • 自定义渲染
    • 自定义
      • 自定义 Hook
        Updated
      • 自定义行列头分组
        New
      • 自定义 Icon
        Updated
      • 自定义单元格对齐方式
        Updated
      • 自定义单元格宽高
        Updated
      • 自定义排序操作
        Updated
      • 自定义折叠/展开节点
        New
    • 交互
      • 基础交互
        Updated
      • 自定义交互
      • 隐藏列头
        Updated
      • 行列宽高调整
        Updated
      • 合并单元格
      • 滚动
        Updated
      • 复制与导出
        New
      • 高亮/选中单元格
        New
    • 分析组件
      • 简介
        New
      • 高级排序
        Updated
      • 维度切换
        Updated
      • 导出
        Updated
      • 分页
        Updated
      • 维度下钻
        Updated
    • 表格组件
      • 编辑表
      • 趋势分析表
        Updated
    • 高清适配
      Updated
    • 获取表格实例
    • 表格自适应
    • 获取单元格数据
      Updated
    • 注册 AntV/G 插件
      New
    • 透视组合图
      Experimental
    • Vue 3.0 组件 (停止维护)
  • 扩展阅读
    • 数据流处理
      • 透视表
      • 明细表
    • 布局流程
      • 透视表
      • 明细表
    • 性能介绍
      Updated
  • 贡献指南
  • 常见问题
  • S2 2.0 升级指南

快速上手

上一篇
简介
下一篇
基本概念

Resources

Ant Design
Galacea Effects
Umi-React 应用开发框架
Dumi-组件/文档研发工具
ahooks-React Hooks 库

社区

体验科技专栏
seeconfSEE Conf-蚂蚁体验科技大会

帮助

GitHub
StackOverflow

more products更多产品

Ant DesignAnt Design-企业级 UI 设计语言
yuque语雀-知识创作与分享工具
EggEgg-企业级 Node 开发框架
kitchenKitchen-Sketch 工具集
GalaceanGalacean-互动图形解决方案
xtech蚂蚁体验科技
© Copyright 2025 Ant Group Co., Ltd..备案号:京ICP备15032932号-38

Loading...

📦 安装

使用基础版本 @antv/s2

使用 npm 或 yarn 或 pnpm 安装

# npm
$ npm install @antv/s2 --save
# yarn
$ yarn add @antv/s2
# pnpm
$ pnpm add @antv/s2

使用 React 版本 @antv/s2-react

npm install @antv/s2 @antv/s2-react --save

使用 React 版本分析组件 @antv/s2-react-components

npm install @antv/s2 @antv/s2-react-components antd @ant-design/icons --save

使用 Vue3 版本 @antv/s2-vue 停止维护

注意

@antv/s2-vue 现已停止维护,由于精力投入有限,出于维护成本,包下载量等因素综合考虑,从 2.0.0 正式版后不再继续更新,请基于 @antv/s2 自行封装,或 fork 仓库进行二次开发社区版本。

npm install @antv/s2 @antv/s2-vue ant-design-vue@3.x --save

浏览器引入 不推荐

查看示例:

Edit @antv/s2 import in browser (forked)

我们提供了 dist 目录的 UMD 编译文件,引入 dist/s2.min.js , 可访问全局变量 window.S2

<script src="./dist/s2.min.js"></script>
<script>
async function bootstrap() {
const s2 = new S2.PivotSheet(container, s2DataConfig, s2Options);
await s2.render();
}
bootstrap();
</script>

所有的导出统一挂载在全局变量 window.S2 下

<script type="module">
- import { S2Event, PivotSheet, TableSheet } from '@antv/s2'
+ const { S2Event, PivotSheet, TableSheet } = S2
</script>

如果使用的是 React 版本 @antv/s2-react , 或者 Vue3 版本 @antv/s2-vue 还需额外引入样式文件

<link rel="stylesheet" href="./dist/s2-react.min.css"/>
<link rel="stylesheet" href="./dist/s2-vue.min.css"/>

也可以直接使用 CDN (推荐), 比如 UNPKG 或者 preview

<script src="https://unpkg.com/@antv/s2/dist/s2.min.js"></script>
// React 需额外引入样式:
<link rel="stylesheet" href="https://unpkg.com/@antv/s2-react/dist/s2-react.min.css"/>
// Vue3 版本 需额外引入样式:
<link rel="stylesheet" href="https://unpkg.com/@antv/s2-vue/dist/s2-vue.min.css"/>

🔨 使用

版本

提示

创建 S2 表格有三种方式,基础类版本 @antv/s2 和 基于 @antv/s2 封装的 React 和 Vue3 版本:

  1. 基础版本 @antv/s2: 基于 Canvas 和 AntV/G 6.0 开发,提供基本的表格展示/交互等能力。

版本依赖:无

  1. React 版本 @antv/s2-react: 基于 React 18, 和 @antv/s2 封装,兼容 React 16/17 版本,同时提供配套的 分析组件 (@antv/s2-react-components).

版本依赖:

"peerDependencies": {
"@antv/s2": "^2.0.0",
"react": ">=16.9.0",
"react-dom": ">=16.9.0"
}
  1. Vue 版本 @antv/s2-vue: 基于 Vue3, @antv/s2 , ant-design-vue@3.x 封装。停止维护

版本依赖:

"peerDependencies": {
"@antv/s2": "^2.0.0",
"ant-design-vue": "^3.2.0",
"vue": ">=3.x"
}

也就是说 @antv/s2 和框架无关,无任何额外依赖, 你可以在 Vue, Angular 等任意框架中使用。

包名稳定版包大小下载量
@antv/s2latestsizedownload
@antv/s2-reactlatestsizedownload
@antv/s2-react-componentslatestsizedownload
@antv/s2-vue(停止维护)latestsizedownload

如何获取新版本发布通知?

  • 订阅:https://github.com/antvis/S2/releases.atom 来获得新版本发布的通知。
  • Watch S2 代码仓库, 选择 Custom - Releases 来获取消息推送。

preview

基础类

1. 数据 (data) 准备

s2DataConfig
const s2DataConfig = {
fields: {
rows: ['province', 'city'],
columns: ['type'],
values: ['price'],
},
data: [
{
province: "浙江",
city: "杭州",
type: "笔",
price: "1",
},
{
province: "浙江",
city: "杭州",
type: "纸张",
price: "2",
},
{
province: "浙江",
city: "舟山",
type: "笔",
price: "17",
},
{
province: "浙江",
city: "舟山",
type: "纸张",
price: "6",
},
{
province: "吉林",
city: "长春",
type: "笔",
price: "8",
},
{
province: "吉林",
city: "白山",
type: "笔",
price: "12",
},
{
province: "吉林",
city: "长春",
type: "纸张",
price: "3",
},
{
province: "吉林",
city: "白山",
type: "纸张",
price: "25",
},
{
province: "浙江",
city: "杭州",
type: "笔",
cost: "0.5",
},
{
province: "浙江",
city: "杭州",
type: "纸张",
cost: "20",
},
{
province: "浙江",
city: "舟山",
type: "笔",
cost: "1.7",
},
{
province: "浙江",
city: "舟山",
type: "纸张",
cost: "0.12",
},
{
province: "吉林",
city: "长春",
type: "笔",
cost: "10",
},
{
province: "吉林",
city: "白山",
type: "笔",
cost: "9",
},
{
province: "吉林",
city: "长春",
type: "纸张",
cost: "3",
},
{
province: "吉林",
city: "白山",
type: "纸张",
cost: "1",
}
]
};

2. 配置项准备

const s2Options = {
width: 600,
height: 480
}

3. 渲染

<div id="container" />
import { PivotSheet } from '@antv/s2';
async function bootstrap() {
const container = document.getElementById('container');
const s2 = new PivotSheet(container, s2DataConfig, s2Options);
await s2.render(); // 返回 Promise
}
bootstrap();

4. 结果

React 版本 @antv/s2-react

S2 提供了开箱即用的 React 版本 表格组件, 帮助开发者快速满足业务看数分析需求。 还有丰富的配套 分析组件,

版本依赖

"peerDependencies": {
"@antv/s2": "^2.0.0",
"react": ">=16.9.0",
"react-dom": ">=16.9.0"
}

使用

import React from 'react';
import { SheetComponent } from '@antv/s2-react';
import '@antv/s2-react/dist/s2-react.min.css';
const App = () => {
return (
<SheetComponent
dataCfg={s2DataConfig}
options={s2Options}
/>
)
}

​📊 查看 React 版本透视表 demo。

React 版本分析组件 @antv/s2-react-components

S2 提供了配套的 分析组件, 可以和 @antv/s2 或 @antv/s2-react 组合使用。

版本依赖

"peerDependencies": {
"@ant-design/icons": ">=4.7.0",
"@antv/s2": "^2.0.0",
"antd": ">=4.16.13",
"react": ">=16.9.0",
"react-dom": ">=16.9.0"
}

使用

import React from 'react';
import { AdvancedSort } from '@antv/s2-react-components';
import '@antv/s2-react-components/dist/s2-react-components.min.css';
const App = () => {
return (
<AdvancedSort />
)
}

​📊 前往 进阶教程 - 分析组件 了解更多。

Vue3 版本 @antv/s2-vue 停止维护

注意

@antv/s2-vue 现已停止维护,由于精力投入有限,出于维护成本,包下载量等因素综合考虑,从 2.0.0 正式版后不再继续更新,请基于 @antv/s2 自行封装,或 fork 仓库进行二次开发社区版本。

S2 同时也提供了开箱即用的 Vue3 版本表格组件,帮助开发者快速满足业务看数分析需求。

版本依赖

"peerDependencies": {
"@antv/s2": "^2.0.0",
"ant-design-vue": "^3.2.0",
"vue": ">=3.x"
}

使用

// App.vue
<script lang="ts">
import type { S2DataConfig, S2Options } from '@antv/s2';
import { SheetComponent } from '@antv/s2-vue';
import { defineComponent, onMounted, reactive, ref, shallowRef } from 'vue';
import "@antv/s2-vue/dist/s2-vue.min.css";
export default defineComponent({
setup() {
// dataCfg 数据字段较多,建议使用 shallow, 如果有数据更改直接替换整个对象
const dataCfg = shallowRef(s2DataConfig);
const options: S2Options = reactive(s2Options);
return {
dataCfg,
options,
};
},
components: {
SheetComponent,
},
});
</script>
<template>
<SheetComponent :dataCfg="dataCfg" :options="options" />
</template>

渲染组件

import { createApp } from 'vue';
import App from './App.vue';
createApp(App).mount('#app');

注意事项

Vue3 版本的 分析组件 如:导出, 下钻, Tooltip 等组件基于 ant-design-vue@3.x 组件库开发,如需使用,需要额外安装,并引入对应样式。

pnpm add ant-design-vue@3.x
import "@antv/s2-vue/dist/s2-vue.min.css";

​📊 查看 Vue3 版本透视表 demo。

TypeScript

S2 使用 TypeScript 开发,提供完整的类型定义文件,配合 VS Code 等编辑器可以获得良好的类型提示。

⌨️ 本地开发

跃跃欲试想贡献?

查看贡献指南

S2 使用 pnpm 作为包管理器

git clone git@github.com:antvis/S2.git
cd S2
# 切换到 2.x 分支
git checkout next
# 安装依赖
pnpm install # 或者 pnpm bootstrap
# 打包
pnpm build
# 调试 s2-core
pnpm core:start
# 调试 s2-react 和 s2-core(推荐)
pnpm core:build-esm # 首次运行需要先执行一次(安装依赖后自动执行)
pnpm react:playground
# 调试 s2-react-components
pnpm react-components:playground
# 调试 s2-vue 和 s2-core
pnpm vue:playground
# 单元测试
pnpm test
pnpm core:test
pnpm react:test
# 更新单元格测试快照
pnpm core:test -- -u
pnpm react:test -- -u
# 代码风格和类型检测
pnpm lint
# 本地启动官网
pnpm build # 首次运行官网需要先执行一次
pnpm site:start