Table
Used to display data in a tabular format.
| Item | Category | Price | Stock |
|---|---|---|---|
| Organic Honey | Grocery | 12.99 | 12.99 |
| Yoga Mat | Fitness | 29.99 | 29.99 |
| Watercolor Set | Art Supplies | 24.5 | 24.5 |
| Running Shoes | Footwear | 89.99 | 89.99 |
import { Table } from '@fidely-ui/react/table'
export const TableBasics = () => {
return (
<Table.Root>
<Table.Header>
<Table.Row>
<Table.HeadCell>Item</Table.HeadCell>
<Table.HeadCell>Category</Table.HeadCell>
<Table.HeadCell>Price</Table.HeadCell>
<Table.HeadCell>Stock</Table.HeadCell>
</Table.Row>
</Table.Header>
<Table.Body>
{items.map((item) => (
<Table.Row key={item.id}>
<Table.Cell>{item.name}</Table.Cell>
<Table.Cell>{item.category}</Table.Cell>
<Table.Cell>{item.price}</Table.Cell>
<Table.Cell>{item.price}</Table.Cell>
</Table.Row>
))}
</Table.Body>
</Table.Root>
)
}
export const items = [
{
id: 1,
name: 'Organic Honey',
category: 'Grocery',
price: 12.99,
stock: 50,
},
{ id: 2, name: 'Yoga Mat', category: 'Fitness', price: 29.99, stock: 20 },
{
id: 3,
name: 'Watercolor Set',
category: 'Art Supplies',
price: 24.5,
stock: 15,
},
{
id: 4,
name: 'Running Shoes',
category: 'Footwear',
price: 89.99,
stock: 30,
},
]
Usage
import { Table } from '@fidely-ui/react'<Table.Root>
<Table.Header>
<Table.Row>
<Table.HeadCell />
</Table.Row>
</Table.Header>
<Table.Body>
<Table.Row>
<Table.Cell />
</Table.Row>
</Table.Body>
</Table.Root>Examples
Sizes
Use the size prop to adjust the spacing of table cells.
sm
| Item | Category | Price | Stock |
|---|---|---|---|
| Organic Honey | Grocery | 12.99 | 12.99 |
| Yoga Mat | Fitness | 29.99 | 29.99 |
| Watercolor Set | Art Supplies | 24.5 | 24.5 |
| Running Shoes | Footwear | 89.99 | 89.99 |
md
| Item | Category | Price | Stock |
|---|---|---|---|
| Organic Honey | Grocery | 12.99 | 12.99 |
| Yoga Mat | Fitness | 29.99 | 29.99 |
| Watercolor Set | Art Supplies | 24.5 | 24.5 |
| Running Shoes | Footwear | 89.99 | 89.99 |
lg
| Item | Category | Price | Stock |
|---|---|---|---|
| Organic Honey | Grocery | 12.99 | 12.99 |
| Yoga Mat | Fitness | 29.99 | 29.99 |
| Watercolor Set | Art Supplies | 24.5 | 24.5 |
| Running Shoes | Footwear | 89.99 | 89.99 |
import { Stack, Table, Text, VStack } from '@fidely-ui/react'
export const TableSizes = () => {
const sizes = ['sm', 'md', 'lg'] as const
return (
<Stack gap={3}>
{sizes.map((size) => (
<VStack key={size} gap={4}>
<Text color={'fg.muted'}>{size}</Text>
<Table.Root size={size}>
<Table.Header>
<Table.Row>
<Table.HeadCell>Item</Table.HeadCell>
<Table.HeadCell>Category</Table.HeadCell>
<Table.HeadCell>Price</Table.HeadCell>
<Table.HeadCell>Stock</Table.HeadCell>
</Table.Row>
</Table.Header>
<Table.Body>
{items.map((item) => (
<Table.Row key={item.id}>
<Table.Cell>{item.name}</Table.Cell>
<Table.Cell>{item.category}</Table.Cell>
<Table.Cell>{item.price}</Table.Cell>
<Table.Cell>{item.price}</Table.Cell>
</Table.Row>
))}
</Table.Body>
</Table.Root>
</VStack>
))}
</Stack>
)
}
export const items = [
{
id: 1,
name: 'Organic Honey',
category: 'Grocery',
price: 12.99,
stock: 50,
},
{ id: 2, name: 'Yoga Mat', category: 'Fitness', price: 29.99, stock: 20 },
{
id: 3,
name: 'Watercolor Set',
category: 'Art Supplies',
price: 24.5,
stock: 15,
},
{
id: 4,
name: 'Running Shoes',
category: 'Footwear',
price: 89.99,
stock: 30,
},
]
Hoverable
Use the hoverable prop to enable interractive hover effects on table rows, improving readability and focus.
| Item | Category | Price | Stock |
|---|---|---|---|
| Organic Honey | Grocery | 12.99 | 12.99 |
| Yoga Mat | Fitness | 29.99 | 29.99 |
| Watercolor Set | Art Supplies | 24.5 | 24.5 |
| Running Shoes | Footwear | 89.99 | 89.99 |
import { Table } from '@fidely-ui/react/table'
export const TableHoverable = () => {
return (
<Table.Root hoverable>
<Table.Header>
<Table.Row>
<Table.HeadCell>Item</Table.HeadCell>
<Table.HeadCell>Category</Table.HeadCell>
<Table.HeadCell>Price</Table.HeadCell>
<Table.HeadCell>Stock</Table.HeadCell>
</Table.Row>
</Table.Header>
<Table.Body>
{items.map((item) => (
<Table.Row key={item.id}>
<Table.Cell>{item.name}</Table.Cell>
<Table.Cell>{item.category}</Table.Cell>
<Table.Cell>{item.price}</Table.Cell>
<Table.Cell>{item.price}</Table.Cell>
</Table.Row>
))}
</Table.Body>
</Table.Root>
)
}
export const items = [
{
id: 1,
name: 'Organic Honey',
category: 'Grocery',
price: 12.99,
stock: 50,
},
{ id: 2, name: 'Yoga Mat', category: 'Fitness', price: 29.99, stock: 20 },
{
id: 3,
name: 'Watercolor Set',
category: 'Art Supplies',
price: 24.5,
stock: 15,
},
{
id: 4,
name: 'Running Shoes',
category: 'Footwear',
price: 89.99,
stock: 30,
},
]
Variants
Use the variant prop to change the visual style of the table (e.g., subtle, outline, striped).
subtle
| Item | Category | Price | Stock |
|---|---|---|---|
| Organic Honey | Grocery | 12.99 | 12.99 |
| Yoga Mat | Fitness | 29.99 | 29.99 |
| Watercolor Set | Art Supplies | 24.5 | 24.5 |
| Running Shoes | Footwear | 89.99 | 89.99 |
outline
| Item | Category | Price | Stock |
|---|---|---|---|
| Organic Honey | Grocery | 12.99 | 12.99 |
| Yoga Mat | Fitness | 29.99 | 29.99 |
| Watercolor Set | Art Supplies | 24.5 | 24.5 |
| Running Shoes | Footwear | 89.99 | 89.99 |
striped
| Item | Category | Price | Stock |
|---|---|---|---|
| Organic Honey | Grocery | 12.99 | 12.99 |
| Yoga Mat | Fitness | 29.99 | 29.99 |
| Watercolor Set | Art Supplies | 24.5 | 24.5 |
| Running Shoes | Footwear | 89.99 | 89.99 |
import { Stack, Table, Text, VStack } from '@fidely-ui/react'
export const TableVariants = () => {
const variants = ['subtle', 'outline', 'striped'] as const
return (
<Stack gap={3}>
{variants.map((variant) => (
<VStack key={variant} gap={4}>
<Text color={'fg.muted'}>{variant}</Text>
<Table.Root size={'sm'} variant={variant}>
<Table.Header>
<Table.Row>
<Table.HeadCell>Item</Table.HeadCell>
<Table.HeadCell>Category</Table.HeadCell>
<Table.HeadCell>Price</Table.HeadCell>
<Table.HeadCell>Stock</Table.HeadCell>
</Table.Row>
</Table.Header>
<Table.Body>
{items.map((item) => (
<Table.Row key={item.id}>
<Table.Cell>{item.name}</Table.Cell>
<Table.Cell>{item.category}</Table.Cell>
<Table.Cell>{item.price}</Table.Cell>
<Table.Cell>{item.price}</Table.Cell>
</Table.Row>
))}
</Table.Body>
</Table.Root>
</VStack>
))}
</Stack>
)
}
export const items = [
{
id: 1,
name: 'Organic Honey',
category: 'Grocery',
price: 12.99,
stock: 50,
},
{ id: 2, name: 'Yoga Mat', category: 'Fitness', price: 29.99, stock: 20 },
{
id: 3,
name: 'Watercolor Set',
category: 'Art Supplies',
price: 24.5,
stock: 15,
},
{
id: 4,
name: 'Running Shoes',
category: 'Footwear',
price: 89.99,
stock: 30,
},
]
With Caption
Use the Table.Caption component to add a caption to your table. You can also control its position with the captionSide prop ("top" or "bottom").
| Item | Category | Price | Stock |
|---|---|---|---|
| Organic Honey | Grocery | 12.99 | 12.99 |
| Organic Honey | Grocery | 12.99 | 12.99 |
| Organic Honey | Grocery | 12.99 | 12.99 |
import { Table } from '@fidely-ui/react/table'
export const TableWithCaption = () => {
return (
<Table.Root>
<Table.Caption captionSide={'bottom'}>
Item order and pricing information
</Table.Caption>
<Table.Header>
<Table.Row>
<Table.HeadCell>Item</Table.HeadCell>
<Table.HeadCell>Category</Table.HeadCell>
<Table.HeadCell>Price</Table.HeadCell>
<Table.HeadCell>Stock</Table.HeadCell>
</Table.Row>
</Table.Header>
<Table.Body>
{items.map((item) => (
<Table.Row key={item.id}>
<Table.Cell>{item.name}</Table.Cell>
<Table.Cell>{item.category}</Table.Cell>
<Table.Cell>{item.price}</Table.Cell>
<Table.Cell>{item.price}</Table.Cell>
</Table.Row>
))}
</Table.Body>
</Table.Root>
)
}
export const items = [
{
id: 1,
name: 'Organic Honey',
category: 'Grocery',
price: 12.99,
stock: 50,
},
{
id: 2,
name: 'Organic Honey',
category: 'Grocery',
price: 12.99,
stock: 40,
},
{
id: 3,
name: 'Organic Honey',
category: 'Grocery',
price: 12.99,
stock: 80,
},
]
Scroll Area
Wrap your Table.Root with Table.ScrollArea to enable horizontal scrolling for wide tables and mobile screens.
| Item | Category | Price | Stock | Extra Column |
|---|---|---|---|---|
| Organic Honey | Grocery | 12.99 | 12.99 | More info |
| Almond Milk | Grocery | 3.49 | 3.49 | More info |
| Yoga Mat | Fitness | 25 | 25 | More info |
| Wireless Mouse | Electronics | 29.99 | 29.99 | More info |
| Running Shoes | Footwear | 79.99 | 79.99 | More info |
import { Table } from '@fidely-ui/react/table'
export const TableScrollArea = () => {
return (
<Table.ScrollArea>
<Table.Root>
<Table.Header>
<Table.Row>
<Table.HeadCell>Item</Table.HeadCell>
<Table.HeadCell minWidth="200px">Category</Table.HeadCell>
<Table.HeadCell minWidth="200px">Price</Table.HeadCell>
<Table.HeadCell>Stock</Table.HeadCell>
<Table.HeadCell>Extra Column</Table.HeadCell>
</Table.Row>
</Table.Header>
<Table.Body>
{items.map((item) => (
<Table.Row key={item.id}>
<Table.Cell>{item.name}</Table.Cell>
<Table.Cell minWidth="200px">{item.category}</Table.Cell>
<Table.Cell>{item.price}</Table.Cell>
<Table.Cell minWidth="200px">{item.price}</Table.Cell>
<Table.Cell>More info</Table.Cell>
</Table.Row>
))}
</Table.Body>
</Table.Root>
</Table.ScrollArea>
)
}
export const items = [
{
id: 1,
name: 'Organic Honey',
category: 'Grocery',
price: 12.99,
stock: 50,
},
{ id: 2, name: 'Almond Milk', category: 'Grocery', price: 3.49, stock: 30 },
{ id: 3, name: 'Yoga Mat', category: 'Fitness', price: 25.0, stock: 90 },
{
id: 4,
name: 'Wireless Mouse',
category: 'Electronics',
price: 29.99,
stock: 20,
},
{
id: 5,
name: 'Running Shoes',
category: 'Footwear',
price: 79.99,
stock: 15,
},
]
Props
Root
| Prop | Type | Default | Description |
|---|---|---|---|
size | "sm" | "md" | "lg" | "md" | Controls the spacing of table cells. |
variant | "subtle" | "outline" | "striped" | "subtle" | Changes the visual style of the table. |
hoverable | boolean | false | Highlights a row when hovered. |
width | string | number | 100% | Sets the width of the table. |
children | ReactNode | — | The content of the table. |
HeadCell
| Prop | Type | Default | Description |
|---|---|---|---|
align | "left" | "center" | "right" | "left" | Aligns the header cell content. |
width | string | number | — | Sets a specific width for the header cell. |
children | ReactNode | — | The content of the header cell. |
Cell
| Prop | Type | Default | Description |
|---|---|---|---|
align | "left" | "center" | "right" | "left" | Aligns the cell content. |
colSpan | number | 1 | Merges multiple columns into a single cell. |
rowSpan | number | 1 | Merges multiple rows into a single cell. |
children | ReactNode | — | The content of the cell. |
Caption
| Prop | Type | Default | Description |
|---|---|---|---|
captionSide | "top" | "bottom" | "bottom" | Sets the position of the caption. |
children | ReactNode | — | The caption text for the table. |
ScrollArea
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | The table content wrapped with a scroll container. |
maxWidth | string | number | "100%" | Sets the maximum width of the scroll area. |
maxHeight | string | number | — | Sets the maximum height of the scroll area, enabling vertical scroll. |