By default, S2 will display the default intra-group sorting operation icon at the index row header (indicator hanging row header) or column header (indicator hanging column header), as shown in the following figure:

But in many cases, you will need to display other action icon , such as: filter, drill down, etc. S2 provides the headerActionIcons parameter so that you can quickly customize the action icon of the row header, column header, and corner header through simple configuration items.

const s2Options = {
  headerActionIcons: [
    {
      icons: ['SortDown'],
      belongsCell: 'colCell',
    },
  ],
}

1. If the built-in icon is not satisfied, you can configure customSVGIcons parameter to additionally register your own icon . The custom icon is also applicable to the theme configuration , which means that you can also adjust its size and color. For details, please refer to the theme configuration chapter.

const s2Options = {
  customSVGIcons: [
    {
      name: 'Filter',
      src: 'https://gw.alipayobjects.com/zos/antfincdn/gu1Fsz3fw0/filter%26sort_filter.svg',
    },
  ],
}

Or override the default icon , such as a custom tree form to collapse and expand the icon

const s2Options = {
  customSVGIcons: [
    {
      name: 'Plus',
      src: 'https://gw.alipayobjects.com/zos/antfincdn/kXgP1pnClS/plus.svg',
    },
    {
      name: 'Minus',
      src: 'https://gw.alipayobjects.com/zos/antfincdn/2aWYZ7%26rQF/minus-circle.svg',
    },
  ],
}

S2 currently has a list of built-in icons:

icon name	icon icon	Functional description	icon name	icon icon	Functional description
Cell Down		YoY decline	ExpandColIcon		Schedule HideExpand
CellUp		YoY rise	Plus		tree form expansion
GlobalAsc		global ascending	Minus		Tree form collapsed
GlobalDesc		global descending	SortDown		Schedule descending
GroupAsc		ascending order within group	SortDownSelected		Schedule descending selection status
GroupDesc		descending order within group	SortUp		Schedule Ascending
trend		Trend	SortUpSelected		Schedule ascending selection status
ArrowUp		indicator rises	ArrowDown		indicators drop
DrillDownIcon		drill down

​

2. Configure headerActionIcons parameter ​ ⚠️ Note: To register a custom row and column header action icon, you need to set the showDefaultHeaderActionIcon of options to false first, otherwise the sorting icon displayed in the indicator column header by default will not disappear

configuration parameters

HeaderActionIcon

optional object

Function description: Register a custom operation icon for the row, column, and corner headers of the table.

​

HeaderActionIconProps

required object

Function description: After clicking the custom operation icon, the pivot table returns information related to the current icon

CustomSVGIcon

optional object

Function description: used for users to register their own icons, currently only supports svg format

Custom row and column header icon example

Custom cell icon example

For details on cell marking, see the field marking chapter

const s2Options = {
  customSVGIcons: [
    {
      name: 'Filter',
      src: 'https://gw.alipayobjects.com/zos/antfincdn/gu1Fsz3fw0/filter%26sort_filter.svg',
    },
  ],
  conditions: {
    icon: [
      {
        field: 'number',
        mapping(fieldValue, data) {
          return {
            // 使用自定义 icon 名称
            icon: 'Filter',
            fill: '#30BF78',
          };
        },
      },
    ],
  },
}