docs: 增加使用 @antv/s2 实现排序功能的示例

packages/s2-core/src/common/interface/basic.ts

@@ -37,7 +37,7 @@ export interface FormatResult {
   value: DataItem;
 }
 
-export type SortMethod = 'ASC' | 'DESC' | 'asc' | 'desc';
+export type SortMethod = 'ASC' | 'DESC' | 'NONE' | 'asc' | 'desc' | 'none';
 
 export enum CellBorderPosition {
   TOP = 'TOP',

s2-site/docs/manual/basic/sort/group.zh.md

@@ -16,7 +16,7 @@ tag: Updated
 
 ## 使用 `@antv/s2`
 
-`@antv/s2` 提供组内排序的能力，可以自行实现 [Tooltip 排序菜单](/manual/basic/tooltip) 后，然后调用相关 [API](/api/basic-class/spreadsheet).
+`@antv/s2` 提供组内排序的能力（对于明细表来说即**全局排序**)，可以自行实现 [Tooltip 排序菜单](/manual/basic/tooltip) 后，然后调用相关 [API](/api/basic-class/spreadsheet).
 
 ```ts
 const meta = cell.getMeta()
@@ -26,8 +26,22 @@ s2.groupSortByMethod('asc', meta)
 
 // 降序
 s2.groupSortByMethod('desc', meta)
+
+// 不排序
+s2.groupSortByMethod('none', meta)
+```
+
+监听排序事件
+
+```ts | pure
+s2.on(S2Event.RANGE_SORT, (sortParams) => {
+  console.log('sortParams:', sortParams)
+});
+
 ```
 
+<Playground path="analysis/sort/demo/group-sort-base.ts" rid='group-sort-base' height="200"></playground>
+
 ## 使用 `@antv/s2-react`
 
 `@antv/s2-react` 基于 `@antv/s2` 的 [基础排序能力](/manual/basic/sort/basic)，和 `antd` 提供了默认的组内排序功能，排序菜单通过 [Tooltip](/manual/basic/tooltip) 承载（开启 `tooltip` 即可），主要根据数值对 `行头/列头` 进行排序，[查看更多排序示例](/examples/analysis/sort/#group-sort)
@@ -50,4 +64,15 @@ const s2Options = {
 };
 ```
 
+监听排序事件
+
+```tsx | pure
+function onRangeSort(sortParams) {
+  console.log('sortParams:', sortParams);
+}
+
+<SheetComponents onRangeSort={onRangeSort} />
+
+```
+
 <Playground path="analysis/sort/demo/group-sort.tsx" rid='group-sort' height="200"></playground>

s2-site/examples/analysis/sort/demo/group-sort-base.ts

@@ -0,0 +1,104 @@
+import { PivotSheet, S2DataConfig, S2Event } from '@antv/s2';
+import { SheetComponentOptions } from '@antv/s2-react';
+import '@antv/s2-react/dist/style.min.css';
+
+fetch('https://render.alipay.com/p/yuyan/180020010001215413/s2/basic.json')
+  .then((res) => res.json())
+  .then(async (data) => {
+    const container = document.getElementById('container');
+    const s2DataConfig: S2DataConfig = {
+      fields: {
+        rows: ['province', 'city'],
+        columns: ['type'],
+        values: ['price'],
+      },
+      meta: [
+        {
+          field: 'province',
+          name: '省份',
+        },
+        {
+          field: 'city',
+          name: '城市',
+        },
+        {
+          field: 'type',
+          name: '商品类别',
+        },
+        {
+          field: 'price',
+          name: '价格',
+        },
+      ],
+      data,
+    };
+
+    const s2Options: SheetComponentOptions = {
+      width: 600,
+      height: 480,
+      showDefaultHeaderActionIcon: true,
+
+      /**
+       * `@antv/s2-react` 提供开箱即用的组内排序组件
+       * 详情请查看: https://s2.antv.antgroup.com/manual/basic/sort/group
+       */
+      tooltip: {
+        enable: true,
+        operation: {
+          // 开启组内排序
+          sort: true,
+        },
+        colCell: {
+          content: (cell) => {
+            const meta = cell.getMeta();
+            const { spreadsheet: s2 } = meta;
+
+            if (!meta.isLeaf) {
+              return null;
+            }
+
+            const config = [
+              {
+                label: '降序',
+                method: 'desc',
+              },
+              {
+                label: '升序',
+                method: 'asc',
+              },
+              {
+                label: '不排序',
+                method: 'none',
+              },
+            ];
+
+            // 自定义列头叶子节点的 Tooltip 内容, 展示一个简易的排序菜单
+            const ul = document.createElement('ul');
+
+            config.forEach((item) => {
+              const li = document.createElement('li');
+
+              li.style.cursor = 'pointer';
+
+              li.addEventListener('click', (e) => {
+                e.stopPropagation();
+                s2.groupSortByMethod(item.method, meta);
+              });
+              li.innerText = item.label;
+              ul.appendChild(li);
+            });
+
+            return ul;
+          },
+        },
+      },
+    };
+
+    const s2 = new PivotSheet(container, s2DataConfig, s2Options);
+
+    s2.on(S2Event.RANGE_SORT, (sortParams) => {
+      console.log('sortParams:', sortParams);
+    });
+
+    await s2.render();
+  });

s2-site/examples/analysis/sort/demo/group-sort.tsx

@@ -43,13 +43,18 @@ fetch('https://render.alipay.com/p/yuyan/180020010001215413/s2/basic.json')
        * 详情请查看: https://s2.antv.antgroup.com/manual/basic/sort/group
        */
       tooltip: {
+        enable: true,
         operation: {
           // 开启组内排序
           sort: true,
         },
       },
     };
 
+    const onRangeSort = (sortParams) => {
+      console.log('sortParams:', sortParams);
+    };
+
     reactDOMClient
       .createRoot(document.getElementById('container'))
       .render(
@@ -58,6 +63,7 @@ fetch('https://render.alipay.com/p/yuyan/180020010001215413/s2/basic.json')
           adaptive={false}
           dataCfg={s2DataConfig}
           options={s2Options}
+          onRangeSort={onRangeSort}
         />,
       );
   });

s2-site/examples/analysis/sort/demo/meta.json

@@ -60,6 +60,15 @@
       },
       "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/ljBJH8o6bT/group-sort.gif"
     },
+    {
+      "filename": "group-sort-base.ts",
+      "title": {
+        "zh": "组内排序 (在 @antv/s2 中使用)",
+        "en": "Group Sort (@antv/s2)"
+      },
+      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/ljBJH8o6bT/group-sort.gif",
+      "new": true
+    },
     {
       "filename": "advanced.tsx",
       "title": {