Table-Wrapper – digital.sbb.ch

Questa pagina non è disponibile nella lingua desiderata. Lingue disponibili Deutsch

English

Table-Wrapper

Info

Was macht die Komponente?

Der Table-Wrapper ist ein Wrapper für eine Tabelle. Sein Ziel ist es, die nativen Tabellenfunktionen zu erweitern.

Wann soll die Komponente eingesetzt werden?

Beim Einsatz einer nativen HTML-Tabelle.
Wenn eine gestylte Tabelle benötigt wird.

Regeln

Bei jedem Einsatz einer nativen HTML-Tabelle. Insbesondere wenn zusätzliche Funktionen wie Scrolling benötigt werden.

Anatomie

Nummer	Typ	Optional
1	Table-Header	Ja
2	Row	Nein
3	Column	Nein

Demo

Beispiele

Default

Negative

HTML-Markup kopiert.

Implementation

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

Currently, it only handles overflow (vertical and horizontal).

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

Style

See the Table style section.

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>

Properties

Name	Attribute	Privacy	Type	Default	Description
`negative`	`negative`	public	`boolean`	`false`	Negative coloring variant flag.

Slots

Name	Description
	Use the unnamed slot to add the table.