!!!###!!!title=events——VisActor/VTable api documents!!!###!!!!!!###!!!description=VisActor/VTable api documents. This chapter mainly introduces VTable api and their usage.!!!###!!!

events.INITIALIZED

*

Triggered after successful initialization is completed

events.AFTER_RENDER

*

Triggered after each rendering is completed

events.onVChartEvent

*

Listen to vchart events, specific event types can refer to VChart Events

  /**
   * Listen to vchart events
   * @param type vchart event type
   * @param listener vchart event listener
   */
  onVChartEvent(type: string, listener: AnyFunction): void

events.CLICK_CELL

*

Mouse click on cell event.

Definition of event callback function parameter type MousePointerCellEvent:

{
  col: number;
  row: number;
  rect?: RectProps;
  x?: number;
  y?: number;
  ranges: CellRange[];
  title?: string;
  /**Dimension name */
  field?: string;
  /**Cell row list header paths */
  cellHeaderPaths?: ICellHeaderPaths;
  /**Cell position */
  cellRange?: RectProps;
  /**Entire row data - raw data */
  originData?: any;
  /**Formatted value */
  value?: string|number;
  /**Original value */
  dataValue?: string|number;
  cellLocation?: CellLocation;
  cellType?: string;
  related?: CellAddress;
  scaleRatio?: number;
  targetIcon?: { name: string; position: RectProps; funcType: string };
  event?: MouseEvent | PointerEvent | TouchEvent;
}

Including:

The CellRange type is defined as:

interface CellRange {
  start: CellAddress;
  end: CellAddress;
}

The type definition for CellAddress is:

interface CellAddress {
  col: number;
  row: number;
}

The definition of ICellHeaderPaths type is:

export type ICellHeaderPaths = IListTableCellHeaderPaths | IPivotTableCellHeaderPaths;
export type IListTableCellHeaderPaths = {
  readonly colHeaderPaths?: {
    field: FieldDef;
  }[];
  readonly rowHeaderPaths?: {
    field: FieldDef;
  }[];
};
export type IPivotTableCellHeaderPaths = {
  /** Column header information of multi-level paths in list headers */
  readonly colHeaderPaths?: {
    dimensionKey?: string;
    indicatorKey?: string;
    value?: string;
  }[];
  /** Row header information of multi-level paths in row headers */
  readonly rowHeaderPaths?: {
    dimensionKey?: string;
    indicatorKey?: string;
    value?: string;
  }[];
};

CellLocation is defined as:

type CellLocation = 'body' | 'rowHeader' | 'columnHeader' | 'cornerHeader';

events.DBLCLICK_CELL

*

Mouse double-click cell event.

Refer to the parameter types introduced in the CLICK_CELL event for the parameter types of the event callback function.

events.MOUSEDOWN_CELL

*

Mouse press event on cell

Refer to the parameter types described in the CLICK_CELL event for the parameter types of the event callback function.

events.MOUSEUP_CELL

*

Cell mouse release event

Refer to the parameter types introduced in the CLICK_CELL event for the parameter types of the event callback function.

events.SELECTED_CELL

*

Cell selected state change event

Definition of the event callback function corresponding parameter type SelectedCellEvent:

{
  col: number;
  row: number;
  rect?: RectProps;
  x?: number;
  y?: number;
  ranges: CellRange[];
}

Where:

The CellRange type is defined as:

interface CellRange {
  start: CellAddress;
  end: CellAddress;
}

The type definition for CellAddress is:

interface CellAddress {
  col: number;
  row: number;
}

events.SELECTED_CLEAR

*

Cell selected state all be cleard, when click table's blank region, this event will be triggered.

events.KEYDOWN

*

keystroke event

The definition of KeydownEvent type is:

{
  keyCode: number;
  code: string;
  event: KeyboardEvent;
  cells?: CellInfo[][];
  stopCellMoving?: () => void;
  scaleRatio?: number;
};

CellInfo type is defined as:

{
  col: number;
  row: number;
  title?: string;
  /**Dimension name */
  field?: string;
  /**Cell row header paths */
  cellHeaderPaths?: ICellHeaderPaths;
  /**Cell position */
  cellRange?: RectProps;
  /**Entire data - original data */
  originData?: any;
  /**Value after format */
  value?: string|number;
  /**Original value */
  dataValue?: string|number;
  cellLocation?: CellLocation;
  cellType?: string;
};

The definition of ICellHeaderPaths type is:

export type ICellHeaderPaths = IListTableCellHeaderPaths | IPivotTableCellHeaderPaths;
export type IListTableCellHeaderPaths = {
  readonly colHeaderPaths?: {
    field: FieldDef;
  }[];
  readonly rowHeaderPaths?: {
    field: FieldDef;
  }[];
};
export type IPivotTableCellHeaderPaths = {
  /** Column header information of multi-level paths in list headers */
  readonly colHeaderPaths?: {
    dimensionKey?: string;
    indicatorKey?: string;
    value?: string;
  }[];
  /** Row header information of multi-level paths in row headers */
  readonly rowHeaderPaths?: {
    dimensionKey?: string;
    indicatorKey?: string;
    value?: string;
  }[];
};

The type definition of RectProps is:

interface RectProps {
  left: number;
  right: number;
  top: number;
  bottom: number;
  width: number;
  height: number;
}

CellLocation is defined as:

type CellLocation = 'body' | 'rowHeader' | 'columnHeader' | 'cornerHeader';

events.MOUSEMOVE_CELL

*

Mouse over a cell event

Refer to the parameter types introduced in the CLICK_CELL event for the parameter types of the event callback function.

events.MOUSEENTER_CELL

*

Mouse into cell event

Refer to the parameter types introduced in the CLICK_CELL event for the parameter types of the event callback function.

events.MOUSELEAVE_CELL

*

Mouse-out-of-cell event

Refer to the parameter types introduced in the CLICK_CELL event for the parameter types of the event callback function.

events.CONTEXTMENU_CELL

*

Cell right-click events

Event callback function corresponding parameter type MousePointerMultiCellEvent definition:

{
  col: number;
  row: number;
  rect?: RectProps;
  x?: number;
  y?: number;
  ranges: CellRange[];
  title?: string;
  /**Dimension name */
  field?: string;
  /**Cell row header paths */
  cellHeaderPaths?: ICellHeaderPaths;
  /**Cell position */
  cellRange?: RectProps;
  /**Entire data - original data */
  originData?: any;
  /**Formatted value */
  value?: string|number;
  /**Original value */
  dataValue?: string|number;
  cellLocation?: CellLocation;
  cellType?: string;
  related?: CellAddress;
  scaleRatio?: number;
  targetIcon?: { name: string; position: RectProps; funcType: string };
  cells: CellInfo[][];
  event?: MouseEvent | PointerEvent | TouchEvent;
}

Among them:

The CellRange type is defined as:

interface CellRange {
  start: CellAddress;
  end: CellAddress;
}

The type definition for CellAddress is:

interface CellAddress {
  col: number;
  row: number;
}

The definition of ICellHeaderPaths type is:

export type ICellHeaderPaths = IListTableCellHeaderPaths | IPivotTableCellHeaderPaths;
export type IListTableCellHeaderPaths = {
  readonly colHeaderPaths?: {
    field: FieldDef;
  }[];
  readonly rowHeaderPaths?: {
    field: FieldDef;
  }[];
};
export type IPivotTableCellHeaderPaths = {
  /** Column header information of multi-level paths in list headers */
  readonly colHeaderPaths?: {
    dimensionKey?: string;
    indicatorKey?: string;
    value?: string;
  }[];
  /** Row header information of multi-level paths in row headers */
  readonly rowHeaderPaths?: {
    dimensionKey?: string;
    indicatorKey?: string;
    value?: string;
  }[];
};

CellLocation is defined as:

type CellLocation = 'body' | 'rowHeader' | 'columnHeader' | 'cornerHeader';

CellInfo type is defined as:

{
  col: number;
  row: number;
  title?: string;
  /**Dimension name */
  field?: string;
  /**Cell row header paths */
  cellHeaderPaths?: ICellHeaderPaths;
  /**Cell position */
  cellRange?: RectProps;
  /**Entire data - original data */
  originData?: any;
  /**Value after format */
  value?: string|number;
  /**Original value */
  dataValue?: string|number;
  cellLocation?: CellLocation;
  cellType?: string;
};

events.MOUSEENTER_TABLE

*

This event is triggered when the mouse enters the table area

events.MOUSELEAVE_TABLE

*

This event is triggered when the mouse leaves the table area.

events.MOUSEDOWN_TABLE

*

This event is triggered when the mouse is pressed in the table area.

events.RESIZE_COLUMN

*

Column width adjustment events.

Event callback function parameter types.

{ col: number. colWidth: number }

events.RESIZE_COLUMN_END

*

Column width adjustment end event.

Event callback function parameter types.

{ col: number. columns: number[] }

events.RESIZE_ROW

*

Row height adjustment events.

Event callback function parameter types.

{ row: number; rowHeight: number }

events.RESIZE_ROW_END

*

Row height adjustment end event.

Event callback function parameter types.

{ row: number; rowHeight: number }

events.CHANGE_HEADER_POSITION

*

Events for dragging the table header to move its position

Event callback function parameter types. { source: CellAddress. target: CellAddress }

events.SORT_CLICK

*

Click on the sort icon event.

Event callback function parameter types. { field: string; order: 'asc' | 'desc' | 'normal'; event: Event; }

events.AFTER_SORT

*

after execute sort logic.

Event callback function parameter types. { field: string; order: 'asc' | 'desc' | 'normal'; event: Event; }

events.FREEZE_CLICK

*

Click on the fixed column icon to freeze or unfreeze the event.

Event callback function parameter types. { col: number; row: number fields: string[]; colCount: number; }

events.SCROLL

*

Scroll form events.

Event callback function parameter types. { scrollLeft: number; scrollTop: number; scrollWidth: number; scrollHeight: number; viewWidth: number; viewHeight: number; }

events.SCROLL_HORIZONTAL_END

*

Scroll horizontally to the right to end the event

Event callback function parameter types. { scrollLeft: number; scrollTop: number; scrollWidth: number; scrollHeight: number; viewWidth: number; viewHeight: number; }

events.SCROLL_VERTICAL_END

*

Vertical scroll bar scrolls to the end position

Event callback function parameter types. { scrollLeft: number; scrollTop: number; scrollWidth: number; scrollHeight: number; viewWidth: number; viewHeight: number; }

events.MOUSEOVER_CHART_SYMBOL

*

Mouse over mini-graph marker event

Definition of the event callback function's corresponding argument type MousePointerSparklineEvent:

{
  col: number;
  row: number;
  rect?: RectProps;
  x?: number;
  y?: number;
  ranges: CellRange[];
  title?: string;
  /** Dimension name */
  field?: string;
  /** Cell row header paths */
  cellHeaderPaths?: ICellHeaderPaths;
  /** Position of the cell */
  cellRange?: RectProps;
  /** Entire data - Raw data */
  originData?: any;
  /** Formatted value */
  value?: string|number;
  /** Original value */
  dataValue?: string|number;
  cellLocation?: CellLocation;
  cellType?: string;
  related?: CellAddress;
  scaleRatio?: number;
  targetIcon?: { name: string; position: RectProps; funcType: string };
  sparkline: {
    pointData: any;
  };
  event?: MouseEvent | PointerEvent | TouchEvent;
}

Among them:

The CellRange type is defined as:

interface CellRange {
  start: CellAddress;
  end: CellAddress;
}

The type definition for CellAddress is:

interface CellAddress {
  col: number;
  row: number;
}

The definition of ICellHeaderPaths type is:

export type ICellHeaderPaths = IListTableCellHeaderPaths | IPivotTableCellHeaderPaths;
export type IListTableCellHeaderPaths = {
  readonly colHeaderPaths?: {
    field: FieldDef;
  }[];
  readonly rowHeaderPaths?: {
    field: FieldDef;
  }[];
};
export type IPivotTableCellHeaderPaths = {
  /** Column header information of multi-level paths in list headers */
  readonly colHeaderPaths?: {
    dimensionKey?: string;
    indicatorKey?: string;
    value?: string;
  }[];
  /** Row header information of multi-level paths in row headers */
  readonly rowHeaderPaths?: {
    dimensionKey?: string;
    indicatorKey?: string;
    value?: string;
  }[];
};

CellLocation is defined as:

type CellLocation = 'body' | 'rowHeader' | 'columnHeader' | 'cornerHeader';

events.DRAG_SELECT_END

*

Drag-and-drop boxed cell mouse release event

Event callback function corresponding parameter type MousePointerMultiCellEvent definition:

{
  col: number;
  row: number;
  rect?: RectProps;
  x?: number;
  y?: number;
  ranges: CellRange[];
  title?: string;
  /**Dimension name */
  field?: string;
  /**Cell row header paths */
  cellHeaderPaths?: ICellHeaderPaths;
  /**Cell position */
  cellRange?: RectProps;
  /**Entire data - original data */
  originData?: any;
  /**Formatted value */
  value?: string|number;
  /**Original value */
  dataValue?: string|number;
  cellLocation?: CellLocation;
  cellType?: string;
  related?: CellAddress;
  scaleRatio?: number;
  targetIcon?: { name: string; position: RectProps; funcType: string };
  cells: CellInfo[][];
  event?: MouseEvent | PointerEvent | TouchEvent;
}

Among them:

The CellRange type is defined as:

interface CellRange {
  start: CellAddress;
  end: CellAddress;
}

The type definition for CellAddress is:

interface CellAddress {
  col: number;
  row: number;
}

The definition of ICellHeaderPaths type is:

export type ICellHeaderPaths = IListTableCellHeaderPaths | IPivotTableCellHeaderPaths;
export type IListTableCellHeaderPaths = {
  readonly colHeaderPaths?: {
    field: FieldDef;
  }[];
  readonly rowHeaderPaths?: {
    field: FieldDef;
  }[];
};
export type IPivotTableCellHeaderPaths = {
  /** Column header information of multi-level paths in list headers */
  readonly colHeaderPaths?: {
    dimensionKey?: string;
    indicatorKey?: string;
    value?: string;
  }[];
  /** Row header information of multi-level paths in row headers */
  readonly rowHeaderPaths?: {
    dimensionKey?: string;
    indicatorKey?: string;
    value?: string;
  }[];
};

CellLocation is defined as:

type CellLocation = 'body' | 'rowHeader' | 'columnHeader' | 'cornerHeader';

CellInfo type is defined as:

{
  col: number;
  row: number;
  title?: string;
  /**Dimension name */
  field?: string;
  /**Cell row header paths */
  cellHeaderPaths?: ICellHeaderPaths;
  /**Cell position */
  cellRange?: RectProps;
  /**Entire data - original data */
  originData?: any;
  /**Value after format */
  value?: string|number;
  /**Original value */
  dataValue?: string|number;
  cellLocation?: CellLocation;
  cellType?: string;
};

events.DRILLMENU_CLICK

*

Drill-down button click event. Pivot table proprietary event

The type definition for DrillMenuEventInfo is:

 {
  dimensionKey: string | number;
  title: string;
  drillDown: boolean;
  drillUp: boolean;
  col: number;
  row: number;
}

events.DROPDOWN_ICON_CLICK

*

Click on the drop-down menu button

The type definition for CellAddress is:

interface CellAddress {
  col: number;
  row: number;
}

events.DROPDOWN_MENU_CLICK

*

The drop-down menu options click on the event

Definition of event callback function parameter type DropDownMenuEventArgs:

  {
    col: number;
    row: number;
    menuKey: string;
    text: string;
    highlight: boolean;
    field?: string;
    /**formatted value */
    value?: string;
    /**original value */
    dataValue?: string;
    subIndex?: number;

    dimensionKey?: string | number;
    isPivotCorner?: boolean;
    customInfo?: any;

    cellHeaderPaths?: ICellHeaderPaths;
    cellLocation: CellLocation;
  }

In which:

The definition of ICellHeaderPaths type is:

export type ICellHeaderPaths = IListTableCellHeaderPaths | IPivotTableCellHeaderPaths;
export type IListTableCellHeaderPaths = {
  readonly colHeaderPaths?: {
    field: FieldDef;
  }[];
  readonly rowHeaderPaths?: {
    field: FieldDef;
  }[];
};
export type IPivotTableCellHeaderPaths = {
  /** Column header information of multi-level paths in list headers */
  readonly colHeaderPaths?: {
    dimensionKey?: string;
    indicatorKey?: string;
    value?: string;
  }[];
  /** Row header information of multi-level paths in row headers */
  readonly rowHeaderPaths?: {
    dimensionKey?: string;
    indicatorKey?: string;
    value?: string;
  }[];
};

CellLocation is defined as:

type CellLocation = 'body' | 'rowHeader' | 'columnHeader' | 'cornerHeader';

events.DROPDOWN_MENU_CLEAR

*

Clear drop-down menu event (clicking on other areas while the menu is displayed)

The type definition for CellAddress is:

interface CellAddress {
  col: number;
  row: number;
}

events.TREE_HIERARCHY_STATE_CHANGE

*

Tree structure expand and collapse click events

events.SHOW_MENU

*

Displays menu events.

Event callback function parameter types. { x: number. y: number. col: number. row: number. type: 'dropDown' | 'contextmenu' | 'custom'; }

events.HIDE_MENU

*

Hide menu events

events.ICON_CLICK

*

icon icon click event.

Event callback function parameter types. { name: string; col: number. row: number. x: number. y: number. funcType?: IconFuncTypeEnum | string; icon: Icon. }

events.PIVOT_SORT_CLICK

*

Sort icon click event in the pivot table. PivotTable proprietary events!

Event callback function parameter types. { col: number. row: number. order: 'asc' | 'desc' | 'normal'. dimensionInfo: IDimensionInfo[]; cellLocation: CellLocation. } Among them:

CellLocation is defined as:

type CellLocation = 'body' | 'rowHeader' | 'columnHeader' | 'cornerHeader';

events.LEGEND_ITEM_CLICK

*

Legend item click event. Legend exclusive event

The parameter type of the event callback function:

   { model: any; value: any; event: PointerEvent };

events.LEGEND_ITEM_HOVER

*

Legend item hover event. Legend exclusive event

The parameter type of the event callback function:

   { model: any; value: any; event: PointerEvent };

events.LEGEND_ITEM_UNHOVER

*

Legend item hover to unhover events. Legend exclusive event

The parameter type of the event callback function:

   { model: any; value: any; event: PointerEvent };

events.LEGEND_CHANGE

*

Color legend, size legend, this event is triggered after the user operates the legend range. Legend exclusive event

Parameter types of event callback function:

   { model: any; value: any; event: PointerEvent };

events.MOUSEENTER_AXIS

*

The mouse enters the coordinate axis event. Axis-specific events

The parameter type of the event callback function:

 MousePointerCellEvent & { axisPosition: 'left' | 'right' | 'top' | 'bottom' };

Definition of event callback function parameter type MousePointerCellEvent:

{
  col: number;
  row: number;
  rect?: RectProps;
  x?: number;
  y?: number;
  ranges: CellRange[];
  title?: string;
  /**Dimension name */
  field?: string;
  /**Cell row list header paths */
  cellHeaderPaths?: ICellHeaderPaths;
  /**Cell position */
  cellRange?: RectProps;
  /**Entire row data - raw data */
  originData?: any;
  /**Formatted value */
  value?: string|number;
  /**Original value */
  dataValue?: string|number;
  cellLocation?: CellLocation;
  cellType?: string;
  related?: CellAddress;
  scaleRatio?: number;
  targetIcon?: { name: string; position: RectProps; funcType: string };
  event?: MouseEvent | PointerEvent | TouchEvent;
}

Including:

The CellRange type is defined as:

interface CellRange {
  start: CellAddress;
  end: CellAddress;
}

The type definition for CellAddress is:

interface CellAddress {
  col: number;
  row: number;
}

The definition of ICellHeaderPaths type is:

export type ICellHeaderPaths = IListTableCellHeaderPaths | IPivotTableCellHeaderPaths;
export type IListTableCellHeaderPaths = {
  readonly colHeaderPaths?: {
    field: FieldDef;
  }[];
  readonly rowHeaderPaths?: {
    field: FieldDef;
  }[];
};
export type IPivotTableCellHeaderPaths = {
  /** Column header information of multi-level paths in list headers */
  readonly colHeaderPaths?: {
    dimensionKey?: string;
    indicatorKey?: string;
    value?: string;
  }[];
  /** Row header information of multi-level paths in row headers */
  readonly rowHeaderPaths?: {
    dimensionKey?: string;
    indicatorKey?: string;
    value?: string;
  }[];
};

CellLocation is defined as:

type CellLocation = 'body' | 'rowHeader' | 'columnHeader' | 'cornerHeader';

events.MOUSELEAVE_AXIS

*

The mouse leaves the axis event. Axis-specific events

The parameter type of the event callback function: Same as MOUSEENTER_AXIS

events.COPY_DATA

*

Cell content copy event.

Parameter types of event callback function:

 { cellRange: CellRange[]; copyData: string };

events.CHANGE_CELL_VALUE

*

Event that changes the cell value.

Parameter types of event callback function:

{ col: number; row: number; rawValue: string | number; currentValue: string | number; changedValue: string | number };

events.CHECKBOX_STATE_CHANGE

*

Change the checkbox state. ListTable table exclusive event

Parameter types of event callback function:

{
  col: number;
  row: number;
  alue: string | number;
  dataValue: string | number;
  checked: boolean;
};

events.RADIO_STATE_CHANGE

*

Change the radio state. ListTable table exclusive event

Parameter types of event callback function:

{
  col: number;
  row: number;
  alue: string | number;
  dataValue: string | number;
  radioIndexInCell: boolean | number;
};

If there is only one radio button in the cell, radioIndexInCell is of type boolean, indicating whether it is selected; if there are multiple radio buttons in the cell, radioIndexInCell is of type number, indicating the index of the selected radio button.