How to hide specific rows in a Pivot Table?

This article explains how to hide specific rows from the React Pivot Table.

Hide specific rows in a Pivot Table

In certain situations, you may want to hide or remove specific rows from the Pivot Table. This can be achieved by using the dataBound event in your code. This event is triggered when the Pivot Table is rendered, and it allows you to hide specific rows from the Pivot Table.

Here is a code example that shows how to hide specific rows from the pivot table:

[index.js]

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

let pivotObj;
function Default() {
    function dataBound() {
        var rowIndex = [];
        for (var i = 0; i < pivotObj.pivotValues.length; i++) {
            for (var j = 0; pivotObj.pivotValues[i] != null && j < pivotObj.pivotValues[i].length; j++) {
                if (pivotObj.pivotValues[i][j] && pivotObj.pivotValues[i][j].valueSort &&
                    pivotObj.pivotValues[i][j].valueSort.levelName === 'Germany') { 
                    // Here we retrieve the specific row index and push to `rowIndex` array
                    rowIndex.push(pivotObj.pivotValues[i][j].rowIndex);
                    // Here we check the row has child members
                    if (pivotObj.pivotValues[i][j].hasChild) {
                        for (var k = 0; k < pivotObj.pivotValues[i][j].members.length; k++) {
                            // Here we retrieve the specific rows child members index and push to `rowIndex` array
                            rowIndex.push(pivotObj.pivotValues[i][j].members[k].rowIndex);
                        }
                    }
                };
            }
        }
        for (var i = 0; i < rowIndex.length; i++) {
            // Here we retrieve the specific row DOM element 
            var hideRow = pivotObj.element.querySelector(
                `td[index="${rowIndex[i]}"]`
            );
            if (hideRow) {
                // Here we have removed the specific row from pivot table
                hideRow.closest('tr').remove()
            };
        }
    }
    return (
            <PivotViewComponent id='PivotView' ref={(scope) => { pivotObj = scope; }} dataBound={dataBound}> 
            </PivotViewComponent>
    );
}
export default Default;

The following steps explain the above code snippet:

1. In the dataBound event, we iterate through the pivotObj.pivotValues array and check if the valueSort.levelName is equivalent to the “Germany”.
2. If this condition is met, we retrieve its row index and add it to an array. If the row has child members, we retrieve the child members row index and add them to the array as well.
3. Next, we iterate through the rowIndex array and retrieve the specific row DOM element using the querySelector method. If the element exists, we remove the row from the pivot table by calling the remove() method on its closest ‘tr’ element.

By using this approach, you can hide specific rows in your Pivot Table based on your requirements.

The following screenshots show the difference between before and after hiding the Pivot Table rows.

Screenshots
Before hiding rows:

For a practical demonstration, refer to the Sample in Stackblitz.

Conclusion
I hope you enjoyed learning how to hide certain rows from 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 queries 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!