Export Data

One click downloads a CSV of exactly what's on screen — sorted, filtered, and with hidden columns excluded. Select rows to export just those.

Installation

Export ships with Data Table — no separate install.

Works with:Data Table

npx shadcn@latest add @kotsas-ui/data-table

This feature confirms its results with toasts. The install adds components/ui/sonner.tsx for you, but the <Toaster /> it exports must be mounted once in your root layout — otherwise the table works but its feedback never appears.

app/layout.tsx

import { Toaster } from "@/components/ui/sonner"

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Toaster />
      </body>
    </html>
  )
}

Usage

On by default. Each column serializes with the same formatter its cell uses (currency, date, percent, …), so the CSV matches what users see, not raw values. Select one or more rows and the export narrows to just those.


1	Set up CI pipeline	High	Done	$2,400.00	True
2	Design onboarding flow	Medium	In progress	$3,200.00	False
3	Migrate auth to OAuth2	Urgent	In progress	$5,600.00	False
4	Write API docs	Low	To do	$900.00	False

Examples

Turn the button off with enableExport={false}:

// Hide the button on tables that shouldn't leak data (or where a
// feature demo just doesn't need it):
<DataTable data={rows} columns={columns} enableExport={false} />

API Reference

Prop	Type	Default	Description
enableExport?	boolean	true	Shows the toolbar's Export button. The CSV is RFC 4180, serialized per column with the same formatter its cells use, hidden columns excluded, and formula-injection–neutralized for fields starting with =, +, -, or @.