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.27.0/lattice-grid.min.css">
<style>
  #grid > div { height: 540px; }
</style>
<div id="grid"></div>

<script type="module">
  import * as Vue from 'https://esm.sh/vue@3';
  import { createGrid } from 'https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.27.0/lattice-grid.esm.min.js';
  import createLatticeGrid from 'https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.27.0/modules/vue.esm.min.js';

  const LatticeGrid = createLatticeGrid({ vue: Vue, createGrid });

  Vue.createApp({
    components: { LatticeGrid },
    data() {
      return {
        config: {
          rowKey: 'id',
          selection: 'multiple',
          // Every export here is a click. The grid writes the file in the
          // browser the moment it is asked, so the rail is the honest place to
          // put the request.
          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'. With nothing selected the
                // guard sits 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
        },
      };
    },
    methods: {
      // The same writer, called imperatively against the live instance. Wire
      // this to a button, a menu, or your own code.
      download() {
        this.$refs.grid.grid().export.csv({ download: true, fileName: 'supplier-charges' });
      },
    },
    template: '<lattice-grid ref="grid" v-bind="config" />',
  }).mount('#grid');
</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