Your search did not match any results.
Data Grid

Columns based on a Data Source

To use data source object fields to automatically generate columns, pass an array of objects to the dataSource option and specify the keyExpr - as shown in this example.

Copy to CodePen
Apply
Reset
$(function(){ $("#gridContainer").dxDataGrid({ dataSource: orders, showBorders: true }); });
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.4/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.4/css/dx.light.css" /> <script src="https://cdn3.devexpress.com/jslib/20.2.4/js/dx.all.js"></script> <script src="data.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="gridContainer"></div> </div> </body> </html>
#gridContainer { height: 440px; }
var orders = [{ "OrderNumber": 35703, "SaleAmount": 11800, "StoreCity": "Los Angeles", "StoreState": "California", "Employee": "Harv Mudd", "OrderDate": "2014/04/10" }, { "OrderNumber": 35711, "OrderDate": "2014/01/12", "SaleAmount": 16050, "StoreState": "California", "StoreCity": "San Jose", "Employee": "Jim Packard" }, { "OrderNumber": 35714, "OrderDate": "2014/01/22", "SaleAmount": 14750, "StoreState": "Nevada", "StoreCity": "Las Vegas", "Employee": "Harv Mudd" }, { "OrderNumber": 35983, "OrderDate": "2014/02/07", "SaleAmount": 3725, "StoreState": "Colorado", "StoreCity": "Denver", "Employee": "Todd Hoffman" }, { "OrderNumber": 36987, "OrderDate": "2014/03/11", "SaleAmount": 14200, "StoreState": "Utah", "StoreCity": "Salt Lake City", "Employee": "Clark Morgan" }, { "OrderNumber": 38466, "OrderDate": "2014/03/01", "SaleAmount": 7800, "StoreState": "California", "StoreCity": "Los Angeles", "Employee": "Harv Mudd" }, { "OrderNumber": 39420, "OrderDate": "2014/02/15", "SaleAmount": 20500, "StoreState": "California", "StoreCity": "San Jose", "Employee": "Jim Packard" }, { "OrderNumber": 39874, "OrderDate": "2014/02/04", "SaleAmount": 9050, "StoreState": "Nevada", "StoreCity": "Las Vegas", "Employee": "Harv Mudd" }, { "OrderNumber": 42847, "OrderDate": "2014/02/15", "SaleAmount": 20400, "StoreState": "Wyoming", "StoreCity": "Casper", "Employee": "Todd Hoffman" }, { "OrderNumber": 43982, "OrderDate": "2014/05/29", "SaleAmount": 6050, "StoreState": "Utah", "StoreCity": "Salt Lake City", "Employee": "Clark Morgan" }, { "OrderNumber": 56272, "OrderDate": "2014/05/16", "SaleAmount": 15850, "StoreState": "Utah", "StoreCity": "Salt Lake City", "Employee": "Clark Morgan" }, { "OrderNumber": 57429, "OrderDate": "2014/04/11", "SaleAmount": 11050, "StoreState": "Arizona", "StoreCity": "Phoenix", "Employee": "Clark Morgan" }, { "OrderNumber": 58292, "OrderDate": "2014/04/05", "SaleAmount": 13500, "StoreState": "California", "StoreCity": "Los Angeles", "Employee": "Harv Mudd" }, { "OrderNumber": 62427, "OrderDate": "2014/05/17", "SaleAmount": 23500, "StoreState": "Nevada", "StoreCity": "Las Vegas", "Employee": "Harv Mudd" }, { "OrderNumber": 65977, "OrderDate": "2014/02/13", "SaleAmount": 2550, "StoreState": "Wyoming", "StoreCity": "Casper", "Employee": "Todd Hoffman" }, { "OrderNumber": 66947, "OrderDate": "2014/01/06", "SaleAmount": 3500, "StoreState": "Utah", "StoreCity": "Salt Lake City", "Employee": "Clark Morgan" }, { "OrderNumber": 68428, "OrderDate": "2014/03/13", "SaleAmount": 10500, "StoreState": "California", "StoreCity": "Los Angeles", "Employee": "Harv Mudd" }, { "OrderNumber": 69477, "OrderDate": "2014/01/22", "SaleAmount": 14200, "StoreState": "California", "StoreCity": "Anaheim", "Employee": "Harv Mudd" }, { "OrderNumber": 72947, "OrderDate": "2014/03/05", "SaleAmount": 13350, "StoreState": "Nevada", "StoreCity": "Las Vegas", "Employee": "Harv Mudd" }, { "OrderNumber": 73088, "OrderDate": "2014/01/21", "SaleAmount": 8600, "StoreState": "Nevada", "StoreCity": "Reno", "Employee": "Clark Morgan" }, { "OrderNumber": 76927, "OrderDate": "2014/04/04", "SaleAmount": 9800, "StoreState": "Utah", "StoreCity": "Salt Lake City", "Employee": "Clark Morgan" }, { "OrderNumber": 77297, "OrderDate": "2014/01/07", "SaleAmount": 10850, "StoreState": "Arizona", "StoreCity": "Phoenix", "Employee": "Clark Morgan" }, { "OrderNumber": 84744, "OrderDate": "2014/05/20", "SaleAmount": 4650, "StoreState": "Nevada", "StoreCity": "Las Vegas", "Employee": "Harv Mudd" }, { "OrderNumber": 85028, "OrderDate": "2014/02/08", "SaleAmount": 2575, "StoreState": "Nevada", "StoreCity": "Reno", "Employee": "Clark Morgan" }, { "OrderNumber": 87297, "OrderDate": "2014/04/08", "SaleAmount": 14200, "StoreState": "Wyoming", "StoreCity": "Casper", "Employee": "Todd Hoffman" }, { "OrderNumber": 88027, "OrderDate": "2014/05/18", "SaleAmount": 13650, "StoreState": "Utah", "StoreCity": "Salt Lake City", "Employee": "Clark Morgan" }, { "OrderNumber": 94726, "OrderDate": "2014/02/23", "SaleAmount": 20500, "StoreState": "California", "StoreCity": "San Jose", "Employee": "Jim Packard" }, { "OrderNumber": 95266, "OrderDate": "2014/03/18", "SaleAmount": 9050, "StoreState": "Nevada", "StoreCity": "Las Vegas", "Employee": "Harv Mudd" }, { "OrderNumber": 98477, "OrderDate": "2014/05/08", "SaleAmount": 23500, "StoreState": "Wyoming", "StoreCity": "Casper", "Employee": "Todd Hoffman" }, { "OrderNumber": 99247, "OrderDate": "2014/02/27", "SaleAmount": 2100, "StoreState": "Utah", "StoreCity": "Salt Lake City", "Employee": "Clark Morgan" }, { "OrderNumber": 174884, "OrderDate": "2014/03/03", "SaleAmount": 7200, "StoreState": "Colorado", "StoreCity": "Denver", "Employee": "Todd Hoffman" }, { "OrderNumber": 188877, "OrderDate": "2014/02/14", "SaleAmount": 8750, "StoreState": "Arizona", "StoreCity": "Phoenix", "Employee": "Clark Morgan" }, { "OrderNumber": 191883, "OrderDate": "2014/02/28", "SaleAmount": 9900, "StoreState": "California", "StoreCity": "Los Angeles", "Employee": "Harv Mudd" }, { "OrderNumber": 192474, "OrderDate": "2014/02/18", "SaleAmount": 12800, "StoreState": "California", "StoreCity": "Anaheim", "Employee": "Harv Mudd" }, { "OrderNumber": 193847, "OrderDate": "2014/05/06", "SaleAmount": 14100, "StoreState": "California", "StoreCity": "San Diego", "Employee": "Harv Mudd" }, { "OrderNumber": 194877, "OrderDate": "2014/03/17", "SaleAmount": 4750, "StoreState": "California", "StoreCity": "San Jose", "Employee": "Jim Packard" }, { "OrderNumber": 195746, "OrderDate": "2014/02/04", "SaleAmount": 9050, "StoreState": "Nevada", "StoreCity": "Las Vegas", "Employee": "Harv Mudd" }, { "OrderNumber": 197474, "OrderDate": "2014/01/17", "SaleAmount": 6400, "StoreState": "Nevada", "StoreCity": "Reno", "Employee": "Clark Morgan" }, { "OrderNumber": 198746, "OrderDate": "2014/02/04", "SaleAmount": 15700, "StoreState": "Colorado", "StoreCity": "Denver", "Employee": "Todd Hoffman" }, { "OrderNumber": 214222, "OrderDate": "2014/02/03", "SaleAmount": 11050, "StoreState": "Arizona", "StoreCity": "Phoenix", "Employee": "Clark Morgan" }];