Export
Set enableExport: true to add a CSV/Excel export menu to the toolbar.
Export
ID | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Ava | Thompson | Owner | Engineering | active | 22 | $45,000 | Jan 2, 2023 | 0% | |||
| Liam | Nguyen | Admin | Marketing | inactive | 25 | $47,137 | Jan 13, 2023 | 9% | |||
| Noah | Silva | Editor | Design | pending | 28 | $49,274 | Jan 24, 2023 | 18% | |||
| Emma | Carter | Viewer | Sales | active | 31 | $51,411 | Feb 4, 2023 | 27% | |||
| Olivia | Rossi | Owner | Support | inactive | 34 | $53,548 | Feb 15, 2023 | 36% | |||
| William | Walker | Admin | Engineering | pending | 37 | $55,685 | Feb 26, 2023 | 45% | |||
| Sophia | Patel | Editor | Marketing | active | 40 | $57,822 | Mar 9, 2023 | 54% | |||
| James | Muller | Viewer | Design | inactive | 43 | $59,959 | Mar 20, 2023 | 63% | |||
| Isabella | Park | Owner | Sales | pending | 46 | $62,096 | Mar 31, 2023 | 72% | |||
| Lucas | Reyes | Admin | Support | active | 49 | $64,233 | Apr 11, 2023 | 81% | |||
| $4,120,536 |
Rows per page
1–10 of 48
import { DataTable, useDataTable } from "@/components/ui/data-table"
const table = useDataTable({
data,
columns,
getRowId: (row) => row.id,
enableExport: true,
exportFileName: "users",
enableRowSelection: true,
})
return <DataTable table={table} />
exportFileName sets the base file name for downloads (default "export").
What gets exported
When row selection is on, users can export just the selected rows. Otherwise, the current filtered rows are exported.
Combine with selection
Enable enableRowSelection alongside enableExport to let users hand-pick
the rows they want in the file. See Row selection.