CSV / TSV Viewer

Component 80

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 = `Name,Department,Role,Location,Start Date,Salary
Ava Thompson,Engineering,Staff Engineer,San Francisco,2021-03-15,182000
Liam Carter,Design,Product Designer,New York,2022-07-01,134000
Sofia Nguyen,Engineering,Frontend Engineer,Remote,2023-01-20,148000
Mateo Rossi,Marketing,Growth Lead,Austin,2020-11-09,121000
Hana Suzuki,Engineering,Backend Engineer,Tokyo,2022-02-14,156000
Noah Williams,Sales,Account Executive,Chicago,2021-09-30,98000
Priya Patel,Data,Data Scientist,Remote,2023-05-02,162000
Lucas Müller,Engineering,DevOps Engineer,Berlin,2020-06-22,159000
Emma Johnson,Design,Design Lead,New York,2019-04-18,171000
Yusuf Demir,Support,Support Manager,Istanbul,2022-10-11,89000
Chloe Martin,Marketing,Content Strategist,Remote,2023-08-07,102000
Daniel Kim,Engineering,Engineering Manager,Seoul,2018-12-03,198000`

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