🎉 S2 2.0 版本开始内测啦 !!!

[lijinke666]

Discussed in #1933

了解 2.0 版本新特性 - S2 2.0 表格看数新纪元 和 roadmap

🏠 官网地址变化

原官网 https://s2.antv.vision 和 https://antv-s2.gitee.io 不再维护和使用，请使用最新的文档，确保您看到的不是过时的文档。

• 原 v1 官网迁移至 https://s2-v1.antv.antgroup.com.
• 原 https://s2.antv.antgroup.com 将作为 v2 默认官网。

🏷️ npm dist-tag 变化

什么是 dist-tag ?

S2 2.0 版本目前处于内测阶段, 部分 API 可能会根据合理性随时改动。

npm 的 dist-tag 对应关系如下：

• @antv/s2@next 对应 2.x 版本
• @antv/s2@latest 对应 1.x 版本

📅 正式版本发布时间

目前 next 会持续内测一段时间，https://s2.antv.antgroup.com 会作为相应的文档网站。

在此期间，会持续根据用户的反馈进行 Bug fix 和代码调整，在 @antv/s2@next 版本稳定后，会发布正式版本, latest 将默认指向 2.x 版本，去除 next 标识。

🗓️ v1 版本维护期

目前 v1 版本会继续维护，针对 BUG 发布 Patch 版本修复，但不再接收新的 Feature Request 和 Feature Pull Request，欢迎 Bug Fix Pull Request, 截止日期为 2024 年年底。

📦 安装

Package	Version	Size	Download
@antv/s2
@antv/s2-react
@antv/s2-vue

# 基础版本
yarn add @antv/s2@next --save

# React 版本
yarn add @antv/s2-react@next antd @ant-design/icons --save

# Vue3 版本
yarn add @antv/s2-vue@next [email protected] --save

具体请查看 2.0 升级指南

欢迎尝鲜, 有任何问题欢迎在讨论区或 issue 区留言评论.

[xiaochong44]

@lijinke666 多行文本的能像字节的vtable一样，单元格高度也自适应吗？

[firmianaQ]

能支持单元格的拖拽事件吗

[lijinke666]

@lijinke666 多行文本的能像字节的vtable一样，单元格高度也自适应吗？

是自适应的

[lijinke666]

能支持单元格的拖拽事件吗

如果指的是像 Excel 那样的行列拖拽的话, 在 2.0 后续的规划中

[happypayne]

明细表冻结列之后，无法合并单元格，新版本会支持吗

[firmianaQ]

能完全自定义单元格吗？就是单元格内的内容是使用@antv/g的图形绘制的

[cliens]

你好， 想了解一下2.0正式版本发布预测大概多久？

[lijinke666]

能完全自定义单元格吗？就是单元格内的内容是使用@antv/g的图形绘制的

可以的, 你自己试试不就知道了? S2 的每一个单元格就是 g 的一个 group, 所以你可以任意绘制 g 的图形, 甚至是任意基于 g 的上层图表库, 共享同一个图层, 比如在单元格内绘制 G2

[lijinke666]

你好， 想了解一下2.0正式版本发布预测大概多久？

暂时没有一个明确的时间, 先收集社区和内部反馈进行调整, 稳定后发布正式版.

[firmianaQ]

能完全自定义单元格吗？就是单元格内的内容是使用@antv/g的图形绘制的

可以的, 你自己试试不就知道了? S2 的每一个单元格就是 g 的一个 group, 所以你可以任意绘制 g 的图形, 甚至是任意基于 g 的上层图表库, 共享同一个图层, 比如在单元格内绘制 G2

😢我试了的，升级到2.x，改成g的图形，结果都不行了，可能改的有问题

[db-shuai]

透视表：布局方式使用 layoutWidthType: 'colAdaptive',
行头稍微长一点 就会展示 省略号，v1版本缺不会

https://codesandbox.io/p/sandbox/little-butterfly-fq9m6j?file=%2Fpackage.json%3A9%2C2

[lijinke666]

透视表：布局方式使用 layoutWidthType: 'colAdaptive', 行头稍微长一点 就会展示 省略号，v1版本缺不会

codesandbox.io/p/sandbox/little-butterfly-fq9m6j?file=%2Fpackage.json%3A9%2C2

已修复

[lijinke666]

@antv/s2-react 支持 React 18 和 Ant Design 5.0

@antv/s2-react 的 2.x 版本适配了 React 18, 并兼容 React 16 和 17, 分析组件升级到了 [email protected].

Ant Design 多版本共存

对于项目使用的是 [email protected], 或者所依赖的其他库依赖 [email protected], 由于种种历史原因无法升级到 [email protected] 的情况，可以通过 多版本共存 的方式来临时过渡。

// $ npm install --save antd-v5@npm:antd@5
{
  "antd": "4.x",
  "antd-v5": "npm:antd@5"
}

通过 Webpack 内置插件 NormalModuleReplacementPlugin 或者 自定义 Webpack 插件 的方式指定 @antv/s2-react 使用 antd-v5, 无需做任何修改，项目中其他依赖将继续使用 [email protected].

:::warning{title="注意"}
其他打包工具 （如 Vite) 或者基于 Webpack 封装的库或框架（如 father, umi) 同理，请自行搜索，这里不再赘述。
需要注意的是：这种方式为临时过渡解决方案，从长远来看，Ant Design v4 版本已于 2023 年年底停止维护，建议尽快升级至 [email protected].
:::

自定义 Webpack 插件参考：

class AntdV5AliasPlugin {
  apply(compiler) {
    compiler.hooks.normalModuleFactory.tap("AntdV5AliasPlugin", (nmf) => {
      nmf.hooks.beforeResolve.tapAsync("AntdV5AliasPlugin", (resolveData, callback) => {
        if (resolveData.contextInfo?.issuer?.includes('node_modules/@antv/s2-react')) {
          // 匹配："antd" 和 "antd/es/locale/xxx"
          if (/antd(\/*)?/.test(resolveData.request)) {
            // 替换为："antd-v5" 和 "antd-v5/es/locale/xxx"
            resolveData.request = resolveData.request.replace(/antd(\/*)?/,'antd-v5$1')
          }
        }

        callback();
      });
    });
  }
}

[cliens]

[email protected]

[lijinke666]

[email protected]

已知问题: #2802

[renruijun]

2.x 能否支持下横屏（全屏）场景？ 目前调用浏览器屏幕方向api受到一些限制，感觉这个场景在移动端上还是有很多需求的。

[caiyan1121]

2.X是否支持移动端的展示？

[lijinke666]

#2986