Export
CSV of the page, the selection or everything matching, chunked through your API when the result is larger than the browser holds.
Basics
Loading example…
enableExport adds a toolbar menu with four entries: the current page, everything matching the
filters, the selected rows, and copy to clipboard. Three of those are different questions and the
menu asks which one you meant rather than guessing.
<DataTable enableExport exportFileName="people.csv" data={rows} columns={columns} />
What lands in the file
Headers come from meta.exportHeader, then a string header, then the column id. Values come
from exportValue, then format, then the value stringified, so an exported date matches the
displayed date, and an exported currency is a number rather than $1,240.00 if you say so.
exportValue receives the whole row, not the cell value:
col.accessor('total', { format: (v) => money.format(v), exportValue: (row) => row.total });
Quoting follows RFC 4180, and a UTF-8 byte order mark is written by default so Excel opens
accented text correctly. Display columns and enableExport: false columns are left out.
A field a spreadsheet would run as a formula (one starting with =, +, - or @) is
written with a leading ', so it opens as text. Plain numbers such as -12 are left alone. The
same applies to copying to the clipboard. escapeFormulas: false turns it off, for data you
trust; see Security.
Exporting more than the browser has
"All matching" in server mode cannot mean the loaded page. The table walks your data source in
chunks of exportChunkSize up to exportMaxRows, showing progress in the button and letting the
reader cancel.
When your backend already has an export endpoint, onExport(query, scope) hands you the query
and the table does nothing else, which is the right answer for a million rows.
Saving the file
The default download is a blob and a temporary link. onExportFile(blob, fileName) intercepts it
for a custom destination: a file-system picker, an upload, a preview dialog.
Customization
exportToCsv is exported, so the same serialization is available outside the table for a
scheduled report or a test. The export button is a slot
and <DataTable.ExportButton /> places it outside the toolbar.
Limitations
- CSV only in 1.0. Excel and PDF are the caller's job;
onExportis the hook for them. exportMaxRowsis a real ceiling. It defaults to 10,000 so a mis-click cannot pull a million rows through the browser; raise it deliberately.- What you see is what you get, not what you have. Hidden columns are excluded: an export is the table as configured, which is usually what the reader means.
API
DataTableProps:enableExport,exportMode,exportFileName,exportChunkSize,exportMaxRows,onExport,onExportFile.ColumnDef:enableExport,exportValue,meta.exportHeader.TableInstance:exportCsv,copyToClipboard,getQuery,getSelectionQuery.- Utilities:
exportToCsv.