Report components Data Table

The data table is a bundle of several components: The Gov.uk pagination component, a modified version of the MoJ sortable table, and a page size picker.

Navigating the paging or changing the page size, appends the updated options to the page URL.

Open this example in a new window

Contents

    <div id="table-container" class='dpr-table-container' data-dpr-module="data-table">
      <div class="dpr-overflow-gradient" id="dpr-overflow-gradient"></div>
      <div class="dpr-table-wrapper" id="dpr-table-wrapper">
        <table class="govuk-table" id="dpr-data-table" data-classification="" data-col-length="3">
    
          <thead class="govuk-table__head">
            <tr class="govuk-table__row">
    
              <th scope="col" class="govuk-table__header">Name</th>
    
              <th scope="col" class="govuk-table__header">Location</th>
    
              <th scope="col" class="govuk-table__header govuk-table__header--numeric">Total</th>
    
            </tr>
          </thead>
    
          <tbody class="govuk-table__body">
    
            <tr class="govuk-table__row">
    
              <td class="govuk-table__cell">Aardvark</td>
    
              <td class="govuk-table__cell">London</td>
    
              <td class="govuk-table__cell govuk-table__cell--numeric">2</td>
    
            </tr>
    
            <tr class="govuk-table__row">
    
              <td class="govuk-table__cell">Badger</td>
    
              <td class="govuk-table__cell">Arctic</td>
    
              <td class="govuk-table__cell govuk-table__cell--numeric">0</td>
    
            </tr>
    
            <tr class="govuk-table__row">
    
              <td class="govuk-table__cell">Cat</td>
    
              <td class="govuk-table__cell">Cheshire</td>
    
              <td class="govuk-table__cell govuk-table__cell--numeric">2312</td>
    
            </tr>
    
          </tbody>
        </table>
    
      </div>
    </div>
    

Nunjucks macro options

Name	Type	Required	Description
head	Array	Yes	An array of column headers. See Cells.
rows	Array of Arrays	Yes	An array (Rows) of an array (Cells).
colCount	Number	Yes	The count of currently visible columns.

Cells

Name	Type	Required	Description
text	String	Yes	The text to be displayed in this column header.
format	String	No	Format of the column header. Can be left empty to align contents left, or set to 'numeric' to align contents right.

    {%- from "dpr/components/_reports/report-data-table/view.njk" import dprDataTable -%}
    
    {% set dataTableOptions = {
      head: [
        { text: "Name" },
        { text: "Location" },
        { text: "Total", format: "numeric" }
      ],
      rows: [
        [{ text: "Aardvark" }, { text: "London" }, { text: "2", format: "numeric" }],
        [{ text: "Badger" }, { text: "Arctic" }, { text: "0", format: "numeric" }],
        [{ text: "Cat" }, { text: "Cheshire" }, { text: "2312", format: "numeric" }]
      ],
      colCount: 3
    } %}
    
    {{ dprDataTable(dataTableOptions, 'OFFICIAL') }}

When to use

Use this component to display tabular data to users, allowing sorting and paging of that data.