Components

Table

Tabular data with optional sorting and striping.

Usage

Basic

Name	Role
Ada Lovelace	Engineer
Grace Hopper	Admiral

HTML

<bs:bsui-table striped="true">
  <bs:bsui-table-header>
    <bs:bsui-table-header-cell columnId="name" label="Name" />
    <bs:bsui-table-header-cell columnId="role" label="Role" />
  </bs:bsui-table-header>
  <bs:bsui-table-body>
    <bs:bsui-table-row>
      <bs:bsui-table-cell>Ada Lovelace</bs:bsui-table-cell>
        <bs:bsui-table-cell>Engineer</bs:bsui-table-cell>
        </bs:bsui-table-row>
        <bs:bsui-table-row>
          <bs:bsui-table-cell>Grace Hopper</bs:bsui-table-cell>
            <bs:bsui-table-cell>Admiral</bs:bsui-table-cell>
            </bs:bsui-table-row>
          </bs:bsui-table-body>
        </bs:bsui-table>

Locked column

Project and builds reorder the rows, while the owner column stays put.

Project	Builds	Owner
Checkout	128	Ada Lovelace
Marketing site	42	Grace Hopper
Docs	9	Katherine Johnson

HTML

<bs:bsui-table>
  <bs:bsui-table-header>
    <bs:bsui-table-header-cell columnId="project" label="Project" />
    <bs:bsui-table-header-cell columnId="builds" label="Builds" />
    <bs:bsui-table-header-cell columnId="owner" label="Owner" sortable="false" />
  </bs:bsui-table-header>
  <bs:bsui-table-body>
    <bs:bsui-table-row>
      <bs:bsui-table-cell>Checkout</bs:bsui-table-cell>
        <bs:bsui-table-cell>128</bs:bsui-table-cell>
          <bs:bsui-table-cell>Ada Lovelace</bs:bsui-table-cell>
          </bs:bsui-table-row>
          <bs:bsui-table-row>
            <bs:bsui-table-cell>Marketing site</bs:bsui-table-cell>
              <bs:bsui-table-cell>42</bs:bsui-table-cell>
                <bs:bsui-table-cell>Grace Hopper</bs:bsui-table-cell>
                </bs:bsui-table-row>
                <bs:bsui-table-row>
                  <bs:bsui-table-cell>Docs</bs:bsui-table-cell>
                    <bs:bsui-table-cell>9</bs:bsui-table-cell>
                      <bs:bsui-table-cell>Katherine Johnson</bs:bsui-table-cell>
                      </bs:bsui-table-row>
                    </bs:bsui-table-body>
                  </bs:bsui-table>

Cells with blocks

A cell holds whatever you put in it, so status reads as a badge.

Release	Status
7.4.2	Live
7.5.0	Building
7.5.1	Failed

HTML

<bs:bsui-table>
  <bs:bsui-table-header>
    <bs:bsui-table-header-cell columnId="release" label="Release" />
    <bs:bsui-table-header-cell columnId="status" label="Status" />
  </bs:bsui-table-header>
  <bs:bsui-table-body>
    <bs:bsui-table-row>
      <bs:bsui-table-cell>7.4.2</bs:bsui-table-cell>
        <bs:bsui-table-cell>
          <bs:bsui-badge label="Live" variant="success" />
        </bs:bsui-table-cell>
      </bs:bsui-table-row>
      <bs:bsui-table-row>
        <bs:bsui-table-cell>7.5.0</bs:bsui-table-cell>
          <bs:bsui-table-cell>
            <bs:bsui-badge label="Building" variant="info" />
          </bs:bsui-table-cell>
        </bs:bsui-table-row>
        <bs:bsui-table-row>
          <bs:bsui-table-cell>7.5.1</bs:bsui-table-cell>
            <bs:bsui-table-cell>
              <bs:bsui-badge label="Failed" variant="destructive" />
            </bs:bsui-table-cell>
          </bs:bsui-table-row>
        </bs:bsui-table-body>
      </bs:bsui-table>

Inside a card

Sorting switched off for a summary that reads top to bottom.

Usage this month

Counted from the first of the month, across every site.

Metric	Used	Limit
Builds	128	500
Bandwidth	42 GB	100 GB

HTML

<bs:bsui-card>
  <bs:bsui-card-header>
    <bs:bsui-card-title label="Usage this month" />
    <bs:bsui-card-description label="Counted from the first of the month, across every site." />
  </bs:bsui-card-header>
  <bs:bsui-card-content>
    <bs:bsui-table sortable="false">
      <bs:bsui-table-header>
        <bs:bsui-table-header-cell columnId="metric" label="Metric" sortable="false" />
        <bs:bsui-table-header-cell columnId="used" label="Used" sortable="false" />
        <bs:bsui-table-header-cell columnId="limit" label="Limit" sortable="false" />
      </bs:bsui-table-header>
      <bs:bsui-table-body>
        <bs:bsui-table-row>
          <bs:bsui-table-cell>Builds</bs:bsui-table-cell>
            <bs:bsui-table-cell>128</bs:bsui-table-cell>
              <bs:bsui-table-cell>500</bs:bsui-table-cell>
              </bs:bsui-table-row>
              <bs:bsui-table-row>
                <bs:bsui-table-cell>Bandwidth</bs:bsui-table-cell>
                  <bs:bsui-table-cell>42 GB</bs:bsui-table-cell>
                    <bs:bsui-table-cell>100 GB</bs:bsui-table-cell>
                    </bs:bsui-table-row>
                  </bs:bsui-table-body>
                </bs:bsui-table>
              </bs:bsui-card-content>
              <bs:bsui-card-footer>
                <bs:bsui-button label="Upgrade plan" variant="outline" size="sm" />
              </bs:bsui-card-footer>
            </bs:bsui-card>

Anatomy

Table is composed of the blocks below. Each one is a separate block that only renders inside its parent.

bsui/table
bsui/table-body
bsui/table-row
bsui/table-cell
bsui/table-header
bsui/table-header-cell

Attributes

Attribute	Type	Default
`sortable`	`toggle`	`true`
`striped`	`toggle`	`false`

`bsui/table-body`

This block takes no attributes.

`bsui/table-row`

This block takes no attributes.

`bsui/table-cell`

This block takes no attributes.

`bsui/table-header`

This block takes no attributes.

`bsui/table-header-cell`

Attribute	Type	Default
`columnId`	`text`	—
`label`	`richtext`	—
`sortable`	`toggle`	`true`