JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
<script src="http://js.devexpress.com/Demos/DataGridGallery/js/dx.webappjs.js?h=1158b70ec22b0130d9bbf1751cce7f76"></script>
<link rel="stylesheet" href="http://cdn3.devexpress.com/jslib/14.1.3/css/dx.common.css">
<link rel="stylesheet" href="http://cdn3.devexpress.com/jslib/14.1.3/css/dx.light.css">
<div id="gridContainer"></div>

CSS

#gridContainer {
	width: 100%;
}

JavaScript

$("#gridContainer").dxDataGrid({
    dataSource: {
        store: {
            type: 'odata',
            jsonp: true,
            url: 'http://services.odata.org/v2/Northwind/Northwind.svc/Orders'
        }
    },
    groupPanel: {
        visible: true
    },
    paging: {
        pageSize: 10
    },
    pager: {
        showPageSizeSelector: true,
        allowedPageSizes: [5, 10, 20]
    },
    columns: [
        {
            dataField: 'OrderID',
            width: 90
        }, {
            caption: 'Name',
            dataField: 'ShipName',
            width: 190
        }, {
            caption: 'City',
            dataField: 'ShipCity',
            groupIndex: 1
        }, {
            caption: 'Country',
            dataField: 'ShipCountry',
            groupIndex: 0
        },
        'OrderDate',
        'RequiredDate',
        'ShippedDate'
    ]
});