Layout Table

Table

Rows and columns, scrolling sideways on a phone.

Preview

Six places, from /brand/places — each with its colour and three verbs.
Place	Region	Landscape	Icon	Verbs
Leh	Ladakh	Valleys	Shanti Stupa	CLIMB · RIDE · GAZE
Rishikesh	Uttarakhand	Waters	Lakshman Jhula	RAFT · STRETCH · BREATHE
Munnar	Kerala	Fields	Tea Hills	WALK · SIP · BREATHE
Jaipur	Rajasthan	Flowers	Hawa Mahal	SEE · SHOP · EAT
Jaisalmer	Rajasthan	Sunny Days	Golden Fort	EXPLORE · RIDE · GAZE
Pokhara	Nepal	Waters	Fishtail Peak	PADDLE · FLY · GAZE

Usage

tsx

import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell, TableCaption } from "zostel-ui";

<Table>
  <TableCaption>Places</TableCaption>
  <TableHeader>
    <TableRow><TableHead>Place</TableHead><TableHead>Region</TableHead></TableRow>
  </TableHeader>
  <TableBody>
    <TableRow><TableCell>Leh</TableCell><TableCell>Ladakh</TableCell></TableRow>
  </TableBody>
</Table>

Parts

Prop	Type	Default	Description
`Table`	`table`	—	In a horizontally scrolling wrapper.
`TableHeader / TableBody / TableFooter`	`thead / tbody / tfoot`	—
`TableRow`	`tr`	—	Highlights on hover.
`TableHead / TableCell`	`th / td`	—
`TableCaption`	`caption`	—	Says what the table is.

Table

Type: table

Default: —

In a horizontally scrolling wrapper.

TableHeader / TableBody / TableFooter

Type: thead / tbody / tfoot

Default: —

TableRow

Type: tr

Default: —

Highlights on hover.

TableHead / TableCell

Type: th / td

Default: —

TableCaption

Type: caption

Default: —

Says what the table is.