JSFiddle - React, Tailwind, and code Playground

by peterjc

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.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.2.3/js/dx.all.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">
<div id="container"></div>

JavaScript

function CellItem(id, display) {
    this.id = id;
    this.display = display;
}

var lookupList = [];

var item1 = new CellItem('r1c1', 'row 1 col 1')
lookupList.push(item1);
lookupList.push(new CellItem('r2c1', 'row 2 col 1'));
lookupList.push(new CellItem('item3', 'Item Num 3'));

var dataSource = [
    {
        col1: 'r1c1'
    },
    {
        col1: new CellItem('r2c1', 'row 2 col 1')
    }
];
var columns = [
    {
      dataField: 'col1',
      caption: 'Col 1',     
      lookup: {
        dataSource: lookupList,
        valueExpr: 'id',
        displayExpr: 'display'
      }
    }
];
$("#container").dxDataGrid({
    dataSource: dataSource,
    columns: columns,
     editing: {
              editMode: 'batch',
              editEnabled: true
          },
    filterRow: { visible: true },
    height: 400
});