https://github.com/antvis/s2
⚡️ A practical visualization library for tabular analysis.
https://github.com/antvis/s2
canvas editable-table javascript pivot-grid pivot-tables react sheet spreadsheet table typescript vue
Last synced: 9 days ago
JSON representation
⚡️ A practical visualization library for tabular analysis.
- Host: GitHub
- URL: https://github.com/antvis/s2
- Owner: antvis
- License: mit
- Created: 2020-12-28T06:55:51.000Z (over 4 years ago)
- Default Branch: next
- Last Pushed: 2025-04-25T13:44:19.000Z (11 days ago)
- Last Synced: 2025-04-25T22:53:34.159Z (10 days ago)
- Topics: canvas, editable-table, javascript, pivot-grid, pivot-tables, react, sheet, spreadsheet, table, typescript, vue
- Language: TypeScript
- Homepage: https://s2.antv.antgroup.com
- Size: 160 MB
- Stars: 1,567
- Watchers: 43
- Forks: 205
- Open Issues: 101
-
Metadata Files:
- Readme: README.en-US.md
- Contributing: CONTRIBUTING.en-US.md
- License: LICENSE
Awesome Lists containing this project
- awesome-canvas - S2 - ⚡️ Practical analytical Table rendering core lib.   (Libraries / Charts Libraries)
README
[简体中文](./README.md) ｜
English
S2
S2 is a solution in multi-dimensional cross-analysis tables, which provides data-driven analysis table components.
It supplements multi-dimensional analysis tables in the industry. By providing the core library, essential components,
demo components and expansion capabilities, it allows developers to use it quickly and freely.
Homepage •
Getting Started •
Examples •
Live DEMO
## ✨ Features
1. Multi-dimensional cross-analysis: Say goodbye to a single analysis dimension and fully embrace the free combination analysis of any dimension.
2. High performance: It can support rendering in less than 8s under the total amount of millions of data and achieve second-level rendering through partial drilling.
3. High scalability: Support any custom extensions (including but not limited to layout, style, interaction, data hook flow, etc.).
4. Out of the box: Provide out-of-the-box `React` and `Vue3` table components and supporting analysis components in different analysis scenarios. You only need a simple configuration to realize the table rendering
of complex scenes quickly.
5. High interaction: support rich interaction forms (single selection, circle selection, row selection, column selection, freeze line header, width and height dragging, custom interaction, etc.)
## 🔨 Getting Started
可以通过 NPM、Yarn 或者 pnpm 等包管理器来安装。
`S2` is usually installed via a package manager such as npm, Yarn, or pnpm.
```bash
npm install @antv/s2 --save
```
```bash
yarn add @antv/s2
```
```bash
pnpm add @antv/s2
```
After
After successful installation, prepare a DOM container for rendering and import the corresponding S2 API object through import.
```html
```
```ts
import { PivotSheet } from '@antv/s2';
async function bootstrap() {
const container = document.getElementById('container');
const s2DataConfig = await fetch('https://gw.alipayobjects.com/os/bmw-prod/2a5dbbc8-d0a7-4d02-b7c9-34f6ca63cff6.json')
.then(r => r.json())
const s2 = new PivotSheet(container, s2DataConfig, {
width: 600,
height: 300,
});
await s2.render();
}
bootstrap()
```
## 📦 Packages
| Package | Latest | Size | Download |
| -------- | ------ | ---------- | ------ |
| [@antv/s2](https://github.com/antvis/S2/tree/next/packages/s2-core) |  |  |  |
| [@antv/s2-react](https://github.com/antvis/S2/tree/next/packages/s2-react) |  |  |  |
| [@antv/s2-react-components](https://github.com/antvis/S2/tree/next/packages/s2-react-components) |  |  |  |
| [@antv/s2-vue](https://github.com/antvis/S2/tree/next/packages/s2-vue) |  |  |  |
## 🖥️ Browser Compatibility
| [
](http://godban.github.io/browsers-support-badges/)
Edge | [
](http://godban.github.io/browsers-support-badges/)
Firefox | [
](http://godban.github.io/browsers-support-badges/)
Chrome | [
](http://godban.github.io/browsers-support-badges/)
Safari |
| --- | --- | --- | --- |
| Edge | last 2 versions | last 2 versions | last 2 versions |
`@antv/s2-react` and `@antv/s2-vue` see [React JavaScript environment requirements](https://zh-hans.reactjs.org/docs/javascript-environment-requirements.html) 和 [Vite browser compatibility](https://cn.vitejs.dev/guide/build.html#browser-compatibility)
## 👤 Author
[**@AntV**](https://github.com/orgs/antvis/people)
## 🤝 Contributing
Contributions, issues and feature requests are welcome.
Feel free to check [issues](https://github.com/antvis/S2/issues) page if you want to contribute.
> S2 use pnpm as package manager
```bash
git clone [email protected]:antvis/S2.git
cd S2
pnpm install # or pnpm bootstrap
# build all
pnpm build
# debug s2-core
pnpm core:start
# debug s2-react
pnpm react:playground
# debug s2-vue
pnpm vue:playground
# unit test
pnpm test
# check the code style and the type definition
pnpm lint
# start the website
pnpm site:start
```
## 👁️ Insight
## 👬 Contributors
## 📄 License
MIT@[AntV](https://github.com/antvis).
