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

<script>
  import { createGrid } from 'https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.27.0/lattice-grid.esm.min.js';
  import createLatticeAction from 'https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.27.0/modules/svelte.esm.min.js';

  const lattice = createLatticeAction({ createGrid });

  let grid;

  const config = {
    rowKey: 'id',
    selection: 'multiple',
    // Every export here is a click, never something the page does on its own.
    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, 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.
      { field: 'internal', title: 'Internal', layout: { width: 200 }, export: { csv: false } },
    ],
    rows,  // supplier charge records, one per invoice line
    // onGrid hands over the live grid the moment it is created; keep it so your
    // own control can call the same writer.
    onGrid: (g) => { grid = g; },
  };

  // The same writer, called from a button rather than the rail.
  const downloadCsv = () => grid.export.csv({ download: true, fileName: 'supplier-charges' });
</script>

<svelte:head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.27.0/lattice-grid.min.css">
</svelte:head>

<button on:click={downloadCsv}>Download CSV</button>
<div use:lattice={config} style="height: 500px; margin-top: 12px"></div>

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