Table

Basic styling

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

<table class="bf-table bfc-base-3-bg">
  <thead>
    <tr>
      <th>Name</th>
      <th>Team</th>
      <th>Position</th>
      <th>Country</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ilya Rozanov</td>
      <td>Boston Bears</td>
      <td>Centre</td>
      <td>Russia</td>
    </tr>
    <tr>
      <td>Shane Hollander</td>
      <td>Montreal Voyageurs</td>
      <td>Centre</td>
      <td>Canada</td>
    </tr>
    <tr>
      <td>Scott Hunter</td>
      <td>New York Admirals</td>
      <td>Centre</td>
      <td>USA</td>
    </tr>
  </tbody>
</table>

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).

<table class="bf-table bfc-base-3-bg">
  <thead>
    <tr>
      <th>Name</th>
      <th>Team</th>
      <th>Position</th>
      <th>Country</th>
    </tr>
  </thead>
  <tbody>
    <tr
      role="button"
      tabindex="0"
      class="bf-table-row-clickable"
      onclick="alert('Clicked row 1')"
    >
      <td>Ilya Rozanov</td>
      <td>Boston Bears</td>
      <td>Centre</td>
      <td>Russia</td>
    </tr>
  </tbody>
</table>

Borderless

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

<table class="bf-table bfc-base-3-bg bf-table-noborder">
  <thead>
    <tr>
      <th>Name</th>
      <th>Team</th>
      <th>Position</th>
      <th>Country</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ilya Rozanov</td>
      <td>Boston Bears</td>
      <td>Centre</td>
      <td>Russia</td>
    </tr>
    <tr>
      <td>Shane Hollander</td>
      <td>Montreal Voyageurs</td>
      <td>Centre</td>
      <td>Canada</td>
    </tr>
  </tbody>
</table>

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.

<table class="bf-table bfc-base-3-bg">
  <thead>
    <tr>
      <th class="bf-table-cell-clickable">
        Sorted ascending
        <i class="fa-solid fa-sort-up bf-table-header-cell-sort"></i>
      </th>
      <th class="bf-table-cell-clickable">
        Sorted descending
        <i class="fa-solid fa-sort-down bf-table-header-cell-sort"></i>
      </th>
      <th class="bf-table-cell-clickable">
        Inactive sort
        <i
          class="fa-solid fa-sort bf-table-header-cell-sort bf-table-header-cell-sort-none"
        ></i>
      </th>
    </tr>
  </thead>
</table>

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

<table class="bf-table bfc-base-3-bg">
  <thead>
    <tr>
      <th></th>
      <th>Name</th>
      <th>Team</th>
      <th>Position</th>
      <th>Country</th>
    </tr>
  </thead>
  <tbody>
    <tr class="bf-table-row-clickable bf-table-expand-nolimit">
      <td class="bf-table-expand-icon-cell">
        <div class="bf-table-expand-icon-wrapper">
          <i
            class="fa-solid fa-angle-right bf-table-expand-icon bf-table-expand-icon-open"
          ></i>
        </div>
      </td>
      <td>Ilya Rozanov</td>
      <td>Boston Bears</td>
      <td>Centre</td>
      <td>Russia</td>
    </tr>
    <tr>
      <td class="bf-table-expandable-cell" colspan="5">
        <div class="bf-expand bf-expand-expanded">
          <div>
            <div class="bf-table-expanded-content bfc-base-2-bg bf-padding">
              Expanded content
            </div>
          </div>
        </div>
      </td>
    </tr>
    <tr
      class="bf-table-row-clickable bf-table-expand-nolimit bf-table-expand-closed"
    >
      <td class="bf-table-expand-icon-cell">
        <div class="bf-table-expand-icon-wrapper">
          <i class="fa-solid fa-angle-right bf-table-expand-icon"></i>
        </div>
      </td>
      <td>Shane Hollander</td>
      <td>Montreal Voyageurs</td>
      <td>Centre</td>
      <td>Canada</td>
    </tr>
    <!-- for collapsed content, remove bf-expand-expanded and add bf-expand-closed -->
    <tr>
      <td class="bf-table-expandable-cell" colspan="4">
        <div class="bf-expand bf-expand-closed">
          <div>
            <div class="bf-table-expanded-content bfc-base-2-bg bf-padding">
              Expanded content
            </div>
          </div>
        </div>
      </td>
    </tr>
  </tbody>
</table>

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.

<table
  class="bf-table bfc-base-3-bg bf-table-vertical-header"
  style="width: auto"
>
  <tbody>
    <tr>
      <th>Name</th>
      <td>Ilya Rozanov</td>
      <td>Shane Hollander</td>
    </tr>
    <tr>
      <th>Team</th>
      <td>Boston Bears</td>
      <td>Montreal Voyageurs</td>
    </tr>
    <tr>
      <th>Position</th>
      <td>Centre</td>
      <td>Centre</td>
    </tr>
    <tr>
      <th>Country</th>
      <td>Russia</td>
      <td>Canada</td>
    </tr>
  </tbody>
</table>

Two-dimensional

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

<table class="bf-table bfc-base-3-bg bf-table-vertical-header two-demo">
  <thead>
    <tr>
      <th></th>
      <th>Free</th>
      <th>Professional</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Open documents</th>
      <td><i class="fa-solid fa-check"></i></td>
      <td><i class="fa-solid fa-check"></i></td>
    </tr>
    <tr>
      <th>Edit documents</th>
      <td></td>
      <td><i class="fa-solid fa-check"></i></td>
    </tr>
  </tbody>
</table>
<style>
  .two-demo {
    width: auto;
    text-align: center;
  }
</style>