Table

Basic styling

Use the .bf-table and .bfc-base-3-bg classes on a <table> to apply the bifrost default table styling

Clickable row

Style a <tr> as clickable with .bf-table-row-clickable, which applies a different background changes on hover, and an outline on keyboard focus.

Use tabindex="0" to make it focusable for keyboard users, and role="button" to make screen readers understand it's supposed to behave as a button.

The inline onclick is for demo purposes, preferably use an addEventListener in JS instead (or whatever convention your framework uses).

Borderless

Use .bf-table-noborder to remove the default left-hand border

Border radius

Use the --bf-table-radius CSS variable to customize the outer border radius. Can be combined with .bf-table-noborder and a custom border:

Sort order icon

You can indicate that the table can be sorted by a column with an appropriate icon, and style it with the .bf-table-header-cell-sort class.

See notes about accessibility in "Clickable row" section above.

Expandable row

• Make space for the angle column with an empty header cell <th></th>
• If the entire row should be clickable, use .bf-table-row-clickable bf-table-expand-nolimit on the <tr>
• Use .bf-table-expand-icon-cell class on the first cell on each row

Vertical headers

The .bf-table-vertical-header class applies a colored left border.

Then, use <th> (table header cell) inside <tbody>.

By default, .bf-table applies width: 100%, if you don't want that you can override it with width: auto.

Two-dimensional

You can have both a <thead> and use <th> inside <thead> in the same table: