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>