Introduction
Next
Quick Start
Loading...
S2 is a data-driven table visualization engine for the field of visual analytics. "S" is taken from the two "S" of "SpreadSheet", and "2" represents the two dimensions of row and column in the pivot table. Aims to provide beautiful, easy-to-use, high-performance, and easy-to-extend multidimensional tables.
React , Vue3 table components and supporting analysis components in different scenarios, and only need simple configuration to easily implement complex scenarios.<4s rendering with a full amount of millions of data, and can also achieve second-level rendering through partial drill-down.npm install @antv/s2# yarn add @antv/s2
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: 600}
<div id="container" />
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();
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 ant-design-vue@3.x. 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.Eager to contribute? View contribution guidelines
S2 uses pnpm as package manager
git clone git@github.com: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
MIT@ AntV .
