logo

S2

  • 使用文档
  • API 文档
  • 图表示例
  • 在线体验
  • 更新日志
  • 所有产品antv logo arrow
  • 2.x
  • 基础配置项
    • S2DataConfig
    • S2Options
      Updated
    • S2Theme
      Updated
    • S2Event
      Updated
  • 基础类
    • SpreadSheet
      Updated
    • Interaction
      Updated
    • Store
    • BaseCell
      Updated
    • BaseDataSet
      Updated
    • Node
    • BaseTooltip
    • BaseFacet
      Updated
    • Hierarchy
      New
    • BaseBBox
      New
    • CellData
      New
  • 分析组件
    • 表组件
      Updated
    • 维度下钻
      Updated
    • 维度切换组件
      Updated
    • 高级排序
      Updated
    • 导出
      Updated
  • 绘图属性
  • 透视组合图拓展 S2Options

S2Options

上一篇
S2DataConfig
下一篇
S2Theme

Resources

Ant Design
Galacea Effects
Umi-React 应用开发框架
Dumi-组件/文档研发工具
ahooks-React Hooks 库

社区

体验科技专栏
seeconfSEE Conf-蚂蚁体验科技大会

帮助

GitHub
StackOverflow

more products更多产品

Ant DesignAnt Design-企业级 UI 设计语言
yuque语雀-知识创作与分享工具
EggEgg-企业级 Node 开发框架
kitchenKitchen-Sketch 工具集
GalaceanGalacean-互动图形解决方案
xtech蚂蚁体验科技
© Copyright 2025 Ant Group Co., Ltd..备案号:京ICP备15032932号-38

Loading...

表格参数配置

const s2Options = {
width: 600,
height: 400,
hierarchyType: 'grid'
}
参数类型必选默认值功能描述版本
widthnumber600表格宽度
heightnumber480表格高度
debugbooleanfalse是否开启调试模式
hierarchyType"grid" | "tree"grid行头的展示方式,grid:平铺网格结构, tree: 树状结构。 支持 自定义结构
conditionsConditions字段标记,条件格式配置
totalsTotals小计总计配置
tooltipTooltiptooltip 配置
interactionInteraction表格交互配置
paginationPagination分页配置
frozenFrozen行列头冻结配置
seriesNumberSeriesNumber序号列展示及自定义文字配置
showDefaultHeaderActionIconbooleantrue是否展示默认行列头操作图标
headerActionIconsHeaderActionIcon[]false自定义行列头操作图标(需要将 showDefaultHeaderActionIcon 置为 false)
customSVGIconsCustomSVGIcon[]false自定义 svg 图标
styleStyle单元格样式设置,比如布局类型,宽高,边距,是否隐藏数值列头等
hdbooleantrue是否开启高清屏适配,解决多屏切换,高清视网膜屏字体渲染模糊的问题。查看更多
mergedCellsInfoMergedCellInfo[][]合并单元格信息
placeholderstring | (meta: Record<string, any>) => string自定义单元格空数据占位符
cornerTextstring自定义角头文本 (仅在树状模式有效)
cornerExtraFieldTextstring数值自定义角头虚拟数值字段文本("数值挂行头"时有效)
dataCellDataCellCallback自定义单元格 cell
cornerCellCellCallback自定义 cornerCell
rowCellCellCallback自定义行头 cell
colCellCellCallback自定义列头 cell
mergedCellMergedCellCallback自定义合并单元格
frameFrameCallback自定义表格框架/边框
cornerHeaderCornerHeaderCallback自定义角头
layoutHierarchyLayoutHierarchy自定义层级结构
layoutArrangeLayoutArrange自定义排列顺序 (树状模式有效)
layoutCoordinatelayoutCoordinate自定义单元格节点坐标
layoutCellMetalayoutCellMeta自定义单元格元数据
layoutSeriesNumberNodesLayoutSeriesNumberNodes自定义序号节点
dataSetDataSet自定义数据集
facet(spreadsheet: SpreadSheet) => BaseFacet自定义分面
transformCanvasConfig(renderer: Renderer, spreadsheet: SpreadSheet) => Partial<CanvasConfig> | void-自定义 AntV/G 渲染引擎 配置参数 & 插件注册

Conditions

功能描述: 配置字段标记。分为文本 (text),背景 (background),柱状图 (interval),图标 (icon)。

参数说明类型默认值必选
text文本字段标记 (查看示例)TextCondition[]-
background背景字段标记 (查看示例)BackgroundCondition[]-
interval柱状图字段标记 (查看示例)IntervalCondition[]-
icon图标字段标记 (查看示例)IconCondition[]-

Condition

功能描述: 配置条件格式。TextCondition,BackgroundCondition,IntervalCondition,IconCondition 均继承于 Condition。

参数说明类型默认值必选
field1. 字段 ID
2. 使用正则表达式匹配字段 ID
string | RegExp✓
mapping作用映射函数​ConditionMapping✓

ConditionMapping

功能描述:字段标记处理函数。查看 文档 和 示例

// TextCondition,BackgroundCondition,IntervalCondition,IconCondition 各自对应的 mapping 函数返回 的 T 有所不同
export type ConditionMapping<T = unknown> = (
fieldValue: number | string,
data: RawData,
cell: S2CellType,
) => ConditionMappingResult<T>;

condition 用法示例:

const options = {
conditions: {
text: [
{
field: "province",
mapping: (fieldValue, data, cell) => {
return {
fill: "green",
fontSize: 16,
opacity: 0.2,
textAlign: 'right'
};
},
},
],
interval: [
{
field: "sub_type",
mapping: (fieldValue, data, cell) => {
return {
fill: "green",
isCompare: true,
maxValue: 8000,
minValue: 300,
};
},
},
],
background: [
{
field: "count",
mapping: (fieldValue, data, cell) => {
return {
fill: "green",
intelligentReverseTextColor: true,
};
},
},
],
icon: [
{
field: "number",
position: 'left',
mapping: (fieldValue, data, cell) => {
return {
icon: "InfoCircle",
fill: "green",
};
},
},
],
},
};

TextCondition

同 Condition 一致,ConditionMappingResult 配置和 文本主题配置一致(部分生效), 也就意味着可以控制不同文本的颜色,透明度,对齐方式,字体等配置。

export type TextConditionMappingResult = TextTheme;
查看示例

BackgroundCondition

同 Condition 一致,ConditionMappingResult 配置为:

export type BackgroundConditionMappingResult = {
fill: string;
intelligentReverseTextColor?: boolean;
};
查看示例

IntervalCondition

同 Condition 一致,ConditionMappingResult 配置为:

export type IntervalConditionMappingResult = {
fill?: string;
isCompare?: boolean;
minValue?: number;
maxValue?: number;
}
查看示例

IconCondition

功能描述: 配置图标 (icon) 条件格式,和其他 Condition 的唯一区别在于多了 position 参数用于自定义 icon 相对于文本的位置。查看 文档 和 示例

参数说明类型默认值必选
positionicon 相较于文字的位置left | rightright

icon condition 用法示例:

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

ConditionMappingResult 配置为:

export type IconConditionMappingResult = {
fill: string;
icon: string;
};

S2 目前内置 icon 列表:

注意

图标颜色默认和文本颜色一致,遵循 主题配置

icon 名称icon 图标功能描述icon 名称icon 图标功能描述
CellDownicon同环比下降ExpandColIconicon展开列头
CellUpicon同环比上升Plusicon树状表格展开
GlobalAscicon全局升序Minusicon树状表格收起
GlobalDescicon全局降序SortDownicon降序
GroupAscicon组内升序SortDownSelectedicon降序选中状态
GroupDescicon组内降序SortUpicon升序
Trendicon趋势图SortUpSelectedicon升序选中状态
ArrowUpicon指标上升ArrowDownicon指标下降
DrillDownIconicon下钻

​

SeriesNumber

功能描述:序号列配置。

参数说明类型默认值必选
enable是否显示行序号booleanfalse
text自定义行头序号列标题string-

Frozen

功能描述:行列头冻结配置。查看 透视表示例 和 明细表示例

参数类型必选默认值功能描述
rowHeaderboolean | numbertrue冻结行头
当值为 number 时,标识行头冻结的最大区域,取值范围: (0, 1),0 表示不固定行头。
当值为 boolean 时,true 对应冻结最大区域为 0.5, false 对应 0。
(透视表有效)
rowCountnumber0冻结行的数量,从顶部开始计数,以叶子节点作为计数依据(透视表在开启行序号,且自定义序号单元格时无效)
colCountnumber0冻结列的数量,从左侧开始计数,以叶子节点作为计数依据
trailingRowCountnumber0冻结行数量,从底部开始计数,以叶子节点作为计数依据(透视表在开启行序号,且自定义序号单元格时无效)
trailingColCountnumber0冻结列的数量,从右侧开始计数,以叶子节点作为计数依据

Interaction

功能描述:交互配置。查看 文档 和 示例

参数说明类型默认值必选
linkFields标记字段为链接样式,用于外链跳转string[] | (meta: Node | ViewMeta) => boolean
selectedCellsSpotlight是否开启选中高亮聚光灯效果booleanfalse
hoverHighlight鼠标悬停时高亮当前单元格,以及所对应的行头,列头booleantrue
hoverFocus鼠标悬停在当前单元格超过默认 800ms 后,保持当前高亮,显示 tooltip,悬停时间通过设置 duration 来控制boolean | {duration: number}true
hiddenColumnFields用于配置默认隐藏的列,透视表 和多列头明细表 需要配置列头唯一 id, 单列头明细表 配置列头 field 字段即可 (即:s2DataConfig.fields.columns). 了解更多string[]
copy单元格复制配置Copy
customInteractions自定义交互 详情CustomInteraction[]
scrollSpeedRatio用于控制滚动速率,分水平和垂直两个方向,默认为 1ScrollSpeedRatio
autoResetSheetStyle用于控制点击表格外区域和按下 ESC 键时是否重置交互状态和关闭 Tooltip, 支持根据 event 动态判断boolean | (event: Event | FederatedPointerEvent, spreadsheet: SpreadSheet) => booleantrue
resize用于控制 resize 热区是否显示boolean | ResizeInteractionOptionstrue
brushSelection是否允许单元格(包含行头,列头,数值单元格)刷选。行头,列头刷选只支持透视表boolean | BrushSelectiontrue
multiSelection是否允许多选 (包含行头,列头,数值单元格)booleantrue
rangeSelection是否允许区间快捷多选booleantrue
scrollbarPosition用于控制滚动条展示在内容区边缘还是画布边缘content | canvascontent
eventListenerOptions事件监听函数 addEventListener 的 可选项配置, 可控制事件从冒泡阶段还是捕获阶段触发false
selectedCellHighlight选中数值单元格后的行列高亮联动
rowHeader:选中数值单元格后高亮对应行头
colHeader:选中数值单元格后高亮对应列头
currentRow:选中数值单元格后高亮整行
currentCol:选中数值单元格后高亮整列
true:同 { rowHeader: true, colHeader: true, currentRow: true, currentCol: true }
boolean | { rowHeader?: boolean, colHeader?: boolean, currentRow?: boolean, currentCol?: boolean }false
overscrollBehavior控制滚动至边界的行为,可禁用浏览器的默认滚动行为。详情auto | contain | none | nullauto

Copy

功能描述:单元格复制。查看 文档 和 示例

参数说明类型默认值必选
enable是否允许复制booleantrue
withFormat是否使用 s2DataConfig 的 formatter 格式复制数据booleantrue
withHeader复制数据是否带表头信息booleanfalse
customTransformer复制时支持自定义 (transformer) 数据格式化方法(transformer: Transformer) => Partial<Transformer>transformer

CustomInteraction

功能描述:自定义交互,继承 BaseEvent: 查看示例

参数说明类型默认值必选
key交互的唯一标识string✓
interaction交互实例InteractionConstructor✓

ScrollSpeedRatio

功能描述:滚动速率配置。查看示例

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

ResizeInteractionOptions

功能描述:宽高调整配置。查看示例

参数说明类型默认值必选
rowCellVertical是否开启行头垂直方向 resize 热区booleantrue
cornerCellHorizontal是否开启角头水平方向 resize 热区booleantrue
colCellHorizontal是否开启列头水平方向 resize 热区booleantrue
colCellVertical是否开启列头垂直方向 resize 热区 (列头隐藏时该配置无效)booleantrue
rowResizeType用于控制行高 resize 时的生效范围
1. all: 对所有单元格生效(会覆盖默认的行高配置),2. current: 对当前单元格生效,3. selected: 对当前单元格生效,如果单元格是多选状态,调整任意选中单元格,对所有选中的生效。
all| current | selectedcurrent
colResizeType用于控制列宽 resize 时的生效范围
1. all: 对所有单元格生效(会覆盖默认的列宽配置),2. current: 对当前单元格生效,3. selected: 对当前单元格生效,如果单元格是多选状态,调整任意选中单元格,对所有选中的生效。
all| current | selectedcurrent
disable用于控制行高 resize 是否生效。查看示例(resizeInfo: S2CellType) => boolean
visible自定义当前单元格是否显示 resize 热区(cell: S2CellType) => boolean
minCellWidth单元格可拖拽最小宽度number40
minCellHeight单元格可拖拽最小高度number20

BrushSelection

功能描述:单元格刷选配置。查看示例

参数说明类型默认值必选
dataCell是否允许数值单元格刷选booleantrue
rowCell是否允许行头单元格刷选(仅支持透视表)booleanfalse
colCell是否允许列头单元格刷选booleanfalse

CellSelectedDetail

功能描述:单元格选中信息明细。

参数说明类型默认值必选
interactionName触发选中的交互名InteractionName
targetCell触发选中的单元格S2CellType
event触发选中的事件对象FederatedPointerEvent | Event | KeyboardEvent

InterceptType

功能描述:交互拦截类型。

enum InterceptType {
HOVER = 'hover',
CLICK = 'click',
DATA_CELL_BRUSH_SELECTION = 'dataCellBrushSelection',
ROW_CELL_BRUSH_SELECTION = 'rowCellBrushSelection',
COL_CELL_BRUSH_SELECTION = 'colCellBrushSelection',
MULTI_SELECTION = 'multiSelection',
RESIZE = 'resize',
}

InteractionName

功能描述:交互名称。

enum InteractionName {
CORNER_CELL_CLICK = 'cornerCellClick',
DATA_CELL_CLICK = 'dataCellClick',
ROW_CELL_CLICK = 'rowCellClick',
COL_CELL_CLICK = 'colCellClick',
MERGED_CELLS_CLICK = 'mergedCellsClick',
ROW_COLUMN_CLICK = 'rowColumnClick',
HEADER_CELL_LINK_CLICK = 'headerCellLinkClick',
HOVER = 'hover',
DATA_CELL_BRUSH_SELECTION = 'dataCellBrushSelection',
ROW_CELL_BRUSH_SELECTION = 'rowCellBrushSelection',
COL_CELL_BRUSH_SELECTION = 'colCellBrushSelection',
COL_ROW_RESIZE = 'rowColResize',
DATA_CELL_MULTI_SELECTION = 'dataCellMultiSelection',
ROW_CELL_MULTI_SELECTION = 'rowCellMultiSelection',
COL_CELL_MULTI_SELECTION = 'colCellMultiSelection',
RANGE_SELECTION = 'rangeSelection',
SELECTED_CELL_MOVE = 'selectedCellMove',
GLOBAL_RESET = 'globalReset',
}

InteractionStateName

功能描述:交互状态名称。

enum InteractionStateName {
ALL_SELECTED = 'allSelected',
SELECTED = 'selected',
ROW_CELL_BRUSH_SELECTED = 'rowCellBrushSelected',
COL_CELL_BRUSH_SELECTED = 'colCellBrushSelected',
DATA_CELL_BRUSH_SELECTED = 'dataCellBrushSelected',
UNSELECTED = 'unselected',
HOVER = 'hover',
HOVER_FOCUS = 'hoverFocus',
HIGHLIGHT = 'highlight',
SEARCH_RESULT = 'searchResult',
PREPARE_SELECT = 'prepareSelect',
}

CellType

功能描述:单元格类型。

enum CellType {
DATA_CELL = 'dataCell',
ROW_CELL = 'rowCell',
COL_CELL = 'colCell',
SERIES_NUMBER_CELL = 'seriesNumberCell',
CORNER_CELL = 'cornerCell',
MERGED_CELL = 'mergedCell',
}

Totals

功能描述:行/列小计总计配置。

参数说明类型必选默认值
row行总计配置(在 自定义行头时 无效)Total-
col列总计配置(在 自定义列头时 无效)Total-

Total

功能描述:小计总计配置。查看 文档 和 示例

参数说明类型默认值必选
showGrandTotals是否显示总计booleanfalse
showSubTotals是否显示小计。配置为对象时,always 用于控制当子维度小于 2 个时是否始终展示小计,默认展示boolean | { always: boolean }false
subTotalsDimensions小计的汇总维度string[][]
reverseGrandTotalsLayout总计布局位置,默认下或右booleanfalse
reverseSubTotalsLayout小计布局位置,默认下或右booleanfalse
grandTotalsLabel总计别名string总计
subTotalsLabel小计别名string小计
calcGrandTotals自定义计算总计CalcTotals
calcSubTotals自定义计算小计CalcTotals
grandTotalsGroupDimensions总计的分组维度string[]
subTotalsGroupDimensions小计的分组维度string[]

CalcTotals

功能描述: 小计总计计算方式配置。查看 文档 和 示例

参数说明类型必选默认值
aggregation聚合方式SUM | MIN | MAX | AVG | COUNT
calcFunc自定义方法(query: Record<string, any>, data: Record<string, any>[], spreadsheet: SpreadSheet) => number

Tooltip

功能描述:tooltip 配置。查看 文档 和 示例

参数说明类型默认值必选
enable是否展示 tooltipbooleantrue
operationtooltip 操作配置项TooltipOperation-
rowCell行头单元格配置BaseTooltipConfig-
colCell列头单元格配置BaseTooltipConfig-
dataCell数值单元格配置BaseTooltipConfig-
cornerCell角头单元格配置BaseTooltipConfig-
render自定义整个 tooltip, 可以继承 BaseTooltip 自己重写一些方法RenderTooltip-
content自定义 tooltip 内容ReactNode | Element | string 或者 (cell, defaultTooltipShowOptions) => ReactNode | Element | string-
autoAdjustBoundary当 tooltip 超过边界时自动调整显示位置,container: 图表区域,body: 整个浏览器窗口,设置为 null 可关闭此功能container | bodybody
adjustPosition自定义 tooltip 位置,(positionInfo: TooltipPositionInfo ) => {x: number, y: number}
getContainer自定义 tooltip 挂载容器,() => HTMLElementdocument.body
className额外的容器类名,string-
style额外的容器样式,CSSProperties-

BaseTooltipConfig

功能描述:tooltip 基础通用配置

参数说明类型默认值必选
enable是否展示 tooltipbooleantrue
operationtooltip 操作配置项TooltipOperation-
content自定义 tooltip 内容ReactNode | Element | string | 或者 (cell, defaultTooltipShowOptions) => ReactNode | Element | string-

TooltipPositionInfo

功能描述:tooltip 坐标信息。查看 文档 和 示例.

参数说明类型默认值必选
position默认经过计算(默认偏移量 + autoAdjustBoundary)后的 Tooltip 位置坐标TooltipPosition✓
event当前点击事件信息Event✓

TooltipOperation

功能描述:tooltip 操作配置项。查看 文档 和 示例.

参数说明类型默认值必选
hiddenColumns是否开启隐藏列(叶子节点有效)booleantrue
sort是否开启组内排序booleanfalse
tableSort是否开启明细表列头排序booleanfalse
menu自定义操作栏菜单配置项TooltipOperatorMenuOptions-

TooltipShowOptions

功能描述:tooltip 显示配置。

参数类型必选默认值功能描述
positionTooltipPosition✓tooltip 显示位置
dataTooltipDatatooltip 数据
cellInfosRecord<string, any>单元格信息
optionsTooltipOptionstooltip 部分配置
contentReactNode | string | 或者 (cell, defaultTooltipShowOptions: TooltipShowOptions) => ReactNode | string自定义 tooltip 内容
eventEvent当前事件 Event

TooltipPosition

功能描述:tooltip 坐标

参数类型必选默认值功能描述
xnumber✓横坐标
ynumber✓纵坐标

TooltipData

功能描述:tooltip 数据

参数类型必选默认值功能描述
summariesTooltipSummaryOptions所选项统计(按度量值区分)列表
detailsListItem数据点明细信息
headInfoTooltipHeadInfo轴(行/列头)列表
namestring当前单元格名称
tipsstring提示/说明信息
infosstring底部提示信息(可用于快捷键操作提示)

TooltipSummaryOptions

功能描述:tooltip 所选项统计(按度量值区分)列表

参数类型必选默认值功能描述
namestring✓名称
valuenumber | string✓值
selectedDataRecord<string, any>✓当前选择的数据列表

TooltipHeadInfo

功能描述: tooltip 轴(行/列头)列表

参数类型必选默认值功能描述
rowsListItem✓行头列表
colsListItem✓列头列表

ListItem

功能描述:tooltip 数据点明细数据

参数类型必选默认值功能描述
namestring✓名称
valuestring | number✓值
iconReactNode自定义图标组件

TooltipOptions

功能描述:tooltip 配置

参数类型必选默认值功能描述
hideSummarybooleanfalse是否隐藏所选项统计信息
operatorTooltipOperatorOptions操作栏配置
onlyShowOperatorbooleanfalse是否只展示操作菜单项
isTotalsbooleanfalse是否是 总计/小计 单元格
onlyShowCellTextbooleanfalse是否只显示当前单元格文本
enableFormatbooleanfalse是否开启格式化
forceRenderbooleanfalse是否强制清空 dom
dataTooltipData-自定义 tooltip 数据

TooltipOperatorOptions

功能描述:tooltip 操作栏配置

参数类型必选默认值功能描述
menuTooltipOperatorMenuOptions操作项菜单配置

TooltipOperatorMenuOptions

功能描述: tooltip 操作栏菜单配置

参数类型必选默认值功能描述
itemsTooltipOperatorMenuItem[]操作项列表
onClick(info: TooltipOperatorMenuInfo, cell: S2CellType) => void点击事件
selectedKeysstring[]初始选中的菜单项 key 数组
TooltipOperatorMenuItem

功能描述: tooltip 操作项列表

参数类型必选默认值功能描述
keystring✓唯一标识
labelReactNode | string名称
iconReactNode | Element | string自定义图标
visibleboolean | (cell: S2CellType) => booleantrue操作项是否显示,可传入一个函数根据当前单元格信息动态显示
onClick(info: { key: string, [key: string]: unknown; } , cell: S2CellType) => void点击事件回调 (info 为当前点击的菜单项,cell 为当前 tooltip 对应的单元格)
childrenTooltipOperatorMenuItem[]子菜单列表

S2 内置了前端分页渲染的能力,但不提供分页组件,需要自行实现。

使用

首先需要在 s2Options 中配置 pagination 属性

const s2Options = {
width: 600,
height: 480,
pagination: {
pageSize: 4,
current: 1,
}
};

效果预览

第 1 页 (current: 1) :

preview

第 2 页 (current: 2) :

preview

API

Pagination

功能描述:分页配置。查看 文档 和 示例

参数说明类型  默认值必选
pageSize每页数量number-✓
current当前页(从 1 开始)number1✓
total数据总条数number-

Style

功能描述:样式设置。查看 文档 和 示例

参数类型必选默认值功能描述
layoutWidthTypeadaptive | colAdaptive | compact单元格宽度布局类型
adaptive : 行列等宽,均分整个 Canvas 画布宽度
colAdaptive:列等宽,行头紧凑布局,列等分画布宽度减去行头宽度的剩余宽度
compact:行列紧凑布局,指标维度少的时候无法布满整个画布,列头宽度为实际内容宽度(取当前列最大值,采样每一列前 50 条数据)
dataCellDataCell数值单元格配置
rowCellRowCell行头单元格配置
colCellColCell列头单元格配置
cornerCellCornerCell角头单元格配置
mergedCellMergedCell合并单元格配置
seriesNumberCellSeriesNumberCell序号单元格配置

DataCell

功能描述:数值单元格配置

参数说明类型默认值必选
width单元格宽度 (优先级:colCell.widthByField > colCell.width > dataCell.width)number96-
height单元格高度 (优先级:rowCell.heightByField > rowCell.height > dataCell.height)number30-
valuesCfg单元格配置{ originalValueField?: string, widthPercent?: number[], showOriginalValue?: boolean }-

其他公用配置见 CellTextWordWrapStyle

ColCell

功能描述:列头单元格配置

参数说明类型默认值必选
width单元格宽度,可根据当前列头节点动态设置 (叶子节点有效)number | (colNode: Node) => number96
height单元格高度,可根据当前列头节点动态设置 (叶子节点有效)number | (colNode: Node) => number30
widthByField根据度量值设置宽度(拖拽或者预设宽度场景), field 对应 s2DataConfig.fields.columns 中的 field 或 列头 id (优先级大于 width) 查看详情Record<string, number>-
heightByField根据度量值设置高度(拖拽或者预设高度场景), field 对应 s2DataConfig.fields.columns 中的 field 或 列头 id (优先级大于 height) 查看详情Record<string, number>-
hideValue默认数值挂列头,会同时显示列头和数值,隐藏数值,使其更美观。(即 s2DataConfig.fields.values 且仅在单数值时有效,多数值时推荐使用 隐藏列头)booleanfalse

RowCell

功能描述:行头单元格配置

参数说明类型默认值必选
width行单元格宽度,可根据当前行头节点动态设置,树状结构同样适用number | (rowNode: Node) => number
treeWidth树状模式下行单元格宽度,优先级高于 width, 值为空时则默认使用 widthnumber
height行单元格高度,可根据当前行头节点动态设置number | (rowNode: Node) => number30
collapseFields树状模式下行头自定义折叠节点。
支持 id ('root[&] 行头维度值') 和 维度 field ('city') 两种格式,优先级大于 collapseAll 和 expandDepth, 设置为 null 时优先级最低。 查看 demo
Record<string, boolean>
collapseAll在树状结构模式下行头是否默认收起全部。booleanfalse
expandDepth在树状结构模式下行头默认展开展开的层级(层级从 0 开始), 设置为 null 时优先级最低number
showTreeLeafNodeAlignDot树状模式下行头叶子节点是否显示层级占位点booleanfalse
withByField根据 field 设置每行的宽度。field 对应 s2DataConfig.fields.rows 中的 field 或 列头 id (优先级大于 width) 查看详情Record<string, number>-
heightByField根据 field 设置每行的高度。
1. 透视表:field 对应 s2DataConfig.fields.rows 中的 field 或 列头 id.
2. 明细表:field 对应 行序号,从 1 开始。(优先级大于 height) 查看详情
Record<string, number>-

CornerCell

其他公用配置见 CellTextWordWrapStyle

MergedCell

其他公用配置见 CellTextWordWrapStyle

SeriesNumberCell

其他公用配置见 CellTextWordWrapStyle

CellTextWordWrapStyle

功能描述:单元格换行配置。查看示例

参数说明类型默认值必选
wordWrap文本是否自动换行(数值单元格不建议换行)。了解更多booleantrue
maxLines最大行数,文本超出后将被截断,当 手动拖拽调整高度 或存在 自定义单元格高度 时,为保证展示合理性,会根据当前文本行高计算出能展示的最大行数,覆盖默认的 maxLines 配置。
该配置 支持配置为 Infinity(数值单元格不建议换行),需要配合 wordWrap 和 textOverflow 一起使用。了解更多
number1
maxLines最大行数,文本超出后将被截断,支持配置为 Infinity(数值单元格不建议换行),需要配合 wordWrap 和 textOverflow 一起使用。了解更多number1
textOverflow自定义隐藏的文本溢出内容,例如直接裁剪、追加省略号或一个自定义字符串,需要配合 wordWrap 和 maxLines 一起使用。了解更多stringellipsis

ViewMeta

功能描述:数值单元格数据和位置等信息

参数类型必选默认值功能描述
spreadsheetSpreadSheet表格实例
idstring单元格唯一标识
xnumber单元格 x 坐标
ynumber单元格 y 坐标
widthnumber单元格宽度
heightnumber单元格高度
dataViewMetaData单元格数据
rowIndexnumber单元格在行叶子节点中的索引
colIndexnumber单元格在列叶子节点中的索引
valueFieldstring度量 id
fieldValueDataItem度量展示的真实值
isTotalsboolean 是否为总计:true 为总计 false 为小计
queryRecord<string, any>行列查询条件
rowQueryRecord<string, any>行查询条件
colQueryRecord<string, any>列查询条件
rowIdstring单元格的行 id
colIdstring单元格的列 id

RawData

DateItem
type RawData = Record<string, DataItem>;

SimpleData

type SimpleData = string | number | null | undefined;

MultiData

功能描述:用于支持多指标类型的自定义数据单元格渲染。例如:趋势分析表

配置项名称说明类型默认值必选
values格式化后的数据,直接展示在 dataCfg 中SimpleData[][]✓
originalValues原始数据,用于原始数据导出SimpleData[][]
label用作单元格小标题,单独占一行展示string
[key: string]其他透传字段,用于自定义单元格的定制化展示unknown``
{
"number": {
"originalValues": [1, 2, 3],
"values": ["1", "2", "3"]
}
}

DataItem

SimpleData | MultiData | MiniChartData

type DataItem = SimpleData | MultiData | MiniChartData | Record<string, unknown>;
{
"number": 7789,
"province": "浙江省",
"city": "杭州市",
"type": "家具",
"sub_type": "桌子"
}

ExtraData

import type { EXTRA_FIELD, VALUE_FIELD } from '@antv/s2';
type ExtraData = {
[EXTRA_FIELD]: string;
[VALUE_FIELD]: string | DataItem;
};
{
"$$extra$$": "number",
"$$value$$": 7789,
}

Data

type Data = RawData & ExtraData;

ViewMetaData

查看 CellData 定义
type ViewMetaData = Data | CellData;

Data

{
"city": "杭州市"
}

CellData

{
"extraField": "number",
"raw": {
"number": 7789,
"province": "浙江省",
"city": "杭州市",
"type": "家具",
"sub_type": "桌子"
},
"$$extra$$": "number",
"$$value$$": 7789,
"$$origin$$": {
"number": 7789,
"province": "浙江省",
"city": "杭州市",
"type": "家具",
"sub_type": "桌子"
}
}

MiniChartData

功能描述:在单元格内绘制 mini 图(支持 折线图、子弹图、柱状图). 查看 文档 和 示例

BaseChartData

功能描述:内置折线图、柱状图数据配置项,数据格式参考 G2

参数说明类型必选默认值
typemini 图类型line | bar✓
encode编码方式,声明 x 位置通道或 y 位置通道绑定的对应的列数据{x: string; y: string}✓
data原始数据Data[]✓
[key: string]其他透传字段,用于自定义单元格的定制化展示unknown

BulletValue

功能描述:内置子弹图数据配置项

参数说明类型必选默认值
typemini 图类型bullet✓bullet
measure当前指标number | string✓
target目标值number | string✓
[key: string]其他透传字段,用于自定义单元格的定制化展示unknown

DataCellCallback

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

功能描述:自定义数值单元格。查看示例

CellCallback

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

功能描述:自定义单元格。查看示例

参数说明类型默认值必选
node当前渲染的 node 节点Node-✓
spreadsheet表格实例SpreadSheet-✓
restOptions不定参数,传递额外的信息unknown[]-

MergedCellCallback

DataCellCallback = (s2: Spreadsheet, cells: S2CellType[], viewMeta: ViewMeta) => MergedCell;

功能描述:自定义合并单元格。查看示例

CornerHeaderCallback

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

功能描述:自定义角头。查看示例

参数说明类型默认值必选
parent父级单元格S2CellType-✓
spreadsheet表格实例SpreadSheet-✓
restOptions不定参数,传递额外的信息unknown[]-

LayoutHierarchy

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

功能描述:自定义层级结构

参数类型必选默认值功能描述
spreadsheetSpreadSheet✓表格实例
nodeNode✓当前渲染的 node 节点
interface LayoutHierarchyReturnType {
push?: Node[];
unshift?: Node[];
delete?: boolean;
}

LayoutArrange

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

功能描述:自定义顺序

参数类型必选默认值功能描述
spreadsheetSpreadSheet✓表格实例
nodeNode✓当前渲染的 node 节点
fieldstring✓当前的字段名
fieldValuesstring[]✓当前字段值

LayoutCoordinate

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

功能描述:自定义单元格行列坐标

参数类型必选默认值功能描述
spreadsheetSpreadSheet✓表格实例
rowNodeNode✓行头节点
colNodeNode✓列头节点

LayoutCellMeta

LayoutCellMeta = (viewMeta: ViewMeta) => ViewMeta | null;

功能描述:自定义单元格元信息

参数类型必选默认值功能描述
viewMetaViewMeta单元格元信息

LayoutSeriesNumberNodes

LayoutSeriesNumberNodes = (rowsHierarchy: Hierarchy, seriesNumberWidth: number, spreadsheet: SpreadSheet) => Node[];

功能描述:自定义序号节点

参数类型必选默认值功能描述
rowsHierarchyHierarchy行头层级结构
seriesNumberWidthnumber表格实例
spreadsheetSpreadSheet表格实例

HeaderActionIcon

功能描述:为表格行列头角头注册自定义操作 icon。如果该配置位空,则展示透视表默认操作 icon。查看 详细说明

参数类型必选默认值功能描述版本
iconsstring[] | {name:string,position:'right' | 'left'}[]✓已经注册的 icon 名称,或用户通过 customSVGIcons 注册的 icon 名称,如果是字符串形式,则 position 默认为 'right',也可以使用对象的形式,显示指定 icon 的位置
belongsCellstring[]✓需要增加操作图标的单元格名称 cornerCell、colCell、rowCell
defaultHideboolean | (mete: Node, iconName: string)=> boolean是否默认隐藏,如果为 true 则为 hover 后再显示;false 则始终显示1.26.0 支持配置为一个函数
displayCondition(mete: Node, iconName: string)=> boolean展示的过滤条件,可以通过该回调函数用户自定义行列头哪些层级或单元格需要展示 icon。 所有返回值为 true 的 icon 会展示给用户。1.26.0 回传 iconName 并按单个 icon 控制显隐
onClick(headerIconClickParams: HeaderIconClickParams) => void;✓1.26.0
onHover(headerIconHoverParams: HeaderIconHoverParams) => void;1.26.0

HeaderActionIconProps

功能描述: 点击自定义操作 icon 后透视表返回的当前 icon 相关

参数说明类型默认值必选
iconName当前点击的 icon 名称string-✓
meta当前 cell 的 meta 信息Node-✓
event当前点击事件信息Eventfalse✓

CustomSVGIcon

功能描述:用于用户注册自己的 icon 图标, 目前只支持 svg 格式。查看 详细说明

参数类型必选默认值功能描述
namestring✓内置或自定义的 icon 名称
srcstring✓目前支持三种格式的 svg 字符串:base64、svg 本地文件、线上图片地址(不支持替换颜色)

LayoutResult

功能描述:基本数据格式。查看文档

参数说明类型默认值必选
colNodes列头节点,对应 ColCell (含可视范围外)Node[]
colLeafNodes列头叶子节点,对应 ColCell (含可视范围外)Node[]
colsHierarchy列头节点层级结构 (含可视范围外)Hierarchy
rowNodes行头节点,对应 RowCell (含可视范围外)Node[]
rowLeafNodes行头叶子节点,对应 RowCell (含可视范围外)Node[]
rowsHierarchy行头节点层级结构 (含可视范围外)Hierarchy✓
seriesNumberNodes序号节点,对应 SeriesNumberCell (含可视范围外)Node[]
cornerNodes角头节点,对应 CornerCell (含可视范围外)Node[]

DataSet

功能描述:自定义数据集。查看示例

DataSet = (spreadsheet: SpreadSheet) => BaseDataSet;

MergedCellInfo

功能描述:设置默认合并的单元格信息

参数说明类型默认值必选
colIndex单元格的列索引number-
rowIndex单元格的行索引number-
showText设置 showText: true 时,则展示当前格子的 meta 信息为合并后单元格的 meta。
默认使用第一个选中点击的单元格。
booelan-