React Spreadsheet Validator

Validate Excel &
CSV Files with Confidence

Visual spreadsheet validation powered by Zod. Upload, define schemas, and catch errors before they reach production.

Excel & CSV
Zod Schemas
Real-time Validation
Features & Docs

Built for Developers

A complete toolkit to validate spreadsheet data with type safety, performance, and full control over the experience.

Zod Schema Validation

Define your data shape with Zod schemas. Every row is validated against your schema, with detailed per-cell error reporting and type-safe callbacks.

#
name
email
age
1
Alice
alice@mail.com
28
2
""
bob@mail.com
15
3
Carol
not-email
34
4
Dave
dave@io.co
22
schema.tsx
import { z } from "zod"
import { TableReader } from "spreadsheet-validator"

const schema = z.object({
  name: z.string().min(1),
  email: z.string().email(),
  age: z.number().min(18),
})

<TableReader file={file} schema={schema} />

XLSX & CSV Support

Drop in any Excel or CSV file. The component handles parsing, date code conversion, and encoding. Get callbacks for both errors and parsed data.

report.xlsx
data.csv
248 rows parsed
12 errors
upload.tsx
<TableReader
  file={selectedFile}
  schema={schema}
  errorIssuesLog={(errors) => {
    console.log("Validation errors:", errors)
  }}
  onTableData={(data) => {
    console.log("Parsed rows:", data.length)
  }}
/>

Custom Styling

Full control over table appearance. Match your app's design system with the styleTable prop — colors, borders, fonts, and border radius.

name
email
role
Alice
alice@co.io
admin
Bob
bob@dev.co
editor
theme.tsx
<TableReader
  file={file}
  schema={schema}
  styleTable={{
    backgroundColor: "#0a0a0a",
    headerColor: "#10b981",
    textColor: "#fafafa",
    borderColor: "#1a1a1a",
    tableBorderRadius: "12px",
    fontFamilyHeader: "Inter",
    paddingCell: "0.5rem",
    paddingHeader: "0.5rem",
  }}
/>

Virtualized Scrolling

Renders only visible rows using virtual scrolling with configurable overscan. Handle 100k+ rows without breaking a sweat.

rendering 3 of 100k rowsviewport
config.tsx
<TableReader
  file={file}
  schema={schema}
  rowHeight={36}
  overscan={5}
  containerHeight={600}
/>

Column Info Tooltips

Add contextual tooltips to any column header. Guide users through expected data formats and validation rules.

name
email
Valid email required
age
Alice
alice@co
28
columns.tsx
<TableReader
  file={file}
  schema={schema}
  columnInfo={[
    { name: "email", message: "Valid email required" },
    { name: "age", message: "Must be 18 or older" },
    { name: "role", message: "admin | editor | viewer" },
  ]}
/>
Zod v4React 19Web WorkersTypeScriptVirtual ScrollZero Config
Architecture

How Validation Works

Heavy validation runs off the main thread. Your UI never freezes, even with 100k+ rows.

01

Upload

User drops an XLSX or CSV file into the component

02

Parse

File is read and parsed using the XLSX library

03

Display

Spreadsheet data is converted to JSON and rendered in the table

04

Validate

Data + Zod schema sent to a Web Worker for background validation

05

Render

Validation results return, errors are highlighted per cell