-
Data Grid
- Overview
-
Data Binding
-
Paging and Scrolling
-
Editing
-
Grouping
-
Filtering and Sorting
- Focused Row
-
Row Drag & Drop
-
Selection
-
Columns
- State Persistence
-
Appearance
-
Templates
-
Data Summaries
-
Master-Detail
-
Export to PDF
-
Export to Excel
-
Adaptability
- Keyboard Navigation
-
Pivot Grid
- Overview
-
Data Binding
-
Field Chooser
-
Features
-
Export to Excel
-
Tree List
- Overview
-
Data Binding
- Sorting
- Paging
-
Editing
- Node Drag & Drop
- Focused Row
-
Selection
-
Filtering
-
Column Customization
- State Persistence
- Adaptability
- Keyboard Navigation
-
Scheduler
- Overview
-
Data Binding
-
Views
-
Features
- Virtual Scrolling
-
Grouping
-
Customization
- Adaptability
-
Html Editor
-
Chat
-
Diagram
- Overview
-
Data Binding
-
Featured Shapes
-
Custom Shapes
-
Document Capabilities
-
User Interaction
- UI Customization
- Adaptability
-
Charts
- Overview
-
Data Binding
-
Area Charts
-
Bar Charts
- Bullet Charts
-
Doughnut Charts
-
Financial Charts
-
Line Charts
-
Pie Charts
-
Point Charts
-
Polar and Radar Charts
-
Range Charts
-
Sparkline Charts
-
Tree Map
-
Funnel and Pyramid Charts
- Sankey Chart
-
Combinations
-
More Features
-
Export
-
Selection
-
Tooltips
-
Zooming
-
-
Gantt
- Overview
-
Data
-
UI Customization
- Strip Lines
- Export to PDF
- Sorting
-
Filtering
-
Gauges
- Overview
-
Data Binding
-
Bar Gauge
-
Circular Gauge
-
Linear Gauge
-
Navigation
- Overview
- Accordion
-
Menu
- Multi View
-
Drawer
-
Tab Panel
-
Tabs
-
Toolbar
- Pagination
-
Tree View
- Right-to-Left Support
-
Layout
-
Tile View
- Splitter
-
Gallery
- Scroll View
- Box
- Responsive Box
- Resizable
-
-
Editors
- Overview
- Autocomplete
-
Calendar
- Check Box
- Color Box
-
Date Box
-
Date Range Box
-
Drop Down Box
-
Number Box
-
Select Box
- Switch
-
Tag Box
- Text Area
- Text Box
- Validation
- Custom Text Editor Buttons
- Right-to-Left Support
- Editor Appearance Variants
-
Forms and Multi-Purpose
- Overview
- Button Group
- Field Set
-
Filter Builder
-
Form
- Radio Group
-
Range Selector
- Numeric Scale (Lightweight)
- Numeric Scale
- Date-Time Scale (Lightweight)
- Date-Time Scale
- Logarithmic Scale
- Discrete scale
- Custom Formatting
- Use Range Selection for Calculation
- Use Range Selection for Filtering
- Image on Background
- Chart on Background
- Customized Chart on Background
- Chart on Background with Series Template
- Range Slider
- Slider
-
Sortable
-
File Management
-
File Manager
- Overview
-
File System Types
-
Customization
-
File Uploader
-
-
Actions and Lists
- Overview
-
Action Sheet
-
Button
- Floating Action Button
- Drop Down Button
-
Context Menu
-
List
-
Lookup
-
Maps
- Overview
-
Map
-
Vector Map
-
Dialogs and Notifications
-
Localization
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:
If you have technical questions, please create a support ticket in the DevExpress Support Center.
import React, { useState } from 'react';
import PivotGrid, {
FieldChooser,
FieldPanel,
} from 'devextreme-react/pivot-grid';
import CheckBox from 'devextreme-react/check-box';
import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
import sales from './data.ts';
const setSummaryType = (args, sourceField) => {
dataSource.field(sourceField.index, {
summaryType: args.itemData.value,
});
dataSource.load();
};
const onContextMenuPreparing = (e) => {
const sourceField = e.field;
if (sourceField) {
if (!sourceField.groupName || sourceField.groupIndex === 0) {
e.items.push({
text: 'Hide field',
onItemClick() {
let fieldIndex: number;
if (sourceField.groupName) {
const areaField: any = dataSource.getAreaFields(sourceField.area, true)[sourceField.areaIndex];
fieldIndex = areaField.index;
} else {
fieldIndex = sourceField.index;
}
dataSource.field(fieldIndex, {
area: null,
});
dataSource.load();
},
});
}
if (sourceField.dataType === 'number') {
const menuItems = [];
e.items.push({ text: 'Summary Type', items: menuItems });
['Sum', 'Avg', 'Min', 'Max'].forEach((summaryType) => {
const summaryTypeValue = summaryType.toLowerCase();
menuItems.push({
text: summaryType,
value: summaryType.toLowerCase(),
onItemClick(args) {
setSummaryType(args, sourceField);
},
selected: e.field.summaryType === summaryTypeValue,
});
});
}
}
};
const App = () => {
const [showColumnFields, setShowColumnFields] = useState(true);
const [showDataFields, setShowDataFields] = useState(true);
const [showFilterFields, setShowFilterFields] = useState(true);
const [showRowFields, setShowRowFields] = useState(true);
return (
<React.Fragment>
<PivotGrid
id="sales"
dataSource={dataSource}
allowSortingBySummary={true}
allowSorting={true}
allowFiltering={true}
showBorders={true}
height={490}
onContextMenuPreparing={onContextMenuPreparing}
>
<FieldPanel
showColumnFields={showColumnFields}
showDataFields={showDataFields}
showFilterFields={showFilterFields}
showRowFields={showRowFields}
allowFieldDragging={true}
visible={true}
/>
<FieldChooser height={500} />
</PivotGrid>
<div className="options">
<div className="caption">Options</div>
<div className="option">
<CheckBox id="show-data-fields"
value={showColumnFields}
onValueChange={setShowColumnFields}
text="Show Data Fields" />
</div>
<div className="option">
<CheckBox id="show-row-fields"
value={showDataFields}
onValueChange={setShowDataFields}
text="Show Row Fields" />
</div>
<div className="option">
<CheckBox id="show-column-fields"
value={showFilterFields}
onValueChange={setShowFilterFields}
text="Show Column Fields" />
</div>
<div className="option">
<CheckBox id="show-filter-fields"
value={showRowFields}
onValueChange={setShowRowFields}
text="Show Filter Fields" />
</div>
</div>
</React.Fragment>
);
};
const dataSource = new PivotGridDataSource({
fields: [{
caption: 'Region',
width: 120,
dataField: 'region',
area: 'row',
}, {
caption: 'City',
dataField: 'city',
width: 150,
area: 'row',
selector(data: { city: any; country: any; }) {
return `${data.city} (${data.country})`;
},
}, {
dataField: 'date',
dataType: 'date',
area: 'column',
}, {
dataField: 'sales',
dataType: 'number',
summaryType: 'sum',
format: 'currency',
area: 'data',
}],
store: sales,
});
export default App;
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
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.