API

表格参数配置

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
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
BackgroundCondition
IntervalCondition
IconCondition
SeriesNumber
Frozen
Interaction
Totals
Total
CalcTotals
Tooltip
TooltipShowOptions
使用
效果预览
API
Style
ViewMeta
DataCellCallback
CellCallback
MergedCellCallback
CornerHeaderCallback
LayoutHierarchy
LayoutArrange
LayoutCoordinate
LayoutCellMeta
LayoutSeriesNumberNodes
HeaderActionIcon
HeaderActionIconProps
CustomSVGIcon
LayoutResult
DataSet
MergedCellInfo