Overview
The table component is used to display tabular data responsively. It enhances tables created through rich text editors, such as TinyMCE, and provides additional functionality for structure, styling, and accessibility.
Basic usage
Importing the component
To use the table component, import it into your project along with the required styles.
import { DsTable } from "@coloplast/design-system";
import "@coloplast/design-system/dist/components/table/ds-table.css";
Example usage
Pass an HTML table as slot content to the table component in your Vue template.
<DsTable caption="Product comparison"> <!-- Table markup here --> </DsTable>
Static example
If you have control over the markup, you can create a static table. Here is an example with modifiers for various table behaviours:
<!-- Remember to import the styles -->
<!--
Modifiers
---------
ds-table--auto: auto width
ds-table--full: full width
ds-table--hide-caption: hide the caption from screens (keep available for assistive tech)
ds-table--row-headers: each row has a header (in addition to the column headers)
-->
<div class="ds-table ds-table--auto ds-table--row-headers">
<table class="ds-table__table">
<caption class="ds-table__caption ds-text-heading-xl">Product specifications</caption>
<thead>
<tr>
<th scope="col" class="ds-text-body-md ds-text--medium">Products</th>
<th scope="col" class="ds-text-body-md ds-text--medium">Type</th>
<th scope="col" class="ds-text-body-md ds-text--medium">SKU</th>
<th scope="col" class="ds-text-body-md ds-text--medium">In-stock</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" data-col-header="Products" class="ds-text-body-md ds-text--medium">Product A</th>
<td data-col-header="Type" class="ds-text-body-md ds-text--regular">Specific</td>
<td data-col-header="SKU" class="ds-text-body-md ds-text--regular">30401</td>
<td data-col-header="In-stock" class="ds-text-body-md ds-text--regular">Yes</td>
</tr>
<tr>
<th scope="row" data-col-header="Products" class="ds-text-body-md ds-text--medium">Product B</th>
<td data-col-header="Type" class="ds-text-body-md ds-text--regular">Generic</td>
<td data-col-header="SKU" class="ds-text-body-md ds-text--regular">60201</td>
<td data-col-header="In-stock" class="ds-text-body-md ds-text--regular">Yes</td>
</tr>
<tr>
<th scope="row" data-col-header="Products" class="ds-text-body-md ds-text--medium">Product C</th>
<td data-col-header="Type" class="ds-text-body-md ds-text--regular">Unique</td>
<td data-col-header="SKU" class="ds-text-body-md ds-text--regular">20101</td>
<td data-col-header="In-stock" class="ds-text-body-md ds-text--regular">No</td>
</tr>
</tbody>
</table>
</div>
Modifiers
- ds-table--auto: Auto width
- ds-table--full: Full width
- ds-table--hide-caption: Hides caption from screens (visible to assistive tech)
- ds-table--row-headers: Each row has a header in addition to the column headers
Component playground and props
Experiment with the table component's props in the interactive Storybook playground. This allows you to adjust properties and view the effect of various configurations on the table's behaviour and styling.
Markup / content guidance
The component is built to handle the most common markup issues, but it's not an exhaustive cleanup process.
It's still recommended that table markup is cleaned up at an earlier stage, e.g.:
- By editors in the CMS
- By the back end before rendering the markup inside the component
Cleanup operations handled by the component
The component performs the following tasks to the base markup:
- Cleanup - removes deprecated attributes and inline styles
- Restructure - adds structure to the table if it's missing
- Adds scope - if column and row scope is missing from table headers, it adds the scope attributes
- Adds classes - for styling and responsive behaviour
Supported heading structures
- Column headers: where the top row of the table consists of table headers
- Column and row headers: where the first row and first column consists of table headers
Accessibility
The table component supports captions, which can be set via a prop or directly in the table markup. Captions should always be included for assistive technologies. If needed, you can hide the caption visually while retaining it for screen readers by using the ds-table--hide-caption class.
The component ensures proper use of <th> elements and applies scope attributes to column or row headers for enhanced accessibility.
SEO
The table’s HTML is rendered through a slot, allowing for server-side rendering. This ensures that the table content is SEO-friendly and accessible to crawlers.
Internationalisation
The table component supports long text and right-to-left (RTL) languages, making it versatile for multilingual environments.