23 / Documents
CSV Viewer
A real table for delimited data, with sortable columns, a sticky header, and a row cap so a large file cannot lock the page.
| INV-1042 | Northwind Traders | 2026-07-02 | 1240.00 |
| INV-1043 | Acme Supply | 2026-07-04 | 98.50 |
| INV-1044 | Contoso Ltd | 2026-07-09 | 17300.00 |
| INV-1045 | Northwind Traders | 2026-07-11 | 640.25 |
| INV-1046 | Fabrikam | 2026-07-18 | 3.99 |
Showing 5 of 6 rows
Installation
Copy the source into your project, or keep it behind a package.
Copy the component into your project and make it yours.
Usage
export function Preview({ file }: { file: File }) {
return <CsvViewer source={file} maxRows={200} />
}API
sourcestring | FileCSV text or a file to parse.tableCsvTableAlready parsed data as fields and rows. Skips the parser entirely.parser(source) => Promise<CsvTable>Replaces the default parser. Supply this and papaparse is never loaded.maxRowsnumberHow many rows to render. Defaults to 200.emptyLabel, loadingLabelReactNodeCopy for those two states.Accessibility
The data is a real table with a caption, column headers, and aria-sort on the sorted column, so it can be navigated with table commands rather than read as a wall of text. Sorting is a button inside each header. Numeric columns sort numerically instead of as text. When rows are capped the footer says how many of the total are shown, rather than silently truncating.
Dependencies
papaparse, lucide-react