CSV Viewer

Spreadsheet-like previews for delimited files with sorting, filtering, typing, and large-file virtualization.

The CSV Viewer covers exports, imports, tabular logs, and datasets that do not need full spreadsheet rendering.

"use client";

import { CsvViewer } from "@/components/ui/csv-viewer";

const data = `Invoice,Customer,Status,Amount
INV-1001,Northstar Supply,Approved,4280.50
INV-1002,Bluebird Medical,Needs review,1190.00`;

export function CsvViewerExample() {
  return <CsvViewer data={data} />;

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-[9999]" />


pnpm dlx shadcn@latest add https://ui.extend.ai/r/csv-viewer.json

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

Excel Editor File Upload

On This Page

Installation Useful behaviors API Reference CsvViewer

Deploy your document processing on Extend

Trusted by Brex, Flatiron, Square, and more.

Extend provides production ready tools to handle your toughest documents.