S2

Before asking a question, it is recommended to read the documentation carefully.

1. Problems of use

browser compatibility

If there is a compatibility problem, please use it in combination with babel and @babel/polyfill . More questions are welcome to enter the group exchange

Due to limited conditions, the lower limit of the version is for reference only, and it does not mean that lower versions cannot be supported. The test was completed in CDN mode, and the online Demo

	Chrome	Edge	firefox	IE	opera	Safari	UC	360 speed browser	360 Safe Browser
AntV S2	40	12	85	9	40	14	6.2	12	7.3

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

browser introduction

Check out the example:

We provide the UMD compilation file of the dist directory, import dist/s2.min.js , and access the global variable window.S2

<script src="./dist/s2.min.js"></script>
<script>
   async function run() {
      const s2 = new S2.PivotSheet(container, s2DataConfig, s2Options);
      await s2.render();
   }

   run();
</script>

All exports are uniformly mounted under the global variable window.S2

<script type="module">
-  import { S2Event, PivotSheet, TableSheet } from '@antv/s2'
+  const { S2Event, PivotSheet, TableSheet } = S2
</script>

If you are using the React version @antv/s2-react , or Vue3 version @antv/s2-vue , additional style files need to be introduced

<link rel="stylesheet" href="./dist/style.min.css"/>

You can also use CDN directly (recommended), such as UNPKG or

<script src="https://unpkg.com/@antv/s2/dist/s2.min.js"></script>

// React 需额外引入样式：
<link rel="stylesheet" href="https://unpkg.com/@antv/s2-react/dist/s2-react.min.css"/>

// Vue3 版本 需额外引入样式：
<link rel="stylesheet" href="https://unpkg.com/@antv/s2-vue/dist/s2-vue.min.css"/>

The access to the official website is a bit slow, or it cannot be opened. Is there a domestic mirror?

The original domestic mirror https://antv-s2.gitee.io is no longer maintained. It is recommended to visit the new official website https://s2.antv.antgroup.com for faster speed.

Old official website New official website

After the parent element uses `transform: scale` , the mouse coordinates of the chart respond incorrectly

supportsCSSTransform property can be turned on

const s2Options = {
  transformCanvasConfig() {
    return {
      supportsCSSTransform: true
    }
  }
}

You can also manually call s2.changeSheetSize to change the size of the chart according to the zoom ratio, so that the zoom ratio of the chart and the parent element are consistent

const scale = 0.8
s2.changeSheetSize(width * scale, height * scale)
s2.render(false)

Please refer to issue #808 #990 (thanks to @cylnet @xiaochong44 )

How to update table configuration?

const pivotSheet = new PivotSheet(document.getElementById('container'), dataCfg, options);

Update options: optional , will be merged with the last data

pivotSheet.setOptions({ ... })
pivotSheet.render(false) // 重新渲染，不更新数据

Reset options: optional, use the incoming options directly, and will not merge with the last data

pivotSheet.setOptions({ ... }, true)
pivotSheet.render(false) // 重新渲染，不更新数据

Update dataCfg: optional , it will be merged with the last data

pivotSheet.setDataCfg({ ... })
pivotSheet.render(true) // 重新渲染，且更新数据

Reset dataCfg: optional , use the incoming dataCfg directly without merging with the last data

pivotSheet.setDataCfg({ ... }, true)
pivotSheet.render(true) // 重新渲染，且更新数据

update theme: optional

pivotSheet.setThemeCfg({ ... })
pivotSheet.render(false)  // 重新渲染，不更新数据

The graph cannot be rendered, what's the matter?

The chart needs to be mounted on the dom node, please make sure the node exists

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

const pivotSheet = new PivotSheet(document.getElementById('container'), dataCfg, options);

If the input is a selector, S2 will use document.querySelector() to find it, which means that as long as the node exists and the selector conforms to the syntax of querySelector , it is all possible

const pivotSheet = new PivotSheet('#container', dataCfg, options);
const pivotSheet = new PivotSheet('.container', dataCfg, options);
const pivotSheet = new PivotSheet('#container > div', dataCfg, options);
const pivotSheet = new PivotSheet('#container > div[title="xx"]', dataCfg, options);

After manually updating the width and height of the table, why is the scroll bar not displayed?

The table is not aware of changes, and the render method needs to be called once after the configuration is updated to trigger the update

s2.changeSheetSize(200, 200)
s2.render(false)

Can the table be filled automatically according to the width and height of the outer container?

Yes, please review this article

How to get cell data?

Please check this article

Why is the tooltip not displayed in @antv/ `@antv/s2` , but it can be displayed normally in `@antv/s2-react` `@antv/s2-vue` ?

Please see Tooltip Notes

You can directly use the Vue3 version of S2 @antv/s2-vue , or see Customize in Vue3

Does the table support exporting to `Excel` ?

Support, please check this article , or example

What should I do if the table is exported with garbled characters?

Please check whether the encoding setting of Excel is correct

excel

How does the mouse wheel scroll horizontally?

Hold down the Shift key while scrolling the mouse

How to customize the size and alignment of text?

You can configure custom themes, see documentation and examples

How to customize cell width and height?

Check out the usage docs and examples

Does S2 support editing of tables?

Please see edit mode example

Does S2 have a corresponding `Vue` or `Angular` version?

Currently, S2 consists of three packages

@antv/s2 : Developed based on canvas and AntV/G , providing basic table display/interaction capabilities
@antv/s2-react : Based on the @antv/s2 package, it provides supporting analysis components
@antv/s2-vue : Based on Vue3 and @antv/s2 package, provide supporting analysis components

That is to say, @antv/s2 has nothing to do with the framework , you can use it in Vue , Angular and other frameworks.

Here is an overview of the releases:

Note

There are three ways to create an S2 table: the basic version @antv/s2 and the React and Vue3 versions wrapped based on @antv/s2:

Basic version @antv/s2: Developed based on Canvas and AntV/G 6.0, providing basic table display/interaction capabilities.

Dependencies: None

React version @antv/s2-react: Wrapped based on React 18 and @antv/s2, compatible with React 16/17 versions, and provides supporting analysis components (@antv/s2-react-components).

Dependencies:

"peerDependencies": {
  "@antv/s2": "^2.0.0",
  "react": ">=16.9.0",
  "react-dom": ">=16.9.0"
}

Vue version @antv/s2-vue: Wrapped based on Vue3, @antv/s2, and [email protected]. Maintenance Discontinued

Dependencies:

"peerDependencies": {
  "@antv/s2": "^2.0.0",
  "ant-design-vue": "^3.2.0",
  "vue": ">=3.x"
}

In other words, @antv/s2 is framework-agnostic with no additional dependencies. You can use it in any framework like Vue, Angular, etc.

Package Name	Stable Version	Package Size	Downloads
@antv/s2
@antv/s2-react
@antv/s2-react-components
@antv/s2-vue (Discontinued)

How to get notifications for new version releases?

Subscribe to: https://github.com/antvis/S2/releases.atom to receive notifications of new version releases.
Watch the S2 repository, select Custom - Releases to receive push notifications.

preview

Supporting analysis components , currently there is no development plan for @antv/s2-angular , the community is welcome to build together 👏🏻.

How to contribute code?

Please review the contribution guidelines

Why can't the form be displayed on the applet?

At present, S2 only supports the web platform, and the applet does not support it for the time being.

Why is my Issue closed?

Please read the must-read before submitting an Issue , and fill in strictly according to the Issue 模板, providing some meaningful information, including but not limited to:

The version number you actually installed:

Avoid meaningless version numbers like latest or * . Providing the version you actually use can help us locate the problem faster. It is possible that the function you are using is only supported in the new version, or the bug has been fixed in the new version up

Detailed bug description

Not everyone understands the context of your text, provide complete steps to reproduce, post error screenshots, gif, please don’t waste words like gold

Your steps to reproduce, and links to reproduce

It is recommended to use the official codesandbox template to build some minimal reproducible demos

Your configuration information , and use markdown code tags

Do not post a large section of unformatted business code, please provide configuration files such as s2Options s2DataConfig, and use markdown syntax reasonably to save everyone's time

What are your expectations? What is the current behavior?

It is expected to be "no problem", but currently it is "problem". This description is no different from what you said. Please try to be as specific as possible. For example: the数据不正确：预期应该是 xx, 实际是 xx. 布局错误：节点应该显示在行头，实际出现在了列头。

Try to erase some nouns and descriptions with your own business semantics

Before asking a question, please make sure you have read the official documentation and FAQ , and have searched and checked the related Issues list .

Highly recommended reading:

✅ A great example: #852

❌ A bad example: #1057

I want to report a bug, how can I provide a reproducible online demo?

It is recommended to use codesandbox , we provide various versions of templates for your convenience. view all templates

Is there a discussion group?

2. Errors and Warnings

Before asking a question, it is recommended to read the documentation carefully.

1. Problems of use

browser compatibility

If there is a compatibility problem, please use it in combination with babel and @babel/polyfill . More questions are welcome to enter the group exchange

Due to limited conditions, the lower limit of the version is for reference only, and it does not mean that lower versions cannot be supported. The test was completed in CDN mode, and the online Demo

	Chrome	Edge	firefox	IE	opera	Safari	UC	360 speed browser	360 Safe Browser
AntV S2	40	12	85	9	40	14	6.2	12	7.3

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

browser introduction

Check out the example:

We provide the UMD compilation file of the dist directory, import dist/s2.min.js , and access the global variable window.S2

<script src="./dist/s2.min.js"></script>
<script>
   async function run() {
      const s2 = new S2.PivotSheet(container, s2DataConfig, s2Options);
      await s2.render();
   }

   run();
</script>

All exports are uniformly mounted under the global variable window.S2

<script type="module">
-  import { S2Event, PivotSheet, TableSheet } from '@antv/s2'
+  const { S2Event, PivotSheet, TableSheet } = S2
</script>

If you are using the React version @antv/s2-react , or Vue3 version @antv/s2-vue , additional style files need to be introduced

<link rel="stylesheet" href="./dist/style.min.css"/>

You can also use CDN directly (recommended), such as UNPKG or

<script src="https://unpkg.com/@antv/s2/dist/s2.min.js"></script>

// React 需额外引入样式：
<link rel="stylesheet" href="https://unpkg.com/@antv/s2-react/dist/s2-react.min.css"/>

// Vue3 版本 需额外引入样式：
<link rel="stylesheet" href="https://unpkg.com/@antv/s2-vue/dist/s2-vue.min.css"/>

The access to the official website is a bit slow, or it cannot be opened. Is there a domestic mirror?

The original domestic mirror https://antv-s2.gitee.io is no longer maintained. It is recommended to visit the new official website https://s2.antv.antgroup.com for faster speed.

Old official website New official website

After the parent element uses `transform: scale` , the mouse coordinates of the chart respond incorrectly

supportsCSSTransform property can be turned on

const s2Options = {
  transformCanvasConfig() {
    return {
      supportsCSSTransform: true
    }
  }
}

You can also manually call s2.changeSheetSize to change the size of the chart according to the zoom ratio, so that the zoom ratio of the chart and the parent element are consistent

const scale = 0.8
s2.changeSheetSize(width * scale, height * scale)
s2.render(false)

Please refer to issue #808 #990 (thanks to @cylnet @xiaochong44 )

How to update table configuration?

const pivotSheet = new PivotSheet(document.getElementById('container'), dataCfg, options);

Update options: optional , will be merged with the last data

pivotSheet.setOptions({ ... })
pivotSheet.render(false) // 重新渲染，不更新数据

Reset options: optional, use the incoming options directly, and will not merge with the last data

pivotSheet.setOptions({ ... }, true)
pivotSheet.render(false) // 重新渲染，不更新数据

Update dataCfg: optional , it will be merged with the last data

pivotSheet.setDataCfg({ ... })
pivotSheet.render(true) // 重新渲染，且更新数据

Reset dataCfg: optional , use the incoming dataCfg directly without merging with the last data

pivotSheet.setDataCfg({ ... }, true)
pivotSheet.render(true) // 重新渲染，且更新数据

update theme: optional

pivotSheet.setThemeCfg({ ... })
pivotSheet.render(false)  // 重新渲染，不更新数据

The graph cannot be rendered, what's the matter?

The chart needs to be mounted on the dom node, please make sure the node exists

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

const pivotSheet = new PivotSheet(document.getElementById('container'), dataCfg, options);

const pivotSheet = new PivotSheet('#container', dataCfg, options);
const pivotSheet = new PivotSheet('.container', dataCfg, options);
const pivotSheet = new PivotSheet('#container > div', dataCfg, options);
const pivotSheet = new PivotSheet('#container > div[title="xx"]', dataCfg, options);

After manually updating the width and height of the table, why is the scroll bar not displayed?

The table is not aware of changes, and the render method needs to be called once after the configuration is updated to trigger the update

s2.changeSheetSize(200, 200)
s2.render(false)

Can the table be filled automatically according to the width and height of the outer container?

Yes, please review this article

How to get cell data?

Please check this article

Why is the tooltip not displayed in @antv/ `@antv/s2` , but it can be displayed normally in `@antv/s2-react` `@antv/s2-vue` ?

Please see Tooltip Notes

You can directly use the Vue3 version of S2 @antv/s2-vue , or see Customize in Vue3

Does the table support exporting to `Excel` ?

Support, please check this article , or example

What should I do if the table is exported with garbled characters?

Please check whether the encoding setting of Excel is correct

excel

How does the mouse wheel scroll horizontally?

Hold down the Shift key while scrolling the mouse

How to customize the size and alignment of text?

You can configure custom themes, see documentation and examples

How to customize cell width and height?

Check out the usage docs and examples

Does S2 support editing of tables?

Please see edit mode example

Does S2 have a corresponding `Vue` or `Angular` version?

Currently, S2 consists of three packages

@antv/s2 : Developed based on canvas and AntV/G , providing basic table display/interaction capabilities
@antv/s2-react : Based on the @antv/s2 package, it provides supporting analysis components
@antv/s2-vue : Based on Vue3 and @antv/s2 package, provide supporting analysis components

That is to say, @antv/s2 has nothing to do with the framework , you can use it in Vue , Angular and other frameworks.

Here is an overview of the releases:

Note

There are three ways to create an S2 table: the basic version @antv/s2 and the React and Vue3 versions wrapped based on @antv/s2:

Basic version @antv/s2: Developed based on Canvas and AntV/G 6.0, providing basic table display/interaction capabilities.

Dependencies: None

React version @antv/s2-react: Wrapped based on React 18 and @antv/s2, compatible with React 16/17 versions, and provides supporting analysis components (@antv/s2-react-components).

Dependencies:

"peerDependencies": {
  "@antv/s2": "^2.0.0",
  "react": ">=16.9.0",
  "react-dom": ">=16.9.0"
}

Vue version @antv/s2-vue: Wrapped based on Vue3, @antv/s2, and [email protected]. Maintenance Discontinued

Dependencies:

"peerDependencies": {
  "@antv/s2": "^2.0.0",
  "ant-design-vue": "^3.2.0",
  "vue": ">=3.x"
}

In other words, @antv/s2 is framework-agnostic with no additional dependencies. You can use it in any framework like Vue, Angular, etc.

Package Name	Stable Version	Package Size	Downloads
@antv/s2
@antv/s2-react
@antv/s2-react-components
@antv/s2-vue (Discontinued)

How to get notifications for new version releases?

Subscribe to: https://github.com/antvis/S2/releases.atom to receive notifications of new version releases.
Watch the S2 repository, select Custom - Releases to receive push notifications.

preview

Supporting analysis components , currently there is no development plan for @antv/s2-angular , the community is welcome to build together 👏🏻.

How to contribute code?

Please review the contribution guidelines

Why can't the form be displayed on the applet?

At present, S2 only supports the web platform, and the applet does not support it for the time being.

Why is my Issue closed?

Please read the must-read before submitting an Issue , and fill in strictly according to the Issue 模板, providing some meaningful information, including but not limited to:

The version number you actually installed:

Avoid meaningless version numbers like latest or * . Providing the version you actually use can help us locate the problem faster. It is possible that the function you are using is only supported in the new version, or the bug has been fixed in the new version up

Detailed bug description

Not everyone understands the context of your text, provide complete steps to reproduce, post error screenshots, gif, please don’t waste words like gold

Your steps to reproduce, and links to reproduce

It is recommended to use the official codesandbox template to build some minimal reproducible demos

Your configuration information , and use markdown code tags

Do not post a large section of unformatted business code, please provide configuration files such as s2Options s2DataConfig, and use markdown syntax reasonably to save everyone's time

What are your expectations? What is the current behavior?

It is expected to be "no problem", but currently it is "problem". This description is no different from what you said. Please try to be as specific as possible. For example: the数据不正确：预期应该是 xx, 实际是 xx. 布局错误：节点应该显示在行头，实际出现在了列头。

Try to erase some nouns and descriptions with your own business semantics

Before asking a question, please make sure you have read the official documentation and FAQ , and have searched and checked the related Issues list .

Highly recommended reading:

✅ A great example: #852

❌ A bad example: #1057

I want to report a bug, how can I provide a reproducible online demo?

It is recommended to use codesandbox , we provide various versions of templates for your convenience. view all templates

FAQ

FAQ

1. Problems of use

browser compatibility

browser introduction

The access to the official website is a bit slow, or it cannot be opened. Is there a domestic mirror?

After the parent element uses transform: scale , the mouse coordinates of the chart respond incorrectly

How to update table configuration?

The graph cannot be rendered, what's the matter?

After manually updating the width and height of the table, why is the scroll bar not displayed?

Can the table be filled automatically according to the width and height of the outer container?

How to get cell data?

Why is the tooltip not displayed in @antv/ @antv/s2 , but it can be displayed normally in @antv/s2-react @antv/s2-vue ?

How to customize Tooltip in Vue?

Does the table support exporting to Excel ?

What should I do if the table is exported with garbled characters?

How does the mouse wheel scroll horizontally?

How to customize the size and alignment of text?

How to customize cell width and height?

Does S2 support editing of tables?

Does S2 have a corresponding Vue or Angular version?

Note

How to get notifications for new version releases?

How to contribute code?

Why can't the form be displayed on the applet?

Why is my Issue closed?

I want to report a bug, how can I provide a reproducible online demo?

Is there a discussion group?

2. Errors and Warnings

1. Problems of use

browser compatibility

browser introduction

The access to the official website is a bit slow, or it cannot be opened. Is there a domestic mirror?

After the parent element uses transform: scale , the mouse coordinates of the chart respond incorrectly

How to update table configuration?

The graph cannot be rendered, what's the matter?

After manually updating the width and height of the table, why is the scroll bar not displayed?

Can the table be filled automatically according to the width and height of the outer container?

How to get cell data?

Why is the tooltip not displayed in @antv/ @antv/s2 , but it can be displayed normally in @antv/s2-react @antv/s2-vue ?

How to customize Tooltip in Vue?

Does the table support exporting to Excel ?

What should I do if the table is exported with garbled characters?

How does the mouse wheel scroll horizontally?

How to customize the size and alignment of text?

How to customize cell width and height?

Does S2 support editing of tables?

Does S2 have a corresponding Vue or Angular version?

Note

How to get notifications for new version releases?

How to contribute code?

Why can't the form be displayed on the applet?

Why is my Issue closed?

I want to report a bug, how can I provide a reproducible online demo?

Is there a discussion group?

2. Errors and Warnings

After the parent element uses `transform: scale` , the mouse coordinates of the chart respond incorrectly

Why is the tooltip not displayed in @antv/ `@antv/s2` , but it can be displayed normally in `@antv/s2-react` `@antv/s2-vue` ?

Does the table support exporting to `Excel` ?

Does S2 have a corresponding `Vue` or `Angular` version?

After the parent element uses `transform: scale` , the mouse coordinates of the chart respond incorrectly

Why is the tooltip not displayed in @antv/ `@antv/s2` , but it can be displayed normally in `@antv/s2-react` `@antv/s2-vue` ?

Does the table support exporting to `Excel` ?

Does S2 have a corresponding `Vue` or `Angular` version?