A newer version of this page is available.

DevExtreme Vue - 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.

JavaScript


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.

JavaScript


$(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.

DevExtreme Vue - Categorize Data for Views

See Also