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

@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

How to customize Tooltip in Vue?

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

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:

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:

• How to Submit Unanswered Questions to Open Source Projects
• "How to Report Bugs Effectively"
• "The Wisdom of Questioning"
• "How to Ask Questions to the Open Source Community"

✅ 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