React CSV Viewer

A React CSV viewer component for spreadsheet-like previews of CSV and TSV files with upload, parsing, zoom, and large-table virtualization.

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

PapaParse-backed CSV and TSV parsing with empty-row handling.
Virtualized rows and columns through Glide Data Grid.
Optional toolbar search via the search prop. When enabled, results update as you type with debounced matching, result navigation, cell selection, and scroll-into-view.
Header controls for upload, row and column counts, and zoom.
Grid zoom that scales row height, header height, column width, and cell text.

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
`search`	`boolean`	`false`	No

On This Page