Custom Styling

The TableReader component supports full visual customization through the styleTable prop.

StyleTable Options

Pass a styleTable object to customize the table appearance:

<TableReader
  file={file}
  schema={schema}
  styleTable={{
    backgroundColor: "#0a0a0a",
    borderColor: "#27272a",
    headerColor: "#18181b",
    textColor: "#fafafa",
    tableBorderColor: "#3f3f46",
    tableBorderRadius: "8px",
    fontFamilyTable: "Inter, sans-serif",
    fontFamilyHeader: "Inter, sans-serif",
    paddingCell: "0.5rem",
    paddingHeader: "0.5rem",
  }}
/>

Available Properties

Property Type Description
backgroundColor string Table body background color
borderColor string Cell border color
headerColor string Header row background color
textColor string Text color for all cells
tableBorderColor string Outer table border color
tableBorderRadius string Border radius for the table container
fontFamilyTable string Font family for table body cells
fontFamilyHeader string Font family for header cells
paddingCell string Padding for table body cells
paddingHeader string Padding for header cells

Column Info Tooltips

Use the columnInfo prop to add info tooltips to specific column headers:

<TableReader
  file={file}
  schema={schema}
  columnInfo={[
    { name: "email", message: "Must be a valid email address" },
    { name: "salary", message: "Annual salary in USD" },
  ]}
/>

This adds an info icon next to the column header that shows a tooltip on hover.

Virtual Scrolling

For large files, the table uses virtual scrolling. You can configure it:

<TableReader
  file={file}
  schema={schema}
  rowHeight={36}         // Height of each row in pixels
  overscan={5}           // Extra rows rendered above/below viewport
  containerHeight={600}  // Height of the scrollable container
/>

Default Styles

The component ships with a CSS module that provides sensible defaults:

  • Header: zinc-900 background (#18181b)
  • Borders: gray-200 (#e5e7eb)
  • Error cells: light red background
  • Error text: red-500 (#ef4444)
  • Row numbers: sticky left column with gray text
  • Hover effect: slight brightness increase on rows

Import the default styles:

import "spreadsheet-validator/dist/style.css"

Next Steps

Check out the full API Reference for all available props and types.

PreviousFile UploadNextAPI Reference