logo

S2

  • Manual
  • API
  • Examples
  • Playground
  • ChangeLog
  • Productsantv logo arrow
  • 2.x
  • Common Configuration
    • S2DataConfig
    • S2Options
      Updated
    • S2Theme
      Updated
    • S2Event
  • Basic Class
    • SpreadSheet
    • Interaction
      Updated
    • Store
    • BaseCell
      Updated
    • BaseDataSet
    • Node
    • BaseTooltip
    • BaseFacet
      Updated
    • Hierarchy
      New
    • BaseBBox
      New
    • CellData
      New
  • Components
    • table component
    • DrillDown
    • Switcher
    • Advanced Sort
    • Export
      Updated
  • Graphic style
  • 透视组合图拓展 S2Options

S2Options

Previous
S2DataConfig
Next
S2Theme

Resources

Ant Design
Galacea Effects
Umi-React Application Framework
Dumi-Component doc generator
ahooks-React Hooks Library

Community

Ant Financial Experience Tech
seeconfSEE Conf-Experience Tech Conference

Help

GitHub
StackOverflow

more productsMore Productions

Ant DesignAnt Design-Enterprise UI design language
yuqueYuque-Knowledge creation and Sharing tool
EggEgg-Enterprise-class Node development framework
kitchenKitchen-Sketch Tool set
GalaceanGalacean-互动图形解决方案
xtechLiven Experience technology
© Copyright 2025 Ant Group Co., Ltd..备案号:京ICP备15032932号-38

Loading...

Form parameter configuration

const s2Options = {
width: 600,
height: 400,
hierarchyType: 'grid'
}
parametertyperequiredDefaultsFunctional description
widthnumber600table width
heightnumber480form height
debugbooleanfalseWhether to enable debug mode
hierarchyTypegrid | tree | customTreegridThe display method of line headers, grid: tiled grid structure, tree: tree structure. customTree: custom tree structure
conditionsConditionsConditional Mode Configuration
totalsTotalsSubtotal Total Configuration
tooltipTooltipstooltip configuration
interactionInteractionForm interaction configuration
paginationPaginationpaging configuration
frozenFrozenColumn Header Freezing Configuration
seriesNumberSeriesNumberWhether to display the series number
showDefaultHeaderActionIconbooleantrueWhether to display the default row and column header operation icons
headerActionIconsHeaderActionIcon[]falseCustomize row and column header action icons (need to set showDefaultHeaderActionIcon to false )
customSVGIconsCustomSVGIcon[]falseCustom svg icons
stylestyleCell style settings, such as layout type, width and height, margin, whether to hide the value column header, etc.
hdbooleantrueWhether to enable high-definition screen adaptation to solve the problem of blurred font rendering on high-definition retina screens when switching between multiple screens. see more
mergedCellsInfoMergedCellInfo[][]Merge cell information
placeholderstring | (meta: Record<string, any>) => stringfill content for empty cells
cornerTextstringCustom corner header text (valid when custom tree hierarchyType: customTree )
cornerExtraFieldTextstringCustomize the text of the virtual value field of the corner header (valid when the value is linked to the line header, replace the two words "value")
dataCellDataCellCallbackcustom cell
cornerCellCell CallbackCustom cornerCell
rowCellCell CallbackCustom header cell
colCellCell CallbackCustom column header cell
cornerHeaderCornerHeaderCallbackcustom angle head
layout HierarchyLayout Hierarchycustom hierarchy
layoutArrangeLayoutArrangecustom sort order
layoutCoordinatelayoutCoordinatecustom coordinates
layoutDataPositionlayoutDataPositioncustom data
filterDisplayDataItemFilterDataItemCallbackfilter data
mappingDisplayDataItemMappingDataItemCallbackConvert data for tooltip display
dataSetDataSetcustom data set
supportsCSSTransformbooleanfalseAfter enabling it, CSS transform is supported, which solves the problem that the mouse coordinates respond incorrectly after the parent element is set to transform
devicePixelRationumberwindow.devicePixelRatioCustom Device Pixel Ratio

SeriesNumber

Function description: SeriesNumber configuration

parameterillustratetypeDefaultsrequired
enableWhether to display the series numberbooleanfalse
textcustom series number header cell textstring-

Frozen

Function description: Row and column header freeze configuration

parametertyperequiredDefaultsFunctional description
rowHeaderbooleantrueWhen the value is number, it identifies the maximum area where the line header is frozen, and the range of values ​​is (0, 1). 0 means that the line header is not frozen.
When the value is boolean, true corresponds to freezing the maximum area is 0.5, false corresponds to 0.
(only pivot mode works)
rowCountnumber0The number of frozen rows, counting from the top (schedules are valid)
colCountnumber0The number of frozen columns, counting from the left (schedules are valid)
trailingRowCountnumber0Number of frozen rows, counting from the bottom (valid for schedules)
trailingColCountnumber0Number of frozen columns, counting from the right (schedules are valid)

Interaction

parameterillustratetypeDefaultsrequired
linkFieldsThe mark field is a link style, which is used for external link jumpsstring[] | (meta: Node | ViewMeta) => boolean
selectedCellsSpotlightWhether to enable the selected highlight spotlight effectbooleanfalse
hoverHighlightHighlight the current cell, and the corresponding row and column headers when the mouse hoversbooleantrue
hoverFocusAfter the mouse hovers over the current cell for more than the default 800ms, it will keep the current highlight and display the tooltip. The hovering time is controlled by setting the duration`boolean\{duration: number}`true
hiddenColumnFieldsIt is used to configure the columns that are hidden by default. The pivot table needs to configure the unique id of the column header, and the detail table can be configured with the field field of the column header.string[]
enableCopyWhether to allow copyingbooleanfalse
withHeaderWhether to copy data with header informationbooleanfalse
withFormatWhether to use the field format format to copybooleanfalse
customInteractionsCustomize interaction detailsCustomInteraction[]
scrollSpeedRatioUsed to control the scroll rate, divided into horizontal and vertical directions, the default is 1ScrollSpeedRatio
autoResetSheetStyleUsed to control whether to reset the interactive state when clicking the area outside the table and pressing the esc keybooleantrue
resizeUsed to control whether the resize hotspot is displayedboolean \ResizeInteractionOptionstrue
brushSelectionWhether to allow cells (including row headers, column headers, and value cells) to be selected. Row header, column header selection only supports pivot tablesboolean \Brush Selectiontrue
multiSelectionWhether to allow multiple selection (including row headers, column headers, and value cells)booleantrue
rangeSelectionWhether to allow quick multiple selection of intervalsbooleantrue
scrollbarPositionUsed to control whether the scroll bar is displayed on the edge of the content area or the edge of the canvas`content\canvas`content
eventListenerOptionsOptional configuration of the event listening function addEventListener , which can control whether the event is triggered from the bubbling phase or the capturing phasefalse
selectedCellHighlightHighlight behavior after grid is selected
rowHeader: Whether to highlight the row header where the selected grid is located
colHeader: Whether to highlight the column header where the selected grid is located
currentRow: Whether to highlight the row where the grid is located
currentCol: whether to highlight the column where the grid is located
true: Same as {rowHeader: true, colHeader: true}
`boolean{ rowHeader?: boolean, colHeader?: boolean, currentRow?: boolean, currentCol?: boolean }`
overscrollBehaviorControls the behavior of scrolling to bounds, which disables the browser's default scrolling behavior. detailsauto | contain | none | nullauto

CustomInteraction

Function description: custom interaction, inherit baseEvent: concrete example

parameterillustratetypeDefaultsrequired
keyunique identifier for the interactionstring✓
interactionInteraction Constructor✓

ScrollSpeedRatio

interface ScrollSpeedRatio {
horizontal?: number; // 水平滚动速率,默认为 1
vertical?: number; // 垂直滚动速率,默认为 1
}

ResizeInteractionOptions

parameterillustratetypeDefaultsrequired
rowCellVerticalWhether to open the line header vertical resize hot zonebooleantrue
cornerCellHorizontalWhether to enable the resize hotspot in the horizontal direction of the corner headbooleantrue
colCellHorizontalWhether to enable the horizontal resize hotspot of the column headerbooleantrue
colCellVerticalWhether to enable the column header vertical resize hot zone (this configuration is invalid when the column header is hidden)booleantrue
rowResizeTypeIt is used to control whether the row height resize will take effect for all Cells at the same time, or only for the current row. Applies to all rows by defaultall | currentall
disableIt is used to control whether the row height resize is effective or not. View example(resizeInfo: S2CellType ) => boolean
visibleCustomize whether the current cell displays the resize hotspot(cell: S2CellType ) => boolean

brushSelection

parameterillustratetypeDefaultsrequired
dataCellWhether to allow numerical cell selectionbooleantrue
rowCellWhether to allow row header cell selection (only supports pivot tables)booleanfalse
colCellWhether to allow column header cell selection (only supports pivot tables)booleanfalse

Conditions

Type: object , required , default value: {}

Function description: Configure field marking. Divided into text (text), background (background), histogram (interval), icon (icon).

parameterillustratetypeDefaultsrequired
texttext field tagCondition []-
backgroundbackground field tagCondition []-
intervalHistogram Field MarkersCondition []-
iconIcon Field MarkerIconCondition-

condition

Type: object , required

Function description: Configure conditional formatting. Including text (text), background (background), histogram (interval).

parameterillustratetypeDefaultsrequired
field1. Field ID
2. Use regular expressions to match field IDs
string | RegExp✓
mappingrole mapping function​function✓

MappingFunction

type MappingFunction = (
fieldValue: number | string | null,
data: Record<string, any>,
node: DataCell | HeaderCell
) => {
// 仅用于图标字段标记,可选
icon?: string;
// 背景 | 文本 | 柱状图 | 图标 字段标记颜色填充,必选
fill: string;
// 仅用于柱状图字段标记,可选
isCompare?: boolean;
minValue?: number;
maxValue?: number;
// 仅用于背景字段标记,可选。(当背景颜色较暗,将文本颜色设置为白色。优先级低于 文本字段标记)
intelligentReverseTextColor?: boolean;
} | null | undefined // 返回值为空时,表示当前字段不显示字段标记样式

Example usage of condition:

const options = {
conditions: {
text: [
{
field: "province",
mapping: () => ({
fill: "rgba(0, 0, 0, .65)",
}),
},
],
interval: [
{
field: "sub_type",
mapping: () => {
return {
fill: "green",
};
},
},
],
background: [
{
field: "count",
mapping: () => ({
fill: "#ff00ff",
}),
},
],
},
};

IconCondition

Type: object , required , default value: null

Function description: Configure icon (icon) conditional formatting.

parameterillustratetypeDefaultsrequired
fieldField IDstring✓
positionThe position of the icon relative to the textleft | rightright
mappingmapping functionMappingFunction✓

Example of icon condition usage:

const options = {
conditions: {
icon: [
{
field: "profit",
position: "left",
mapping: () => {
return {
icon: "InfoCircle",
fill: "red",
};
},
},
],
},
};

Totals

object is required , default: null Function description: subtotal total configuration

parameterillustratetyperequiredDefaults
rowrow totalTotal
colcolumn totalTotal

Total

object is required , default: null Function description: subtotal total configuration

parameterillustratetypeDefaultsrequired
showGrandTotalsWhether to display the totalbooleanfalse
showSubTotalsWhether to display subtotals. When configured as an object, always controls whether to always display subtotals when there are less than 2 subdimensions, and does not display by defaultboolean | { always: boolean }false
subTotalsDimensionsSummary Dimensions for Subtotalsstring[][]
reverseGrandTotalsLayouttotal layout position, default bottom or rightbooleanfalse
reverseSubTotalsLayoutSubtotal layout position, default bottom or rightbooleanfalse
labeltotal aliasstring
subLabelsubtotal aliasstring
calcGrandTotalsCustom Calculated TotalsCalcTotals
calcSubTotalsCustom Calculated SubtotalsCalcTotals

CalcTotals

object optional , default: null Function description: calculate subtotal total configuration

parameterillustratetyperequiredDefaults
aggregationaggregation methodAggregation.SUM | Aggregation.MIN | Aggregation.MAX | Aggregation.AVG | Aggregation.COUNT
calcFunccustom method(query: Record<string, any>, arr: Record<string, any>[]) => number

Tooltips

object optional , default: null function description: tooltip configuration

parameterillustratetypeDefaultsrequired
showTooltipWhether to display tooltipbooleantrue
operationtooltip operation configuration itemTooltip Operation-
rowCellRow header cell configurationBaseTooltipConfig-
colCellColumn header cell configurationBaseTooltipConfig-
dataCellValue cell configurationBaseTooltipConfig-
cornerCellCorner cell configurationBaseTooltipConfig-
renderTo customize the entire tooltip, you can inherit BaseTooltip and rewrite some methods yourselfRenderTooltip-
contentCustomize tooltip contentReactNode | Element | string or (cell, defaultTooltipShowOptions) => ReactNode | Element | string-
autoAdjustBoundaryAutomatically adjust the display position when the tooltip exceeds the boundary, container: the chart area, body: the entire browser window, set to null to disable this functioncontainer | bodybody
adjustPositionCustomize tooltip position,(positionInfo: TooltipPositionInfo ) => {x: number, y: number}
getContainerCustomize the tooltip to mount the container,() => HTMLElementdocument.body
classNameadditional container class names,string-
styleadditional container styles,CSSProperties-

BaseTooltipConfig

object optional , default: null Function description: tooltip basic common configuration

parameterillustratetypeDefaultsrequired
showTooltipWhether to display tooltipbooleanfalse
operationtooltip operation configuration itemTooltip Operation-
contentCustomize tooltip contentReactNode | Element | string | or (cell, defaultTooltipShowOptions) => ReactNode | Element | string-

TooltipPositionInfo

object optional , default: null Function description: tooltip coordinate information

parameterillustratetypeDefaultsrequired
positionThe default tooltip position coordinate after calculation (default offset + autoAdjustBoundary)TooltipPosition✓
eventCurrent click event informationevent✓

Tooltip Operation

object optional , default: null function description: tooltip operation configuration item

parameterillustratetypeDefaultsrequired
hiddenColumnsWhether to enable hidden columns (leaf nodes are valid)booleanfalse
sortWhether to enable sorting within the groupbooleanfalse
tableSortWhether to enable sorting of list column headersbooleanfalse
menusCustom Action Configuration ItemsTooltipOperatorMenu[]-
onClickAction item click callback function({ item, key, keyPath, domEvent }) => void-

TooltipShowOptions

object is required , default: null Function description: tooltip display configuration

parametertyperequiredDefaultsFunctional description
positionTooltipPosition✓tooltip display location
dataTooltipDatatooltip data
cellInfosRecord<string, any>cell information
optionsTooltipOptionsTooltip part configuration
contentReactNode | string | or (cell, defaultTooltipShowOptions: TooltipShowOptions) => ReactNode | stringCustomize tooltip content
eventEventCurrent event Event

TooltipPosition

object is required , default: null Function description: tooltip coordinates

parametertyperequiredDefaultsFunctional description
xnumber✓Abscissa
the ynumber✓Y-axis

TooltipData

object optional , default: null function description: tooltip data

parametertyperequiredDefaultsFunctional description
summariesTooltipSummaryOptionsList of selected item statistics (differentiated by measure value)
detailsListItemData Point Details
headInfoTooltipHeadInfolist of axes (row/column headers)
namestringcurrent cell name
tipsstringTips/Instructions
infosstringPrompt information at the bottom (can be used for shortcut key operation prompts)

TooltipSummaryOptions

object is optional , default: null Function description: tooltip List of selected item statistics (differentiated by measurement value)

parametertyperequiredDefaultsFunctional description
namestring✓name
valuenumber | string✓value
selectedDataRecord<string, any>✓currently selected data list

TooltipHeadInfo

object optional , default: null function description: tooltip axis (row/column header) list

parametertyperequiredDefaultsFunctional description
rowsListItem✓List of outfits
colsListItem✓header list

ListItem

object optional , default: null function description: tooltip data point detail data

parametertyperequiredDefaultsFunctional description
namestring✓name
valuestring | number✓value
iconReactNodecustom icon component

TooltipOptions

object is required , default: null Function description: tooltip partial configuration

parametertyperequiredDefaultsFunctional description
hideSummarybooleanfalseWhether to hide selected item statistics
operatorTooltipOperatorOptionsAction Bar Configuration
onlyShowOperatorbooleanfalseWhether tooltip only shows action menu items
isTotalsbooleanfalseIs it a total/subtotal cell
onlyShowCellTextbooleanfalseWhether to display cell prompt information
enableFormatbooleanfalseWhether to enable formatting
forceRenderbooleanfalseWhether to force the dom to be cleared

TooltipOperatorOptions

object optional , default: null Function description: tooltip operation bar configuration

parametertyperequiredDefaultsFunctional description
menusTooltipOperatorMenu[]action item list
onClick({ item, key, keyPath, domEvent }) => voidClick event, transparently transmit onClick of antd Menu component
selectedKeysstring[]Initially selected menu item key array, transparently transmit the selectedKeys of the antd Menu component
TooltipOperatorMenu

object is required , default: null Function description: tooltip list of operation items

parametertyperequiredDefaultsFunctional description
keystring✓Uniquely identifies
textReactNode | stringname
iconReactNode | stringcustom icon
visibleboolean | (cell) => booleantrueWhether the operation item is displayed, you can pass in a function to dynamically display it according to the current cell information
onClick( cell : S2CellType : ) => voidClick event callback (cell is the cell corresponding to the current tooltip)
childrenTooltipOperatorMenusubmenu list

Pagination

boolean | object required , default: null Function description: Paging configuration

parameterillustratetypeDefaultsrequired
pageSizeQuantity per pagenumber-✓
currentcurrent page (starting from 1)number1✓
totalTotal number of datanumber-

style

object is required , default: null Function description: style setting

parametertyperequiredDefaultsFunctional description
layoutWidthTypeadaptive | colAdaptive | compactCell Width Layout Type
adaptive : Rows and columns are equal in width, equally dividing the entire Canvas canvas width
colAdaptive : Equal width of columns, compact layout of line headers, the remaining width of the column equally divided canvas width minus the width of line headers
compact : compact row and column layout, when the indicator dimension is small, it cannot cover the entire canvas
dataCellDataCellValue cell configuration
colCellColCellColumn header cell configuration
rowCellRowCellRow header cell configuration

DataCell

object is required , default: null Function description: Numerical cell configuration

parameterillustratetypeDefaultsrequired
widthcell widthnumber96-
heightcell heightnumber30-
valuesCfgcell configuration{ originalValueField?: string, widthPercent?: number[], showOriginalValue?: boolean }-

ColCell

object is required , default: null Function description: Column header cell configuration

parameterillustratetypeDefaultsrequired
widthCell width, which can be dynamically set according to the current column header node (leaf nodes are valid)number | (colNode: Node) => number96
heightCell height, which can be dynamically set according to the current column header node (leaf nodes are valid)number | (colNode: Node) => number30
widthByFieldSet the width according to the measurement value (drag or preset width scene), field corresponds to the field or column header id in s2DataConfig.fields.columns , see detailsRecord<string, number>-
heightByFieldSet the height according to the measurement value (drag or preset height scene), the field corresponds to the field or column header id in s2DataConfig.fields.columns , see detailsRecord<string, number>-
hideValueThe default value hangs the column header, which will display the column header and the value at the same time, and hide the value to make it more beautiful. (that is, s2DataConfig.fields.values and it is only valid for a single value, and it is recommended to use hidden column headers for multiple values)booleanfalse

RowCell

object is required , default: null Function description: row header cell configuration

parameterillustratetypeDefaultsrequired
widthThe row cell width can be dynamically set according to the current row header node, and the tree structure is also applicablenumber | (rowNode: Node) => numberTiles: 96 , Trees: 120
heightRow cell height, which can be dynamically set according to the current row header nodenumber | (rowNode: Node) => number30
collapseFieldsCustom folded nodes for row headers in tree mode.
Supports two formats: id ( 'root[&] 行头维度值' ) and dimension field ( 'city' ). The priority is higher than collapseAll and expandDepth , and the priority is the lowest when it is set to null . view demo
Record<string, boolean>
collapseAllWhether to collapse all line headers by default in tree structure mode.booleanfalse
expandDepthIn the tree structure mode, the row header expands the expanded level by default (the level starts from 0), and when it is set to null , the priority is the lowestnumber
showTreeLeafNodeAlignDotIn the tree mode, whether the row header leaf nodes display the hierarchical placeholdersbooleanfalse
withByFieldSet the width of each line according to field . field corresponds to the field or column header id in s2DataConfig.fields.rows , see detailsRecord<string, number>-
heightByFieldSet the height of each row according to field .
1. Pivot table: field corresponds to field or column header id in s2DataConfig.fields.rows .
2. Detailed table: field corresponds to the row number, starting from 1 . check the details
Record<string, number>-

DataCellCallback

DataCellCallback = (viewMeta: ViewMeta, s2: Spreadsheet) => G.Group;

Function description: custom value cell, ViewMeta

ViewMeta

object is required, default: {} function description: information such as cell data and position

parametertyperequiredDefaultsFunctional description
spreadsheetSpreadSheetTable class instance, which can access any configuration information
idstringcell unique identifier
xnumbercell x-coordinate
the ynumbercell y coordinate
widthnumbercell width
heightnumbercell height
dataRecord<string, any>Cell Raw Data Metrics
rowIndexnumberThe index of the cell in the row leaf node
colIndexnumberThe index of the cell in the column leaf node
valueFieldstringmetric-id
fieldValueDataItemThe true value of the metric display
isTotalsbooleanWhether it is a total: true is a total, false is a subtotal
rowQueryRecord<string, any>Row query condition
colQueryRecord<string, any>Column query condition
rowIdstringthe row id of the cell
colIdstringthe column id of the cell

Cell Callback

CellCallback = (node: Node, spreadsheet: SpreadSheet, ...restOptions: unknown[]) => G.Group;

Function description: custom cell

parameterillustratetypeDefaultsrequired
nodeThe currently rendered node nodenode-✓
spreadsheetTable class instance, which can access any configuration informationSpreadSheet-✓
restOptionsIndeterminate parameters, pass additional informationunknown[]-

CornerHeaderCallback

CornerHeaderCallback = (parent: S2CellType, spreadsheet: SpreadSheet, ...restOptions: unknown[]) => void;

Function description: custom corner head

parameterillustratetypeDefaultsrequired
parentsparent cellS2CellType-✓
spreadsheetTable class instance, which can access any configuration informationSpreadSheet-✓
restOptionsIndeterminate parameters, pass additional informationunknown[]-

Layout Hierarchy

LayoutHierarchy = (spreadsheet: SpreadSheet, node: Node) => LayoutHierarchyReturnType;

Function description: custom hierarchical structure

parametertyperequiredDefaultsFunctional description
spreadsheetSpreadSheet✓Table class instance, which can access any configuration information
nodenode✓The currently rendered node node
interface LayoutHierarchyReturnType {
push?: Node[];
unshift?: Node[];
delete?: boolean;
}

LayoutArrange

LayoutArrange = (spreadsheet: SpreadSheet, parent: Node, field: string, fieldValues: string[]) => string[];

Function description: custom order

parametertyperequiredDefaultsFunctional description
spreadsheetSpreadSheet✓Table class instance, which can access any configuration information
nodenode✓The currently rendered node node
fieldstring✓current field name
fieldValuesstring[]✓current field value

LayoutCoordinate

LayoutCoordinate = (spreadsheet: SpreadSheet, rowNode: Node, colNode: Node) => void

Function description: custom coordinates

parametertyperequiredDefaultsFunctional description
spreadsheetSpreadSheet✓Table class instance, which can access any configuration information
rowNodenode✓row node
colNodenode✓column node

LayoutCellMeta

LayoutCellMeta = (spreadsheet: SpreadSheet, getCellData: GetCellMeta) => GetCellMeta

Function description: custom data

parametertyperequiredDefaultsFunctional description
spreadsheetSpreadSheet✓Table class instance, which can access any configuration information
getCellDataGetCellMeta✓Get information such as cell data and position
type GetCellMeta = (rowIndex?: number, colIndex?: number) => ViewMeta;

HeaderActionIcon

Function description: Register a custom operation icon for the row, column, and corner headers of the table. If the configuration bit is empty, the default action icon of the pivot table will be displayed.

parametertyperequiredDefaultsFunctional descriptionVersion
iconNamesstring[]✓The name of the registered icon, or the name of the icon registered by the user through customSVGIcons
belongs to Cellstring[]✓The cell names that need to add operation icons cornerCell, colCell, rowCell
defaultHideboolean | (mete: Node, iconName: string) => booleanWhether to hide by default, if it is true, it will be displayed after hover; if false, it will always be displayed1.26.0 supports configuration as a function
displayCondition(mete: Node, iconName: string) => booleanDisplay filter conditions, user-defined which levels or cells need to display icons through this callback function. All icons that return true will be shown to the user.1.26.0 returns the iconName and presses a single icon to control the display and hiding
onClick(headerIconClickParams: HeaderIconClickParams) => void;✓1.26.0
onHover(headerIconHoverParams: HeaderIconHoverParams) => void;1.26.0

HeaderActionIconProps

Function description: After clicking the custom operation icon, the current icon returned by the pivot table is related

parameterillustratetypeDefaultsrequired
iconNameThe name of the currently clicked iconstring-✓
metaThe meta information of the current cellnode-✓
eventCurrent click event informationeventfalse✓

CustomSVGIcon

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

parametertyperequiredDefaultsFunctional description
namestring✓icon name
svgstring✓Currently supports svg strings in three formats: base64, svg local files, online image URLs

DataItem

Function description: basic data format

export interface MultiData {
label?: string;
values: SimpleData[][];
originalValues?: SimpleData[][]
}
export type SimpleData = string | number;
export type DataItem = SimpleDataItem | MultiData;

LayoutResult

parameterillustratetypeDefaultsrequired
colNodesall nodes in the columnNode[]
cols Hierarchycolumn structure informationHierarchy
rowNodesall nodes of the rowNode[]
rows Hierarchyrow structure informationHierarchy✓
rowLeafNodesAll leaf nodes of the row, for Cartesian intersectionNode[]
colLeafNodesAll leaf nodes of the column, for Cartesian intersectionNode[]
getViewMetaObtain the information corresponding to the coordinates of [x,y] crossed out(rowIndex: number, colIndex: number) => ViewMeta
spreadsheetTable class instance, which can access any configuration informationSpreadSheet

DataSet

DataSet = (spreadsheet: SpreadSheet) => BaseDataSet;

MergedCellInfo

Function description: set the default merged cell information

parameterillustratetypeDefaultsrequired
colIndexthe column index of the cellnumber-
rowIndexthe row index of the cellnumber-
showTextshowText: true is set, the meta information of the current grid is displayed as the meta of the merged cell.
By default, the first clicked cell is selected.
booelan-