How to limit the number of field selections in the React Pivot Table field list?

Introduction

When working with the React Pivot Table, there might be scenarios where you need to limit the number of fields that can be selected in the pivot table field list. This ensures a cleaner data representation and prevents the pivot table from becoming overloaded with too many fields. This article demonstrates how to disable unselected fields in the pivot table field list once the count of selected fields reaches or exceeds a maximum limit (i.e., 4). Additionally, we will show you how to limit the minimum number of field selections in the field list, specifically ensuring that at least one field remains selected for the row, column, and value axes.

Restrict the maximum number of field selections in the pivot table field list

To implement this functionality, you need to use the dataBound event in the pivot table. This event is triggered when the pivot table is rendered, and it allows you to apply modifications such as enabling or disabling field list items based on certain conditions. Below is an example of how to restrict the field selection when the number of selected fields reaches or exceeds a specific limit, which is 4 in this case:

[index.js]

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

function PivotFieldList() {
    let pivotObj;

    function dataBound(){
        var unSelectedFields = []; // variable to store unselected fields
        var selectedFields = []; // variable to store unselected fields
        let fields = pivotObj.pivotFieldListModule.treeViewModule.fieldTable.treeData;
        for (var i = 0; i < fields.length; i++) {
            // Here, we store the fields that were not selected in the array.
            if (!fields[i].isSelected) {
                unSelectedFields.push(fields[i].id);
            } else { 
                // Here, we store the selected fields in an array.
                selectedFields.push(fields[i].id);
            } 
        }
        if (selectedFields.length >= 4) {
            // Disable the unselected fields if the user selected field is greater than 4
            pivotObj.pivotFieldListModule.treeViewModule.fieldTable.disableNodes(unSelectedFields);
        }
    }
    return (
            <PivotViewComponent id='PivotView' ref={(scope) => { pivotObj = scope; }} showFieldList={true} dataBound={dataBound}>
                <Inject services={[FieldList]}/>
            </PivotViewComponent>);
}
export default PivotFieldList;

Explanation of the code snippet:

1. First, within the dataBound, we initialized two arrays, unSelectedFields and selectedFields, to keep track of the IDs (i.e., field names) of fields that are unselected and selected, respectively.
2. Then, we iterate through all the fields available in the field list UI. For each field, we check if it is selected. If a field is not selected, it will be added to the unSelectedFields array. Conversely, if a field is selected, it will be added to the selectedFields array.
3. After processing all fields, we check whether the selectedFields array has four or more elements (indicating that four or more fields have been selected).
4. If the condition is met, we invoke the method pivotObj.pivotFieldListModule.treeViewModule.fieldTable.disableNodes and pass the unSelectedFields array as an argument. This method disables the fields identified by the provided IDs, thereby preventing users from selecting more than the allowed number of fields.

The following GIF image, which portrays the results of the code snippet mentioned above,

GIF

For a practical example of this code in action, you can refer to the following sample in stackblitz.

Enforcing minimum field selection in field list

In certain scenarios, you might want to enforce a minimum number of field selections for different axes (such as rows, columns, and values) in the field list to ensure the data representation remains meaningful and to prevent displaying an empty pivot table. This functionality can be achieved by handling the fieldDrop event. This event is triggered before a field drops into any axis, allowing you to impose a minimum field selection rule on the specified axes.

Here is a code example that demonstrates how to maintain at least one field in the row, column, and value axes

[index.js]

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

function PivotFieldList() {
    function fieldRemove(args) {
        // Here, we check the axis of the currently removed field 
        if(args.axis !== 'filters' && args.dataSourceSettings[args.axis].length - 1 === 0) {
            // Displaying an alert message when user attempts to remove the last field in any of the axes.
            alert('At least one field must be selected for the row, column, and value axes');
            // Preventing the field removal action by setting 'cancel' property to true.
            args.cancel = true;
        }
        
    }

    return (<PivotViewComponent id='PivotView' ref={(scope) => { pivotObj = scope; }} showFieldList={true} dataBound={dataBound} fieldRemove={fieldRemove.bind(this)}>
                <Inject services={[FieldList]}/>
            </PivotViewComponent>);
}
export default PivotFieldList;

First, we ensure that the axis of the currently removed field isn’t ‘filters’. This is because the requirement only applies to the row, column, and value axes. Following this, we verify whether the removal of the current field would result in an empty axis. If the conditions mentioned above are met, we display an alert message to inform the user that at least one field must remain selected for the non-filter axes. Afterward, we prevent the removal of the selected field by setting the args.cancel property to true.

The following GIF image, which portrays the results of the code snippet mentioned above,

GIF

For a practical example of this code in action, you can refer to the following sample in stackblitz.

Conclusion:

I hope you enjoyed learning how to limit the number of field selections in the React Pivot Table field list.

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!