Documentation

CSV Export

StackBlitz

SimpleTable makes it easy to export your table data to CSV format with just one method call. Using the tableRef and the exportToCSV() method, users can download their data for analysis, reporting, or sharing.

Basic Usage

To enable CSV export in your table, follow these steps:

  1. Create a table reference - Create a ref using useRef and pass it to the tableRef prop
  2. Add an export button - Create a button or trigger that calls the export method
  3. Call exportToCSV() - Invoke tableRef.current?.exportToCSV() to download the CSV file

CSV Export Configuration

PropertyRequiredDescriptionExample
ref
React.RefObject<TableAPI>
Required
React ref object that provides access to table methods including exportToCSV. Pass this ref to the SimpleTable component to enable CSV export functionality.
exportToCSV
(props?: { filename?: string }) => void
Optional
Method to export table data to CSV format. Exports ALL data including all pages when pagination is enabled (fixed in v1.9.4). Call via tableRef.current?.exportToCSV(). Optionally pass a filename parameter.
includeHeadersInCSVExport
boolean
Optional
When true, includes column headers as the first row in CSV exports. Defaults to true.
HeaderObject.excludeFromRender
boolean
Optional
When true, hides the column from the table display and from the column editor, while keeping it in CSV exports. Perfect for internal IDs, database keys, or technical fields that shouldn't clutter the UI but are needed in exports.
HeaderObject.excludeFromCsv
boolean
Optional
When true, shows the column in the table but excludes it from CSV exports. Perfect for action buttons, interactive elements, or UI-only columns that don't make sense in exported data.

✨ Full Data Export

The exportToCSV() method now exports all data from your table, including all pages when pagination is enabled. Previously, only the current page was exported - this has been fixed in version 1.9.4.

The exported CSV includes all visible columns and respects active filters/sorting. Default filename is table-export.csv. Customize with exportToCSV({ filename: "my-file.csv" }).

Formatting CSV Exports

Control how column values appear in CSV exports using three powerful options. By default, CSV exports use raw data values.

1. Use Formatted Values (useFormattedValueForCSV)

Export the same formatted values that are displayed in the table. Perfect when you want CSV exports to match what users see on screen.

2. Custom Export Values (exportValueGetter)

Provide completely different values specifically for CSV export. Takes highest priority. Ideal for adding codes, identifiers, or transforming data for spreadsheet compatibility.

3. Adding Context to Exports

Use exportValueGetter to add department codes, identifiers, or additional context for better data clarity:

Accessing Table Data

New in v1.9.4: The table ref now provides powerful methods to access all table data and configuration programmatically. Try clicking the "Get Table Info" button in the demo above!

getAllRows() - Access Complete Dataset

Returns all rows as TableRow[] objects, flattened and including nested/grouped rows. Each TableRow contains the raw data in the row property plus metadata like depth, position, and rowPath. Perfect for analytics, batch operations, or custom exports.

getHeaders() - Access Column Configuration

Returns the table's current header/column definitions. Useful for dynamic table manipulation or building custom UI controls.