diff --git a/packages/s2-core/README.md b/packages/s2-core/README.md
index 3f32e3aa91..aae2db40f2 100644
--- a/packages/s2-core/README.md
+++ b/packages/s2-core/README.md
@@ -142,7 +142,7 @@ const s2DataConfig = {
```ts
const s2Options = {
width: 600,
- height: 600,
+ height: 600
}
```
@@ -214,9 +214,6 @@ yarn site:start
-
- 
-
## 👬 Contributors
diff --git a/packages/s2-core/__tests__/unit/facet/header/frozen-row-spec.ts b/packages/s2-core/__tests__/unit/facet/header/frozen-row-spec.ts
index d34aa54dec..cf43962bfb 100644
--- a/packages/s2-core/__tests__/unit/facet/header/frozen-row-spec.ts
+++ b/packages/s2-core/__tests__/unit/facet/header/frozen-row-spec.ts
@@ -9,12 +9,13 @@ import { SeriesNumberHeader } from '@/facet/header/series-number';
const s2 = createPivotSheet(
{
...DEFAULT_OPTIONS,
- frozenFirstRowPivot: true,
+ frozenFirstRow: true,
totals: { row: { showGrandTotals: true, reverseLayout: true } },
showSeriesNumber: true,
},
{ useSimpleData: false },
);
+
describe('Frozen Row Header Test', () => {
test.each(['grid', 'tree'])(
'frozen row header group api',
diff --git a/packages/s2-core/__tests__/unit/facet/pivot-facet-frozen-spec.ts b/packages/s2-core/__tests__/unit/facet/pivot-facet-frozen-spec.ts
index 23e8fdf5e9..913291366b 100644
--- a/packages/s2-core/__tests__/unit/facet/pivot-facet-frozen-spec.ts
+++ b/packages/s2-core/__tests__/unit/facet/pivot-facet-frozen-spec.ts
@@ -1,22 +1,22 @@
/**
* pivot mode pivot test.
*/
-import { createPivotSheet } from 'tests/util/helpers';
import type { IGroup } from '@antv/g-canvas';
import { get } from 'lodash';
+import { createPivotSheet } from 'tests/util/helpers';
-import type { PivotSheet, SpreadSheet } from '@antv/s2';
+import type { PivotSheet, S2Options } from '@antv/s2';
import { FrozenRowCell, SeriesNumberCell } from '@/cell';
-import { getFrozenRowCfgPivot } from '@/facet/utils';
import {
FrozenGroup,
KEY_GROUP_ROW_HEADER_FROZEN,
KEY_GROUP_ROW_SCROLL,
} from '@/common';
import type { FrozenFacet } from '@/facet/frozen-facet';
+import { getFrozenRowCfgPivot } from '@/facet/utils';
-const defaultOptions = {
- frozenFirstRowPivot: true,
+const defaultS2Options: S2Options = {
+ frozenFirstRow: true,
totals: {
row: {
showGrandTotals: true,
@@ -24,6 +24,7 @@ const defaultOptions = {
},
},
};
+
const enableFrozenFistRowOption = {
frozenRowCount: 1,
frozenColCount: 0,
@@ -32,6 +33,7 @@ const enableFrozenFistRowOption = {
enableFrozenFirstRow: true,
frozenRowHeight: 30,
};
+
const disableFrozenFistRowOption = {
...enableFrozenFistRowOption,
frozenRowCount: 0,
@@ -43,7 +45,7 @@ let s2: PivotSheet;
describe('test getFrozenRowCfgPivot', () => {
beforeEach(() => {
- s2 = createPivotSheet(defaultOptions, { useSimpleData: false });
+ s2 = createPivotSheet(defaultS2Options, { useSimpleData: false });
});
afterEach(() => {
@@ -76,7 +78,7 @@ describe('test getFrozenRowCfgPivot in tree', () => {
beforeEach(() => {
s2 = createPivotSheet(
{
- ...defaultOptions,
+ ...defaultS2Options,
hierarchyType: 'tree',
pagination: {
pageSize: 0,
@@ -106,7 +108,7 @@ describe('test getFrozenRowCfgPivot in tree', () => {
test('showSeriesNumber has totals', () => {
s2.setOptions({
showSeriesNumber: true,
- ...defaultOptions,
+ ...defaultS2Options,
});
s2.render();
@@ -118,7 +120,7 @@ describe('test getFrozenRowCfgPivot in tree', () => {
describe('test cell XYIndexes frozen first row', () => {
beforeEach(() => {
- s2 = createPivotSheet(defaultOptions, { useSimpleData: false });
+ s2 = createPivotSheet(defaultS2Options, { useSimpleData: false });
s2.render();
});
@@ -338,7 +340,7 @@ describe('test frozen group', () => {
beforeEach(() => {
s2 = createPivotSheet(
{
- ...defaultOptions,
+ ...defaultS2Options,
showSeriesNumber: true,
},
{ useSimpleData: false },
diff --git a/packages/s2-core/src/common/interface/s2Options.ts b/packages/s2-core/src/common/interface/s2Options.ts
index 93ba041e08..08b797b950 100644
--- a/packages/s2-core/src/common/interface/s2Options.ts
+++ b/packages/s2-core/src/common/interface/s2Options.ts
@@ -126,7 +126,8 @@ export interface S2TableSheetOptions {
// Pivot sheet options
export interface S2PivotSheetOptions {
// pivot sheet type: frozen head row, default false
- frozenFirstRowPivot?: boolean;
+ // TODO: 2.0 版本统一在 frozen: { ... } 命名空间下
+ frozenFirstRow?: boolean;
}
export interface S2Options<
diff --git a/packages/s2-core/src/facet/utils.ts b/packages/s2-core/src/facet/utils.ts
index a02053cf1f..09e8e16f0b 100644
--- a/packages/s2-core/src/facet/utils.ts
+++ b/packages/s2-core/src/facet/utils.ts
@@ -545,19 +545,19 @@ export const areAllFieldsEmpty = (fields: Fields) => {
export const getFrozenRowCfgPivot = (
options: Pick<
S2Options,
- 'frozenFirstRowPivot' | 'pagination' | 'hierarchyType' | 'showSeriesNumber'
+ 'frozenFirstRow' | 'pagination' | 'hierarchyType' | 'showSeriesNumber'
>,
rowNodes: Node[],
): S2TableSheetOptions & {
frozenRowHeight: number;
enableFrozenFirstRow: boolean;
} => {
- const { pagination, frozenFirstRowPivot, hierarchyType, showSeriesNumber } =
+ const { pagination, frozenFirstRow, hierarchyType, showSeriesNumber } =
options;
const enablePagination = pagination && pagination.pageSize;
let enableFrozenFirstRow = false;
const headNode = rowNodes?.[0];
- if (!enablePagination && frozenFirstRowPivot) {
+ if (!enablePagination && frozenFirstRow) {
// first node no children: entire row
enableFrozenFirstRow = headNode?.children?.length === 0;
const treeMode = hierarchyType === 'tree' || hierarchyType === 'customTree';
diff --git a/packages/s2-react/README.md b/packages/s2-react/README.md
index 43cd3837b0..0a2719872f 100644
--- a/packages/s2-react/README.md
+++ b/packages/s2-react/README.md
@@ -105,7 +105,7 @@ const s2DataConfig = {
```ts
const s2Options = {
width: 600,
- height: 480,
+ height: 480
}
```
@@ -117,18 +117,17 @@ const s2Options = {
```
-```ts
+```tsx
+import ReactDOM from 'react-dom'
import { SheetComponent } from '@antv/s2-react';
import '@antv/s2-react/dist/style.min.css';
-const container = document.getElementById('container');
-
ReactDOM.render(
,
- document.getElementById('container'),
+ document.getElementById('container')
);
```
diff --git a/packages/s2-react/playground/config.ts b/packages/s2-react/playground/config.ts
index d4a2919710..8ddb33ad16 100644
--- a/packages/s2-react/playground/config.ts
+++ b/packages/s2-react/playground/config.ts
@@ -80,6 +80,7 @@ export const s2Options: SheetComponentOptions = {
debug: true,
width: 600,
height: 400,
+ frozenFirstRow: true,
showSeriesNumber: false,
interaction: {
enableCopy: true,
diff --git a/s2-site/docs/api/components/drill-down.zh.md b/s2-site/docs/api/components/drill-down.zh.md
index 2f557d7ff6..d703bf7604 100644
--- a/s2-site/docs/api/components/drill-down.zh.md
+++ b/s2-site/docs/api/components/drill-down.zh.md
@@ -19,7 +19,7 @@ const s2Options = {
/>
```
-📊 查看 [React 版下钻 demo](/examples/react-component/drill-dwon#for-pivot)
+📊 查看 [React 版下钻 demo](/examples/react-component/drill-down#for-pivot)
## Vue 下钻组件
diff --git a/s2-site/docs/api/general/S2Options.zh.md b/s2-site/docs/api/general/S2Options.zh.md
index 551847d2bf..7f9bbe7e4b 100644
--- a/s2-site/docs/api/general/S2Options.zh.md
+++ b/s2-site/docs/api/general/S2Options.zh.md
@@ -32,9 +32,9 @@ const s2Options = {
| style | [Style](#style) | | | 单元格样式设置，比如布局类型，宽高，边距，是否隐藏数值列头等 |
| frozenRowCount | `number` | | | 冻结行的数量，从顶部开始计数 （明细表有效） |
| frozenColCount | `number` | | | 冻结列的数量，从左侧开始计数 （明细表有效） |
-| frozenTrailingRowCount | `number` | | | 冻结行数量，从底部开始计数 （明细表有效） |
-| frozenTrailingColCount | `number` | | | 冻结列的数量，从右侧开始计数 （明细表有效） |
-| frozenFirstRowPivot | `boolean` | | `false` | 首行不存在子节点时, 冻结首行, 适用于聚合模式总计置于顶部冻结总计行, 树状模式冻结首行等场景 (透视表有效) | `@antv/s2@1.53.0` |
+| frozenTrailingRowCount | `number` | | | 冻结行数量，从底部开始计数（明细表有效） |
+| frozenTrailingColCount | `number` | | | 冻结列的数量，从右侧开始计数（明细表有效） |
+| frozenFirstRow | `boolean` | | `false` | 首行不存在子节点时，冻结首行（透视表有效）, 适用于聚合模式总计置于顶部冻结总计行，树状模式冻结首行等场景。| `@antv/s2@^1.53.0` |
| hdAdapter | `boolean` | | `true` | 是否开启高清屏适配，解决多屏切换，高清视网膜屏字体渲染模糊的问题。[查看更多](/manual/advanced/hd-adapter) |
| mergedCellsInfo | [MergedCellInfo[][]](#mergedcellinfo) | | | 合并单元格信息 |
| placeholder | `string \| (meta: Record) => string` | | | 空单元格的填充内容 |
@@ -52,8 +52,8 @@ const s2Options = {
| layoutDataPosition | [layoutDataPosition](#layoutdataposition) | | | 自定义数据 |
| filterDisplayDataItem | [FilterDataItemCallback](#filterdataitemcallback) | | | 过滤数据 |
| mappingDisplayDataItem | [MappingDataItemCallback](#mappingdataitemcallback) | | | 转换数据，用于 tooltip 显示 |
-| dataSet | [DataSet](#dataset) | | | 自定义数据集 |
-| supportCSSTransform | `boolean` | | `false` | 开启后支持 CSS transform, 解决父元素设置 `transform` 后，鼠标坐标响应不正确的问题 |
+| dataSet | [DataSet](#dataset) | | | 自定义数据集 |
+| supportCSSTransform | `boolean` | | `false` | 开启后支持 CSS transform, 解决父元素设置 `transform` 后，鼠标坐标响应不正确的问题 |
| devicePixelRatio | `number` | | `window.devicePixelRatio` | 自定义设备像素比 |
diff --git a/s2-site/docs/manual/basic/analysis/drill-down.zh.md b/s2-site/docs/manual/basic/analysis/drill-down.zh.md
index 20bfafee11..c6736b1f49 100644
--- a/s2-site/docs/manual/basic/analysis/drill-down.zh.md
+++ b/s2-site/docs/manual/basic/analysis/drill-down.zh.md
@@ -3,7 +3,6 @@ title: 维度下钻
order: 13
---
-
S2 提供的「维度下钻」的能力，可以为你挖掘不同维度下更详细的数据，让你的数据洞察变得更清晰。
@@ -88,24 +87,25 @@ const PartDrillDown = {
```jsx
import React from 'react';
-import ReactDOM from 'react-dom';
import { SheetComponent } from '@antv/s2-react';
+import '@antv/s2-react/dist/style.min.css';
const s2Options = {
hierarchyType: 'tree', // 树形结构
};
-ReactDOM.render(
- ,
- document.getElementById('container'),
-);
+const App = () => {
+ return (
+
+ )
+}
```
-
+
## 使用场景
diff --git a/s2-site/docs/manual/basic/analysis/editable-mode.zh.md b/s2-site/docs/manual/basic/analysis/editable-mode.zh.md
index f368ffc1ca..813be1d588 100644
--- a/s2-site/docs/manual/basic/analysis/editable-mode.zh.md
+++ b/s2-site/docs/manual/basic/analysis/editable-mode.zh.md
@@ -3,21 +3,25 @@ title: 编辑表
order: 3
---
-## 明细表简介
+## 简介
-编辑表是 `S2` 明细表的衍生形态之一。在提供完整的明细表的分析功能之外，还支持对数据的修改操作。
+编辑表是 `S2` 明细表的衍生形态之一，基于 `React` 版本的明细表封装，在提供完整的明细表的分析功能之外，还支持对数据的修改操作。
## 使用
+:::warning{title="注意"}
+编辑表的原理本质上是在 `Canvas` 表格上增加一个 `div` 蒙层，来实现对数据的编辑，如果想在 `@antv/s2` 和 `@antv/s2-vue` 中使用，请自行参考 [React 版本的实现](https://github.com/antvis/S2/blob/b81b7957b9e8b8e1fbac9ebc6cacdf45a14e5412/packages/s2-react/src/components/sheets/editable-sheet/index.tsx#L7) 进行封装。
+:::
+
+
+
```html
```
-### React 组件方式
-
-```typescript
+```tsx
import React from "react";
import ReactDOM from "react-dom";
import { SheetComponent } from '@antv/s2-react';
@@ -160,17 +164,19 @@ const s2Options = {
// 4, 渲染
ReactDOM.render(
{
+ console.log('onDataCellEditEnd', meta);
+ }}
/>,
document.getElementById('container')
);
```
-## 特性
+## 效果
-效果如图：
-
+[查看示例](/examples/react-component/sheet#editable)
-[playground 地址](/examples/react-component/sheet#editable)
+
diff --git a/s2-site/docs/manual/basic/analysis/strategy.zh.md b/s2-site/docs/manual/basic/analysis/strategy.zh.md
index 0ca2bdf96f..3be1512ec3 100644
--- a/s2-site/docs/manual/basic/analysis/strategy.zh.md
+++ b/s2-site/docs/manual/basic/analysis/strategy.zh.md
@@ -16,7 +16,7 @@ order: 9
点击查看趋势分析表 options 配置
-```js
+```ts
const s2Options = {
width: 600,
height: 480,
@@ -56,21 +56,20 @@ const s2Options = {
-```ts
+```tsx
import React from "react";
-import ReactDOM from "react-dom";
import { SheetComponent } from "@antv/s2-react";
import '@antv/s2-react/dist/style.min.css';
-ReactDOM.render(
- ,
- document.getElementById('container'),
-);
-
+const App = () => {
+ return (
+
+ )
+}
```
diff --git a/s2-site/docs/manual/basic/analysis/switcher.zh.md b/s2-site/docs/manual/basic/analysis/switcher.zh.md
index a4d604f42a..9a4e505757 100644
--- a/s2-site/docs/manual/basic/analysis/switcher.zh.md
+++ b/s2-site/docs/manual/basic/analysis/switcher.zh.md
@@ -32,18 +32,17 @@ const switcherFields = {
```js
import React from "react";
-import ReactDOM from "react-dom";
import { Switcher } from "@antv/s2-react";
const onSubmit = (result) => {
console.log("result:", result);
};
-ReactDOM.render(
- ,
- document.getElementById("container")
-);
-
+const App = () => {
+ return (
+
+ )
+}
```
diff --git a/s2-site/docs/manual/basic/sheet-type/pivot-mode.en.md b/s2-site/docs/manual/basic/sheet-type/pivot-mode.en.md
index 79ebcab4c8..f37806e1b5 100644
--- a/s2-site/docs/manual/basic/sheet-type/pivot-mode.en.md
+++ b/s2-site/docs/manual/basic/sheet-type/pivot-mode.en.md
@@ -102,11 +102,11 @@ pivotSheet.render();
Translation: Currently, only the ability to freeze the first row is provided, which is different from freezing rows and columns in a detail table. Due to the complex layout caused by the grouping feature in a pivot table, and to ensure reasonable interaction, the following limitations are in place:
The first row does not have any child nodes (suitable for scenarios where the total is placed at the top or for tree-like structures).
-Pagination scenarios are not currently supported. To enable freezing of the first row, set frozenFirstRowPivot in s2Options configuration.
+Pagination scenarios are not currently supported. To enable freezing of the first row, set frozenFirstRow in s2Options configuration.
```ts
const s2Options = {
- frozenFirstRowPivot: boolean;
+ frozenFirstRow: boolean;
totals: {
row: {
showGrandTotals: true,
diff --git a/s2-site/docs/manual/basic/sheet-type/pivot-mode.zh.md b/s2-site/docs/manual/basic/sheet-type/pivot-mode.zh.md
index 0cebeac18d..0bbc1e5e5e 100644
--- a/s2-site/docs/manual/basic/sheet-type/pivot-mode.zh.md
+++ b/s2-site/docs/manual/basic/sheet-type/pivot-mode.zh.md
@@ -83,7 +83,7 @@ ReactDOM.render(
📊 查看 [React 版本透视表示例](/examples/react-component/sheet#pivot) 和 [API 文档](/api/components/sheet-component)。
-### 类方式
+### PivotSheet 类方式
如果不打算依赖 `React`，可以在上面第三步之后直接调用：
@@ -97,23 +97,40 @@ s2.render();
📊 查看 [类方式透视表示例](/examples/basic/pivot#grid) 和 [API 文档](/api/general/s2options)。
+## 特性
+
+### 冻结行头
+
+当行头固定时，行头的最大宽度占表格宽度的一半，但宽度超过一半时，行头会有一个独立的可滚动区域。
+
+```ts
+const s2Options = {
+ frozenRowHeader: true,
+}
+```
+
+
+
### 冻结首行 @antv/s2@^1.53.0 新增
-:::info{title=""}
+:::info{title="注意"}
-目前仅提供**冻结首行**能力，和[明细表行列冻结](https://s2.antv.antgroup.com/manual/basic/sheet-type/table-mode#%E8%A1%8C%E5%88%97%E5%86%BB%E7%BB%93)不同, 透视表由于带有分组的特性, 布局比较复杂, 考虑到交互合理性, 目前有如下限制
+目前仅提供**冻结首行**能力，和 [明细表行列冻结](https://s2.antv.antgroup.com/manual/basic/sheet-type/table-mode#%E8%A1%8C%E5%88%97%E5%86%BB%E7%BB%93) 不同，透视表由于带有分组的特性，布局比较复杂，考虑到交互合理性，目前有如下限制：
-- 首行不存在子节点 (适用于总计置于顶部, 树状模式等场景)。
+- 首行不存在子节点（适用于总计置于顶部，只有单个维值，树状模式等场景）。
- 分页场景暂不支持。
-`s2Options` 中配置 `frozenFirstRowPivot` 开启首行冻结能力
+
+`s2Options` 中配置 `frozenFirstRow` 开启首行冻结能力
:::
+#### 平铺模式
+
```ts
const s2Options = {
- // 是否开启冻结首行
- frozenFirstRowPivot: boolean;
- // 平铺模式，需要开启行总计 & 位置置顶
+ frozenFirstRow: true,
+ hierarchyType: 'grid',
+ // 需要开启行总计 & 总计行置于顶部
totals: {
row: {
showGrandTotals: true,
@@ -123,10 +140,19 @@ const s2Options = {
}
```
-#### 平铺模式
-
+
+
#### 树状模式
+```ts
+const s2Options = {
+ frozenFirstRow: true,
+ hierarchyType: 'tree',
+}
+```
+
+
+
diff --git a/s2-site/docs/manual/basic/sheet-type/table-mode.zh.md b/s2-site/docs/manual/basic/sheet-type/table-mode.zh.md
index 2cbfb4e5ec..611c394559 100644
--- a/s2-site/docs/manual/basic/sheet-type/table-mode.zh.md
+++ b/s2-site/docs/manual/basic/sheet-type/table-mode.zh.md
@@ -9,7 +9,7 @@ order: 2
-明细表和透视表共享[基础交互](/manual/advanced/interaction/basic)、[主题](/manual/basic/theme) 、[复制](/manual/basic/analysis/export)、[自定义单元格](/manual/advanced/custom/hook) 等能力。除此之外，明细表还支持 [行列冻结](/examples/interaction/basic#froze) 等特色功能。在海量明细数据渲染场景下，明细表可以替换基于 `DOM` 的表格组件，来提升性能和用户体验。
+明细表和透视表共享 [基础交互](/manual/advanced/interaction/basic)、[主题](/manual/basic/theme) 、[复制](/manual/basic/analysis/export)、[自定义单元格](/manual/advanced/custom/hook) 等能力。除此之外，明细表还支持 [行列冻结](/examples/interaction/basic#froze) 等特色功能。在海量明细数据渲染场景下，明细表可以替换基于 `DOM` 的表格组件，来提升性能和用户体验。
## 使用
@@ -101,11 +101,12 @@ s2.render();
### 序号
-在 `s2Options` 中传入 `showSeriesNumber` 即可展示内置的序号。[查看 demo](/examples/basic/table#table)
+在 `s2Options` 中传入 `showSeriesNumber` 即可展示内置的序号，可以自定义序号列标题。[查看 demo](/examples/basic/table#table)
```ts
const s2Options = {
- showSeriesNumber: true
+ showSeriesNumber: true,
+ seriesNumberText: '自定义序号标题' // 默认 "序号"
}
```
@@ -113,6 +114,10 @@ const s2Options = {
行列冻结让特定行列在滚动时保持固定，从而一直保持在视口范围内，提供信息的对照和参考。[查看 demo](/examples/interaction/basic#frozen)
+
+
+
+
行列冻结通过在 `s2Options` 中传入这些属性控制：
```ts
@@ -127,5 +132,3 @@ const s2Options = {
效果如图：
-
-
diff --git a/s2-site/docs/manual/basic/sort/advanced.zh.md b/s2-site/docs/manual/basic/sort/advanced.zh.md
index 1f32f98f4d..463bf19418 100644
--- a/s2-site/docs/manual/basic/sort/advanced.zh.md
+++ b/s2-site/docs/manual/basic/sort/advanced.zh.md
@@ -11,15 +11,14 @@ order: 1
使用 `@antv/s2-react` 的 `SheetComponent` 组件 ，并给 `header` 配置 `advancedSortCfg` ，配置具体信息可查看 [AdvancedSortCfgProps](/docs/api/components/advanced-sort#advancedsortcfgprops)
-```ts
-import React, { useState } from 'react';
-import ReactDOM from 'react-dom';
+```tsx
+import React from 'react';
import { SortParams } from '@antv/s2';
import { SheetComponent } from '@antv/s2-react';
import '@antv/s2-react/dist/style.min.css';
-const AdvancedSortDemo = () => {
- const [dataCfg, setDataCfg] = useState(s2DataConfig);
+export const AdvancedSortDemo = () => {
+ const [dataCfg, setDataCfg] = React.useState(s2DataConfig);
return (
{
/>
);
};
-
-ReactDOM.render(, document.getElementById('container'));
-
```
## 配置
### 显示
-```ts
-advancedSortCfg: {
- open: true,
-}
+```tsx
+
```
-
+
### 提交
通过 `onSortConfirm` 函数透出所选规则数据 `ruleValues` 和处理成表可直接用的数据 `sortParams`
```ts
-advancedSortCfg: {
- open: true,
- onSortConfirm: (ruleValues: RuleValue[], sortParams: SortParams) => {
- console.log(ruleValues, sortParams)
- },
-},
+ {
+ console.log(ruleValues, sortParams)
+ }
+ },
+ }}
+/>
```
@@ -79,7 +83,7 @@ advancedSortCfg: {
| 参数 | 说明 | 类型 | 默认值 | 必选 |
| --------------- | ------------------ | ---------------------- | ------ | ---- |
| className | class 类名称 | `string` | - | |
-| icon | 排序按钮图标 | `React.ReactNode` | - | |
+| icon | 排序按钮图标 | `ReactNode` | - | |
| text | 排序按钮名称 | `ReactNode` | - | |
| ruleText | 规则描述 | `string` | - | |
@@ -107,7 +111,7 @@ advancedSortCfg: {
支持自定义规则配置列表，不配置默认为：`首字母、手动排序、其他字段`
->注意：如果这里自定义，则需在 onSortConfirm 中通过 ruleValues 自定义 sortParams
+> 注意：如果这里自定义，则需在 onSortConfirm 中通过 ruleValues 自定义 sortParams
| 属性 | 类型 | 必选 | 默认值 | 功能描述 |
| ------- | ------------------------------------------ | --- | ----- | --------- |
diff --git a/s2-site/docs/manual/basic/totals.zh.md b/s2-site/docs/manual/basic/totals.zh.md
index cffaf101cb..4d07c9910f 100644
--- a/s2-site/docs/manual/basic/totals.zh.md
+++ b/s2-site/docs/manual/basic/totals.zh.md
@@ -5,7 +5,7 @@ order: 5
## 简介
-小计总计属于表的透视功能，可以给行和列分别配置小计总计。
+小计总计属于表的透视功能，可以给行头和列头分别配置小计总计。
### 小计
@@ -15,13 +15,17 @@ order: 5
平铺模式下，给当前维度额外增加一行/列
-
+
+
+
#### 形式二：挂靠节点
树状模式下，挂靠到当前节点所在行/列中
-
+
+
+
### 总计
@@ -33,35 +37,43 @@ order: 5
+
+
树状：
-
+
+
+
#### 2. 多度量值
平铺：
-
+
+
+
树状：
-
+
+
+
### 分组汇总
-按维度进行 小计/总计 的汇总计算，用于进行某一维度的数据对比分析等。
+按维度进行 `小计/总计` 的汇总计算，用于进行某一维度的数据对比分析等。
-
+#### 行总计/行小计分组
-#### 行总计小计分组
+
-行总计按 “类别” 分组，行小计按 “类别”，“子类别” 分组：
+
-
+#### 列总计/列小计分组
-#### 列总计小计分组
+
-
+
## 使用
@@ -75,8 +87,8 @@ object **必选**,_default：null_ 功能描述： 小计总计配置
| 参数 | 说明 | 类型 | 默认值 | 必选 |
| ---- | ------ | --------------------------------------------- | ------ | ---- |
-| row | 列总计 | [Total](/docs/api/general/S2Options#total) | {} | |
-| col | 行总计 | [Total](/docs/api/general/S2Options#total) | {} | |
+| row | 列总计 | [Total](/docs/api/general/S2Options#total) | - | |
+| col | 行总计 | [Total](/docs/api/general/S2Options#total) | - | |
#### Total
@@ -106,7 +118,7 @@ const s2Options = {
reverseSubLayout: true,
subTotalsDimensions: ['province'],
totalsGroupDimensions: ['city'],
- subTotalsGroupDimensions: ['type', 'sub_type'],
+ subTotalsGroupDimensions: ['type', 'sub_type'],
},
col: {
showGrandTotals: true,
@@ -123,36 +135,36 @@ const s2Options = {
#### 1. 数据传入
-数据根据行/列位置以及 key 值传入，维度 key 值没有包含所有行、列的 key，举例如下：
+数据根据行/列位置以及 `key` 值传入，维度 `key` 值没有包含所有行、列的 `key`，举例如下：
```typescript
[
- // 总计/总计
- {
- price: '15.5',
- },
- // 浙江/总计
- {
- province: '浙江',
- price: '5.5',
- },
- // 浙江-杭州/总计
- {
- province: '浙江',
- city: '杭州',
- price: '3',
- },
- // 总计/笔
- {
- type: '笔',
- price: '10',
- },
- // 浙江-小计/笔
- {
- province: "浙江",
- type: "笔",
- price: "3"
- },
+ // 总计/总计
+ {
+ price: '15.5',
+ },
+ // 浙江/总计
+ {
+ province: '浙江',
+ price: '5.5',
+ },
+ // 浙江-杭州/总计
+ {
+ province: '浙江',
+ city: '杭州',
+ price: '3',
+ },
+ // 总计/笔
+ {
+ type: '笔',
+ price: '10',
+ },
+ // 浙江-小计/笔
+ {
+ province: "浙江",
+ type: "笔",
+ price: "3"
+ },
]
```
@@ -174,7 +186,7 @@ const s2DataConfig = {
},
],
...
-};
+}
```
##### 方式二：传入 totalData
@@ -194,87 +206,29 @@ const s2DataConfig = {
{
price: '15.5',
},
- ],
-};
+ ]
+}
```
#### 2. 计算出数据
可以给 `totals` 下的 `row` 、 `col` 分别配置属性 `calcTotals` 、 `calcSubTotals` 来实现计算汇总数据
-##### 1. 配置聚合方式
+##### 2.1. 配置聚合方式
-通过配置 `aggregation` 来实现，聚合方式目前支持 `SUM` （求和）、 `MIN` （最小值）、 `MAX` （最大值）和 `AVG` （算术平均） 。
+通过配置 `aggregation` 来实现，聚合方式目前支持 `SUM` （求和）、 `MIN` （最小值）、 `MAX` （最大值）和 `AVG` （算术平均）。 [查看示例](https://s2.antv.antgroup.com/zh/examples/analysis/totals/#calculate)
-```ts
-const s2Options = {
- totals: {
- row: {
- showGrandTotals: true,
- showSubTotals: true,
- reverseLayout: true,
- reverseSubLayout: true,
- subTotalsDimensions: ['province'],
- calcTotals: {
- aggregation: 'SUM',
- },
- calcSubTotals: {
- aggregation: 'SUM',
- },
- },
- col: {
- showGrandTotals: true,
- showSubTotals: true,
- reverseLayout: true,
- reverseSubLayout: true,
- subTotalsDimensions: ['type'],
- calcTotals: {
- aggregation: 'SUM',
- },
- calcSubTotals: {
- aggregation: 'SUM',
- },
- },
- },
-};
-```
+
-##### 2. 配置自定义方法
+
-通过配置 `calcFunc: (query: Record, arr: Record[]) => number` 来实现
+##### 2.2. 配置自定义方法
-```ts
-const s2Options = {
- totals: {
- row: {
- showGrandTotals: true,
- showSubTotals: true,
- reverseLayout: true,
- reverseSubLayout: true,
- subTotalsDimensions: ['province'],
- calcTotals: {
- calcFunc: (query, data) => {},
- },
- calcSubTotals: {
- calcFunc: (query, data) => {},
- },
- },
- col: {
- showGrandTotals: true,
- showSubTotals: true,
- reverseLayout: true,
- reverseSubLayout: true,
- subTotalsDimensions: ['type'],
- calcTotals: {
- calcFunc: (query, data) => {},
- },
- calcSubTotals: {
- calcFunc: (query, data) => {},
- },
- },
- },
-};
-```
+通过配置 `calcFunc: (query: Record, arr: Record[]) => number` 来实现。[查看示例](https://s2.antv.antgroup.com/zh/examples/analysis/totals/#custom)
+
+
+
+
### 优先级
diff --git a/s2-site/docs/manual/getting-started.zh.md b/s2-site/docs/manual/getting-started.zh.md
index 4f23674fd9..b3ae12a29b 100644
--- a/s2-site/docs/manual/getting-started.zh.md
+++ b/s2-site/docs/manual/getting-started.zh.md
@@ -195,7 +195,7 @@ s2.render();
#### 表格组件使用
-```ts
+```tsx
import React from 'react';
import ReactDOM from 'react-dom';
import { SheetComponent } from '@antv/s2-react';
diff --git a/s2-site/examples/basic/table/demo/table.ts b/s2-site/examples/basic/table/demo/table.ts
index 3d2eb303d7..e522932e47 100644
--- a/s2-site/examples/basic/table/demo/table.ts
+++ b/s2-site/examples/basic/table/demo/table.ts
@@ -1,8 +1,6 @@
import { TableSheet } from '@antv/s2';
-fetch(
- 'https://assets.antv.antgroup.com/s2/basic-table-mode.json',
-)
+fetch('https://assets.antv.antgroup.com/s2/basic-table-mode.json')
.then((res) => res.json())
.then((data) => {
const container = document.getElementById('container');
@@ -39,7 +37,9 @@ fetch(
width: 600,
height: 480,
showSeriesNumber: true,
+ // seriesNumberText: '自定义序号标题',
};
+
const s2 = new TableSheet(container, s2DataConfig, s2Options);
s2.render();
diff --git a/s2-site/examples/interaction/advanced/demo/frozen-pivot-grid.ts b/s2-site/examples/interaction/advanced/demo/frozen-pivot-grid.ts
index b5f352bf28..4c44b20818 100644
--- a/s2-site/examples/interaction/advanced/demo/frozen-pivot-grid.ts
+++ b/s2-site/examples/interaction/advanced/demo/frozen-pivot-grid.ts
@@ -10,7 +10,7 @@ fetch(
const s2Options = {
width: 600,
height: 300,
- frozenFirstRowPivot: true,
+ frozenFirstRow: true,
totals: {
row: {
showGrandTotals: true,
diff --git a/s2-site/examples/interaction/advanced/demo/frozen-pivot-tree.ts b/s2-site/examples/interaction/advanced/demo/frozen-pivot-tree.ts
index b5bd94ae5f..2f3b6cc674 100644
--- a/s2-site/examples/interaction/advanced/demo/frozen-pivot-tree.ts
+++ b/s2-site/examples/interaction/advanced/demo/frozen-pivot-tree.ts
@@ -11,7 +11,7 @@ fetch(
width: 600,
height: 300,
hierarchyType: 'tree',
- frozenFirstRowPivot: true,
+ frozenFirstRow: true,
};
const s2 = new PivotSheet(container, dataCfg, s2Options);
diff --git a/s2-site/examples/react-component/drill-dwon/API.en.md b/s2-site/examples/react-component/drill-down/API.en.md
similarity index 100%
rename from s2-site/examples/react-component/drill-dwon/API.en.md
rename to s2-site/examples/react-component/drill-down/API.en.md
diff --git a/s2-site/examples/react-component/drill-dwon/API.zh.md b/s2-site/examples/react-component/drill-down/API.zh.md
similarity index 100%
rename from s2-site/examples/react-component/drill-dwon/API.zh.md
rename to s2-site/examples/react-component/drill-down/API.zh.md
diff --git a/s2-site/examples/react-component/drill-dwon/demo/basic-panel.tsx b/s2-site/examples/react-component/drill-down/demo/basic-panel.tsx
similarity index 100%
rename from s2-site/examples/react-component/drill-dwon/demo/basic-panel.tsx
rename to s2-site/examples/react-component/drill-down/demo/basic-panel.tsx
diff --git a/s2-site/examples/react-component/drill-dwon/demo/for-pivot.tsx b/s2-site/examples/react-component/drill-down/demo/for-pivot.tsx
similarity index 100%
rename from s2-site/examples/react-component/drill-dwon/demo/for-pivot.tsx
rename to s2-site/examples/react-component/drill-down/demo/for-pivot.tsx
diff --git a/s2-site/examples/react-component/drill-dwon/demo/meta.json b/s2-site/examples/react-component/drill-down/demo/meta.json
similarity index 100%
rename from s2-site/examples/react-component/drill-dwon/demo/meta.json
rename to s2-site/examples/react-component/drill-down/demo/meta.json
diff --git a/s2-site/examples/react-component/drill-dwon/index.en.md b/s2-site/examples/react-component/drill-down/index.en.md
similarity index 100%
rename from s2-site/examples/react-component/drill-dwon/index.en.md
rename to s2-site/examples/react-component/drill-down/index.en.md
diff --git a/s2-site/examples/react-component/drill-dwon/index.zh.md b/s2-site/examples/react-component/drill-down/index.zh.md
similarity index 100%
rename from s2-site/examples/react-component/drill-dwon/index.zh.md
rename to s2-site/examples/react-component/drill-down/index.zh.md