DevExtreme React - Categorize Data for Views
IMPORTANT: The Pivot widget is deprecated since v18.1. We recommend using the TabPanel widget instead.
Because as a rule, the Pivot presents categorized lists, you need to form them in code. For example, assume that you have the following array named contacts
.
var contacts = [ { name: "Barbara J. Coggins", phone: "512-964-2757", email: "barbarajsoggins@rhyta.com", category: "Family" }, { name: "Carol M. Das", phone: "360-684-1334", email: "carolmdas@jourrapide.com", category: "Friends" }, { name: "Janet R. Skinner", phone: "520-573-7903", email: "janetrskinner@jourrapide.com", category: "Work" }, // . . . ];
The contacts
array will be used as a data source for all views, but depending on the view, different filters will be applied to it.
$(function() { $("#pivotContainer").dxPivot({ items: [{ title: "All", listData: new DevExpress.data.DataSource({ store: contacts, sort: "name" }) }, { title: "Family", listData: new DevExpress.data.DataSource({ store: contacts, sort: "name", filter: ["category", "=", "Family"] }) }, // . . . ], height: "auto", itemTemplate: function (itemData, itemIndex, itemElement) { $("<div>").dxList({ dataSource: itemData.listData, itemTemplate: function (itemData, itemIndex, itemElement) { itemElement.append( $("<div />").text(itemData.name); $("<div />").text(itemData.phone); $("<div />").text(itemData.email); ) } }).appendTo(itemElement); } }); });
Note that the Pivot in this example employs DevExtreme's own DataSource object to filter data. To learn more about this and other data-processing capabilities of this object, see the Data Layer article.
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.