Table

The Table component is a controlled component that can be used to display tabular data.

import { Table } from '@cerberus/react'

Usage

The Table component is a controlled component that can be used to display tabular data. It can be used in a group with other tables to allow for multiple selections.

Basic table example
Product	Category	Price
Laptop	Electronics	999.99
Coffee Maker	Home Appliances	49.99
Desk Chair	Furniture	150
Smartphone	Electronics	799.99
Headphones	Accessories	199.99

import { Table, For } from '@cerberus/react'
import { Box } from 'styled-system/jsx'

function BasicTablePreview() {
  const items = [
    { id: 1, name: 'Laptop', category: 'Electronics', price: 999.99 },
    { id: 2, name: 'Coffee Maker', category: 'Home Appliances', price: 49.99 },
    { id: 3, name: 'Desk Chair', category: 'Furniture', price: 150.0 },
    { id: 4, name: 'Smartphone', category: 'Electronics', price: 799.99 },
    { id: 5, name: 'Headphones', category: 'Accessories', price: 199.99 },
  ]

  return (
    <Box w="1/2">
      <Table.Root caption="Basic table example">
        <Table.Header>
          <Table.Row>
            <Table.HeaderCol>Product</Table.HeaderCol>
            <Table.HeaderCol>Category</Table.HeaderCol>
            <Table.HeaderCol>Price</Table.HeaderCol>
          </Table.Row>
        </Table.Header>
        <Table.Body>
          <For each={items}>
            {(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.Row>
            )}
          </For>
        </Table.Body>
      </Table.Root>
    </Box>
  )
}

Sizes

The Table.Root component supports different sizes for its cells. You can set the size of the table using the size prop. The available sizes are sm, md, and lg. The default size is md.

Table with different cell sizes
Small
Small

Table with different cell sizes
Medium
Medium

Table with different cell sizes
Large
Large

import { Table, For } from '@cerberus/react'
import { HStack } from 'styled-system/jsx'

function SizesPreview() {
  return (
    <HStack w="1/2">
      <Table.Root caption="Table with different cell sizes" size="sm">
        <Table.Header>
          <Table.Row>
            <Table.HeaderCol>Small</Table.HeaderCol>
          </Table.Row>
        </Table.Header>
        <Table.Body>
          <Table.Row>
            <Table.Cell>Small</Table.Cell>
          </Table.Row>
        </Table.Body>
      </Table.Root>

      <Table.Root caption="Table with different cell sizes" size="md">
        <Table.Header>
          <Table.Row>
            <Table.HeaderCol>Medium</Table.HeaderCol>
          </Table.Row>
        </Table.Header>
        <Table.Body>
          <Table.Row>
            <Table.Cell>Medium</Table.Cell>
          </Table.Row>
        </Table.Body>
      </Table.Root>

      <Table.Root caption="Table with different cell sizes" size="lg">
        <Table.Header>
          <Table.Row>
            <Table.HeaderCol>Large</Table.HeaderCol>
          </Table.Row>
        </Table.Header>
        <Table.Body>
          <Table.Row>
            <Table.Cell>Large</Table.Cell>
          </Table.Row>
        </Table.Body>
      </Table.Root>
    </HStack>
  )
}

Decoration

The Table.Root component supports different decorations for its rows. You can set the decoration of the table using the decoration prop. The available decorations are default and zebra.

Table with default decorations
Default
one
two
three

Table with zebra decorations
Zebra
one
two
three

import { Table } from '@cerberus/react'
import { HStack } from 'styled-system/jsx'

function DecorationPreview() {
  return (
    <HStack w="1/2">
      <Table.Root caption="Table with default decorations">
        <Table.Header>
          <Table.Row>
            <Table.HeaderCol>Default</Table.HeaderCol>
          </Table.Row>
        </Table.Header>
        <Table.Body>
          <Table.Row>
            <Table.Cell>one</Table.Cell>
          </Table.Row>
          <Table.Row>
            <Table.Cell>two</Table.Cell>
          </Table.Row>
          <Table.Row>
            <Table.Cell>three</Table.Cell>
          </Table.Row>
        </Table.Body>
      </Table.Root>

      <Table.Root caption="Table with zebra decorations" decoration="zebra">
        <Table.Header>
          <Table.Row>
            <Table.HeaderCol>Zebra</Table.HeaderCol>
          </Table.Row>
        </Table.Header>
        <Table.Body>
          <Table.Row>
            <Table.Cell>one</Table.Cell>
          </Table.Row>
          <Table.Row>
            <Table.Cell>two</Table.Cell>
          </Table.Row>
          <Table.Row>
            <Table.Cell>three</Table.Cell>
          </Table.Row>
        </Table.Body>
      </Table.Root>
    </HStack>
  )
}

Sticky

The Table.Root component supports a sticky prop, which makes the table header sticky. This is useful for long tables where you want to keep the header visible while scrolling.

Better find a mop, it's getting sticky...
Product	Category	Price
Laptop	Electronics	999.99
Coffee Maker	Home Appliances	49.99
Desk Chair	Furniture	150
Smartphone	Electronics	799.99
Headphones	Accessories	199.99

import { Table, For } from '@cerberus/react'
import { Scrollable } from 'styled-system/jsx'
import { items } from './data'

function ItsGettingSticky() {
  return (
    <Scrollable
      border="1px solid"
      borderColor="page.border.200"
      h="10rem"
      rounded="md"
      w="1/2"
    >
      <Table.Root caption="Better find a mop, it's getting sticky..." sticky>
        <Table.Header>
          <Table.Row>
            <Table.HeaderCol>Product</Table.HeaderCol>
            <Table.HeaderCol>Category</Table.HeaderCol>
            <Table.HeaderCol>Price</Table.HeaderCol>
          </Table.Row>
        </Table.Header>
        <Table.Body>
          <For each={items}>
            {(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.Row>
            )}
          </For>
        </Table.Body>
      </Table.Root>
    </Scrollable>
  )
}

Clickable

The Table.HeaderCol component supports a Table.Trigger, which renders a button element. This allows you to create clickable headers for sorting or other actions.

Clickable table
Name
Jane Doe	25
John Doe	30

function ClickablePreview() {
  const [order, setOrder] = useState<'asc' | 'desc'>('asc')
  const data = useMemo(
    () => [
      {
        id: '1',
        name: 'John Doe',
        age: 30,
      },
      {
        id: '2',
        name: 'Jane Doe',
        age: 25,
      },
    ],
    [],
  )
  const sortedData = useMemo(() => {
    return order === 'asc'
      ? data.sort((a, b) => a.age - b.age)
      : data.sort((a, b) => b.age - a.age)
  }, [data, order])

  const handleClick = useCallback(() => {
    setOrder((prev) => (prev === 'asc' ? 'desc' : 'asc'))
  }, [])

  return (
    <Box w="1/2">
      <Table.Root caption="Clickable table">
        <Table.Header>
          <Table.Row>
            <Table.HeaderCol>Name</Table.HeaderCol>
            <Table.HeaderCol>
              <Table.Trigger onClick={handleClick}>
                Age
                <Show when={order === 'asc'} fallback={<SortDescending />}>
                  <SortAscending />
                </Show>
              </Table.Trigger>
            </Table.HeaderCol>
          </Table.Row>
        </Table.Header>
        <Table.Body>
          {sortedData.map((person) => (
            <Table.Row key={person.id}>
              <Table.Cell>{person.name}</Table.Cell>
              <Table.Cell>{person.age}</Table.Cell>
            </Table.Row>
          ))}
        </Table.Body>
      </Table.Root>
    </Box>
  )
}

Primitives

You can utilize the primitive components or the css prop to customize the table.

Component	Description
TableRoot	The table container component.
TableEl	The table component.
Caption	The caption component.
Thead	The table header component.
Th	The table header cell component.
Tbody	The table body component.
Tr	The table row component.
Td	The table cell component.
Tfoot	The table footer component.
TableTrigger	The table trigger component.

Customized table
Cerberus Family	Alias
Cerberus	The Three-Headed Dog
Hades	God of the Underworld
Persephone	Queen of the Underworld
Charon	The Ferryman
Cerberus	The Guardian of the Underworld
Thanatos	God of Death

import { Table, For } from '@cerberus/react'

function CustomizedPreview() {
  const cols = [
    { id: '1', name: 'Cerberus Family' },
    { id: '2', name: 'Alias' },
  ]
  const data = [
    { id: '1', name: 'Cerberus', alias: 'The Three-Headed Dog' },
    { id: '2', name: 'Hades', alias: 'God of the Underworld' },
    { id: '3', name: 'Persephone', alias: 'Queen of the Underworld' },
    { id: '4', name: 'Charon', alias: 'The Ferryman' },
    { id: '5', name: 'Cerberus', alias: 'The Guardian of the Underworld' },
    { id: '6', name: 'Thanatos', alias: 'God of Death' },
  ]

  return (
    <Table.Root
      caption="Customized table"
      css={{
        border: '3px solid',
        borderColor: 'danger.border.initial',
        transform: 'skewX(-10deg)',
      }}
    >
      <Table.Header>
        <Table.Row>
          <For each={cols}>
            {(col) => (
              <Table.HeaderCol
                key={col.id}
                css={{
                  bgColor: 'black',
                  color: 'white',
                  width: '20rem',
                }}
              >
                {col.name}
              </Table.HeaderCol>
            )}
          </For>
        </Table.Row>
      </Table.Header>
      <Table.Body>
        <For each={data}>
          {(item) => (
            <Table.Row key={item.id}>
              <Table.Cell
                css={{
                  bgColor: 'gray.200',
                  color: 'black',
                  fontWeight: 'bold',
                }}
              >
                {item.name}
              </Table.Cell>
              <Table.Cell
                css={{
                  bgColor: 'gray.100',
                  color: 'black',
                }}
              >
                {item.alias}
              </Table.Cell>
            </Table.Row>
          )}
        </For>
      </Table.Body>
    </Table.Root>
  )
}

API

Props

The Table component is an abstraction of the primitives and accepts the following props:

Name	Default	Description
caption		The accessible caption of the Table.
size	`md`	This cell size of the Table.
decoration	`default`	The decoration of the Table.
sticky	`false`	If true, the table header will be sticky.

Table component parts

The Table API is an Object containing the full family of abstracted components.

Name	Description
Root	An abstraction of the `TableRoot`, `TableEl`, and `Caption`.
Header	The table header component.
HeaderCol	The table header cell component.
Body	The table body component.
Row	The table row component.
Cell	The table cell component.
Footer	The table footer component.
Trigger	The optional table header col trigger component.

Parts

The TableParts API is an Object containing the full family of components.

Name	Description
Root	The `TableRoot` component which is the container of the table.
Table	The `TableEl` component which is the table element.
Caption	The `Caption` component which is the caption of the table.
Header	The `Thead` component which is the table header component.
HeaderCol	The `Th` component which is the table header cell component.
Body	The `Tbody` component which is the table body component.
Row	The `Tr` component which is the table row component.
Cell	The `Td` component which is the table cell component.
Footer	The `Tfoot` component which is the table footer component.
Trigger	The `TableTrigger` component which is the optional table header col trigger component.

On this page

Edit this page on Github