Introduction

Spreadsheet Validator is a React component for validating Excel and CSV files using Zod schemas. Upload a file, define your validation rules, and see errors highlighted directly in the table.

Key Features

  • Zod-powered validation — Define column schemas with Zod and validate entire spreadsheets
  • Visual error highlighting — Invalid cells are highlighted with error tooltips
  • Web Worker validation — Validation runs in a background thread, keeping the UI responsive
  • Virtual scrolling — Handle thousands of rows without performance issues
  • Customizable styling — Full control over colors, fonts, and borders

How It Works

The library provides a single component, TableReader, that handles the entire flow:

  1. You provide a File object and a Zod schema
  2. The file is parsed (XLSX or CSV) using the xlsx library
  3. Each row is validated against your schema in a Web Worker
  4. The table renders with invalid rows shown first, errors highlighted per-cell
  5. You receive callbacks with valid data and error logs

Quick Example

import TableReader from "spreadsheet-validator"
import "spreadsheet-validator/dist/style.css"
import { z } from "zod"

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

function App() {
  const [file, setFile] = useState<File | null>(null)

  return (
    <div>
      <input
        type="file"
        accept=".xlsx,.csv"
        onChange={(e) => setFile(e.target.files?.[0] ?? null)}
      />
      <TableReader
        file={file}
        schema={schema}
        onTableData={(validRows) => console.log(validRows)}
        errorIssuesLog={(errors) => console.log(errors)}
      />
    </div>
  )
}

Next Steps

Check out the Installation guide to set up the library in your project.

NextInstallation