CSV / TSV Viewer

Component 6

About

A CSV and TSV viewer with parsing, file upload, search, zoom, and theme-aware grid rendering powered by Glide Data Grid.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds CSV / TSV Viewer to your project and fits it to your theme.

Code

How CSV / TSV Viewer is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"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>
  )
}