A dependency-free CSV download button with typed columns, value formatting, escaping, and formula protection.
Export the rows currently shown in the table.
| Project | Owner | Status | Budget |
|---|---|---|---|
| Website redesign | Maya Chen | Active | $24,000 |
| Mobile application | Noah Williams | Paused | $42,000 |
| Analytics dashboard | Aarav Patel | Complete | $18,500 |
| Customer portal | Sofia Garcia | Active | $31,000 |
Installation
Copy the Source Code
Copy and paste the following code into your project:
Folder Structure
Usage
Pass the row model that matches the scope users should download. For a TanStack table, mapping the current row model preserves its filtering, sorting, and pagination.
Formatting values
Use an accessor function for nested data and `format` when the downloaded value should differ from the raw value. Rendered components such as badges, checkboxes, and action menus are intentionally not serialized.
Server-side data
The component can only export rows available in the browser. With server-side pagination, fetch the complete filtered dataset first or generate the file on your server.
CSV behavior
Quotes, delimiters, and line breaks are escaped automatically. Dates use ISO format, a UTF-8 byte order mark is included by default, and formula-like strings are protected before spreadsheet applications open the file.
API reference
Data table export props
| Name | Type | Default | Description |
|---|---|---|---|
rows | T[] | required | Rows included in the downloaded CSV file. |
columns | CsvExportColumn<T>[] | required | Ordered column definitions used to create headers and cell values. |
filename | string | "table-export" | Downloaded filename. The .csv extension is added when missing. |
label | string | "Export CSV" | Text displayed in the export button. |
delimiter | string | "," | Separator placed between exported cells. |
includeBom | boolean | true | Adds a UTF-8 byte order mark for spreadsheet compatibility. |
protectFormulas | boolean | true | Prefixes formula-like strings to prevent spreadsheet execution. |
disabled | boolean | false | Disables export. Empty rows or columns also disable the button. |
class | string | undefined | Classes applied to the export button. |
onExport | (result: CsvExportResult) => void | undefined | Runs after the browser download starts with filename and row count. |
CsvExportColumn<T>
| Name | Type | Default | Description |
|---|---|---|---|
id | string | required | Stable column identifier. |
header | string | required | Header written to the first CSV row. |
accessor | keyof T | ((row: T) => CsvValue) | required | Row key or function that returns the exported value. |
format | (value: CsvValue, row: T) => CsvValue | undefined | Optional exported-value transformation. |