Table

Template

Displays information in an organized Table with rows representing both clickable and static information. A Header Row can be used to clarify the information in the Table. Default rows use a zebra pattern of alternating fill colors to help users read the table.

Anatomy

1. Header Row - optional row explaining each column. Header Cells can contain optional filter buttons.
2. Default Row - these are the rows containing any type of Cell. Default Rows have alternating fill colors to create a zebra pattern.
3. Cell - local component containing subcomponents like Icon Buttons, Links, Lozenges and others.
4. Boarder - the container of the Table has a 1px stroke boarder coloured Grey/90.
5. Filter Group - sorts the table.

Variants

Cell Formatting

• Left
• Right
• Centered
• Stacked
• Spaced

Development

Table implementation is intentionally class-based (no Vue component API).

Modifiers

• Utility styles (src/scss/functional/_table.scss): reusable styles for the table component.

Modifier	Used on HTML	Description	Contents example
bds-table	<table>	Base class. Applies layout, typography, borders, and striping.	All Table
bds-table__cell--right	<td> , <th>	Right-aligns cell content horizontally.	All content to the right
bds-table__cell--center	<td> , <th>	Centers cell content horizontally.	All content centered
bds-table__cell--spaced	<td> , <th>	Keeps primary content on the left and pins the last child to the right (e.g. value + action button). Allows text to wrap.	Label + action
bds-table__spaced-between	Inner wrapper inside <td> / <th>	Flex row that distributes direct children with space-between. Use when you need multiple items spread evenly across the cell.	Multiple values in one row
bds-table__cell--stacked	<td>	Stacks child elements vertically with spacing. Allows text to wrap (white-space: normal).	Components that need to be aligned vertically like Lozenge, Chips etc.

The table style primitives live in src/scss/functional/_table.scss and are consumed through utility classes. Design tokens are defined in src/scss-tokens/_table.tokens.scss.

Usage

Apply class="bds-table" on a native <table> and use cell modifier classes where needed.

The modifier classes need to be part of a table that has the bds-table class.

<table class="bds-table">
  <thead>
    <tr>
      <th class="bds-table__cell--spaced">
        <span>Text</span>
        <button type="button">Filter</button>
      </th>
    </tr>
  </thead>
</table>

<!-- Inner wrapper: evenly distribute multiple children -->
<td>
  <div class="bds-table__spaced-between">
    <span>Typ: …</span>
    <span>Kraglänge: …</span>
    <span>Variante: …</span>
  </div>
</td>

Example

Text Option 1 is a very long option, so we can check whether truncation works with itN/mm<sup>2</sup>Option 7Option 2Option 5Option 3Option 6	Number	Edit	Comment	Lozenge	Radio
Name		58/786	872		Lozenge Lozenge
Position		753	753		Lozenge Lozenge
Export		7598,36	6535		Lozenge Lozenge
Bracket		2 mm	0,25		Lozenge Lozenge

<table class="bds-table">
  <thead>
    <tr>
      <th class="bds-table__cell--spaced">
        <span>Text</span>
        <FilterGroup
          :segments="segments"
          v-model="selectedFilters"
          :alignment="'left'"
        />
      </th>
      <th class="bds-table__cell--right">
        Number
      </th>
      <th class="bds-table__cell--right"> Edit </th>
      <th>Comment</th>
      <th class="bds-table__cell--spaced">
        <span>Lozenge</span>
        <IconButton
          icon="filter"
          type="secondary"
          size="tiny"
        />
      </th>
      <th class="bds-table__cell--center">
        Radio
      </th>
    </tr>
  </thead>

  <tbody>
    <tr
      v-for="row in rows"
      :key="row.id"
    >
      <td>{{ row.label }}</td>
      <td>
        <Lozenge
            category="status"
            :statusState="'warning'"
          />
        <Link> link text </Link>
      </td>
      <td class="bds-table__cell--right">
        {{ row.number }}
      </td>
      <td class="bds-table__cell--spaced">
        <span>{{ row.edit }}</span>
        <IconButton
          icon="edit"
          type="secondary"
          size="tiny"
          tooltip="Edit"
        />
      </td>
      <td>
        <Link
          type="tertiary"
          to=""
        >{{ row.comments }} Kommentar(e)</Link>
      </td>
      <td class="bds-table__cell--stacked">
        <Lozenge
          category="brand"
          text="Lozenge"
        />
        <Lozenge
          category="brand"
          text="Lozenge"
        />
      </td>
      <td class="bds-table__cell--center">
        <RadioSelect
          v-model="selectedRow"
          :options="[{ value: row.id }]"
          :clickable-label="false"
          alignment="horizontal"
        />
      </td>
    </tr>
  </tbody>
</table>