Tabular data configuration

const s2DataConfig = { 
  data: [], 
  meta: [], 
  sortParams: [], 
  fields: { 
    rows: [], 
    columns: [], 
    values: [] 
  } 
} 

parameter	illustrate	type	Defaults	required
data	Raw data	Data[]		✓
fields	dimension index	Fields		✓
totalData	Total/Subtotal Data	Data[]
meta	Field metadata, configurable field aliases and value formatting	Meta[]
sortParams	Sorting parameter configuration	SortParam[]

RawData

SimpleData | MiniChartData | MultiData required , default: null

Function description: tabular data source

type RawData = Record<string, DataItem>; 
type DataItem =  SimpleData | MultiData; 

SimpleData

Function description: basic data type

type SimpleData = string | number; 

const data = [ 
  { 
    area: '东北', 
    province: '吉林', 
    city: '白山', 
    type: '办公用品', 
    subType: '纸张', 
    cost: '2', 
  }, 
  { 
    area: '东北', 
    province: '吉林', 
    city: '白山', 
    type: '办公用品', 
    subType: '笔', 
    cost: '3', 
  } 
]; 

MultiData

Function description: used to support custom data cell rendering of multiple indicator types. Example: Trend Analysis Table

Configuration item name	illustrate	type	Defaults	required
values	The formatted data is directly displayed in dataCfg	SimpleData [][]	✓
originalValues	raw data, for raw data export	SimpleData [][]
label	Used as a subtitle of a cell, displayed on a separate line	string
[key: string]	Other transparent fields for customized display of custom cells	unknown	``

const data = [ 
  { 
    number: { 
      originalValues: [1, 2, 3], 
      values: ['1', '2', '3'] 
    } 
  } 
]; 

Fields

object is required , default: null

Function description: Configure the dimension field of the table, that is, the corresponding row and column dimensions

Configuration item name	illustrate	type	Defaults	required
rows	Row dimension (customizable row header, see example )	string[] | CustomTreeNode[]	[]
columns	Column dimension (column header can be customized, see example )	string[] | CustomTreeNode[]	[]
values	Indicator Dimensions	string[]	[]
valueInCols	Whether the indicator dimension is at the column header	boolean
customValueOrder	The hierarchical order of custom indicator dimensions in the row and column headers (that is, the order of values , starting from 0 ) View example	number	-

Meta

Function description: field metadata, configurable field alias and value formatting.

Function description: Field metadata, configurable field alias and value formatting.

parameter	illustrate	type	Defaults	required
field	field id	string
name	Field Name	string
description	Field description, which will be displayed in the tooltip corresponding to the row header, column header, and cell	string
formatter	Formatting cells, row headers and column headers support formatting, but corner headers do not support formatting. The second parameter exists only for cells. Numerical fields: generally used to format numeric units Text fields: generally used as aliases for field enumeration values The second parameter will be passed in in the following situations: data cell formatting, copy/export, tooltip display ( and only when selected When there are multiple cells, the data type is an array )	(value: unknown, data?: Data | Data[], meta?: Node | ViewMeta) => string
renderer	cell render type(image or video)	Renderer

Renderer

parameter	illustrate	type	Defaults	required
type	Render Type	IMAGE | VIDEO		✓
clickToPreview	This parameter is valid when type is image or video	boolean	true
fallback	Fallback display for image loading failure	string
timeout		number	10000
config		Partial<ImageStyleProps> | Partial<HTMLVideoElement>| HTMLStyleProps

MiniChartData

renderMiniChart

Draw mini charts in cells (support line charts, bullet charts, histograms). View examples

 renderMiniChart = (cell: S2CellType, data?: BaseChartData | BulletValue) => void; 

BaseChartData

Line chart, histogram data configuration items, data format refer to g2

parameter	illustrate	type	required	Defaults
type	mini-chart type	line | bar	✓
encode	Encoding method, declare the corresponding column data bound to the x position channel or y position channel	{x: string; y: string}	✓
data	Raw data	Data[]		✓
[key: string]	Other transparent fields for customized display of custom cells	unknown

BulletValue

Bullet chart data configuration items

parameter	illustrate	type	required	Defaults
type	mini-chart type	bullet	✓	bullet
measure	current indicator	number | string	✓
target	target value	number | string	✓
[key: string]	Other transparent fields for customized display of custom cells	unknown

MultiData

object is required , default: null

Function description: used to support custom data cell rendering of multiple indicator types. Example: Trend Analysis Table

Configuration item name	illustrate	type	Defaults	required
values	The formatted data is directly displayed in dataCfg	(string | number)[][]	✓
originalValues	raw data, for raw data export	(string | number)[][]
label	Used as a cell subtitle, displayed on a separate line	string
[key: string]	Other transparent fields for customized display of custom cells	unknown	``

SortParam

Function description: sorting configuration

parameter	illustrate	type	Defaults	required
sortFieldId	Measure Id, the Id to be sorted	string	-	✓
sortMethod	sort by	ASC | DESC | asc | desc	-
sortBy	custom sorted list	string[]	-
sortByMeasure	Sort by metric value (numeric value) (for pivot tables)	string	-
query	Filter criteria, narrow the sort range such as: {city:'白山'}	Record<string, string>	-
type	Sorting within the group is used to display the icon (for pivot tables)	string	-
sortFunc	Function for custom sorting	(params: SortFuncParam ) => string[]	-

SortFuncParam

Function description: Custom sorting function parameters

parameter	illustrate	type	Defaults	required
sortFieldId	Measure Id, the Id to be sorted	string	-	✓
sortMethod	sort by	ASC | DESC | asc | desc	-
sortBy	custom sorted list	string[]	-
sortByMeasure	Sort by metric value (numeric value) (for pivot tables)	string	-
query	Filter criteria, narrow the sort range such as: {city:'白山'}	Record<string, string>	-
type	Sorting within the group is used to display icons (applicable to pivot tables)	string	-
data	List of currently sorted data	Array<string | Record<string, any>>	-

CustomTreeNode

Function description: Customize the configuration of the tree structure. View detailed instructions or examples

parameter	illustrate	type	Defaults	required
key	The unique identifier of the current node	string		✓
title	current node display name	string		✓
collapsed	Whether the node is collapsed (in tree mode, non-leaf nodes at the head of the line are valid)	boolean	false
description	The additional description information of the node is displayed in the tooltip of the corresponding line header	string
children	child node	CustomTreeNode[]

Columns

Array<ColumnNode | string>

Column configuration array, supports the use of ColumnNode structure to describe the column grouping relationship in the detailed table mode

ColumnNodes

attribute name	illustrate	type	Defaults	required
key	column field id or group id	string		✓
children	subclass below the group	Array<ColumnNode | string>