S2

Link

Loading...

Mark the cell text as an underlined link style to achieve link jumps 🔗, there are subtle differences between pivot tables and schedule tables

tag link field

const s2DataConfig = {
  fields: {
    rows: ['province', 'city'],
    columns: ['type'],
    values: ['price'],
  },
};

const s2Options = {
  width: 600,
  height: 600,
  interaction: {
    linkFields: ['city'],
  }
};

Use S2Event.GLOBAL_LINK_FIELD_JUMP listen for link clicks

import { S2Event } from '@antv/s2'

s2.on(S2Event.GLOBAL_LINK_FIELD_JUMP, (data) => {
  const { key, record } = data;
  ...
});

pivot table

Support to mark row header rows as link style, columns and values are invalid

import { S2Event } from '@antv/s2'

const s2DataConfig = {
  fields: {
    rows: ['province', 'city'],
    columns: ['type'],
    values: ['price'],
  },
};

const s2Options = {
  width: 600,
  height: 600,
  interaction: {
    linkFields: ['province', 'city'],
  }
};

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

s2.on(S2Event.GLOBAL_LINK_FIELD_JUMP, (data) => {
  const { key, record } = data;
  const value = record[key]
  // 拼装自己的跳转地址
  location.href = `https://path/to/${key}=${value}}`;
});

s2.render();

list

Support to mark row header columns as link style

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

const s2DataConfig = {
  fields: {
    columns: ['type', 'price', 'province', 'city'],
  },
};

const s2Options = {
  width: 600,
  height: 600,
  interaction: {
    linkFields: ['type', 'price', 'province'],
  }
};

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

s2.on(S2Event.GLOBAL_LINK_FIELD_JUMP, (data) => {
  const { key, record } = data;
  const value = record[key]
  // 拼装自己的跳转地址
  location.href = `https://path/to/${key}=${value}}`;
});

s2.render();