Before reading this chapter, please make sure you have read the basic tutorial, data flow processing, layout and other chapters

In actual business scenarios, you will often encounter some scenarios where you need to obtain cell data , such as:

• Click on a row/column header cell to get all the data in the current row/column
• Listen to the mouse click hover event to obtain the current corresponding cell data
• To customize the tooltip content, it is necessary to render different operation items or display different prompt information according to the current cell information

The table of S2 is drawn by Canvas , so there will only be one dom element, a set of data structures corresponding to all cells, which store the coordinates, text information, interaction status and other information of each cell

S2 provides a series of APIs for obtaining data, some commonly used scenarios are introduced below

Get the specified area cell

After the rendering is complete, access s2.facet.getLayoutResult() to get all the cells in the current visible range. see more

await s2.render()

// ensure invoke after s2.render() completes
console.log(s2.facet.getLayoutResult())

• colLeafNodes column header leaf nodes
• colNodes column head node
• colsHierarchy column header level information
• rowLeafNodes row header leaf nodes
• rowNodes row head node
• rowsHierarchy row header level information
• getCellMeta gets the execution cell information according to the row and column indexes

For numerical cells, due to the characteristics of virtual scrolling, it needs to be obtained dynamically. For more information, please refer to the interaction API

// 当前可视范围内的数值单元格
s2.facet.getDataCells()
// 当前可视范围内未选中的数值单元格
s2.interaction.getPanelGroupAllUnSelectedDataCells()

Listen to the click event to get the corresponding cell

Take clicking the row header cell as an example

import { S2Event } from '@antv/s2'

s2.on(S2Event.ROW_CELL_CLICK, (event) => {
  // 根据 event.target 拿到表格内部当前坐标对应的单元格
  const cell = s2.getCell(event.target)
  // 获取当前单元格对应的信息
  const meta = cell.getMeta()
})

Of course, you can get the data in this way anywhere you can get the event

Get the selected cell

In scenarios such as single selection, multi-selection, and swiping selection, the S2Event.GLOBAL_SELECTED event will be revealed after selection, and the selected cell can be obtained

s2.on(S2Event.GLOBAL_SELECTED, (cells) => {
  console.log('选中的单元格', cells)
})

You can also call the interactive method to get it manually

s2.interaction.getAllCells() // 获取行/列/数值区域所有单元格
s2.interaction.getCells() // 获取所有激活的单元格 （包含不在可视范围内的）
s2.interaction.getActiveCells() // 获取所有激活的单元格 （不含不在可视范围内的）
s2.interaction.isSelectedState() // 是否是选中状态

Get row/column data

When the table is initialized, the data configuration (s2DataConfig) declared by the user will be converted into the internally required data set (dataSet), please refer to the data flow processing for details

The instance of the dataset is mounted under the s2.dataSet namespace, you can access it to get what you need:

• raw data
• summary data
• multidimensional index data
• Formatted field name, field description
• get dimension value
• single cell data
• multiple cell data

Still take clicking on the row header cell as an example:

s2.on(S2Event.ROW_CELL_CLICK, (event) => {
  // 首先拿到单元格当前信息
  const cell = s2.getCell(event.target)
  const meta = cell.getMeta()

  // 获取当前行数据
  const rowData = s2.dataSet.getCellMultiData(meta.query)
  // 获取当前行头单元格数据：
  const rowCellData = s2.dataSet.getCellData({ query: meta.query })
  // 获取当前行头维值
  const dimensionValues = s2.dataSet.getDimensionValues(meta.field)

  console.log('当前行数据：', rowData)
  console.log('当前行头单元格数据：', rowCellData)
  console.log('当前行头维值：', dimensionValues)
})

Get numeric cell data

s2.on(S2Event.DATA_CELL_CLICK, (event) => {
  // 首先拿到单元格当前信息
  const cell = s2.getCell(event.target)
  const meta = cell.getMeta()

  console.log(meta.data)
  /**
    {
    "number": 834,
    "province": "浙江省",
    "city": "舟山市",
    "type": "家具",
    "sub_type": "沙发",
    "$$extra$$": "number",
    "$$value$$": 834
  }
  */
})

Get the corresponding numerical cell data of the row and column

As shown in the figure, for example, we want to obtain the number of office supplies and paper in Zhoushan City

// 找到 "舟山市" 对应的行头单元格节点
const rowCellNode = s2.facet.getRowCellNodes().find((node) => node.id === 'root[&]浙江省[&]舟山市')
// 找到 "办公用品" 下 "纸张" 对应的 "数量"列头单元格节点
const colCellNode = s2.facet.getColCellNodes().find((node) => node.id === 'root[&]办公用品[&]纸张[&]number')

const data = s2.dataSet.getCellMultiData({...rowCellNode.query,...colCellNode.query})

  /**
  [
    {
      "number": 1634,
      "province": "浙江省",
      "city": "舟山市",
      "type": "办公用品",
      "sub_type": "纸张",
      "$$extra$$": "number",
      "$$value$$": 1634
    }
  ]
  */

Get hidden column data