Vue PivotGrid - fieldPanel

Configures the field panel.

Type:

Object

The field panel is a component that displays the fields involved in the calculation of grid summaries. It consists of four field areas: column, row, data and filter. Each area holds fields of the corresponding type.

By default, the field panel is hidden. To make it visible, assign true to the visible property. To control the visibility of an individual field area, change the showColumnFields, showRowFields, showDataFields or showFilterFields property respectively.

The field panel partially covers the functionality provided by the field chooser. For example, the user can reorder fields within a single field area or even between them. This capability is controlled by the value of the allowFieldDragging property.

In addition, if the allowSorting and allowFiltering properties are true, the user can apply sorting and filtering to fields directly from the field panel.

View Demo

allowFieldDragging

Makes fields on the field panel draggable.

Type:

Boolean

Default Value: true

When this property is true, the user can move the fields of the field panel using drag and drop. These fields can be moved not only within a particular area, but between areas as well. When this property is false, the field panel simply shows the fields without enabling the user to move them.

The field panel can work on its own or in conjunction with the field chooser. If latter cases, the user can move the fields within the field panel, within the field chooser and between these components as well.

showColumnFields

Shows/hides column fields on the field panel.

Type:

Boolean

Default Value: true

Optionally, you can change the placeholder of the column field area on the field panel. Use the texts.columnFieldArea property for this purpose.

showDataFields

Shows/hides data fields on the field panel.

Type:

Boolean

Default Value: true

Optionally, you can change the placeholder of the data field area on the field panel. Use the texts.dataFieldArea property for this purpose.

showFilterFields

Shows/hides filter fields on the field panel.

Type:

Boolean

Default Value: true

Optionally, you can change the placeholder of the filter field area on the field panel. Use the texts.filterFieldArea property for this purpose.

showRowFields

Shows/hides row fields on the field panel.

Type:

Boolean

Default Value: true

Optionally, you can change the placeholder of the row field area on the field panel. Use the texts.rowFieldArea property for this purpose.

texts

Specifies the placeholders of the field areas.

Type:

Object

Any placeholder specified in this object appears only when its field area contains no fields.

visible

Shows/hides the field panel.

Type:

Boolean

Default Value: false