Table

Import

import { Table } from '@cerberus/react'

Usage

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

Note

Want a high-end feature packed solution? Check out the Data Grid, the Cerberus superpowered table component.

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.

Customizing

To customize the table use style props or the Primtives

Primitives

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

Parts

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

API

Props

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