Preview.

What does the component do?

The Table-Wrapper is a wrapper for a table. Its aim is to extend the native table functions.

When should the component be used?

• When using a native HTML table.
• If a styled table is required.

Rules.

• Whenever a native HTML table is used. Especially if additional functions such as scrolling are required.

For working with tables, the native table and its related elements should be used.
With the sbb-table CSS class, styling the native element is possible.

The <sbb-table-wrapper> is a wrapper for a table. Its goal is to enhance/automate the native table capabilities.

<sbb-table-wrapper>
  <table class="sbb-table">
    <thead>
      ...
    </thead>
    <tbody>
      ...
    </tbody>
  </table>
</sbb-table-wrapper>

Style.

The sbb-table class is designed to handle the styling of common table use cases, ensuring a consistent and visually appealing presentation of tabular data.
This guide will walk you through the various customization options and advanced scenarios for styling tables within our design system.

Basic usage.

<table class="sbb-table">
  <thead>
    <th>...</th>
    ...
  </thead>
  <tbody>
    <tr>
      <td>...</td>
      ...
    </tr>
    ...
  </tbody>
  <caption>
    ...
  </caption>
</table>

Caption outside the table.

When using <sbb-table-wrapper>, the native <caption> element is placed inside the scrollable area and scrolls with the table content.
If the caption should appear below the scrollable content (outside <sbb-table-wrapper>), place an element with the sbb-table-caption class after the wrapper.
It receives the same typography and spacing as a native caption:

<sbb-table-wrapper>
  <table class="sbb-table">
    ...
  </table>
</sbb-table-wrapper>
<p class="sbb-table-caption">This caption is shown below the scrollable table content.</p>

Striped table.

Add the sbb-table--striped class to add alternating row stripes to enhance readability.

<table class="sbb-table sbb-table--striped">
  ...
</table

Size.

The available sizes are xs, s and m. Use the respective sbb-table-*size* classes to specify it:
Without specifying a size, the table will adapt to the default size of the theme (s for lean, m for standard).

<table class="sbb-table-s"></table>
<table class="sbb-table-m"></table>
<table class="sbb-table-xs"></table>

Negative variant.

For a negative color scheme, apply the sbb-table--negative class:

<table class="sbb-table sbb-table--negative">
  ...
</table>

Grouping columns.

To visually group two adjacent columns, apply the sbb-table-group-with-next class to the th or td that precedes the next column in the group.
This removes the border between the two columns, making them appear as one logical unit:

<table class="sbb-table">
  <thead>
    <tr>
      <th class="sbb-table-group-with-next">First Name</th>
      <th>Last Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="sbb-table-group-with-next">Chris</td>
      <td>Evans</td>
      <td>22</td>
    </tr>
  </tbody>
</table>

Note: The Angular wrapper also has the groupWithNext property on a cell.

Header subtitle.

To display a subtitle below a column header, add an element with the sbb-table-header-subtitle
class inside a th element:

<table class="sbb-table">
  <thead>
    <tr>
      <th>
        Person
        <div class="sbb-table-header-subtitle">Subtitle</div>
      </th>
      <th>
        Most interest in
        <div class="sbb-table-header-subtitle">Subtitle</div>
      </th>
      <th>
        Age
        <div class="sbb-table-header-subtitle">Subtitle</div>
      </th>
    </tr>
  </thead>
  ...
</table>

Sorting.

A sortable column header is composed of a th carrying the sort state,
and a focusable inner control used to lay out the label and the sort arrow icon.
Consumers must handle click and keypress events on the control.

<th class="sbb-sort-header" aria-sort="ascending">
  <div tabindex="0" role="button" class="sbb-sort-header-container sbb-sort-header-sorted">
    <span class="sbb-sort-header-content">Name</span>
    <span class="sbb-sort-header-arrow active">
      <!-- svg arrow icon, e.g. with an `sbb-sort-indicator active-asc` element inside -->
    </span>
  </div>
</th>

Sorting uses the following CSS classes:

Consumers must update the state classes (including on hover or focus); CSS does not apply hint automatically.
The arrow wrapper controls opacity and movement, while the indicator controls the icon's direction independently:

The *-to-* classes above are the supported transitions; those between hint and asc/desc also use keyframe animations.
Do not combine active with asc or desc on the arrow wrapper: asc/desc make it hidden.
Apply the direction class to sbb-sort-indicator instead.

Row hover.

To highlight a row when the user hovers over it, apply sbb-table--hover to the <table> element.
This enables the hover effect for every row in <tbody>.

<table class="sbb-table sbb-table--hover">
  ...
</table>

Row selection.

To mark a row as selected, add the sbb-table--selected class to the <tr> element.
The class can be set dynamically, e.g. when a user interacts with a checkbox in the row.

<table class="sbb-table">
  <tbody>
    <tr class="sbb-table--selected">
      <td>Selected row</td>
    </tr>
  </tbody>
</table>

A common pattern is to place a checkbox in the first column and toggle the class on change.

Text alignment.

By default, table cells are left-aligned.
Use the following classes to change the text alignment of individual cells or columns.
The classes can be applied on the table or on individual th or td elements,
depending on the desired scope of the alignment.

Iron theme.

For the iron theme, apply the sbb-table--theme-iron class.
This scheme changes the text color of the cells to sbb-color-iron.

<table class="sbb-table sbb-table--theme-iron">
  ...
</table>

CSS classes.

Sticky Table.

The <sbb-table-wrapper> provide classes and some utilities to implement a table with sticky header and columns.
It is the consumer responsibility to set the correct style/classes to the template.

Note: The Angular wrapper takes care of most of the sticky table setup. Please refer to the Lyne Angular examples.

Negative Table.

The component has a negative variant which can be set with the self-named property.
Note: Due to technical limitations, consumer has to use set the negative property and the sbb-table--negative class.

<sbb-table-wrapper negative>
  <table class="sbb-table sbb-table--negative">
    ...
  </table>
</sbb-table-wrapper>

Accessibility.

Always provide an accessible label for your tables via aria-label or aria-labelledby on the table element.

<sbb-table-wrapper>
  <table class="sbb-table" aria-label="Table caption">
    ...
  </table>
</sbb-table-wrapper>

Keyboard navigation.

Please verify that the focus outline for keyboard navigation has the correct color.
E.g. when the table-wrapper is placed inside a dark container, the focus outline color should be set to dark
(--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)).

<div style="background: black; --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)">
  <sbb-table-wrapper>
    <table>
      ...
    </table>
  </sbb-table-wrapper>
</div>

Angular.

This component is also available for Angular in the package @sbb-esta/lyne-angular.

class: SbbTableWrapperElement, sbb-table-wrapper.

Properties.

Slots.