Components
Table
SketchTable — a hand-drawn data table with rough.js zebra stripes.
SketchTable renders rows and columns inside a SketchCard, with every other row
filled using a rough.js sketch fill. Pass onRowClick to make rows interactive.
Default
import { SketchTable } from "blackchalk";const columns = [{ key: "name", label: "Name" },{ key: "role", label: "Role" },{ key: "status", label: "Status" },];const data = [{ name: "Ada Lovelace", role: "Engineer", status: "Active" },{ name: "Alan Turing", role: "Researcher", status: "Active" },{ name: "Grace Hopper", role: "Admiral", status: "Away" },];<SketchTable columns={columns} data={data} />Props
| Prop | Type | Default |
|---|---|---|
columns | { key: string; label: string; width?: string }[] | — |
data | Record<string, any>[] | — |
onRowClick | (row: Record<string, any>, index: number) => void | — |
Column fields
| Field | Type | Default |
|---|---|---|
key | string | — |
label | string | — |
width | string | fluid |
See it in the Storybook playground, or read the source.