Table

Static Table

A basic bifrost table.

Interactive

Sending onClick to Table.Row will display it as selectable.

Vertical line

A table cell can have an optional rightBorder.

<Table.Cell rightBorder>Ilya Rozanov</Table.Cell>

Borderless

The outer border will not be displayed for mobile screens (less than 600px) or can be permanently removed with the noBorder prop.

<Table noBorder>...</Table>

Radius

The radius prop can be used to customize the table's border radius. Overrides --bf-table-radius.

• "xs" = 4px (default)
• "s" = 8px
• "m" = 12px
• "l" = 16px
• "xl" = 24px
• <number> = custom pixel value

<Table radius={0}>

Can be combined with noBorder and a custom border:

<Table radius="m" noBorder className="bf-border">

Sorting

A header can indicate sort order. Note that to indicate that a column is sortable, sorting='none' has to be passed to Table.HeaderCell.

Expandable Rows

Rows can be made expandable by using the content prop of Table.Row. Expects an empty Table.HeaderCell as the first cell in the header.

By default, an expandable row will expand when the row is clicked. To change this behaviour, use the limitExpandClick prop. This is useful for when you have multiple clickable columns.

Vertical headers

A table can be turned vertical by adding the vertical prop to Table and using Table.HeaderCell in the body rows.

Also works with noBorder

<Table vertical>...</Table>

Two-dimensional

A table can become two-dimensional by combining a normal and vertical table. Note the first HeaderCell in the Header is empty.