Table Component Catalog

Table Variants

Default Variant

The standard table with minimal styling.

Name	Role	Department
Alice Johnson	Software Engineer	Engineering
Bob Smith	Product Manager	Product

Example Code

<Table>
  <TableHead>
    <TableRow>
      <TableHeader>Name</TableHeader>
      <TableHeader>Role</TableHeader>
      <TableHeader>Department</TableHeader>
    </TableRow>
  </TableHead>
  <TableBody>
    <TableRow>
      <TableCell>Alice Johnson</TableCell>
      <TableCell>Software Engineer</TableCell>
      <TableCell>Engineering</TableCell>
    </TableRow>
    <TableRow>
      <TableCell>Bob Smith</TableCell>
      <TableCell>Product Manager</TableCell>
      <TableCell>Product</TableCell>
    </TableRow>
  </TableBody>
</Table>

Striped Variant

Table with alternating row colors for better readability.

Name	Role	Department
Charlie Brown	Designer	Design
Diana Evans	Marketing Specialist	Marketing

Example Code

<Table variant="striped">
  <TableHead>
    <TableRow isHeader={true}>
      <TableHeader>Name</TableHeader>
      <TableHeader>Role</TableHeader>
      <TableHeader>Department</TableHeader>
    </TableRow>
  </TableHead>
  <TableBody>
    <TableRow>
      <TableCell>Charlie Brown</TableCell>
      <TableCell>Designer</TableCell>
      <TableCell>Design</TableCell>
    </TableRow>
    <TableRow>
      <TableCell>Diana Evans</TableCell>
      <TableCell>Marketing Specialist</TableCell>
      <TableCell>Marketing</TableCell>
    </TableRow>
  </TableBody>
</Table>

Advanced Variant

Enhanced table with additional styling and features.

Name	Role	Department
Ethan Hunt	Sales Representative	Sales
Fiona Gallagher	HR Manager	Human Resources

Example Code

<Table variant="advanced">
  <TableHead>
    <TableRow>
      <TableHeader>Name</TableHeader>
      <TableHeader>Role</TableHeader>
      <TableHeader>Department</TableHeader>
    </TableRow>
  </TableHead>
  <TableBody>
    <TableRow>
      <TableCell bold>Ethan Hunt</TableCell>
      <TableCell>Sales Representative</TableCell>
      <TableCell>Sales</TableCell>
    </TableRow>
    <TableRow>
      <TableCell bold>Fiona Gallagher</TableCell>
      <TableCell>HR Manager</TableCell>
      <TableCell>Human Resources</TableCell>
    </TableRow>
  </TableBody>
</Table>

Dense Grid with Links

Compact table with grid lines and clickable rows.

Name	Role	Department
View George's profileGeorge Wilson	View George's profileCTO	View George's profileExecutive
View Hannah's profileHannah Montana	View Hannah's profileSinger	View Hannah's profileEntertainment

Example Code

<Table dense grid>
  <TableHead>
    <TableRow>
      <TableHeader>Name</TableHeader>
      <TableHeader>Role</TableHeader>
      <TableHeader>Department</TableHeader>
    </TableRow>
  </TableHead>
  <TableBody>
    <TableRow href="/employee/1" title="View George's profile">
      <TableCell>George Wilson</TableCell>
      <TableCell>CTO</TableCell>
      <TableCell>Executive</TableCell>
    </TableRow>
    <TableRow href="/employee/2" title="View Hannah's profile">
      <TableCell>Hannah Montana</TableCell>
      <TableCell>Singer</TableCell>
      <TableCell>Entertainment</TableCell>
    </TableRow>
  </TableBody>
</Table>