Load data from CSV files

To load CSV data we recommend Papa Parse, a popular open source CSV parser that plays very nicely with DataGridXL.

Papa Parse parses CSV data and converts it to a JavaScript format: either an array of objects or a 2D array. Both formats are supported by DataGridXL.

Load remote CSV file (using AJAX)

Papa.parse("https://example.com/file.csv", {
  download: true,
  complete: function(results) {
    createGrid(results);
  }
});

function createGrid(data){
  const grid = new DataGridXL("grid", {
    data: data
  });
};

The Papa.parse method loads the given URL using AJAX. Wait for its complete callback to fire, then create your data grid with the freshly parsed data.

Load CSV file from user's computer

You can also pass in a local File from an <input type="file"> element.

Papa.parse(fileInput.files[0], {
  complete: function(results) {
    createGrid(results);
  }
});

function createGrid(data){ ... };

We have a seperate demo that demonstrates how to do this. You can edit the demo code in a Codepen or JSFiddle environment.

Also study editcsvonline.com, a free web app built around DataGridXL that allows user to edit their CSV files.