Components

Table view

Display data as a table in rows and columns.

Commodity code	Commodity suffix	Description	Valid from	Valid until	Parent code	Parent suffix
0100000000	80	LIVE ANIMALS	1971-12-31
0101000000	80	Live horses, asses, mules and hinnies	1972-01-01		0100000000	80
0101210000	10	Horses	2012-01-01		0101000000	80
0101210000	80	Pure-bred breeding animals	2012-01-01		0101210000	10
0101290000	80	Other	2012-01-01		0101210000	10
0101291000	80	For slaughter	2012-01-01		0101290000	80
0101300000	80	Asses	2012-01-01		0101000000	80
0101900000	80	Other	2002-01-01		0101000000	80
0101299000	80	Other	2012-01-01		0101290000	80

Code snippets

Lay out your data using a normal HTML <table> and apply the class selectable.

<table class="govuk-body selectable">
    <thead>
        <tr>
            <th>Commodity code</th>
            <th>Commodity suffix</th>
            <th>Description</th>
            <th>Valid from</th>
            <th>Valid until</th>
            <th>Parent code</th>
            <th>Parent suffix</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>0100000000</td>
            <td>80</td>
            <td>LIVE ANIMALS</td>
            <td>1971-12-31</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </tbody>
</table>

In the Prototype Kit, call the importerTableView macro to automatically display a table of previously uploaded data.

{% from "importer/macros/table_view.njk" import importerTableView %}
{{ importerTableView(data) }}

The macro accepts the following options:

importerTableView options

Name	Type	Description
data	Prototype Kit session	The automatically populated data variable containing the user's uploaded sheet and options.
hideHeader	True or false (optional, default: false)	Whether the headers that the user has selected should be hidden or visible.
caption	Text (optional, default: blank)	The caption that should be added to describe the content of the table view.

When to use this component

Use this component to:

• show a preview of data to help the user pick the right file or worksheet
• display a subset of data that requires manual review

When to not use this component

Do not use this component to display all of the user's data for them to review. Asking the users to review data is not an effective way to catch mistakes if the data is larger than a few cells. Instead, display summary statistics about the submitted data relevant to the user journey.

Do not use this component to display data not submitted by the user. Instead, use the GOV.UK Design System Table component or a regular table.