S2

Functional description: properties and methods related to the interaction class. details

s2.interaction.reset()

parameter	illustrate	type
spreadsheet	Form example	SpreadSheet
interactions	currently registered interactions	`Map<string, BaseEvent>`
intercept	Currently intercepted interactions to prevent conflicts between different interactions	`Set<Intercept>`
destroy	Unloads all interactive instances and resets to initial state	`() => void`
reset	reset all interactions	`() => void`
setState	set state	(data: InteractionStateInfo ) => void
getState	get current state	`() => void`
resetState	reset to initial state	`() => void`
clearState	Clear state and redraw	`() => void`
changeState	update status	(data: InteractionStateInfo ) => void
setInteractedCells	Set the currently changed cell	(cell: S2CellType ) => void
getInteractedCells	Get the currently changed cell	() => S2CellType []
getCurrentStateName	Get the current state name	`() => void`
isEqualStateName	Is it the same state name	`(name: InteractionStateName) => void`
isSelectedState	Is it selected	`() => void`
isHoverState	Is it a hover state	`() => void`
isHoverFocusState	Is it the hovering focus state (hovering at the cell `focusTime` : after 800ms by default)	`() => void`
isSelectedCell	Is it the selected cell	(cell: S2CellType ) => void
isActiveCell	is the active cell	(cell: S2CellType ) => void
getCells	Get the Cells metadata list of the current interaction record, including the cells not in the viewport	`() => Partial<ViewMeta>[]`
getActiveCells	Get the cell instance currently in the visible area	`() => S2CellType[]`
clearStyleIndependent	clear cell styles	`() => void`
getPanelGroupAllUnSelectedDataCells	Get the selected value cell in the visible area	`() => DataCell[]`
getPanelGroupAllDataCells	Get all numerical cells in the visible area	`() => DataCell[]`
getAllRowHeaderCells	Get row header cell	`() => RowCell[]`
getAllColHeaderCells	Get column header cell	`() => ColCell[]`
getRowColActiveCells	Get the active cell of row header and column header	`() => RowCell[] \| ColCell[]`
getAllCells	Get all cells in the visible area	() => S2CellType []
selectAll	select all cells	`() => void`
changeCell	Select the specified row and column header cell	(changeCellInfo: ChangeCellOptions ) => boolean
getCellChildrenNodes	Get all child nodes of the current cell	(cell: S2CellType ) => Node []
hideColumns	Hidden column (when forceRender is `false` , if the hidden column is empty, the table update will no longer be triggered)	`(hiddenColumnFields: string[], forceRender?: boolean = true) => void`
mergeCells	Merge Cells	(cellsInfo?: MergedCellInfo [], hideData?: boolean) => void
unmergeCells	unmerge cells	`(removedCells: MergedCell[]) => void`
updateAllDataCells	update all value cells	`() => void`
updateCells	Update the specified cell	(cells: S2CellType []) => void
addIntercepts	Added interactive interception	(interceptTypes: InterceptType []) => void
hasIntercepts	Whether there is an interaction specified for interception	(interceptTypes: InterceptType []) => boolean
removeIntercepts	Remove specified interaction interception	(interceptTypes: InterceptType []) => void
highlightNodes	Highlight the cell corresponding to the node	(nodes: Node []) => void

Interaction

parameter	illustrate	type	Defaults	required
linkFields	The mark field is a link style, which is used for external link jumps	`string[]` \| (meta: Node \| ViewMeta) => boolean
selectedCellsSpotlight	Whether to enable the selected highlight spotlight effect	`boolean`	`false`
hoverHighlight	Highlight the current cell, and the corresponding row and column headers when the mouse hovers	`boolean`	`true`
hoverFocus	After the mouse hovers over the current cell for more than the default 800ms, it will keep the current highlight and display the tooltip. The hovering time is controlled by setting the `duration`	`boolean\	{duration: number}`	`true`
hiddenColumnFields	It is used to configure the columns that are hidden by default. The pivot table needs to configure the unique id of the column header, and the detail table can be configured with the field field of the column header.	`string[]`
enableCopy	Whether to allow copying	`boolean`	`false`
withHeader	Whether to copy data with header information	`boolean`	`false`
withFormat	Whether to use the field format format to copy	`boolean`	`false`
customInteractions	Customize interaction details	CustomInteraction[]
scrollSpeedRatio	Used to control the scroll rate, divided into horizontal and vertical directions, the default is 1	ScrollSpeedRatio
autoResetSheetStyle	Used to control whether to reset the interactive state when clicking the area outside the table and pressing the esc key	`boolean`	`true`
resize	Used to control whether the resize hotspot is displayed	`boolean` \	ResizeInteractionOptions	`true`
brushSelection	Whether to allow cells (including row headers, column headers, and value cells) to be selected. Row header, column header selection only supports pivot tables	`boolean` \	Brush Selection	`true`
multiSelection	Whether to allow multiple selection (including row headers, column headers, and value cells)	`boolean`	`true`
rangeSelection	Whether to allow quick multiple selection of intervals	`boolean`	`true`
scrollbarPosition	Used to control whether the scroll bar is displayed on the edge of the content area or the edge of the canvas	`content\	canvas`	`content`
eventListenerOptions	Optional configuration of the event listening function `addEventListener` , which can control whether the event is triggered from the bubbling phase or the capturing phase	`false`
selectedCellHighlight	Highlight behavior after grid is selected rowHeader: Whether to highlight the row header where the selected grid is located colHeader: Whether to highlight the column header where the selected grid is located currentRow: Whether to highlight the row where the grid is located currentCol: whether to highlight the column where the grid is located true: Same as {rowHeader: true, colHeader: true}	`boolean	{ rowHeader?: boolean, colHeader?: boolean, currentRow?: boolean, currentCol?: boolean }`
overscrollBehavior	Controls the behavior of scrolling to bounds, which disables the browser's default scrolling behavior. details	`auto \| contain \| none \| null`	`auto`

CustomInteraction

Function description: custom interaction, inherit baseEvent: concrete example

parameter	illustrate	type	Defaults	required
key	unique identifier for the interaction	`string`		✓
interaction		Interaction Constructor		✓

ScrollSpeedRatio

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

ResizeInteractionOptions

parameter	illustrate	type	Defaults
rowCellVertical	Whether to open the line header vertical resize hot zone	`boolean`	true
cornerCellHorizontal	Whether to enable the resize hotspot in the horizontal direction of the corner head	`boolean`	true
colCellHorizontal	Whether to enable the horizontal resize hotspot of the column header	`boolean`	true
colCellVertical	Whether to enable the column header vertical resize hot zone (this configuration is invalid when the column header is hidden)	`boolean`	true
rowResizeType	It is used to control whether the row height resize will take effect for all Cells at the same time, or only for the current row. Applies to all rows by default	`all` \| `current`	`all`
disable	It is used to control whether the row height resize is effective or not. View example	(resizeInfo: S2CellType ) => boolean
visible	Customize whether the current cell displays the resize hotspot	(cell: S2CellType ) => boolean

brushSelection

parameter	illustrate	type	Defaults
dataCell	Whether to allow numerical cell selection	`boolean`	true
rowCell	Whether to allow row header cell selection (only supports pivot tables)	`boolean`	false
colCell	Whether to allow column header cell selection (only supports pivot tables)	`boolean`	false

Interaction Constructor

export type InteractionConstructor = new (
  spreadsheet: SpreadSheet,
) => BaseEvent;

BaseEvent

export abstract class BaseEvent {
  public spreadsheet: SpreadSheet;

  constructor(spreadsheet: SpreadSheet) {
    this.spreadsheet = spreadsheet;
    this.bindEvents();
  }

  public abstract bindEvents(): void;
}

InterceptType

export 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',
}

S2CellType

type S2CellType<T extends SimpleBBox = ViewMeta> =
  | DataCell
  | HeaderCell
  | ColCell
  | CornerCell
  | RowCell
  | MergedCell
  | BaseCell<T>;

ChangeCellOptions

interface ChangeCellOptions {
  cell: S2CellType<ViewMeta>; // 目标单元格
  isMultiSelection?: boolean; // 是否是多选
}

MergedCellInfo

interface MergedCellInfo {
  colIndex?: number;
  rowIndex?: number;
  showText?: boolean;
}

InteractionStateInfo

interface InteractionStateInfo {
  stateName?: InteractionStateName;
  cells?: CellMeta[];
  interactedCells?: S2CellType[];
  nodes?: Node[];
  force?: boolean;
}

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