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: 7 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: master
- Last Pushed: 2024-10-29T02:52:20.000Z (6 months ago)
- Last Synced: 2024-10-29T10:45:20.591Z (6 months 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: 153 MB
- Stars: 1,478
- Watchers: 44
- Forks: 194
- Open Issues: 122
-
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
A practical visualization library for tabular analysis.
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
* [Homepage](https://s2.antv.antgroup.com/en)
* [Demos](https://s2.antv.antgroup.com/en/examples)
## ✨ 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.)
## 📦 Installation
```bash
$ npm install @antv/s2 --save
# yarn add @antv/s2 --save
# pnpm install @antv/s2 --save
```
## 🔨 Getting Started
### 1. Data Preparation
s2DataConfig
```ts
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: '0.5',
},
{
province: '吉林',
city: '长春',
type: '笔',
price: '8',
},
{
province: '吉林',
city: '白山',
type: '笔',
price: '9',
},
{
province: '吉林',
city: '长春',
type: ' 纸张',
price: '3',
},
{
province: '吉林',
city: '白山',
type: '纸张',
price: '1',
},
],
};
```
### 2. Options Preparation
```ts
const s2Options = {
width: 600,
height: 600,
}
```
### 3. Component Rendering
```html
```
```ts
import { PivotSheet } from '@antv/s2';
const container = document.getElementById('container');
const s2 = new PivotSheet(container, s2DataCfg, s2Options);
s2.render();
```
### 4. Preview
### 📦 Packages
| Package | Latest | Beta | Alpha | Next | Size | Download |
| - | - | - | - | - | - | - |
| [@antv/s2](https://github.com/antvis/S2/tree/master/packages/s2-core) |  |  |  |  |  |  |
| [@antv/s2-react](https://github.com/antvis/S2/tree/master/packages/s2-react) |  |  |  | |  |  |
| [@antv/s2-vue](https://github.com/antvis/S2/tree/master/packages/s2-vue) |  |  |  |  |  |  |
## 👤 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
## 📧 Contact Us
## 👬 Contributors
## 📄 License
MIT@[AntV](https://github.com/antvis).