Table

A real HTML table with hand-drawn row dividers instead of CSS borders. Optional heavier underline under the header. Rules draw in on mount, staggered a little row by row.

Tool	Weight
Pen	0.5
Pencil	2B
Brush	6

Roughness1.5Lock seedHeader underlineAnimate

<Table headerUnderline={true} roughness={1.5}>
  <TableHeader>
    <TableRow>
      <TableHead>Tool</TableHead>
      <TableHead>Weight</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>Pen</TableCell>
      <TableCell>0.5</TableCell>
    </TableRow>
  </TableBody>
</Table>

CLI install

npx doodleui-react add table

Usage

import { Table } from "doodleui-react";

<Table>
  <Table.Header>
    <Table.Row>
      <Table.Head>Tool</Table.Head>
      <Table.Head>Weight</Table.Head>
    </Table.Row>
  </Table.Header>
  <Table.Body>
    <Table.Row>
      <Table.Cell>Pen</Table.Cell>
      <Table.Cell>0.5</Table.Cell>
    </Table.Row>
  </Table.Body>
</Table>

Named exports: TableHeader (thead), TableHead (th), TableBody, TableRow, TableCell, TableFooter, TableCaption.

Migration: the old TableHead export was <thead>; it is now TableHeader. The new TableHead is <th> (alias: TableHeaderCell).

Semantics stay native table markup. doodle-ui measures row edges and draws rough.js lines over them.

Props

Prop	Type	Default	Notes
headerUnderline	boolean	true	Draw a heavier sketch rule under the header row.
animate	boolean	true	Row rules draw in on mount, staggered slightly. Overrides DoodleUIProvider. Reduced motion disables this unless the provider set forceAnimate.
roughness	number	1.5	How wobbly the stroke is. 0 is almost geometric. 3+ is messy.
seed	number	provider / random	Locks the sketch. Omit to follow SketchSeedProvider (Shuffle) or a mount-time random seed.
sketchColor	string	#1f1d1a	Stroke color. Also tints primary/accent fills where relevant.
className	string	undefined	Passed through to the root element.
style	CSSProperties	undefined	Passed through to the root element.