Documentation

CSV Export (beta)

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:

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

CSV Export Configuration

Property	Required	Description

`tableRef` React.RefObject<TableRefType>	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 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.

React TSX

Copy

1{
2  accessor: "salary",
3  label: "Annual Salary",
4  valueFormatter: ({ value }) => `$${(value / 1000).toFixed(0)}K`,
5  useFormattedValueForCSV: true
6}
7
8// Table displays: "$85K"
9// CSV exports: "$85K"
10// Without flag: CSV would export 85000

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.

React TSX

Copy

1{
2  accessor: "completionRate",
3  label: "Completion Rate",
4  valueFormatter: ({ value }) => `${(value * 100).toFixed(1)}%`,
5  exportValueGetter: ({ value }) => {
6    // Round to whole percentage for CSV
7    return `${Math.round(value * 100)}%`;
8  }
9}
10
11// Table displays: "92.5%"
12// CSV exports: "93%"
13// Raw value: 0.925

3. Adding Context to Exports

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

React TSX

Copy

1{
2  accessor: "department",
3  label: "Department",
4  valueFormatter: ({ value }) => capitalize(value),
5  exportValueGetter: ({ value }) => {
6    const codes = {
7      engineering: "ENG",
8      product: "PRD",
9      sales: "SLS",
10      marketing: "MKT"
11    };
12    const code = codes[value] || "OTH";
13    return `${capitalize(value)} (${code})`;
14  }
15}
16
17// Table displays: "Engineering"
18// CSV exports: "Engineering (ENG)"

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.

React TSX

Copy

1// Calculate total revenue from all rows
2const allRows = tableRef.current?.getAllRows();
3const totalRevenue = allRows?.reduce((sum, tableRow) => 
4  sum + (tableRow.row.revenue || 0), 0
5);
6
7// Access row metadata
8allRows?.forEach(tableRow => {
9  console.log(`Depth: ${tableRow.depth}, Position: ${tableRow.position}`);
10  console.log("Data:", tableRow.row);
11});
12
13// Export raw data to custom format
14const allRows = tableRef.current?.getAllRows();
15const rawData = allRows?.map(tableRow => tableRow.row);
16const jsonData = JSON.stringify(rawData, null, 2);
17downloadFile(jsonData, "data.json");

getHeaders() - Access Column Configuration

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

React TSX

Copy

1// Get all column names
2const headers = tableRef.current?.getHeaders();
3const columnNames = headers?.map(h => h.label);
4console.log("Columns:", columnNames);
5
6// Validate configuration
7const sortableColumns = headers?.filter(h => h.isSortable);
8console.log(`${sortableColumns.length} sortable columns`);