Table-Wrapper

Info

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.

Table

Anatomy

Number	Type	Optional
1	Table-Header	Yes
2	Row	No
3	Column	No

Demo

Default

Negative

Copy HTML to clipboard.

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.