API

React table component
SpreadsheetProps

Function description: The props parameter of the React SheetComponent component

ParameterDescriptionTypeDefaultRequired
sheetTypeForm type:
1. pivot: pivot table
2. table: detail table
3. gridAnalysis: grid analysis table
4. strategy: trend analysis table
pivot | table | gridAnalysis | strategy | pivot
spreadsheetcustom table(container: HTMLElement | string, dataCfg: S2DataConfig, options: SheetComponentOptions) => [SpreadSheet](/ docs/api/basic-class/spreadsheet)
dataCfgPivot table data mapping related configuration itemsS2DataConfig✓
optionspivot table property configuration itemSheetComponentOptions✓
partDrillDownAttributes related to dimension drilldownPartDrillDown
adaptiveWhether to adapt to the window size`boolean{ width?: boolean, height?: boolean, getContainer: () => HTMLElement }`false
themeCfgCustom pivot table theme stylesThemeCfg
loadingControls the loading state of the tableboolean
onRangeSortCallback event triggered when sorting within a group(params: SortParam[] ) => void;
onRowCellHoverRow header mouse hover event(data: TargetCellInfo) => void
onRowCellClickrow head mouse click event(data: TargetCellInfo) => void
onRowCellDoubleClickMouse double-click event at row head(data: TargetCellInfo) => void
onRowCellMouseDownrow header mouse down event(data: TargetCellInfo) => void
onRowCellMouseUpRow cell mouse release event(data: TargetCellInfo) => void
onRowCellMouseMoveRow cell mouse movement event(data: TargetCellInfo) => void
onRowCellCollapsedNode expand/collapse event callback({ isCollapsed: boolean, collapseFields: Record<string, boolean>, node: Node ) => void;
onRowCellAllCollapsedEvent callback for all nodes expanded/collapsed(isCollapsed: boolean ) => void;
onRowCellScrollrow header cell scroll event({position: CellScrollPosition} ) => void;
onColCellHoverColumn header mouse hover event(data: TargetCellInfo) => void
onColCellClickColumn head mouse click event(data: TargetCellInfo) => void
onColCellDoubleClickMouse double-click event of column header(data: TargetCellInfo) => void
onColCellMouseDownColumn header mouse down event(data: TargetCellInfo) => void
onColCellMouseUpColumn header mouse release event(data: TargetCellInfo) => void
onColCellMouseMoveColumn head mouse move event(data: TargetCellInfo) => void
onColCellExpandedAfter the hidden column header is enabled (tooltip.operation.hiddenColumns = true), the event callback for column header expansion(collapseAll: boolean ) => void;
onColCellHiddenAfter the hidden column header is enabled (tooltip.operation.hiddenColumns = true), the event callback for the hidden column header({data: { currentHiddenColumnsInfo:HiddenColumnsInfo;hiddenColumnsDetail:HiddenColumnsInfo;} ) => void;
onDataCellHovermouse hover event of numeric cell(data: TargetCellInfo) => void
onDataCellClickMouse click event of numeric cell(data: TargetCellInfo) => void
onDataCellDoubleClickValue cell double click event(data: TargetCellInfo) => void
onDataCellMouseDownMouse down event of numeric cell(data: TargetCellInfo) => void
onDataCellMouseUpNumeric cell mouse release event(data: TargetCellInfo) => void
onDataCellMouseMoveNumeric cell mouse movement event(data: TargetCellInfo) => void
onDataCellBrushSelectionValue cell brush selection event( dataCells: DataCell[] ) => void
onDataCellSelectMoveNumerical cell keyboard direction key move event(metas: CellMeta[]) => void
onCornerCellHovercorner mouse hover event(data: TargetCellInfo) => void
onCornerCellClickCorner mouse click event(data: TargetCellInfo) => void
onCornerCellDoubleClickCorner cell double click event(data: TargetCellInfo) => void
onCornerCellMouseUpcorner mouse down event(data: TargetCellInfo) => void
onCornerCellMouseUpcorner mouse release event(data: TargetCellInfo) => void
onCornerCellMouseMovecorner mouse movement event(data: TargetCellInfo) => void
onMergedCellsHoverMouseover event of merged cells(data: TargetCellInfo) => void
onMergedCellsClickMouse click event of merged cells(data: TargetCellInfo) => void
onMergedCellDoubleClickMouse double-click event for merged cells(data: TargetCellInfo) => void
onMergedCellsMouseDownMerged cell press event(data: TargetCellInfo) => void
onMergedCellsMouseUpMerged cell release event(data: TargetCellInfo) => void
onMergedCellsMouseMovemerged cell move event(data: TargetCellInfo) => void
onRangeSortA callback event is triggered when sorting within a group (for now only pivot tables are supported)(params: SortParam[] ) => void;
onRangeSortedA callback event is triggered when the sorting in the group ends (for now, only pivot tables are supported)(event: CanvasEvent ) => void;
onRangeFilterTrigger callback event when filtering(data: { filterKey: string; filteredValues: string[] } ) => void;
onRangeFilteredTrigger callback event after filtering(data: DataType[] ) => void;
onLayoutCellRenderThe header layout cell mount completed eventcell: S2CellType
onLayoutAfterHeaderLayoutHeader layout structure preparation completion event(layoutResult: LayoutResult ) => void;
onLayoutPaginationpagination event({ pageSize: number; pageCount: number; total: number; current: number;} ) => void;
onLayoutCellScrollCell scroll event (Deprecated, please use onScroll instead)({position: CellScrollPosition} ) => void;
onLayoutAfterCollapseRowsEvent callback after collapsing row headers in tree mode({collapseFields: Record<string, boolean>, meta: Node ) => void;
onBeforeRenderEvent before start of render() => void;
onAfterRenderrender completed event() => void;
onMountedTable loading complete event, you can get the table instance details(spreadsheet: SpreadSheet) => void;
onDestroyform destruction event() => void;
onLayoutResizeThe overall changeSize event of the table(params: ResizeParams) => void;
onLayoutResizeSeriesWidthTable serial number row width event(params: ResizeParams) => void;
onLayoutResizeRowWidthrow header cell width change event(params: ResizeParams) => void;
onLayoutResizeRowHeightRow header cell height change event(params: ResizeParams) => void;
onLayoutResizeColWidthColumn header cell width change event(params: ResizeParams) => void;
onLayoutResizeColHeightColumn header cell height change event(params: ResizeParams) => void;
onLayoutResizeTreeWidthThe overall width change event of the tree line header(params: ResizeParams) => void;
onLayoutResizeMouseDownmouse down event of resize hotspot( event: MouseEvent, resizeInfo?: ResizeInfo) => void;
onLayoutResizeMouseUpmouse release event of resize hotspot( event: MouseEvent, resizeInfo?: ResizeInfo) => void;
onLayoutResizeMouseMovemouse move event of resize hotspot( event: MouseEvent, resizeInfo?: ResizeInfo) => void;
onKeyBoardDownkeyboard down event(event: KeyboardEvent) => void
onKeyBoardUpkeyboard release event(event: KeyboardEvent) => void
onCopiedcopy event(data: string) => void
onActionIconHoverLine header operation icon hover event(event: CanvasEvent) => void
onActionIconClickAction icon click event(event: CanvasEvent) => void
onContextMenuRight cell click event(data: TargetCellInfo) => void
onMouseHovertable mouse hover event(event: CanvasEvent) => void
onMouseUptable mouse release event(event: CanvasEvent) => void
onSelectedcell selected event(cells: ( Cell[] ) => void
onResetInteractive state reset event(event: KeyboardEvent) => void
onLinkFieldJumpLink field jump event (cellData: @antv/s2 1.37.0 new)(data: { key: string; cellData: Node; record: Data }) => void
onScrollcell scroll event (including row header and value cells)({position: CellScrollPosition} ) => void;
onColCellBrushSelectionBatch 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;
onRowCellBrushSelectionBatch 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
Vue table component
Vue table component
public object