Skip to main content
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.
caption Text (optional, default: blank) The caption that should be added to describe the content of the table view.
hideHeader True or false (optional, default: false) Whether the headers that the user has selected should be hidden or visible.

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.