The React CSV Viewer covers exports, imports, tabular logs, and datasets that need fast CSV or TSV previews without full spreadsheet rendering.
Installation
Glide Data Grid renders overlay editors into a root portal. Add this element as
the last child of your app's <body> before using the component:
<div id="portal" className="fixed top-0 left-0 z-40" />Next.js SSR
Glide Data Grid uses browser-only APIs. If you see SSR errors, render the CSV
Viewer through next/dynamic with ssr: false.
pnpm dlx shadcn@latest add @extend/csv-viewer
Useful behaviors
- PapaParse-backed CSV and TSV parsing with empty-row handling.
- Virtualized rows and columns through Glide Data Grid.
- Header controls for upload, row and column counts, and zoom.
- Grid zoom that scales row height, header height, column width, and cell text.
API Reference
CsvViewer
The CsvViewer component renders its built-in CSV/TSV upload flow, parser state, zoom controls, and virtualized grid.
| Prop | Type | Default | Required |
|---|---|---|---|
className | string | - | No |
data | string | - | No |