S2: a canvas pivot table where you configure dimensions, not DOM

The table is a canvas, so the DOM is not there to query

S2 describes itself as a pure data driven multi dimensional cross analysis table solution, and repository topics name canvas, pivot grid, spreadsheet and editable table among others. That single word, canvas, decides most of the trade-offs. A DOM based grid gives you queryable nodes, so a test can find a cell and a screen reader can read a row. A canvas gives you raw drawing throughput and a layout engine free of the overhead of thousands of elements, which is what makes drill down feel instant in a report with wide dimensions. The README claims support for rendering millions of data points in under eight seconds, and sub second rendering for drill downs; those are the project's own numbers and no methodology accompanies them. Budget your own verification time accordingly.

Install, point at a div, hand it a data config

Install the core package with whichever package manager you already use:

npm install @antv/s2 --save

pnpm add @antv/s2

Then prepare a container and import the API object you need. The example uses PivotSheet, fetches a data config, constructs the sheet against the container and renders:

<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()

Three arguments carry the whole story: the DOM node, the data config, and the options. Height and width are explicit numbers here, which tells you the component owns its own sizing rather than inheriting it from the page. Everything about which dimensions appear on rows, columns and values lives in that data config object, which is also what you would fetch from your own backend in a real application.

Five published packages cover core, framework bindings and SSR

The repository is a monorepo and the README's package table matches its packages directory. @antv/s2 is the core. @antv/s2-react wraps it for React, and @antv/s2-react-components holds ready made React components for common analysis scenarios. @antv/s2-vue is the Vue 3 binding, and @antv/s2-ssr covers server side rendering. The distinction between s2-react and s2-react-components matters in practice: the first is the component, the second is a set of batteries included scenarios, and taking the second pulls more opinionated behaviour into your app than a plain pivot sheet. The repository enforces one package manager for contributors rather than users: the root package.json sets a preinstall script running only-allow pnpm, with a bootstrap script calling pnpm install.

Layout, interaction, style and data processing are the extension points

The README's feature list names four kinds of custom extension, and the list is a better description of the API surface than the words library or components would be. Layout extension is how you change how the pivot grid arranges rows and columns. Interaction extension covers behaviours beyond the built-ins. Style extension controls appearance, and data processing extension sits closest to the analytics itself. Alongside those, the README lists the interactions that work out of the box: selection in single, multi and range forms, freezing, resizing, and custom interactive behaviours. Frozen headers and frozen leading columns are the feature that separates this from a plain table once rows start scrolling.

Releases land per package, and the default branch is next

The versioning detail matters for upgrades. The recent releases are scoped to one package rather than the whole project, for example @antv/s2-v2.7.2 published on 2026-06-10, preceded by two alpha builds of the same version on 2026-06-09 and 2026-06-03. So you are pinning a package version, not a project release, and a stable tag can sit next to alphas for the same number. The default branch is next, which is where the README lives and where the packages directory points, and the last push was on 2026-09-14. If you vendor a build rather than taking the registry package, be aware you are taking development branch output.

Against a DOM grid or a spreadsheet component

The realistic alternative depends on which problem you are solving. For a fixed column list with server side paging, an ordinary table component with virtualised rows is less machinery and keeps your tests and accessibility tooling intact. For a report where the user slices rows and columns by choosing dimensions, S2's pivot layout is the reason to use it, because the alternative is building a pivot engine on top of a grid library. A full spreadsheet component goes further again, offering editing and formulas S2 does not attempt. The difference in approach is scope: S2 optimises the cross analysis view and leaves general grid work, and any cell editing beyond what its editable table topic implies, to you.

Editorial conclusion

S2 fits teams building an analytics screen where rows and columns are decided at runtime by user filters, since the pivot layout is described as data rather than markup and the same core serves React, Vue 3 and server rendering. Skip it for an ordinary data grid, because a canvas table may not expose cell nodes directly to testing tools, accessibility trees or browser find. Before adopting, render your own largest dataset in a browser you must support, since the README's figures of millions of data points in under eight seconds and sub second drill downs are the project's own claims with no methodology given, and check the browser compatibility table yourself because it lists per browser with no version floor stated. The last push was on 2026-09-14, the newest published package is @antv/s2-v2.7.2 from 2026-06-10, and the default branch is next.

Frequently asked questions

Official sources

1. antvis/S2 on GitHub
2. License: MIT
3. Project website
4. README
5. Releases