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. 更多应用

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

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 平铺模式

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

1.3.2 树状模式

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. 更多应用

一些限制

注意

数据结构

CustomTreeNode

CustomHeaderField

1. 透视表

1.1 自定义行头

提示

平铺模式

树状模式

节点展开/收起

1.2 自定义列头

提示

平铺模式

树状模式

1.3 自定义角头文本

1.3.1 平铺模式

1.3.2 树状模式

2. 明细表

2.1 自定义列头

提示

3. 行列头文本格式化

4. 更多应用