How to customize the specific field member name within the member filter dialog in a JavaScript Pivot Table?

Introduction

When working with JavaScript Pivot Table, there might be scenarios where you need to customize the name displayed for field members (i.e., headers) within the member filter dialog. This customization significantly enhances readability and provides a more intuitive way to present data. This article demonstrates how to achieve this customization seamlessly.

Preliminary step: Customize header text in pivot table

Before diving into the customization, it’s necessary to first customize the header text in the pivot table. This step is essential to maintain consistency and prevent incorrect or misleading information from being displayed in the pivot table UI. For guidance on customizing the header text, please refer to the following knowledge base article.

Customizing field member name in member filter dialog

After ensuring the header text is properly customized, you can proceed to customize the field member name within the member filter dialog using the memberEditorOpen event. This event is triggered before the member filter dialog opens, providing an opportunity to modify the name of each member based on your requirements. Below is a code snippet that demonstrates how to accomplish this customization:

[index.js]

    var pivotObj = new ej.pivotview.PivotView({
        showFieldList: true, 
        showGroupingBar: true,
        memberEditorOpen(args: any) {
            // Check if the current field is "Year"
            if(args.fieldName == "Year") {
                // Iterate over all members of the "Year" field
                for(var i=0; i<args.fieldMembers.length; i++) { 
                    // Customizing member names based on specific conditions
                    if(args.fieldMembers[i].name == "FY 2015") {
                         // Customizing the name to "2015"
                         args.fieldMembers[i].name = args.fieldMembers[i].name.split(" ")[1];
                    }
                }
            }
        }
    });

In the example above, within the memberEditorOpen event, we check whether the field name is “Year”. If so, we iterate through all the members of the field within the member filter dialog. If a member name matches “FY 2015”, it is renamed to “2015”. This customization is achieved by splitting the member’s name by a space (" ") and selecting the item at the second index (i.e., 1) to be the new name. You can add more conditions to rename other members as needed.

The following screenshot portrays the results of the code snippet mentioned above.

Screenshot

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

Conclusion

By following the steps outlined in this article and using the provided code example, you can easily customize the field member name within the member filter dialog of a JavaScript Pivot Table.

You can also refer to our JavaScript 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 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!