Tables

import { TgTableDirective } from '@trademe/tangram';

Tables can be used to clearly display data.

Caption
Header	Header one	Header two
Content header	Column one	Column two
Footer header	Footer one	Footer two

Code

<table
    tgTable>
    <caption>
        Caption
    </caption>
    <thead>
        <tr>
            <th
                scope="col">
                Header
            </th>
            <th
                scope="col">
                Header one
            </th>
            <th
                scope="col">
                Header two
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th
                scope="row">
                Content header
            </th>
            <td
                data-th="Header one">
                Column one
            </td>
            <td
                data-th="Header two">
                Column two
            </td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th
                scope="row">
                Footer header
            </th>
            <td
                data-th="Header one">
                Footer one
            </td>
            <td
                data-th="Header two">
                Footer two
            </td>
        </tr>
    </tfoot>
</table>

Behaviour

Long strings of text such as email addresses will break onto two lines when they exceed the width of the table cell.

Accessibility

Add a caption to provide a description of the table content.
Apply the scope attribute to row and column headers to aid customers navigating content using a screen reader.
When compact is applied, change the scope values accordingly to allow for the stacked layout at sm breakpoint.

Tables

Example

Behaviour

Accessibility