DevExtreme jQuery/JS - Overview

The Pivot provides a quick way to manage multiple views. It includes a collection of views and a navigation header. An end user switches the views by swiping them or by clicking their titles on the navigation header. This widget is very useful for presenting categorized lists.

View Demo

The following code adds a primitive Pivot widget to your page.

HTML
JavaScript
<div id="pivotContainer"></div>
$(function() {
    $("#pivotContainer").dxPivot({
        items: [{
            title: "Main courses",
            text: "First and second courses of a meal"
        }, {
            title: "Seafood",
            text: "Seafood: ocean and sea"
        }, {
            title: "Desserts",
            text: "Desserts: biscuits and cookies"
        }, {
            title: "Drinks",
            text: "Drinks: soft vine and tea"
        }],
        height: 300
    });
});

Note that all data source items in the code above follow the Default Item Template pattern. This provides a default item appearance, which can be customized later.

See Also