React table component

Out-of-the-box component <SheetComponent /> based on React packaged by @antv/s2

SpreadsheetProps

Function description: The props parameter of the React SheetComponent component

Parameter	Description	Type	Default	Required
sheetType	Form type: 1. `pivot`: pivot table 2. `table`: detail table 3. `gridAnalysis`: grid analysis table 4. `strategy`: trend analysis table	`pivot \| table \| gridAnalysis \| strategy` \| `pivot`
spreadsheet	custom table	(container: `HTMLElement \| string`, dataCfg: S2DataConfig, options: SheetComponentOptions) => [SpreadSheet](/ docs/api/basic-class/spreadsheet)
dataCfg	Pivot table data mapping related configuration items	S2DataConfig		✓
options	pivot table property configuration item	SheetComponentOptions		✓
partDrillDown	Attributes related to dimension drilldown	PartDrillDown
adaptive	Whether to adapt to the window size	`boolean	{ width?: boolean, height?: boolean, getContainer: () => HTMLElement }`	`false`
themeCfg	Custom pivot table theme styles	ThemeCfg
loading	Controls the loading state of the table	`boolean`
onRangeSort	Callback event triggered when sorting within a group	(params: SortParam[] ) => void;
onRowCellHover	Row header mouse hover event	(data: TargetCellInfo) => void
onRowCellClick	row head mouse click event	(data: TargetCellInfo) => void
onRowCellDoubleClick	Mouse double-click event at row head	(data: TargetCellInfo) => void
onRowCellMouseDown	row header mouse down event	(data: TargetCellInfo) => void
onRowCellMouseUp	Row cell mouse release event	(data: TargetCellInfo) => void
onRowCellMouseMove	Row cell mouse movement event	(data: TargetCellInfo) => void
onRowCellCollapsed	Node expand/collapse event callback	({ isCollapsed: `boolean`, collapseFields: `Record<string, boolean>`, node: Node ) => void;
onRowCellAllCollapsed	Event callback for all nodes expanded/collapsed	(isCollapsed: boolean ) => void;
onRowCellScroll	row header cell scroll event	({position: CellScrollPosition} ) => void;
onColCellHover	Column header mouse hover event	(data: TargetCellInfo) => void
onColCellClick	Column head mouse click event	(data: TargetCellInfo) => void
onColCellDoubleClick	Mouse double-click event of column header	(data: TargetCellInfo) => void
onColCellMouseDown	Column header mouse down event	(data: TargetCellInfo) => void
onColCellMouseUp	Column header mouse release event	(data: TargetCellInfo) => void
onColCellMouseMove	Column head mouse move event	(data: TargetCellInfo) => void
onColCellExpanded	After the hidden column header is enabled (tooltip.operation.hiddenColumns = true), the event callback for column header expansion	(collapseAll: `boolean` ) => void;
onColCellHidden	After the hidden column header is enabled (tooltip.operation.hiddenColumns = true), the event callback for the hidden column header	({data: { currentHiddenColumnsInfo:HiddenColumnsInfo;hiddenColumnsDetail:HiddenColumnsInfo;} ) => void;
onDataCellHover	mouse hover event of numeric cell	(data: TargetCellInfo) => void
onDataCellClick	Mouse click event of numeric cell	(data: TargetCellInfo) => void
onDataCellDoubleClick	Value cell double click event	(data: TargetCellInfo) => void
onDataCellMouseDown	Mouse down event of numeric cell	(data: TargetCellInfo) => void
onDataCellMouseUp	Numeric cell mouse release event	(data: TargetCellInfo) => void
onDataCellMouseMove	Numeric cell mouse movement event	(data: TargetCellInfo) => void
onDataCellBrushSelection	Value cell brush selection event	( dataCells: DataCell[] ) => void
onDataCellSelectMove	Numerical cell keyboard direction key move event	(metas: CellMeta[]) => void
onCornerCellHover	corner mouse hover event	(data: TargetCellInfo) => void
onCornerCellClick	Corner mouse click event	(data: TargetCellInfo) => void
onCornerCellDoubleClick	Corner cell double click event	(data: TargetCellInfo) => void
onCornerCellMouseUp	corner mouse down event	(data: TargetCellInfo) => void
onCornerCellMouseUp	corner mouse release event	(data: TargetCellInfo) => void
onCornerCellMouseMove	corner mouse movement event	(data: TargetCellInfo) => void
onMergedCellsHover	Mouseover event of merged cells	(data: TargetCellInfo) => void
onMergedCellsClick	Mouse click event of merged cells	(data: TargetCellInfo) => void
onMergedCellDoubleClick	Mouse double-click event for merged cells	(data: TargetCellInfo) => void
onMergedCellsMouseDown	Merged cell press event	(data: TargetCellInfo) => void
onMergedCellsMouseUp	Merged cell release event	(data: TargetCellInfo) => void
onMergedCellsMouseMove	merged cell move event	(data: TargetCellInfo) => void
onRangeSort	A callback event is triggered when sorting within a group (for now only pivot tables are supported)	(params: SortParam[] ) => void;
onRangeSorted	A callback event is triggered when the sorting in the group ends (for now, only pivot tables are supported)	(event: CanvasEvent ) => void;
onRangeFilter	Trigger callback event when filtering	(data: { filterKey: string; filteredValues: string[] } ) => void;
onRangeFiltered	Trigger callback event after filtering	(data: DataType[] ) => void;
onLayoutCellRender	The header layout cell mount completed event	cell: S2CellType
onLayoutAfterHeaderLayout	Header layout structure preparation completion event	(layoutResult: LayoutResult ) => void;
onLayoutPagination	pagination event	({ pageSize: number; pageCount: number; total: number; current: number;} ) => void;
onLayoutCellScroll	Cell scroll event (Deprecated, please use `onScroll` instead)	({position: CellScrollPosition} ) => void;
onLayoutAfterCollapseRows	Event callback after collapsing row headers in tree mode	({collapseFields: `Record<string, boolean>`, meta: Node ) => void;
onBeforeRender	Event before start of render	() => void;
onAfterRender	render completed event	() => void;
onMounted	Table loading complete event, you can get the table instance details	(spreadsheet: SpreadSheet) => void;
onDestroy	form destruction event	() => void;
onLayoutResize	The overall changeSize event of the table	(params: ResizeParams) => void;
onLayoutResizeSeriesWidth	Table serial number row width event	(params: ResizeParams) => void;
onLayoutResizeRowWidth	row header cell width change event	(params: ResizeParams) => void;
onLayoutResizeRowHeight	Row header cell height change event	(params: ResizeParams) => void;
onLayoutResizeColWidth	Column header cell width change event	(params: ResizeParams) => void;
onLayoutResizeColHeight	Column header cell height change event	(params: ResizeParams) => void;
onLayoutResizeTreeWidth	The overall width change event of the tree line header	(params: ResizeParams) => void;
onLayoutResizeMouseDown	mouse down event of resize hotspot	( event: `MouseEvent`, resizeInfo?: ResizeInfo) => void;
onLayoutResizeMouseUp	mouse release event of resize hotspot	( event: `MouseEvent`, resizeInfo?: ResizeInfo) => void;
onLayoutResizeMouseMove	mouse move event of resize hotspot	( event: `MouseEvent`, resizeInfo?: ResizeInfo) => void;
onKeyBoardDown	keyboard down event	(event: KeyboardEvent) => void
onKeyBoardUp	keyboard release event	(event: KeyboardEvent) => void
onCopied	copy event	(data: string) => void
onActionIconHover	Line header operation icon hover event	(event: CanvasEvent) => void
onActionIconClick	Action icon click event	(event: CanvasEvent) => void
onContextMenu	Right cell click event	(data: TargetCellInfo) => void
onMouseHover	table mouse hover event	(event: CanvasEvent) => void
onMouseUp	table mouse release event	(event: CanvasEvent) => void
onSelected	cell selected event	(cells: ( Cell[] ) => void
onReset	Interactive state reset event	(event: KeyboardEvent) => void
onLinkFieldJump	Link field jump event (cellData: @antv/s2 1.37.0 new)	(data: { key: string; cellData: Node; record: Data }) => void
onScroll	cell scroll event (including row header and value cells)	({position: CellScrollPosition} ) => void;
onColCellBrushSelection	Batch select the column header cells within the brush selection range. During the brush selection process, the brush selection range prompt mask will be displayed. After the brush selection is completed, a tooltip will pop up to display the brushed cell information (only supports pivot tables)	(cells: ColCell[]) => void;
onRowCellBrushSelection	Batch select the row header cells within the brush selection range. During the brush selection process, the brush selection range prompt mask will be displayed. After the brush selection is completed, a tooltip will pop up to display the brushed cell information (only supports pivot tables)	( cells: RowCell[]) => void;

SheetComponentOptions

The options of React components are inherited from S2Options, there are two differences

The content of tooltip has changed from Element | string to ReactNode, which can be any jsx element
The paging configuration has changed from the paging configuration of S2 to the paging configuration of antd, that is, the api transparent transmission of the antd paging component is supported

import type { Pagination, S2Options } from '@antv/s2';
import type { PaginationProps as AntdPaginationProps } from 'antd';

type SheetComponentOptions = S2Options<
   React.ReactNode,
   Pagination & AntdPaginationProps
>;

Vue table component

Out-of-the-box component <SheetComponent /> of Vue 3.0 based on @antv/s2 layer encapsulation

props

Function description: The props of the Vue SheetComponent component, such as <SheetComponent :sheetType="pivot" />

Parameter	Description	Type	Default	Required
sheetType	Form type: 1. `pivot`: pivot table 2. `table`: detailed table	`pivot	table`	`pivot`
dataCfg	pivot table data mapping configuration item	S2DataConfig		✓
options	pivot table property configuration item	SheetComponentOptions		✓
adaptive	Whether to adapt to the window size	`boolean	{ width?: boolean, height?: boolean, getContainer: () => HTMLElement }`	`false`
showPagination	whether to show the default pagination	boolean
themeCfg	Custom pivot table theme styles	ThemeCfg
loading	Controls the loading state of the table	`boolean`
onRangeSort	Callback event triggered when sorting within a group	(params: SortParam[] ) => void;
onRowCellHover	Row header mouse hover event	(data: TargetCellInfo) => void
onRowCellClick	row head mouse click event	(data: TargetCellInfo) => void
onRowCellDoubleClick	Mouse double-click event at row head	(data: TargetCellInfo) => void
onRowCellMouseDown	row header mouse down event	(data: TargetCellInfo) => void
onRowCellMouseUp	Row cell mouse release event	(data: TargetCellInfo) => void
onRowCellMouseMove	Row cell mouse movement event	(data: TargetCellInfo) => void
onRowCellCollapsed	Node expand/collapse event callback	({ isCollapsed: `boolean`, collapseFields: `Record<string, boolean>`, node: Node ) => void;
onRowCellAllCollapsed	Event callback for all nodes expanded/collapsed	(isCollapsed: boolean ) => void;
onRowCellScroll	row header cell scroll event	({position: CellScrollPosition} ) => void;
onColCellHover	Column header mouse hover event	(data: TargetCellInfo) => void
onColCellClick	Column head mouse click event	(data: TargetCellInfo) => void
onColCellDoubleClick	Mouse double-click event of column header	(data: TargetCellInfo) => void
onColCellMouseDown	Column header mouse down event	(data: TargetCellInfo) => void
onColCellMouseUp	Column header mouse release event	(data: TargetCellInfo) => void
onColCellMouseMove	Column head mouse move event	(data: TargetCellInfo) => void
onColCellExpanded	After the hidden column header is enabled (tooltip.operation.hiddenColumns = true), the event callback for column header expansion	(collapseAll: `boolean` ) => void;
onColCellHidden	After the hidden column header is enabled (tooltip.operation.hiddenColumns = true), the event callback for the hidden column header	({data: { currentHiddenColumnsInfo:HiddenColumnsInfo;hiddenColumnsDetail:HiddenColumnsInfo;} ) => void;
onDataCellHover	mouse hover event of numeric cell	(data: TargetCellInfo) => void
onDataCellClick	Mouse click event of numeric cell	(data: TargetCellInfo) => void
onDataCellDoubleClick	Value cell double click event	(data: TargetCellInfo) => void
onDataCellMouseDown	Mouse down event of numeric cell	(data: TargetCellInfo) => void
onDataCellMouseUp	Numeric cell mouse release event	(data: TargetCellInfo) => void
onDataCellMouseMove	Numeric cell mouse movement event	(data: TargetCellInfo) => void
onDataCellBrushSelection	Value cell brush selection event	( dataCells: DataCell[] ) => void
onDataCellSelectMove	Numerical cell keyboard direction key move event	(metas: CellMeta[]) => void
onCornerCellHover	corner mouse hover event	(data: TargetCellInfo) => void
onCornerCellClick	Corner mouse click event	(data: TargetCellInfo) => void
onCornerCellDoubleClick	Corner cell double click event	(data: TargetCellInfo) => void
onCornerCellMouseUp	corner mouse down event	(data: TargetCellInfo) => void
onCornerCellMouseUp	corner mouse release event	(data: TargetCellInfo) => void
onCornerCellMouseMove	corner mouse movement event	(data: TargetCellInfo) => void
onMergedCellsHover	Mouseover event of merged cells	(data: TargetCellInfo) => void
onMergedCellsClick	Mouse click event of merged cells	(data: TargetCellInfo) => void
onMergedCellDoubleClick	Mouse double-click event for merged cells	(data: TargetCellInfo) => void
onMergedCellsMouseDown	Merged cell press event	(data: TargetCellInfo) => void
onMergedCellsMouseUp	Merged cell release event	(data: TargetCellInfo) => void
onMergedCellsMouseMove	merged cell move event	(data: TargetCellInfo) => void
onRangeSort	A callback event is triggered when sorting within a group (for now only pivot tables are supported)	(params: SortParam[] ) => void;
onRangeSorted	A callback event is triggered when the sorting in the group ends (for now, only pivot tables are supported)	(event: CanvasEvent ) => void;
onRangeFilter	Trigger callback event when filtering	(data: { filterKey: string; filteredValues: string[] } ) => void;
onRangeFiltered	Trigger callback event after filtering	(data: DataType[] ) => void;
onLayoutCellRender	The header layout cell mount completed event	cell: S2CellType
onLayoutAfterHeaderLayout	Header layout structure preparation completion event	(layoutResult: LayoutResult ) => void;
onLayoutPagination	pagination event	({ pageSize: number; pageCount: number; total: number; current: number;} ) => void;
onLayoutCellScroll	Cell scroll event (Deprecated, please use `onScroll` instead)	({position: CellScrollPosition} ) => void;
onLayoutAfterCollapseRows	Event callback after collapsing row headers in tree mode	({collapseFields: `Record<string, boolean>`, meta: Node ) => void;
onBeforeRender	Event before start of render	() => void;
onAfterRender	render completed event	() => void;
onMounted	Table loading complete event, you can get the table instance details	(spreadsheet: SpreadSheet) => void;
onDestroy	form destruction event	() => void;
onLayoutResize	The overall changeSize event of the table	(params: ResizeParams) => void;
onLayoutResizeSeriesWidth	Table serial number row width event	(params: ResizeParams) => void;
onLayoutResizeRowWidth	row header cell width change event	(params: ResizeParams) => void;
onLayoutResizeRowHeight	Row header cell height change event	(params: ResizeParams) => void;
onLayoutResizeColWidth	Column header cell width change event	(params: ResizeParams) => void;
onLayoutResizeColHeight	Column header cell height change event	(params: ResizeParams) => void;
onLayoutResizeTreeWidth	The overall width change event of the tree line header	(params: ResizeParams) => void;
onLayoutResizeMouseDown	mouse down event of resize hotspot	( event: `MouseEvent`, resizeInfo?: ResizeInfo) => void;
onLayoutResizeMouseUp	mouse release event of resize hotspot	( event: `MouseEvent`, resizeInfo?: ResizeInfo) => void;
onLayoutResizeMouseMove	mouse move event of resize hotspot	( event: `MouseEvent`, resizeInfo?: ResizeInfo) => void;
onKeyBoardDown	keyboard down event	(event: KeyboardEvent) => void
onKeyBoardUp	keyboard release event	(event: KeyboardEvent) => void
onCopied	copy event	(data: string) => void
onActionIconHover	Line header operation icon hover event	(event: CanvasEvent) => void
onActionIconClick	Action icon click event	(event: CanvasEvent) => void
onContextMenu	Right cell click event	(data: TargetCellInfo) => void
onMouseHover	table mouse hover event	(event: CanvasEvent) => void
onMouseUp	table mouse release event	(event: CanvasEvent) => void
onSelected	cell selected event	(cells: ( Cell[] ) => void
onReset	Interactive state reset event	(event: KeyboardEvent) => void
onLinkFieldJump	Link field jump event (cellData: @antv/s2 1.37.0 new)	(data: { key: string; cellData: Node; record: Data }) => void
onScroll	cell scroll event (including row header and value cells)	({position: CellScrollPosition} ) => void;
onColCellBrushSelection	Batch select the column header cells within the brush selection range. During the brush selection process, the brush selection range prompt mask will be displayed. After the brush selection is completed, a tooltip will pop up to display the brushed cell information (only supports pivot tables)	(cells: ColCell[]) => void;
onRowCellBrushSelection	Batch select the row header cells within the brush selection range. During the brush selection process, the brush selection range prompt mask will be displayed. After the brush selection is completed, a tooltip will pop up to display the brushed cell information (only supports pivot tables)	( cells: RowCell[]) => void;

SheetComponentOptions

The options of React components are inherited from S2Options, there are two differences

The content of tooltip has changed from Element | string to ReactNode, which can be any jsx element
The paging configuration has changed from the paging configuration of S2 to the paging configuration of antd, that is, the api transparent transmission of the antd paging component is supported

import type { Pagination, S2Options } from '@antv/s2';
import type { PaginationProps as AntdPaginationProps } from 'antd';

type SheetComponentOptions = S2Options<
   React.ReactNode,
   Pagination & AntdPaginationProps
>;

Vue table component

Out-of-the-box component <SheetComponent /> of Vue 3.0 based on @antv/s2 layer encapsulation

props

Function description: The props of the Vue SheetComponent component, such as <SheetComponent :sheetType="pivot" />

Parameter	Description	Type	Default	Required
sheetType	Form type: 1. `pivot`: pivot table 2. `table`: detailed table	`pivot	table`	`pivot`
dataCfg	pivot table data mapping configuration item	S2DataConfig		✓
options	pivot table property configuration item	SheetComponentOptions		✓
adaptive	Whether to adapt to the window size	`boolean	{ width?: boolean, height?: boolean, getContainer: () => HTMLElement }`	`false`
showPagination	Whether to display the default pagination (only if the `pagination` attribute is configured in `options`)	`boolean` \| { onShowSizeChange?: (pageSize: number) => void,< br>onChange?: (current: number) => void }	`false`
themeCfg	custom table theme style	ThemeCfg
loading	Controls the loading state of the table	`boolean`

events

Function description: events of Vue SheetComponent, <SheetComponent @rowCellClick="handleRowCellClick" />

Parameter	Description	Type
spreadsheet	custom table	(container: `HTMLElement \| string`, dataCfg: S2DataConfig, options: SheetComponentOptions) => [SpreadSheet] (/docs/api/basic-class/spreadsheet)
rangeSort	Callback event triggered when sorting within a group	(params: SortParam[] ) => void;
rowCellClick	row head mouse click event	(data: TargetCellInfo) => void
rowCellHover	row header mouse hover event	(data: TargetCellInfo) => void
rowCellClick	row head mouse click event	(data: TargetCellInfo) => void
rowCellDoubleClick	Double click event of row header	(data: TargetCellInfo) => void
rowCellMouseDown	row head mouse down event	(data: TargetCellInfo) => void
rowCellMouseUp	row head mouse release event	(data: TargetCellInfo) => void
rowCellMouseMove	row head mouse move event	(data: TargetCellInfo) => void
rowCellCollapseTreeRows	Click the row header to collapse and expand the button in the tree structure	(params: {id: `number`; isCollapsed: `boolean`; node: Node}) = > void
rowCellScroll	row header cell scroll event	({position: CellScrollPosition} ) => void;
rowCellCollapsed	Node expand/collapse event callback	({ isCollapsed: `boolean`, collapseFields: `Record<string, boolean>`, node: Node ) => void;
rowCellAllCollapsed	Event callback for all expanded/collapsed nodes	(isCollapsed: boolean ) => void;
colCellHover	Column header mouse hover event	(data: TargetCellInfo) => void
colCellClick	Column head mouse click event	(data: TargetCellInfo) => void
colCellDoubleClick	Mouse double-click event of column header	(data: TargetCellInfo) => void
colCellMouseDown	Column head mouse down event	(data: TargetCellInfo) => void
colCellMouseUp	Column header mouse release event	(data: TargetCellInfo) => void
colCellMouseMove	Column head mouse move event	(data: TargetCellInfo) => void
colCellExpanded	After enabling hidden column headers (tooltip.operation.hiddenColumns = true), the event callback for column header expansion	({collapseAll: boolean ) => void;
colCellHidden	After the hidden column header is enabled (tooltip.operation.hiddenColumns = true), the event callback for the hidden column header	({data: { currentHiddenColumnsInfo:HiddenColumnsInfo;hiddenColumnsDetail:HiddenColumnsInfo;} ) => void;
dataCellHover	mouse hover event of numeric cell	(data: TargetCellInfo) => void
dataCellClick	mouse click event of numeric cell	(data: TargetCellInfo) => void
dataCellDoubleClick	Numerical cell double click event	(data: TargetCellInfo) => void
dataCellMouseDown	mouse down event of numeric cell	(data: TargetCellInfo) => void
dataCellMouseUp	Numeric cell mouse release event	(data: TargetCellInfo) => void
dataCellMouseMove	Numeric cell mouse move event	(data: TargetCellInfo) => void
dataCellBrushSelection	Value cell brush selection event	(brushRangeDataCells: ( DataCell[] ) => void
dataCellScroll	Numeric cell scroll event	({position: CellScrollPosition} ) => void;
cornerCellHover	corner mouse hover event	(data: TargetCellInfo) => void
cornerCellClick	corner mouse click event	(data: TargetCellInfo) => void
cornerCellDoubleClick	Corner mouse double click event	(data: TargetCellInfo) => void
cornerCellMouseUp	corner mouse down event	(data: TargetCellInfo) => void
cornerCellMouseUp	corner mouse release event	(data: TargetCellInfo) => void
cornerCellMouseMove	corner mouse movement event	(data: TargetCellInfo) => void
mergedCellsHover	merged cell mouse hover event	(data: TargetCellInfo) => void
mergedCellsClick	mouse click event of merged cells	(data: TargetCellInfo) => void
mergedCellDoubleClick	Mouse double click event of merged cell	(data: TargetCellInfo) => void
mergedCellsMouseDown	merged cell down event	(data: TargetCellInfo) => void
mergedCellsMouseUp	merged cell release event	(data: TargetCellInfo) => void
mergedCellsMouseMove	merged cell move event	(data: TargetCellInfo) => void
rangeSort	A callback event is triggered when sorting within a group (for now, only pivot tables are supported)	(params: SortParam[] ) => void;
rangeSorted	A callback event is triggered when the sorting in the group ends (for now, only pivot tables are supported)	(event: CanvasEvent ) => void;
rangeFilter	trigger callback event when filtering	(data: { filterKey: string; filteredValues: string[] } ) => void;
rangeFiltered	Trigger callback event after filtering	(data: DataType[] ) => void;
layoutAfterHeaderLayout	Header layout structure preparation completion event	(layoutResult: LayoutResult ) => void;
layoutPagination	pagination event	({ pageSize: number; pageCount: number; total: number; current: number;} ) => void;
layoutCellScroll	Cell scroll event (Deprecated, please use `onScroll` instead)	({position: CellScrollPosition} ) => void;
beforeRender	event before start render	() => void;
afterRender	render completed event	() => void;
mounted	table loading complete event, you can get the table instance details	(spreadsheet: SpreadSheet) => void;
destroy	table destruction event	() => void;
layoutResize	changeSize event of the table	(params: ResizeParams) => void;
layoutResizeSeriesWidth	table serial number row width event	(params: ResizeParams) => void;
layoutResizeRowWidth	row header cell width change event	(params: ResizeParams) => void;
layoutResizeRowHeight	row header cell height change event	(params: ResizeParams) => void;
layoutResizeColWidth	Column header cell width change event	(params: ResizeParams) => void;
layoutResizeColHeight	Column header cell height change event	(params: ResizeParams) => void;
layoutResizeTreeWidth	The overall width change event of the tree line header	(params: ResizeParams) => void;
layoutResizeMouseDown	mouse down event of resize hotspot	( event: `MouseEvent`, resizeInfo?: ResizeInfo) => void;
layoutResizeMouseUp	resize hot zone mouse release event	( event:`MouseEvent`, resizeInfo?: ResizeInfo) => void;
layoutResizeMouseMove	mouse move event in resize hotspot	( event:`MouseEvent`, resizeInfo?: ResizeInfo) => void;
keyBoardDown	keyboard down event	(event: KeyboardEvent) => void
keyBoardUp	keyboard release event	(event: KeyboardEvent) => void
copied	copy event	(data: string) => void
actionIconHover	Hover event of the line header operation icon	(event: CanvasEvent) => void
actionIconClick	action icon click event	(event: CanvasEvent) => void
contextMenu	Right cell click event	(data: TargetCellInfo) => void
mouseHover	table mouse hover event	(event: CanvasEvent) => void
mouseUp	table mouse up event	(event: CanvasEvent) => void
selected	cell selected event	( cells: (Cell[] ) => void
reset	interaction state reset event	(event: KeyboardEvent) => void
linkFieldJump	Link field jump event (cellData: @antv/s2 1.37.0 new)	(data: { key: string; cellData: Node; record: Data }) => void
scroll	cell scroll event (including row header and value cells)	({position: CellScrollPosition} ) => void;
colCellBrushSelection	Batch select the column header cells within the brush selection range. During the brush selection process, the brush selection range prompt mask will be displayed. After the brush selection is completed, a tooltip will pop up to display the brushed cell information (only supports pivot tables)	(cells: ColCell[]) => void;
rowCellBrushSelection	Batch select the row header cells within the brush selection range. During the brush selection process, a prompt mask for the brush selection range will be displayed. After the brush selection is completed, a tooltip will pop up to display the brushed cell information (only supports pivot tables)	( cells: RowCell[]) => void;

SheetComponentOptions

The options of Vue components are inherited from S2Options, there is a little difference

The paging configuration has changed from the paging configuration of S2 to the paging configuration of antd-vue, that is, the api transparent transmission of the antd-vue paging component is supported

import type { Pagination, S2Options } from '@antv/s2';
import type { PaginationProps } from 'ant-design-vue';

type SheetComponentOptions = S2Options<
   Element | string,
   Pagination & PaginationProps
>;

public object

TargetCellInfo

Function description: The return information of the interactive callback function.

Parameter	Description	Type
target	interaction object	S2CellType
event	event	Event
viewMeta	current node information	Node

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>>`	-

CellScrollPosition

Function description: The position information of cell scrolling.

Parameter	Description	Type	Default	Required
scrollX	Horizontal scroll offset (relative to the length of the scrollbar track)	`number`
scrollY	vertical scroll offset (relative to the length of the scrollbar track)	`number`

HiddenColumnsInfo

Function description: After enabling Hide Column Header, hide the node information of the column header

Parameter	Description	Type	Default	Required
hideColumnNodes	Currently hidden node information	Node[]
displaySiblingNode	Information about neighboring nodes displayed	{ prev:Node;next: Node }

ResizeParams

Function description: table resize (drag to change cell row height and column width) and cell style information

Parameter	Description	Type	Default	Required
info	resize configuration information	ResizeInfo
style	style-related configuration in options	style

ResizeInfo

Function description: Table resize (drag to change cell row height and column width) configuration information

Parameter	Description	Type
theme	resize hotspot configuration	ResizeArea
type	resize direction	`Horizontal` \| `Vertical`
offsetX	horizontal offset	`number`
offsetY	vertical offset	`number`
width	drag width	`number`
height	drag	`number`
size	hot zone size	`number`
effect	The area affected by the drag change	`Field` \| `Cell` \| `Tree` \| `Series`
isResizeArea	Whether it belongs to resize hot area	`boolean`
id	field id	`string`
meta	cell node information corresponding to the resize hot zone	Node
resizedWidth	Width after dragging	`number`
resizedHeight	Height after dragging	`number`

ViewMeta

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

parameter	type	Functional description
spreadsheet	SpreadSheet	Table class instance, which can access any configuration information
id	`string`	cell unique identifier
x	`number`	cell x-coordinate
the y	`number`	cell y coordinate
width	`number`	cell width
height	`number`	cell height
data	`Record<string, any>`	Cell Raw Data Metrics
rowIndex	`number`	The index of the cell in the row leaf node
colIndex	`number`	The index of the cell in the column leaf node
valueField	`string`	metric-id
fieldValue	DataItem	The true value of the metric display
isTotals	`boolean`	Whether it is a total: true is a total, false is a subtotal
rowQuery	`Record<string, any>`	Row query condition
colQuery	`Record<string, any>`	Column query condition
rowId	`string`	the row id of the cell
colId	`string`	the column id of the cell