How to Customize Header Sorting in React Pivot Table?

Introduction

When working with Syncfusion’s React Pivot Table, you may want to customize the sorting behavior so that clicking on a pivot button cycles through multiple states: ascending, descending, and unsorted (None). By default, the Pivot Table only allows toggling between ascending and descending sorting orders. However, if you need to implement a custom sorting cycle, this article will guide you through the steps to achieve it using the actionBegin event.

To achieve a sorting cycle that toggles between ascending, descending, and unsorted (None) states, you can override the default sorting behavior by using the actionBegin event. This event allows you to customize the sorting logic before it is applied. Here is the implementation for customizing the sorting cycle in a Pivot Table:

[index.js]

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

function Default() {
  return (
    <div className="control-pane">
      <div className="control-section">
        <PivotViewComponent
          id="PivotView"
          ref={d => pivotObj = d}
          enableValueSorting={true}
          showGroupingBar={true}
          showFieldList={true}
          actionBegin={actionBegin.bind(this)}
        >
        </PivotViewComponent>
      </div>
    </div>
  );

  function actionBegin(args) {
    if (args.actionName == 'Sort field') {
      args.cancel = true; // Cancel the default sorting action to implement custom logic

      let previousOrder;
      let currentOrder;

      // Check if there are existing sort settings
      if (args.dataSourceSettings.sortSettings.length > 0) {
        for (var i = 0; i < args.dataSourceSettings.sortSettings.length; i++) {
          // Find the previous sort order for the field being sorted
          if (args.dataSourceSettings.sortSettings[i].name == args.fieldInfo.fieldName) {
            previousOrder = args.dataSourceSettings.sortSettings[i].order;
            break;
          } else {
            previousOrder = 'Ascending'; // Default to ascending if not found
          }
        }
      } else {
        previousOrder = 'Ascending'; // Default sort order when no settings exist
      }

      // Determine the next sort order based on the previous order
      currentOrder = previousOrder === 'Ascending' ? 'Descending' :
        previousOrder === 'Descending' ? 'None' : 'Ascending';

      // Update sort settings for the specified field
      if (args.dataSourceSettings.sortSettings.length > 0) {
        for (var i = 0; i < args.dataSourceSettings.sortSettings.length; i++) {
          if (args.dataSourceSettings.sortSettings[i].name == args.fieldInfo.fieldName) {
            // Update existing field's sort order
            pivotObj.dataSourceSettings.sortSettings[i].order = currentOrder;
          } else {
            // Add new field sort setting if not already present
            pivotObj.dataSourceSettings.sortSettings.push({ name: args.fieldInfo.fieldName, order: currentOrder });
          }
        }
      } else {
        // Add sort setting if no previous settings exist
        pivotObj.dataSourceSettings.sortSettings.push({ name: args.fieldInfo.fieldName, order: currentOrder });
      }

      pivotObj.refreshData(); // Refresh the Pivot Table to apply the new sorting
    }
  }

}
export default Default;

The following GIF images illustrate the difference before and after implementing the above workaround solution,

GIF

Before custom sorting cycle:

After custom sorting cycle:

For a practical demonstration, refer to the sample of stackblitz

Conclusion

I hope you enjoyed learning how to customize header sorting behavior in 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!