PaperTable

Editorial data table with mono headers and hover emphasis.

↗ readable data, no zebra cosplay.

Preview

import * as React from 'react'
import { cn } from '@/lib/utils'

export interface PaperTableColumn<T> {
  key: keyof T
  header: string

Copy this file into your project, export its barrel, and then add it to the master UI index.

Step 1.Create this file:
components/ui/paperTable/paperTable.tsx⎘
Step 2.Create the barrel:
components/ui/paperTable/index.ts⎘
Step 3.Add this export in components/ui/index.ts:
```
export * from './paperTable'
```

Standard

Prop	Type	Default	Description
`columns`	`PaperTableColumn<T>[]`	`[]`	Defines header labels and row keys.
`rows`	`T[]`	`[]`	Array of record-shaped table rows.

Perfect for release notes and status snapshots.

const columns = [{ key: 'name', header: 'Name' }]
<PaperTable columns={columns} rows={rows} />

Pairs with badges and progress cells for quick triage.

<PaperTable columns={columns} rows={rows} />