How to load a CSV file into a data grid

A CSV usually shows up one of two ways: a file already sitting behind a URL, or a file a visitor picks from their own machine. grid.import takes either. Hand it the raw text and it matches the header row onto the grid's own columns and coerces each value to that column's type, so a quantity column arrives as a real number and a date column arrives as a real date, not the strings a CSV file actually holds.

Below, a small order file loads on its own by URL. Sort the Qty column and it sorts as a number, not as text: 1, 2, 10, never 1, 10, 2. Choose a CSV of your own with the file input and it replaces the grid the same way.

The code

One grid, two ways of getting text into it. grid.import.apply does the same work either way: parse, match columns by name, coerce, replace the rows.

const grid = LatticeGrid.createGrid(document.getElementById('grid'), {
  rowKey: 'id',
  columns: [/* id, customer, item, qty (number), ordered (date) */],
  rows: [],
});

fetch('./sample.csv')
  .then((res) => res.text())
  .then((text) => grid.import.apply(text, { mode: 'replace' }));

fileInput.addEventListener('change', (e) => {
  e.target.files[0].text().then((text) => grid.import.apply(text, { mode: 'replace' }));
});

Try the standalone page or read the full source on GitHub, loaded by script tag with no build step.

Two things to know

• A column's type comes from the grid, not a guess at parse time: declare qty as type: 'number' and ordered as type: 'date' on the grid's own columns, and the importer coerces the incoming text to match rather than inferring its own.
• { mode: 'replace' } swaps the whole dataset, which is what a second file load should do here. Leave it off, or pass { mode: 'append' }, to add the new rows to what is already on screen instead.

See the full CSV import demo for pasting a spreadsheet block and previewing before it lands, the URL source demo for pointing a grid straight at a file, or the data sources guide for everything else a grid can load from.