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

import * as ng from '@angular/core';
import { Component, ViewChild } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { createGrid } from '@toclocoinc/lattice-grid';
import '@toclocoinc/lattice-grid/css';
import createLatticeGrid from '@toclocoinc/lattice-grid/modules/angular';

const { LatticeGridComponent } = createLatticeGrid({ ng, createGrid });

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [LatticeGridComponent],
  template:
    '<button (click)="download()">Download CSV</button>' +
    '<lattice-grid [config]="grid" style="display:block;height:540px;margin-top:8px"></lattice-grid>',
})
export class AppComponent {
  @ViewChild(LatticeGridComponent) gridRef!: LatticeGridComponent;

  // The rail's CSV button takes the defaults; the named ones set the options.
  grid = {
    rowKey: 'id',
    selection: 'multiple',
    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 }: any) => grid.export.csv({ download: true, fileName: 'supplier-charges-semicolon', delimiter: ';' }),
        },
        {
          // The same call with rows: 'selected'. Nothing selected would write a
          // file of headers alone, so 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 }: any) => {
            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 */],
  };

  // The same writer, reached through the component, saved from your own button.
  download() {
    this.gridRef.grid.export.csv({ download: true, fileName: 'supplier-charges' });
  }
}

bootstrapApplication(AppComponent);

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