S2

S2 默认提供平铺模式 (grid) 和树状模式 (tree) 两种行头单元格布局方式。

默认通过分组之后得到的数据生成层级结构, 如果都不满足，还可以通过自定义行列头，来定制你的目录结构，同样兼容平铺和树状这两种布局方式。

一些限制

注意

默认的排序 icon showDefaultHeaderActionIcon 无效。
自定义行头时，不支持配置行头小计总计；自定义列头时，不支持配置列头小计总计。

数据结构

CustomTreeNode

功能描述：自定义树状结构的配置，适用于透视表和明细表的自定义行列头。查看文档和示例

参数	说明	类型	默认值	必选
field	当前节点唯一标识	`string`		✓
title	当前节点展示名	`string`		✓
collapsed	节点是否收起（树状模式下，行头非叶子节点有效）	`boolean`	`false`
description	节点的额外描述信息，在对应行头的 tooltip 中展示	`string`
children	子节点	CustomTreeNode[]

CustomHeaderField

type CustomHeaderField = CustomTreeNode | string;

const customTree = [
  {
    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: [],
  },
];

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

1. 透视表

1.1 自定义行头

提示

rows 配置为自定义 tree 结构
数值需要置于行头，即 valueInCols: false （无论配置与否都会强制置于行头，修改无效）

const s2DataConfig = {
  fields: {
    rows: customTree,
    columns: ['type', 'sub_type'],
    values: ['measure-1', 'measure-2'],
    valueInCols: false,
  },
  data,
};

平铺模式

查看示例

const s2Options = {
  hierarchyType: 'grid'
};

树状模式

查看示例

const s2Options = {
  hierarchyType: 'tree'
};

节点展开/收起

树状模式下默认使用 customTreeNode.collapsed 作为展开/收起状态，也可以使用通用的配置，具体请查看自定义折叠/展开节点章节

const s2Options = {
  style: {
    rowCell: {
      collapseFields: {
        'custom-node-1': true,
        'custom-node-2': false,
      },
    },
  },
}

1.2 自定义列头

提示

columns 配置为自定义 tree 结构
数值需要置于列头，即 valueInCols: true （无论配置与否都会强制置于列头，修改无效）

const s2DataConfig = {
  fields: {
    columns: customTree,
    rows: ['type', 'sub_type'],
    values: ['measure-1', 'measure-2'],
    valueInCols: true,
  },
  data,
};

平铺模式

查看示例

const s2Options = {
  hierarchyType: 'grid'
};

树状模式

const s2Options = {
  hierarchyType: 'tree'
};

1.3 自定义角头文本

1.3.1 平铺模式

对于平铺模式，角头显示的文本默认对应行头每一列的第一个单元格，可以和普通字段一样，配置 meta 来对单元格文本进行格式化，此时 field 对应 CustomTreeNode 的 field 值

const meta = [
  {
    field: 'a-1',
    name: '层级 1',
  },
  {
    field: 'a-1-1',
    name: '层级 2',
  },
  {
    field: 'measure-1',
    name: '层级 3',
  }
]

1.3.2 树状模式

对于树状模式，角头默认显示的文本对应所有的一级节点和数值，可以和普通字段一样，配置 meta 来对单元格文本进行格式化，也可以配置 s2Options.cornerText 来自定义角头文本

const meta = [
  {
    field: 'a-1',
    name: '层级 1',
  },
  {
    field: 'a-2',
    name: '层级 2',
  },
]

const s2Options = {
  cornerText: '自定义角头标题'
}

2. 明细表

2.1 自定义列头

提示

columns 配置为自定义 tree 结构

const s2DataConfig = {
  fields: {
    columns: customTree
  },
  data,
};

查看示例

3. 行列头文本格式化

自定义节点默认使用 当前节点展示名, 即 CustomTreeNode.title, 也可以使用通用的 Meta 来进行格式化，查看更多

const s2DataConfig: S2DataConfig = {
  meta: [
    {
      field: 'a-1',
      formatter: (value) => '名称 1'
    },
    {
      field: 'a-1-1',
      formatter: (value) => '名称 2'
    },
  ],
};

4. 更多应用

基于自定义行列头，我们可以衍生出更多的使用场景，比如基于 自定义行头 + 树状模式, 我们可以自定义出一个趋势分析表分析组件.

自定义行列头分组

一些限制

注意

数据结构

CustomTreeNode

CustomHeaderField

1. 透视表

1.1 自定义行头

提示

平铺模式

树状模式

节点展开/收起

1.2 自定义列头

提示

平铺模式

树状模式

1.3 自定义角头文本

1.3.1 平铺模式

1.3.2 树状模式

2. 明细表

2.1 自定义列头

提示

3. 行列头文本格式化

4. 更多应用