Posted on Jun 14, 2024

How to implement dimension drill-down function when using VTable pivot table component?

#visactor #vtable #webdev #visiualization

Problem Description

Does the VTable pivot table support drill-down interaction on the front end?

Solution

Configuring this will give you an icon and listen for events (https://visactor.io/vtable/api/events#DRILLMENU_CLICK). Call the interface updateOption to update the full configuration after obtaining new data.

Code Example

You can refer to the official demo: https://visactor.io/vtable/demo/data-analysis/pivot-analysis-table-drill.
Key configuration for drillDown:

const option = { records: data, rows: [ { dimensionKey: 'Category', title: 'Category', drillDown: true, headerStyle: { textStick: true }, width: 'auto' } ], columns: [ { dimensionKey: 'Region', title: 'Region', headerStyle: { textStick: true }, width: 'auto' } ], indicators: ... };

After configuration, the drill-down icon is displayed, and the click event of the icon drillmenu_click is listened. In the event processing logic, updateOption is called to update the configuration, and the configured drill-down icon changes to the drill-up icon drillUp.

tableInstance.on('drillmenu_click', args => { if (args.drillDown) { if (args.dimensionKey === 'Category') { tableInstance.updateOption({ records: newData, rows: [ { dimensionKey: 'Category', title: 'Category', drillUp: true, headerStyle: { textStick: true }, width: 'auto' }, { dimensionKey: 'Sub-Category', title: 'Sub-Catogery', headerStyle: { textStick: true }, width: 'auto' } ], columns: ..., indicators: ... }); } }