🐛透视表：自定义列头；合并的列头不显示排序图标，二级有排序图标但是没有排序效果

[dyllike3892654]

🏷 Version

Package	Version
@antv/s2	2.0.0-next.26
@antv/s2-react	^2.0.0-next.25
@antv/s2-vue

Sheet Type

• PivotSheet
• TableSheet
• GridAnalysisSheet
• StrategySheet
• EditableSheet

🖋 Description

我使用的是s2-react和SheetComponent sheetType="pivot" react 透视表组件，不显示tooltip提示行内排序，点击现有的排序功能也无法进行排序

问题：透视表合并表头后，
合并成一级的列头都没有排序图标，所以不能点击显示tooltip和排序；
二级列头会显示排序的图标，点击排序可以打开tooltip框，但是点击行内排序没有效果

刚渲染的时候不会显示排序的Icon，只有自定义加上headerActionIcons才能显示出来排序的Icon，加入headerActionIcons后，会显示tooltip排序，但是没有排序效果，像图片中的这样，这个图片是在columns中设置的分组效果:

columns中设置代码，：
columns：[
{
field: 'a-1',
title: '自定义节点 a-1',
description: 'a-1 描述',
children: [
{
field: 'a-1-1',
title: '自定义节点 a-1-1',
description: 'a-1-1 描述',
children: [
{
field: 'measure-1',
title: '指标 1',
description: '指标 1 描述',
children: [],
},
{
field: 'measure-2',
title: '指标 2',
description: '指标 2 描述',
children: [],
},
],
},
{
field: 'a-1-2',
title: '自定义节点 a-1-2',
description: 'a-1-2 描述',
children: [],
},
],
},
{
field: 'a-2',
title: '自定义节点 a-2',
description: 'a-2 描述',
children: [],
},
],

我不知道是哪个地方出问题了，链接中复现不出来，但是可以在 React自适应 图表实例中显示出来，效果和代码如下

// organize-imports-ignore
import React from 'react';
import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';

fetch(
'https://gw.alipayobjects.com/os/bmw-prod/2a5dbbc8-d0a7-4d02-b7c9-34f6ca63cff6.json',
)
.then((res) => res.json())
.then((dataCfg) => {

const data = [
{
'measure-1': 13,
'measure-2': 2,
type: '家具',
sub_type: '桌子',
},
{
'measure-1': 11,
'measure-2': 8,
type: '家具',
sub_type: '椅子',
},
{
'measure-1': 21,
'measure-2': 16,
type: '家具',
sub_type: '茶几',
},
];

const s2DataConfig: S2DataConfig = {
fields: {
columns: [
{
field: 'a-1',
title: '自定义节点 a-1',
description: 'a-1 描述',
children: [
{
field: 'a-1-1',
title: '自定义节点 a-1-1',
description: 'a-1-1 描述',
children: [
{
field: 'measure-1',
title: '指标 1',
description: '指标 1 描述',
children: [],
},
{
field: 'measure-2',
title: '指标 2',
description: '指标 2 描述',
children: [],
},
],
},
{
field: 'a-1-2',
title: '自定义节点 a-1-2',
description: 'a-1-2 描述',
children: [],
},
],
},
{
field: 'a-2',
title: '自定义节点 a-2',
description: 'a-2 描述',
children: [],
},
],
rows: ['type', 'sub_type'],
values: ['measure-1', 'measure-2'],
valueInCols: true,
},
data,
// 自定义节点默认使用 title 作为展示名, 也可以通过 meta 来统一进行格式化
meta: [
{
field: 'type',
formatter: (value) => '商品类别',
},
{
field: 'sub_type',
formatter: (value) => '商品子类别',
},
{
field: 'a-1',
name: '角头1',
},
{
field: 'a-1-1',
name: '角头2',
},
// 自定义格式化数值
// {
// field: 'measure-1',
// formatter: (value, record, meta) => 指标: ${value},
// },
],
};

const s2Options: S2Options = {
width: 600,
height: 480,
hierarchyType: 'grid',
};
reactDOMClient.createRoot(document.getElementById('container')).render(
<SheetComponent
dataCfg={s2DataConfig}
options={s2Options}
adaptive={{
width: true,
height: false,
getContainer: () => document.getElementById('container'),
}}
/>,
);
});

我的预期效果是在以上的透视表代码中实现 一级列和二级列的排序效果，

⌨ Code Snapshots

🔗 Reproduce Link

🤔 Steps to Reproduce

😊 Expected Behavior

😅 Current Behavior

💻 System information

Environment	Info
System
Browser

[lijinke666]

目前自定义行列头不支持排序

二级列头会显示排序的图标，点击排序可以打开tooltip框，但是点击行内排序没有效果

这个排序图标不应该渲染出来, 是 BUG

[dyllike3892654]

那以后会实现列头加上排序的功能吗，可以给加上吗？ ♂糖的哀伤♀ ***@***.*** &nbsp;

…

------------------&nbsp;原始邮件&nbsp;------------------ 发件人: "antvis/S2" ***@***.***&gt;; 发送时间:&nbsp;2024年9月19日(星期四) 中午11:47 ***@***.***&gt;; ***@***.******@***.***&gt;; 主题:&nbsp;Re: [antvis/S2] 🐛透视表：自定义列头；合并的列头不显示排序图标，二级有排序图标但是没有排序效果 (Issue #2898) 目前自定义行列头不支持排序 二级列头会显示排序的图标，点击排序可以打开tooltip框，但是点击行内排序没有效果 这个排序图标不应该渲染出来, 是 BUG — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.Message ID: ***@***.***&gt;