DevExtreme Grouped List

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.min.js"></script>
<link rel="stylesheet" href="http://cdn3.devexpress.com/jslib/14.2.3/css/dx.common.css">
<link rel="stylesheet" href="http://cdn3.devexpress.com/jslib/14.2.3/css/dx.light.css">
<script src="http://cdn3.devexpress.com/jslib/14.2.4/js/dx.phonejs.js"></script>
<div data-bind="dxList: { dataSource: dataSource, grouped: true }"></div>

JavaScript

var inputArray = [{
            label: "group1",
            elements: [{ text: "a" }, { text: "b" }]
        },
        {
            label: "group2",
            elements: [{ text: "a" }, { text: "b" }]
        }];

ko.applyBindings({
    dataSource: new DevExpress.data.DataSource({
        store: inputArray,
        map: function (item) {
            return {
                key: item.label,
                items: item.elements
            };
        }
    })
});