Table
Tables display data in rows and columns with optional styling.
Import
import { Table } from "@gumtree/ui/Table" ; Props
| Prop | Type | Default | Description |
|---|---|---|---|
zebra | boolean | false | Alternate row background colors |
pinRows | boolean | false | Pin header rows when scrolling |
size | "xs" | "sm" | "md" | "lg" | - | Size of the table cells |
children | ComponentChildren | - | Table content (thead, tbody, etc.) |
Examples
Basic Table
A simple table with header and body.
| Name | Role |
|---|---|
| Alice | Admin |
| Bob | User |
< Table >
< thead >
< tr > < th > Name </ th > < th > Role </ th > </ tr >
</ thead >
< tbody >
< tr > < td > Alice </ td > < td > Admin </ td > </ tr >
< tr > < td > Bob </ td > < td > User </ td > </ tr >
</ tbody >
</ Table > Zebra Striping
Alternating row backgrounds for better readability.
| Name | Role |
|---|---|
| Alice | Admin |
| Bob | User |
| Charlie | User |
< Table zebra >
< thead >
< tr > < th > Name </ th > < th > Role </ th > </ tr >
</ thead >
< tbody >
< tr > < td > Alice </ td > < td > Admin </ td > </ tr >
< tr > < td > Bob </ td > < td > User </ td > </ tr >
< tr > < td > Charlie </ td > < td > User </ td > </ tr >
</ tbody >
</ Table > Sizes
Tables can be sized to fit different contexts.
| Name | Role |
|---|---|
| Alice | Admin |
< Table size = "xs" >
< thead > < tr > < th > Name </ th > < th > Role </ th > </ tr > </ thead >
< tbody > < tr > < td > Alice </ td > < td > Admin </ td > </ tr > </ tbody >
</ Table >