Table

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

This is a new component, it has not been finished by design. Do not use.

A component that applies Tangram table styles and handles horizontal overflow on small viewports.

Basic

Basic table
Name	Type	Default	Description
tg2Table	attribute	—	Applies Tangram table styles

Row headers

Use th[scope="row"] for row header cells. These receive a distinct background and left-aligned text treatment.

Row headers example
	Column A	Column B	Column C
Row 1	Value	Value	Value
Row 2	Value	Value	Value
Row 3	Value	Value	Value

Overflow

Wrap content by default

Overflow example
	Column 1	Column 2	Column 3	Column 4	Column 5	Column 6	Column 7	Column 8	Column 9	Column 10	Column 11	Column 12
Row 1	Value	Value	Value	Value	Value	Value	Value	Value	Value	Value	Value	Value
Row 2	More content in a box	More content in a box	More content in a box	More content in a box	More content in a box	More content in a box	More content in a box	More content in a box	More content in a box	More content in a box	More content in a box	More content in a box

Inputs

Inputs
Name	Type	Required	Description
`caption`	`string`	Yes	Accessible label for the table. Rendered as a visually hidden `<caption>` element.

Code example

Table example
Name	Type	Description
Row 1	Type A	A description of this row
Row 2	Type B	A description of this row

Code

<tg2-table caption="Table caption">
    <thead>
        <tr>
            <th>Name</th>
            <th>Type</th>
            <th>Description</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Row 1</th>
            <td>Type A</td>
            <td>A description of this row</td>
        </tr>
        <tr>
            <th scope="row">Row 2</th>
            <td>Type B</td>
            <td>A description of this row</td>
        </tr>
    </tbody>
</tg2-table>