JSFiddle - React, Tailwind, and code Playground

by Anderson Lopez

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.min.js"></script>
<script src="http://cdn3.devexpress.com/jslib/14.1.11/js/dx.webappjs.js"></script>
<link rel="stylesheet" href="http://cdn3.devexpress.com/jslib/14.1.11/css/dx.common.css">
<link rel="stylesheet" href="http://cdn3.devexpress.com/jslib/14.1.11/css/dx.light.css">
<div id="divGridContainer"></div>

CSS

#divGridContainer {
    height: auto;
    width: 100%;
}

JavaScript

var gObjVlsGridContainer = [{
    'ID': 1,'Companhia': 'Comp 01','Cidade': 'Cid 01', 'Estado': 'Est 01'
}, {
    'ID': 2,'Companhia': 'Comp 02','Cidade': 'Cid 02',
    'Estado': 'Est 02'
}, {
    'ID': 3,'Companhia': 'Comp 03','Cidade': 'Cid 03',    'Estado': 'Est 03'
}, {
    'ID': 4,'Companhia': 'Comp 04','Cidade': 'Cid 04',    'Estado': 'Est 04'
}, {
    'ID': 5,'Companhia': 'Comp 05','Cidade': 'Cid 05',    'Estado': 'Est 05'
}, {
    'ID': 6,'Companhia': 'Comp 06','Cidade': 'Cid 06',    'Estado': 'Est 06'
}, {
    'ID': 7,'Companhia': 'Comp 07','Cidade': 'Cid 07',    'Estado': 'Est 07'
}];

$('#divGridContainer').dxDataGrid({
    dataSource: gObjVlsGridContainer,
    paging: { pageSize: 5 },
    editing:{
    	editeMode: 'bath',
        editEnabled: true,
        removeEnabled: true,
        insertEnabled: true,
    },
    pager: {
        showPageSizeSelector: true,
        allowedPageSizes: [5,10,20]
    },
    
    columns : [
        {dataField:'Companhia',//declara a coluna
        validationRules:[{type:'required'}]}, 
        {dataField:'Cidade'},
        {dataField:'Estado'},
        {dataField:'Data',
        dataType: 'date',
        validationRules: [{type:'required'}]}
    ]
});