No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

The component failed to render properly, likely due to a configuration issue in Storybook. Here are some common causes and how you can address them:

  1. Missing Context/Providers: You can use decorators to supply specific contexts or providers, which are sometimes necessary for components to render correctly. For detailed instructions on using decorators, please visit the Decorators documentation.
  2. Misconfigured Webpack or Vite: Verify that Storybook picks up all necessary settings for loaders, plugins, and other relevant parameters. You can find step-by-step guides for configuring Webpack or Vite with Storybook.
  3. Missing Environment Variables: Your Storybook may require specific environment variables to function as intended. You can set up custom environment variables as outlined in the Environment Variables documentation.

This is a pre-release version and is not production ready. For new and ongoing projects, please refer to the latest Design System version.

Table

Figma Design

Customize the native <table> element with CSS that changes the element’s initial appearance.

List of users
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
4 Someone else
entirely 		@twitter 
<table class="table align-top">
  <caption class="">
    List of users
  </caption>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
    <tr>
      <th scope="row">4</th>
      <td>Someone</td>
      <td>
        else
        <br />
        entirely
      </td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
NameDescriptionDefaultControl
General
Variants
Stylistic table variants.
array
-
Border style
Border style
string
-
Alignment
Vertical alignment options for cell content. Alignment classes can also be set for individual rows or cells.
string
-
Caption
Caption
A description of the table, very useful for screen reader users.
string
-
Caption Placement
Choose where to place the description of the table. If a visual description is not necessary, it can also be hidden visually and still be of value for screen reader users.
string
-

Make sure the @swisspost/design-system-styles package is already present in your project or follow the installation guidelines.

To import all Design System styles:

@use '@swisspost/design-system-styles/post-compact.scss';

To import only the styles required for this component:

@use '@swisspost/design-system-styles/basics.scss';
@use '@swisspost/design-system-styles/components/table.scss';

When buttons are placed in a table, be sure to use alignment: middle, respectively <tbody class="align-middle"> to nicely align the content and the buttons.

List of users
# First Last Handle
1 Mark Otto
2 Jacob Thornton
3 Larry the Bird

If an interactive data table is needed, we recommend the table component from the PrimeNG UI Suite. To make it look like a Swiss Post component, please use our @swisspost/design-system-styles-primeng package.

However, this component can only be used in Angular projects. See the PrimeNG Table documentation for full usage instructions.

The LTS versions would need a license, so it's recommended not to use LTS. https://primeng.org/table