Data Table Export

A dependency-free CSV download button with typed columns, value formatting, escaping, and formula protection.

Export the rows currently shown in the table.

ProjectOwnerStatusBudget
Website redesignMaya ChenActive$24,000
Mobile applicationNoah WilliamsPaused$42,000
Analytics dashboardAarav PatelComplete$18,500
Customer portalSofia GarciaActive$31,000

Installation

pnpm dlx shadcn-svelte@latest add http://sveltekit-prerender/r/data-table-export.json

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.

projects-table.svelte

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.

export-columns.ts

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

NameTypeDefaultDescription
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>

NameTypeDefaultDescription
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.