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 class="dpr-overflow-gradient" id="dpr-overflow-gradient-0"></div>
      <div class="dpr-table-wrapper" id="dpr-table-wrapper-0" tabindex="0">
    
        <div class="dpr-table-content">
          <table class="govuk-table dpr-data-table" id="dpr-data-table-0" data-classification="OFFICIAL" data-col-length="3">
    
            <caption class="govuk-table__caption"><span class="govuk-visually-hidden">Column headers with buttons are sortable.</span></caption>
    
            <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>
    </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-page/report-template/report-section/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') }}```
  
  </div>
    
  

</div>

</div>


<h2 class="govuk-heading-m">When to use</h2>

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