Custom Interaction

Basic Interaction

Hide Columns

1. Custom interaction class

This is the basic format of a custom interaction class:

Inherit BaseEvent to get the current table instance this.spreadsheet , implement the bindEvents method, combine a series of methods provided by this.spreadsheet , and customize the interaction. Finally, the default interaction and custom interaction will be registered when the table is initialized.

import { BaseEvent } from '@antv/s2';

// 继承 BaseEvent, 可以拿到 this.spreadsheet
class HiddenInteraction extends BaseEvent {
  bindEvents() {
  }
}

Listen列头double-click event: S2Event.COL_CELL_DOUBLE_CLICK

import { BaseEvent, S2Event } from '@antv/s2';

class HiddenInteraction extends BaseEvent {
  bindEvents() {
    // 列头双击时
    this.spreadsheet.on(S2Event.COL_CELL_DOUBLE_CLICK, (event) => {
      // 获取当前单元格
      const cell = this.spreadsheet.getCell(event.target);
      // 获取当前单元格元数据
      const meta = cell.getMeta();
      // 隐藏当前列
      this.spreadsheet.interaction.hideColumns([meta.field]);
    });
  }
}

2. Register custom interaction

import { TableSheet } from '@antv/s2';

const s2Options = {
  width: 600,
  height: 300,
  interaction: {
    customInteractions: [
      {
        // 交互的唯一标识，需要保证和已有交互不冲突
        key: 'MyInteraction',
        interaction: MyInteraction,
      },
    ],
  }
};
const s2 = new TableSheet(container, s2DataConfig, s2Options);

s2.render();

3. Multiple custom interactions

Of course, you can register any number of custom interactions, for example, you don't want the browser's default menu to appear when the user right-clicks the table

import { TableSheet } from '@antv/s2';

class ContextMenuInteraction extends BaseEvent {
  bindEvents() {
    this.spreadsheet.on(S2Event.GLOBAL_CONTEXT_MENU, (event) => {
      // 禁止弹出右键菜单
      event.preventDefault();
    });
  }
}

const s2Options = {
  width: 600,
  height: 300,
  interaction: {
    customInteractions: [
      {
        key: 'MyInteraction',
        interaction: MyInteraction,
      },
      {
        key: 'ContextMenuInteraction',
        interaction: ContextMenuInteraction,
      },
    ],
  }
};

const s2 = new TableSheet(container, s2DataConfig, s2Options);

s2.render();