Table

Used to display data in a tabular format.

Item	Category	Price	Stock
Organic Honey	Grocery	12.99	50
Yoga Mat	Fitness	29.99	20
Watercolor Set	Art Supplies	24.5	15
Running Shoes	Footwear	89.99	30

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.stock}</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.

Item	Category	Price	Stock
Organic Honey	Grocery	12.99	50
Yoga Mat	Fitness	29.99	20
Watercolor Set	Art Supplies	24.5	15
Running Shoes	Footwear	89.99	30

Item	Category	Price	Stock
Organic Honey	Grocery	12.99	50
Yoga Mat	Fitness	29.99	20
Watercolor Set	Art Supplies	24.5	15
Running Shoes	Footwear	89.99	30

Item	Category	Price	Stock
Organic Honey	Grocery	12.99	50
Yoga Mat	Fitness	29.99	20
Watercolor Set	Art Supplies	24.5	15
Running Shoes	Footwear	89.99	30

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.stock}</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	50
Yoga Mat	Fitness	29.99	20
Watercolor Set	Art Supplies	24.5	15
Running Shoes	Footwear	89.99	30

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.stock}</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	50
Yoga Mat	Fitness	29.99	20
Watercolor Set	Art Supplies	24.5	15
Running Shoes	Footwear	89.99	30

outline

Item	Category	Price	Stock
Organic Honey	Grocery	12.99	50
Yoga Mat	Fitness	29.99	20
Watercolor Set	Art Supplies	24.5	15
Running Shoes	Footwear	89.99	30

striped

Item	Category	Price	Stock
Organic Honey	Grocery	12.99	50
Yoga Mat	Fitness	29.99	20
Watercolor Set	Art Supplies	24.5	15
Running Shoes	Footwear	89.99	30

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.stock}</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 order and pricing information
Item	Category	Price	Stock
Organic Honey	Grocery	12.99	50
Organic Honey	Grocery	12.99	40
Organic Honey	Grocery	12.99	80

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.stock}</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	50	More info
Almond Milk	Grocery	3.49	30	More info
Yoga Mat	Fitness	25	90	More info
Wireless Mouse	Electronics	29.99	20	More info
Running Shoes	Footwear	79.99	15	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.stock}</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,
  },
]

Use the stickyHeader prop to make the table header sticky.

Item	Category	Price	Stock	Extra Column
Organic Honey	Grocery	12.99	50	More info
Almond Milk	Grocery	3.49	30	More info
Yoga Mat	Fitness	25	90	More info
Wireless Mouse	Electronics	29.99	20	More info
Running Shoes	Footwear	79.99	15	More info

import { Table } from '@fidely-ui/react/table'

export const TableStickyHeader = () => {
  return (
    <Table.ScrollArea borderWidth="1px" rounded="md" height="165px">
      <Table.Root stickyHeader>
        <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.stock}</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.