README.en-US.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 • 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.

npm install @antv/s2 --save

yarn add @antv/s2

pnpm add @antv/s2

After

After successful installation, prepare a DOM container for rendering and import the corresponding S2 API object through import.

<div id="container"></div>

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
@antv/s2-react
@antv/s2-react-components
@antv/s2-vue

🖥️ Browser Compatibility

Edge	Firefox	Chrome	Safari
Edge	last 2 versions	last 2 versions	last 2 versions

@antv/s2-react and @antv/s2-vue see React JavaScript environment requirements 和 Vite browser compatibility

👤 Author

@AntV

🤝 Contributing

Contributions, issues and feature requests are welcome. Feel free to check issues page if you want to contribute.

S2 use pnpm as package manager

git clone git@github.com: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.