IMPORTANT: The Pivot widget is deprecated since v18.1. We recommend using the TabPanel widget instead.

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.

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

<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

• Widget Basics: jQuery | Angular | AngularJS | Knockout
• Pivot - Customize Item Appearance
• Pivot - Categorize Data for Views
• Pivot API Reference