Components
Loading preview...
A CSV and TSV viewer with parsing, file upload, search, zoom, and theme-aware grid rendering powered by Glide Data Grid.
npx shadcn@latest add https://21st.dev/r/extend-hq/csv-viewer"use client"
import { CsvViewer } from "@/components/ui/csv-viewer"
const data = [
"Ticker\tCompany\tSector\tPrice\tChange %",
"AAPL\tApple Inc.\tTechnology\t229.87\t+1.24",
"MSFT\tMicrosoft Corp.\tTechnology\t441.58\t+0.82",
"NVDA\tNVIDIA Corp.\tSemiconductors\t126.09\t+3.41",
"AMZN\tAmazon.com Inc.\tConsumer\t201.30\t-0.55",
"GOOGL\tAlphabet Inc.\tCommunication\t178.42\t+0.19",
"TSLA\tTesla Inc.\tAutomotive\t251.44\t-2.13",
"META\tMeta Platforms\tCommunication\t563.27\t+1.07",
"JPM\tJPMorgan Chase\tFinancials\t214.66\t+0.44",
"V\tVisa Inc.\tFinancials\t289.95\t+0.31",
"WMT\tWalmart Inc.\tConsumer\t81.12\t-0.27",
].join("\n")
export default function Demo() {
return (
<div className="mx-auto w-full max-w-3xl p-4">
<CsvViewer data={data} search className="rounded-lg border shadow-sm" />
</div>
)
}