Export

Export grid data to CSV. Every export respects the current filters and sorts, and can be triggered from the built-in toolbar, a directive on any button, or from code.

CSV Export

Set config.export.formats to ['csv'] and a download button appears — no extra dependency. Composed here with sorting, row filtering, multi-row selection, column resize and reorder, and infinite scroll, so this example is copy-paste-runnable exactly as shown.

Enabling the toolbar

Set config.export.formats to an array of one or more format strings and a download toolbar appears in the grid header area automatically. No additional component or directive needed. Leave formats out entirely and you get CSV on its own.

What the CSV looks like

UTF-8 with a byte-order mark, so a spreadsheet opens it without asking about character encoding — which matters the moment a name or a department is written in anything but plain ASCII. Fields are comma-separated, and a value is wrapped in quotes only when it actually contains a comma, a quote, or a line break. Inner quotes are doubled. There is no sep= directive line.

Which rows and columns end up in it

The rows the grid is holding, narrowed by the active filter, in the current sort order. In paging mode that is the current page; with infinite scroll it is what you have scrolled past. The columns are the visible ones, in visual order, minus anything marked excludeFromExport: true and anything with no prop and no valueGetter to read. That subject has a page of its own: What Gets Exported.

Triggering it without the toolbar

The built-in buttons are optional. You can hide them and export from your own button, from a keyboard shortcut, or from any code holding a reference to the grid — and you can hand a specific set of rows to the export service yourself. Export API & Triggers covers all four.

The CSV carries the text you see: the current filters, the current sort order, and only visible columns — in the order you left them, pinned columns first. Each cell is resolved through valueGetter and then valueFormatter, so a column showing $40,000 writes $40,000 — quoted, because of the comma.

Formatted Values

Salary shows as $40,000 and Start Date as 01/01/2015. The CSV carries the same text, because the writer resolves each cell the way the screen does. Filter the grid first and the file follows.

The file matches the cell, not the field

salary is the number 40000 on the row. The column formats it as $40,000, and that is what the file carries. Same for startDate: the row holds 2015-01-01, while the cell and the file both read 01/01/2015.

Quoting happens where it is needed

$40,000 contains a comma, so the writer wraps that one field in quotes and leaves the others bare. Nothing to configure — a spreadsheet reading the file back gets one column, not two.

Narrow the grid, narrow the file

Type into the Department filter and export again: the file holds the rows that survived. Sort by Salary first and the file opens in that order. The export follows the grid, always.

When you want the number instead

A formatted value is text. A spreadsheet reading this file gets $40,000 as a label, not as a number it can total — which is the right trade for a CSV, and worth knowing before you send one to someone who needs to sum a column. Drop the valueFormatter from a column and the file carries the underlying value instead.

Filename and Encoding

Name the file with config.export.filename. The writer handles the rest: UTF-8 so accented names survive the round trip, and quoting for any value that carries a comma.

The name you asked for

config.export.filename: 'employees-2026' downloads employees-2026.csv — the extension is appended for you, per format. Omit filename and the file arrives as export.csv.

Text that survives the round trip

The file is UTF-8 with a byte-order mark. München, İstanbul and Brasília in the Office column open as themselves, in an application that would otherwise guess an encoding and guess wrong. Line endings are CRLF.

Commas inside values

The Name column is built as Smith, Alice. It arrives in the file as "Smith, Alice" — quoted, so it stays one field. A value containing a quote has its quotes doubled; a value containing a line break is quoted too.

Changing the separator

The delimiter is a comma unless you set config.export.csv.delimiter. Text above the header row and below the last row is csv.header and csv.footer. All three are on the next example.

Delimiter and Surrounding Lines

config.export.csv.delimiter writes a semicolon file, and csv.header / csv.footer put verbatim lines above and below the table. The Tag column contains a semicolon, so you can watch the writer quote on the delimiter you chose rather than on a comma.

Why this takes two settings, not one

The delimiter changes the file. It does not change how Excel reads it — Excel splits on its own locale list separator, so a semicolon file can still open as a single column. The line that makes Excel agree is sep=; at the very top, which is what csv.header puts there. The grid does not add it for you: to every reader that is not Excel, sep=; is a line of data.

Quoting follows the delimiter

The Tag column reads Engineering; Active. Under a semicolon delimiter it arrives quoted, so it stays one field — and a value containing a comma is left alone, because a comma is no longer a separator here. Quotes and line breaks are always quoted, whatever the delimiter you pick.

Header and footer lines are verbatim

Whatever you write is what lands in the file — nothing is quoted or escaped. That is what lets sep=; work, and it is also the catch: a title containing the delimiter will split into columns when the file is opened. Keep it clear of the separator, or accept that it splits. Pass an array for several lines.

Reading the file back

A comma, a semicolon and a tab are detected on the way in, so a semicolon export re-imports with no configuration. Any other delimiter writes correctly but has to be told to whatever reads it.

A header line is different: the first line of a CSV is the column-header row as far as any reader is concerned, so a file with a title line on top is a report, not a data file. Export without csv.header for the copy you intend to read back, or drop that line before importing it.

CSV only

These settings describe a text file. Excel has no field separator and Word emits a table with nothing around it, so config.export.csv does nothing in either.

Export options

Property	Type	Default	Description
export.formats	('csv')[]	['csv']	Enables the built-in download toolbar with one button per format. Omitted, you get CSV alone.
export.filename	string	'export'	Base filename for the downloaded file (extension is added per format).
export.csv.delimiter	string	','	Field separator for the .csv. Values containing it are quoted. A quote, a line break or an empty string is refused and falls back to a comma.
export.csv.header	string \| string[]	—	Line(s) written verbatim above the column-header row — sep=; for Excel, for instance. Never quoted or escaped.
export.csv.footer	string \| string[]	—	Line(s) written verbatim after the last row, under the same rules as header.
column.excludeFromExport	boolean	false	Skip this column in all export formats (sparklines, action columns, …).
column.valueGetter	(row) => unknown	—	Resolves the exported value when there is no plain prop to read.
column.valueFormatter	(value, row, col) => string	—	Formats the exported text, so the file matches the screen.