Lattice Grid Buy a licence

demo D118

CSV export

Delimiters, quoting, which rows, and per-cell processing

export.csv()

Building…
Loading a live grid…

The configuration

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.13.0/lattice-grid.min.css">
<script src="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.13.0/lattice-grid.min.js"></script>

<div id="grid" style="height: 540px"></div>

<script>
  const grid = LatticeGrid.createGrid(document.getElementById('grid'), {
    rowKey: 'id',
    selection: 'multiple',
    // Every export here is a click. The grid can write a file the moment it is
    // asked, which is exactly why a demo must never ask on its own: a page that
    // downloads something on load is hostile, and the rail is the honest place
    // to put the request because it is where a host would.
    toolPanel: {
      side: 'left',
      panels: ['columns', 'filters', 'quick'],
      exportName: 'supplier-charges',
      actions: [
        'undo', 'redo', 'restore', 'maximise', '-',
        'export',
        {
          name: 'csv-semicolon',
          title: 'Download CSV, semicolon-delimited',
          icon: 'download',
          run: ({ grid }) => grid.export.csv({
            download: true,
            fileName: 'supplier-charges-semicolon',
            delimiter: ';',
          }),
        },
        {
          // The same call with rows: 'selected'. Nothing selected writes a file
          // of headers alone rather than the whole grid, so the guard is here
          // rather than in the option.
          name: 'csv-selected',
          title: 'Download CSV of the selected rows only',
          icon: 'check',
          run: ({ grid, keys }) => {
            if (!keys.length) return;
            grid.export.csv({ download: true, fileName: 'supplier-charges-selected', rows: 'selected' });
          },
        },
      ],
    },
    columns: [
      { field: 'ref', title: 'Invoice', layout: { pin: 'start', width: 140 } },
      { field: 'supplier', title: 'Supplier', layout: { flex: 1, min: 200 }, filter: { type: 'set' } },
      { field: 'region', title: 'Region', filter: { type: 'set' } },
      { field: 'category', title: 'Category', filter: { type: 'set' } },
      { field: 'quantity', title: 'Qty', type: 'number', layout: { width: 110 } },
      { field: 'amount', title: 'Amount', type: 'number', layout: { width: 150 },
        format: { style: 'currency', currency: 'GBP', decimals: 2 }, total: 'sum',
        filter: { type: 'number' } },
      { field: 'note', title: 'Note', layout: { width: 280 } },
      // On screen and out of the file. What a grid exports is a separate
      // decision from what it shows, and this is the column that proves it.
      {
        field: 'internal', title: 'Internal', layout: { width: 200 },
        export: { csv: false },
      },
    ],
    rows,  // supplier charge records, one per invoice line
  });
</script>

Exporting grid data to CSV with control over delimiters, quoting and rows

CSV export writes the grid’s current data out as plain text, one row per line, in a format any spreadsheet, script or downstream system can read without a library of its own. A developer reaches for it when a report needs to leave the browser as a file: a filtered result set for a colleague, a scheduled download, or an input to a tool that only accepts flat text. Lattice Grid exposes this through export.csv(), which takes the delimiter, the quoting rule and the row selection as options, so a comma-separated file for one audience and a tab-separated file for another come from the same call with different arguments. Row selection chooses between the full dataset, the current filtered view, or a specific selection, which matters because a filtered grid and its unfiltered source are not the same export unless asked to be. A per-cell processing hook runs before each value is written, letting an application reformat a date or apply the same redaction rule it uses on screen so an export never leaks a value the grid itself would mask. Because the write walks the underlying row store rather than the rendered, virtualised viewport, exporting a million rows costs the same per row as exporting ten, without first requiring every row to have been scrolled into view.

How do I export only the filtered or selected rows from a JavaScript data grid to CSV?

Pass the row selection option to export.csv(): it accepts the full dataset, the rows currently matching the grid’s filters, or an explicit selection. Combined with the per-cell processing hook, this produces a CSV that reflects exactly what a user sees on screen, including any redaction applied to individual cells, rather than the grid’s raw underlying data.

Related demos