DocsBlog

  • 1.6.0

  • Day

    Night

    Preview

    Switch mode

  • Cerberus

    Acheron

    Elysium

    Oceanus

Get Started
Components
Data Grid
Signals
Styling
Theming

Concepts

OverviewCompositionCerberus ContextTesting

Layout

Aspect RatioBleedBoxCenterContainerDividerFlexFloatGridGroupLink OverlayScrollableStackWrap

Components

AccordionAdmonitionAvatarButtonCarouselCheckboxClipboardCollapsibleComboboxConfirm ModalCTAModalDate PickerDialogFieldFieldsetFile UploaderIcon ButtonInputLoading StatesMarqueeNotificationsNumber InputPaginationPin InputPopoverProgressPrompt ModalRadioRatingSelectSplit ButtonSwitchTableTabsTagTextTextareaToggleTooltip

Utilities

Client OnlyDownload TriggerEnvironmentFeature FlagsFocus TrapForFormat ByteFormat NumberFormat Relative TimeFrameHighlightJSON Tree ViewLocaleLocal StoragePortalPresenceShowsplitPropsTheme

On this page

Loading...

Loading...

Loading...

Loading...

Table

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

  • npm
  • source
  • recipe
    • 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.

    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.

    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.

    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.

    Note

    The sticky prop removes the border from the table so you can provide it on the scrollable container for a better design experience.

    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.

    Primitives

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

    ComponentDescription
    TableRootThe table container component.
    TableElThe table component.

    API

    Props

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

    NameDefaultDescription
    captionThe accessible caption of the Table.

    Table component parts

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

    Note

    Although the Table API is similar to the TableParts, it returns abstractions of the primitives. The TableParts return the primitives only.

    NameDescription
    RootAn abstraction of the TableRoot, TableEl, and Caption.
    HeaderThe table header component.

    Parts

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

    Note

    It is best to only use the TableParts if you are building a custom solution. Importing Object based components will ship every property it includes into your bundle, regardless if you use it or not.

    NameDescription
    RootThe TableRoot component which is the container of the table.
    TableThe component which is the table element.
    CaptionThe caption component.
    TheadThe table header component.
    ThThe table header cell component.
    TbodyThe table body component.
    TrThe table row component.
    TdThe table cell component.
    TfootThe table footer component.
    TableTriggerThe table trigger component.
    sizemdThis cell size of the Table.
    decorationdefaultThe decoration of the Table.
    stickyfalseIf true, the table header will be sticky.
    HeaderColThe table header cell component.
    BodyThe table body component.
    RowThe table row component.
    CellThe table cell component.
    FooterThe table footer component.
    TriggerThe optional table header col trigger component.
    TableEl
    CaptionThe Caption component which is the caption of the table.
    HeaderThe Thead component which is the table header component.
    HeaderColThe Th component which is the table header cell component.
    BodyThe Tbody component which is the table body component.
    RowThe Tr component which is the table row component.
    CellThe Td component which is the table cell component.
    FooterThe Tfoot component which is the table footer component.
    TriggerThe TableTrigger component which is the optional table header col trigger component.
    Basic table example
    ProductCategoryPrice
    LaptopElectronics999.99
    Coffee MakerHome Appliances49.99
    Desk ChairFurniture150
    SmartphoneElectronics799.99
    HeadphonesAccessories199.99
    Copy
    Table with different cell sizes
    Small
    Small
    Table with different cell sizes
    Medium
    Medium
    Table with different cell sizes
    Large
    Large
    Copy
    Table with default decorations
    Default
    one
    two
    three
    Table with zebra decorations
    Zebra
    one
    two
    three
    Copy
    Better find a mop, it's getting sticky...
    ProductCategoryPrice
    LaptopElectronics999.99
    Coffee MakerHome Appliances49.99
    Desk ChairFurniture150
    SmartphoneElectronics799.99
    HeadphonesAccessories199.99
    Copy
    Clickable table
    Name
    Jane Doe25
    John Doe30
    Copy
    Customized table
    Cerberus FamilyAlias
    CerberusThe Three-Headed Dog
    HadesGod of the Underworld
    PersephoneQueen of the Underworld
    CharonThe Ferryman
    CerberusThe Guardian of the Underworld
    ThanatosGod of Death
    Copy
    Basic demo
    import { Table, For } from '@cerberus/react'
    import { Box } from
    Sizes demo
    import { Table, For } from '@cerberus/react'
    import { HStack } from
    Decoration demo
    import { Table } from '@cerberus/react'
    import { HStack } from 'styled-system/jsx
    Sticky demo
    import { Table, For } from '@cerberus/react'
    import { Scrollable } from
    Clickable demo
    function ClickablePreview() {
      const [order, setOrder] = useState<'asc' |
    Custom example
    import { Table, For } from '@cerberus/react'
    

    function CustomizedPreview() {
      const
    '
    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>
    )
    }
    '
    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>
    )
    }
    '
    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>
    )
    }
    '
    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>
    )
    }
    '
    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>
    )
    }
    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>
    )
    }
    Table

    On this page

    • Usage
    • Sizes
    • Decoration
    • Sticky
    • Clickable
    • Primitives
    • API
    • Props
    • Parts
    • Edit this page on Github