English | 简体中文

S2

A practical visualization library for tabular analysis.

S2 is a pure data-driven multi-dimensional cross-analysis table solution. It provides a core library, basic components, and business scenario components. With its high extensibility, developers can flexibly build complex table reports out of the box.

Homepage • Getting Started • Examples • Live DEMO

✨ Features

• Multi-dimensional cross-analysis: Say goodbye to rigid analysis dimensions and embrace free combination of any dimensions.
• High performance: Supports rendering millions of data points in under 8 seconds, and achieves sub-second rendering for drill-downs.
• High extensibility: Supports custom extensions for layout, interaction, style, and data processing.
• Out of the box: Provides production-ready React and Vue 3 components for various analysis scenarios. Simple configuration is all you need.
• Rich interactions: Supports various interactions like selection (single, multi, range), freezing, resizing, and custom interactive behaviors.

🔨 Getting Started

Install via package manager:

npm install @antv/s2 --save

yarn add @antv/s2

pnpm add @antv/s2

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

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

import { PivotSheet } from '@antv/s2';

async function bootstrap() {
  const container = document.getElementById('container');

  const s2DataConfig = await fetch('https://assets.antv.antgroup.com/s2/en-data-config.json')
    .then(r => r.json())

  const s2 = new PivotSheet(container, s2DataConfig, {
    width: 600,
    height: 400,
  });

  await s2.render();
}

bootstrap()

📦 Packages

Package	Latest	Size	Download
@antv/s2
@antv/s2-react
@antv/s2-react-components
@antv/s2-ssr
@antv/s2-vue

🖥️ Browser Compatibility

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

For @antv/s2-react and @antv/s2-vue, please refer to React JavaScript environment requirements and 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 uses pnpm as the package manager

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.