ExportCSV

Botón de descarga CSV con mapeo de columnas, formato personalizado, BOM UTF-8 y contador de filas.

pnpm dlx nuvo-ui add export-csv

Básico — todas las columnas

Con columnas específicas y formato

Variantes y tamaños

Delimitador personalizado (Excel europeo)

Uso

import { ExportCSV } from "@nuvo-ui/ui"

// Simple — exporta todas las columnas del objeto
<ExportCSV data={rows} filename="reporte" />

// Con columnas específicas y formato
<ExportCSV
  data={rows}
  filename="usuarios"
  delimiter=";"
  columns={[
    { key: "nombre", header: "Nombre" },
    { key: "monto",  header: "Monto $", format: v => Number(v).toFixed(2) },
    { key: "fecha",  header: "Fecha",   format: v => new Date(v).toLocaleDateString() },
  ]}
  onExport={count => toast({ title: `${count} filas exportadas` })}
/>

Props

Prop	Tipo	Default	Descripción
data	Record<string, unknown>[]	—	Datos a exportar
columns	ExportCSVColumn[]	auto	Columnas con header y formato. Si se omite, infiere las keys del primer objeto
filename	string	"export.csv"	Nombre del archivo (con o sin .csv)
delimiter	"," \| ";" \| "\t"	","	Delimitador de campos
label	string	"Exportar CSV"	Texto del botón
variant	"default" \| "outline" \| "ghost"	"outline"	Estilo del botón
size	"sm" \| "md" \| "lg"	"md"	Tamaño del botón
onExport	(rowCount: number) => void	—	Callback tras la descarga