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

Load and save JSON file

Load local JSON data

To display data from a local JSON-file, there's no need for a 3rd party Javascript plugin. Just use HTML5 FileReader API. If you don't have a JSON-file lying around, you can download this mock-up JSON file, then hand it over to the Browse-button.


#grid {
  height: 400px;

#toolbar {
	background: #cbe4ff;
	margin-bottom: 12px;
	padding: 8px;

	display: flex;
	justify-content: space-between;

<div id="toolbar" class="dgxl-app">
		<input type="file" id="json-file" name="files-json" class="custom-file-input" accept=".json"><label for="json-file">Browse…</label>
	<button class="button" id="button-save">Save</button>

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

<script src=""></script>
var jsonFile = document.getElementById("json-file");

// create empty grid
var grid = new DataGridXL("grid", {
  data: DataGridXL.createEmptyData(20,20)

jsonFile.onchange = function(e){

    var reader = new FileReader();
    reader.onload = onReaderLoad;


function onReaderLoad(e){

    var obj = JSON.parse(;


    // grid = new DataGridXL("grid", {
    // 	data: obj
    // });


document.getElementById("button-save").onclick = function(){


Leave email to receive latest updates!