React Drilldown Components

const s2Options = {
  width: 600,
  height: 480,
  hierarchyType: 'tree', // 树形结构
};

<SheetComponent
  options={s2Options}
  partDrillDown={PartDrillDown}
  sheetType="pivot"  // 透视模式
/>

​📊 Check out the React version of the drilldown demo

Vue drilldown component

The drill-down component can only be used in table and perspective mode.

const s2Options = {
  width: 600,
  height: 480,
  hierarchyType: 'tree',
};

<template>
 <SheetComponent
    ref="s2"
    :sheetType="pivot"
    :partDrillDown="partDrillDown"
    :options="s2Options"
  />
</template>

​📊 Check out the Vue version of the drilldown demo

public API

Function description: Configure dimension drill-down, currently only supports drill-down in the perspective mode tree structure, row header dimension drill-down

Part Drill Down

Type: object , optional , default: {}

Note: The drillConfig and displayCondition fields in PartDrillDown will affect the re-rendering of the drill-down mode, please note that use memo or state to control its variability.

FetchCallBack

(meta: Node, drillFields: string[]) => Promise<PartDrillDownInfo>

Function description: Callback parameters after clicking the drilldown: PartDrillDownInfo

PartDrillDownInfo

Type: object , required , default value: {}

Function description: Drill down data request parameter configuration

DrillDownProps

Type: object , required , default value: {}

Function description: Drill down menu component configuration items

DataSet

Type: object , required , default value: {}

Function description: drill down data source configuration