How to display only the selected value cell information in the drill-through dialog of a React Pivot Table?

5 mins read

Introduction:

By default, when you double-click on any value cell in a pivot table, the drill-through dialog appears and displays detailed raw data based on the fields configured in the report settings. This default behavior may not be suitable for all use cases, especially when you want to display only the row field, column field, and value field information pertaining to the selected value cell. This approach simplifies the user interface by removing unnecessary fields. This article demonstrates how to implement functionality by customizing the default behavior of the React Pivot Table drill-through dialog.

Displaying only the selected cell value information in the drill-through dialog:

To achieve the desired customization, you will need to use the beginDrillThrough event of the pivot table. This event is triggered before the drill-through dialog is rendered, providing an opportunity to modify its contents according to your specific requirements. Below is a code example that illustrates how to display only the row field, column field, and value field information based on the selected value cell:

[index.js]

import { PivotViewComponent, DrillThrough, Inject } from '@syncfusion/ej2-react-pivotview';

function DrillThroughComponent() {
    let pivotObj;
    function beginDrillThrough(args) {
        // Initialize variables to store the row header and column text of the clicked cell.
        let rowHeader;
        let columnHeader;
        // Determine if the selected cell belongs to a child member within the row
        if (args.cellInfo.currentCell.rowHeaders.includes(pivotObj.dataSourceSettings.valueSortSettings.headerDelimiter)) {
            // Extract the proper row header text using the header delimiter and update "rowHeader"
            let childRow = args.cellInfo.currentCell.rowHeaders.split(pivotObj.dataSourceSettings.valueSortSettings.headerDelimiter);
            rowHeader = childRow[childRow.length - 1];
        } else {
            // Directly assign the row header text if clicked cell is belongs to parent row.
            rowHeader = args.cellInfo.currentCell.rowHeaders;
        }
        // Here we extract the column header name
        if (args.cellInfo.currentCell.columnHeaders.includes(pivotObj.dataSourceSettings.valueSortSettings.headerDelimiter)) {
            let childColumn =   args.cellInfo.currentCell.columnHeaders.split(pivotObj.dataSourceSettings.valueSortSettings.headerDelimiter);
            columnHeader = childColumn[childColumn.length - 1];
        } else {
            columnHeader = args.cellInfo.currentCell.columnHeaders;
        }
        // Obtain the raw data to find the field name of the row and column
        let rawData = Object.values(args.cellInfo.rawData[0]);
        var rowFieldName;
        var columnFieldName
        // Get the row field name based on the raw data
        for (var k = 0; k < rawData.length; k++) {
            if (rawData[k] == rowHeader) {
                rowFieldName = Object.keys(args.cellInfo.rawData[0])[k];
            } else if(rawData[k] == columnHeader) {
                columnFieldName = Object.keys(args.cellInfo.rawData[0])[k]
            }
        }
        // Iterate through the grid columns to only show the information of the row field, column field and value field of the chosen cell by concealing all other fields (columns).
        for (var i = 0; i < args.gridObj.columns.length; i++) {
            if (args.gridObj.columns[i].field !== rowFieldName && args.gridObj.columns[i].field !== args.cellInfo.currentCell.actualText && args.gridObj.columns[i].field !== columnFieldName) {
                // Hide all other fields (columns) in the drill-through dialog
                args.gridObj.columns[i].visible = false;
            }
        }
    }

    return ( <PivotViewComponent id='PivotView' ref={(scope) => { pivotObj = scope; }} allowDrillThrough={true} beginDrillThrough={beginDrillThrough}>
          <Inject services={[DrillThrough]}/>
    </PivotViewComponent>);
}
export default DrillThroughComponent;

Explanation of the code snippet:

First, we initialize a couple of variable’s named rowHeader and columnHeader within the beginDrillThrough event to hold the text of the row and column headers corresponding to the clicked value cell.
Following this, we check whether the selected cell’s row headers contain the pivot table’s header delimiter. This check helps determine whether the cell belongs to a child member within the row. If it does, we extract the appropriate row header text from the args.cellInfo.currentCell.rowHeaders property and assign it to the rowHeader variable. Otherwise, we directly assign the value to the rowHeader. We derive the column header by following a similar approach.
Afterward, we retrieve the first set of raw data from the pivot table using the args.cellInfo.rawData[0] property and loop through it to identify the field names for both the row and column, based on the values found in the rowHeader and columnHeader, respectively.
Finally, we iterate through all the columns in the drill-through grid. If a column’s field does not match the previously identified row field name (i.e., rowFieldName), the column field name (i.e., columnFieldName), or the actual text of the selected value cell (which represents the value field), we set the args.gridObj.columns[i].visible property to false. This action effectively displays the row field, column field, and value field information pertaining to the selected value cell by concealing all other columns.

The following screenshots portray the difference between before and after implementing the above workaround solution:

screenshots:

Selected value cell in the pivot table,

Before implementing the workaround solution,

After implementing the workaround solution,

For a practical demonstration, refer to the sample of stackblitz.

Conclusion:

By following the steps outlined above, you can easily show the row field, column field, and value field information in the drill-through dialog according to the value cell selected in the React Pivot Table.

You can refer to our React Pivot Table feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our React Pivot Table example to understand how to create and manipulate data.

For current customers, you can check out our components on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any questions or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!

Did you find this information helpful?

Yes

Comments (0)