DevExtreme v24.2 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

React Pivot Grid - Field Panel

A field panel is an element that displays pivot grid fields involved in summary calculation. This panel consists of four field areas: column, row, data, and filter. Users can drag and drop fields between these areas, similar to the field chooser. You can use the field panel and the field chooser simultaneously, as shown in this demo.

Enable the fieldPanel.visible property to display the field panel. If you want to hide fields from specific areas, disable the corresponding properties in the fieldPanel object:

To give you the ability to edit code on the fly, the demo uses SystemJS. For this reason, launching the demo takes some time. We strongly recommend that you do not use this approach in real projects.
Backend API

In this demo, you can click the checkboxes below the PivotGrid to enable or disable these properties.

If you do not want users to drag and drop fields, disable the fieldPanel.allowFieldDragging property. In this case, the users can only use the field chooser to reorganize the fields.

The field panel also allows users to sort and filter pivot grid fields. Click a field to change the sort order. Click a funnel icon to open the filter popup. To enable these features, set the allowSorting and allowFiltering properties to true.

This demo also shows how to add custom commands to a field's context menu. For instance, right-click the Sales (Sum) field, and you will see three commands. Two of them (Hide field and Summary Type) are custom. Review the onContextMenuPreparing handler implemenation to see how these commands are added to the context menu. For more information, refer to the following help topic: onContextMenuPreparing.