Quick Start
Previous
Introduction
Next
Base Concept
Loading...
# npm$ npm install @antv/s2# yarn$ yarn add @antv/s2
# React$ yarn add @antv/s2 @antv/s2-react# Vue3$ yarn add @antv/s2 @antv/s2-vue
Check out the example:
We provide the UMD compilation file of the dist directory, import dist/s2.min.js , and access the global variable window.S2
<script src="./dist/s2.min.js"></script><script>async function run() {const s2 = new S2.PivotSheet(container, s2DataConfig, s2Options);await s2.render();}run();</script>
All exports are uniformly mounted under the global variable window.S2
<script type="module">- import { S2Event, PivotSheet, TableSheet } from '@antv/s2'+ const { S2Event, PivotSheet, TableSheet } = S2</script>
If you are using the React version @antv/s2-react , or Vue3 version @antv/s2-vue , additional style files need to be introduced
<link rel="stylesheet" href="./dist/style.min.css"/>
You can also use CDN directly (recommended), such as UNPKG or
<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"/>
If you need to be compatible with IE , you need to introduce polyfill compatibility.
There are three ways to create an S2 table, the basic class version (s2-core) and the React and Vue3 version based on the core layer package
There are three ways to create an S2 table: the basic version @antv/s2 and the React and Vue3 versions wrapped based on @antv/s2:
@antv/s2: Developed based on Canvas and AntV/G 6.0, providing basic table display/interaction capabilities.Dependencies: None
@antv/s2-react: Wrapped based on React 18 and @antv/s2, compatible with React 16/17 versions, and provides supporting analysis components (@antv/s2-react-components).Dependencies:
"peerDependencies": {"@antv/s2": "^2.0.0","react": ">=16.9.0","react-dom": ">=16.9.0"}
@antv/s2-vue: Wrapped based on Vue3, @antv/s2, and [email protected]. Maintenance DiscontinuedDependencies:
"peerDependencies": {"@antv/s2": "^2.0.0","ant-design-vue": "^3.2.0","vue": ">=3.x"}
In other words, @antv/s2 is framework-agnostic with no additional dependencies. You can use it in any framework like Vue, Angular, etc.
| Package Name | Stable Version | Package Size | Downloads |
|---|---|---|---|
| @antv/s2 |  |  |  |
| @antv/s2-react |  |  |  |
| @antv/s2-react-components |  |  |  |
| @antv/s2-vue (Discontinued) |  |  |  |
Watch the S2 repository, select Custom - Releases to receive push notifications.
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",
}
]
};
const s2Options = {width: 600,height: 480}
<div id="container"></div>
import { PivotSheet } from '@antv/s2';async function run() {const container = document.getElementById('container');const s2 = new PivotSheet(container, s2DataConfig, s2Options);await s2.render(); // return Promise}run();
React versionS2 provides an out-of-the-box React version [table component] (/examples/gallery#category-table component), as well as a wealth of supporting analysis components to help developers quickly meet business analysis needs.
import React from 'react';import ReactDOM from 'react-dom';import { SheetComponent } from '@antv/s2-react';import '@antv/s2-react/dist/s2-react.min.css';const container = document.getElementById('container');ReactDOM.render(<SheetComponentdataCfg={s2DataConfig}options={s2Options}/>,document.getElementById('container'),);
React version分析组件such as高级排序,导出,下钻, Tooltip and other components are developed based on antd component library. If you want to use it, you need to install it additionally and introduce the corresponding style
yarn add antd @ant-design/icons
📊 Check out the React version pivot table demo .
Vue3 versionS2 also provides an out-of-the-box Vue3 version of the table component to help developers quickly meet business analysis needs.
// 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 version分析组件such as:高级排序,导出,下钻, Tooltip and other components are developed based on the ant-design-vue component library. If you want to use it, you need to install it additionally and introduce the corresponding style
yarn add ant-design-vue
import "@antv/s2-vue/dist/s2-vue.min.css";
📊 Check out the Vue3 version pivot table demo .
Eager to contribute? View contribution guidelines
S2 uses pnpm as package manager
git clone [email protected]:antvis/S2.gitcd S2# 切换到 2.x 分支git checkout next# 安装依赖pnpm install # 或者 pnpm bootstrap# 打包pnpm build# 调试 s2-corepnpm core:start# 调试 s2-reactpnpm react:Playground# 调试 s2-vuepnpm vue:Playground# 单元测试pnpm test# 代码风格和类型检测pnpm lint# 本地启动官网pnpm site:start