Table

A structured data table with headers, rows, and cells for displaying tabular information.

Preview

Recent bookings at Zostel properties
Booking ID	Guest	Destination	Check-in	Nights	Status
BK001	Arjun Mehta	Manali	Mar 15	3	Confirmed
BK002	Priya Sharma	Goa	Mar 18	5	Pending
BK003	Rahul Singh	Jaipur	Mar 20	2	Confirmed
BK004	Neha Patel	Rishikesh	Mar 22	4	Cancelled

Usage

tsx

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

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Property</TableHead>
      <TableHead>Location</TableHead>
      <TableHead className="text-right">Price</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>Zostel Jaipur</TableCell>
      <TableCell>Rajasthan</TableCell>
      <TableCell className="text-right">$8</TableCell>
    </TableRow>
  </TableBody>
</Table>

Props

Prop	Type	Default	Description
`className`	`string`	—	Additional CSS classes for the table wrapper
`children`	`ReactNode`	—	Table structure: TableHeader, TableBody, TableFooter

className

Type: string

Default: —

Additional CSS classes for the table wrapper

children

Type: ReactNode

Default: —

Table structure: TableHeader, TableBody, TableFooter

Previous Separator Next Avatar