You're looking at DataGridXL v1. Click here to go to the latest version.

Object Data

Array Of Objects

DataGridXL handles arrays of objects (JSON style) out-of-the-box. When using array of objects, object field names are automatically used as column headers.

Read more in docs: Passing Data.

Code

<style>
#grid {
	height: 400px;
}
</style>

<div id="grid"></div>

<script src="https://code.datagridxl.com/datagridxl.js"></script>
<script>
var data = [
	{"brand":"Chevrolet","model":"Suburban","year":2010,"color":"Yellow","order_date":"9/21/2019"},
	{"brand":"Chevrolet","model":"Cavalier","year":2004,"color":"Pink","order_date":"5/4/2020"},
	// ...
	{"brand":"Cadillac","model":"Seville","year":2004,"color":"Red","order_date":"4/21/2020"}
];

var grid = new DataGridXL("grid", {
	data: data
});
</script>

edit

Leave email to receive latest updates!