S2

By default, S2 provides two row header layout modes : tile mode (grid) and tree mode (tree) .

By default , the hierarchical structure is generated through the data obtained after crossing . If you are not satisfied, you can customize your directory structure by customizing the row and column headers. These two layout methods are also supported.

data structure

markdown:docs/common/custom/customTreeNode.en.md

const customTree: CustomTreeNode[] = [
  {
    key: 'a-1',
    title: '自定义节点 a-1',
    description: 'a-1 描述',
    children: [
      {
        key: 'a-1-1',
        title: '自定义节点 a-1-1',
        description: 'a-1-1 描述',
        children: [
          {
            key: 'measure-1',
            title: '指标 1',
            description: '指标 1 描述',
            children: [],
          },
          {
            key: 'measure-2',
            title: '指标 2',
            description: '指标 2 描述',
            children: [],
          },
        ],
      },
      {
        key: 'a-1-2',
        title: '自定义节点 a-1-2',
        description: 'a-1-2 描述',
        children: [],
      },
    ],
  },
  {
    key: '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: '椅子',
  },
]

custom outfit

view example

rows are configured as a custom tree structure
The value needs to be placed at the head of the line, that is, valueInCols: false (regardless of whether it is configured or not, it will be forced to be placed at the head of the line, and the modification is invalid)

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

tile mode

const s2Options = {
  hierarchyType: 'grid',
};

tree mode

const s2Options = {
  hierarchyType: 'tree',
};

custom header

view example

columns are configured as a custom tree structure
The value needs to be placed at the head of the column, that is, valueInCols: true (regardless of whether it is configured or not, it will be forced to be placed at the head of the column, and the modification is invalid)

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

tile mode

const s2Options = {
  hierarchyType: 'grid',
};

tree mode

const s2Options = {
  hierarchyType: 'tree',
};

Custom header text

tile mode

For the tiling mode, the corner header corresponds to the first cell of each column of the row header. Like ordinary fields, you can configure meta to format the cell text. At this time, the field corresponds to the key value of CustomTreeNode

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

tree mode

For the tree mode, the corner headers correspond to all first-level nodes and values . You can configure meta to format the cell text just like ordinary fields, or you can configure s2Options.cornerText to customize the corner header text

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

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

more applications

Based on custom row and column headers, we can derive more usage scenarios, such as based on自定义行头+树状模式, we can customize a trend analysis table analysis component .

Customize Tree

data structure

custom outfit

tile mode

tree mode

custom header

tile mode

tree mode

Custom header text

tile mode

tree mode

more applications