Example Reports Summary section report

This is an example report using the summary-section template

Contents

    <div class="govuk-width-container">
      <div class="dpr-report-page govuk-width-container report-list-container">
    
        <div class="dpr-report-print-message-container">
    
        </div>
    
        <div class="dpr-report-page__heading-container">
    
          <div class="dpr-report-header">
    
            <div class="dpr-report-heading__actions">
    
              <div class="report-actions" data-dpr-module='report-actions'>
                <div class="moj-button-menu"></div>
    
                <div class="dpr-display-none">
    
                </div>
              </div>
    
            </div>
    
            <div class="dpr-report-heading">
              <div class="dpr-report-heading__title">
                <h1 id="dpr-report-name" class="govuk-heading-xl">
                  <span class="govuk-caption-l">Report templates</span>
                  Summary-section
                </h1>
              </div>
            </div>
    
            <div id="dpr-download-message" class="dpr-download-message--hidden govuk-!-margin-bottom-6" data-dpr-module='download-message'>
              <article class="moj-ticket-panel" aria-label="Sub navigation 1">
    
                <section class="moj-ticket-panel__content moj-ticket-panel__content--blue" aria-label="Section 1">
                  <h2 class="govuk-heading-m">To download this report</h2>
                  <p><a href="/embedded/platform/dpr/download-report/request-download/report-template-examples/report-template-example-summary-section-better/tableId/tblId_1769454461356/form?reportUrl=/embedded/platform/dpr/view-report/async/report/report-template-examples/report-template-example-summary-section-better/tblId_1769454461356/report" class="govuk-link govuk-link--no-visited-state">Fill out a form</a>, which will take about 1 minute to complete.</p>
                  <p>You can then download the report whenever you need it.</p>
                </section>
    
              </article>
    
            </div>
    
            <details class="govuk-details dpr-meta-data-details">
              <summary class="govuk-details__summary">
                <span class="govuk-details__summary-text">
                  Report details
                </span>
              </summary>
              <div class="govuk-details__text">
    
                <div class="dpr-request-details">
    
                  <table class="dpr-request-details__table" id="dpr-request-details-table">
                    <tbody>
    
                      <tr>
                        <td class="dpr-request-details__table-heading">
                          <p class="govuk-body-m dpr-request-details__table-heading_name">Name:</p>
                        </td>
                        <td>
                          <h2 class="govuk-heading-s govuk-!-margin-bottom-0">Summary-section</h1>
                        </td>
                      </tr>
    
                      <tr>
                        <td class="dpr-request-details__table-heading">
                          <p class="govuk-body-m dpr-request-details__table-heading_name">Product:</p>
                        </td>
                        <td>
                          <h2 class="govuk-heading-s govuk-!-margin-bottom-0">Report templates</h1>
                        </td>
                      </tr>
    
                      <tr>
                        <td class="dpr-request-details__table-heading">
                          <p class="govuk-body-m dpr-request-details__table-heading_name">Description:</p>
                        </td>
                        <td>
                          <p class="govuk-body-m govuk-!-margin-bottom-0">template: "summary-section".</br> A report with summaries in sections</p>
                        </td>
                      </tr>
    
                      <tr>
                        <td class="dpr-request-details__table-heading">
                          <p class="govuk-body-m dpr-request-details__table-heading_name">Classification:</p>
                        </td>
                        <td>
                          <p class="govuk-body-m govuk-!-margin-bottom-0">OFFICIAL</p>
                        </td>
                      </tr>
    
                      <tr>
                        <td class="dpr-request-details__table-heading">
                          <p class="govuk-body-m dpr-request-details__table-heading_name">Requested at:</p>
                        </td>
                        <td>
                          <p class="govuk-body-m govuk-!-margin-bottom-0">26/01/2026, 19:07:42</p>
                        </td>
                      </tr>
    
                    </tbody>
                  </table>
                </div>
    
              </div>
            </details>
    
            <div class="dpr-report-details-print">
    
              <div class="dpr-request-details">
    
                <table class="dpr-request-details__table" id="dpr-request-details-table">
                  <tbody>
    
                    <tr>
                      <td class="dpr-request-details__table-heading">
                        <p class="govuk-body-m dpr-request-details__table-heading_name">Name:</p>
                      </td>
                      <td>
                        <h2 class="govuk-heading-s govuk-!-margin-bottom-0">Summary-section</h1>
                      </td>
                    </tr>
    
                    <tr>
                      <td class="dpr-request-details__table-heading">
                        <p class="govuk-body-m dpr-request-details__table-heading_name">Product:</p>
                      </td>
                      <td>
                        <h2 class="govuk-heading-s govuk-!-margin-bottom-0">Report templates</h1>
                      </td>
                    </tr>
    
                    <tr>
                      <td class="dpr-request-details__table-heading">
                        <p class="govuk-body-m dpr-request-details__table-heading_name">Description:</p>
                      </td>
                      <td>
                        <p class="govuk-body-m govuk-!-margin-bottom-0">template: "summary-section".</br> A report with summaries in sections</p>
                      </td>
                    </tr>
    
                    <tr>
                      <td class="dpr-request-details__table-heading">
                        <p class="govuk-body-m dpr-request-details__table-heading_name">Classification:</p>
                      </td>
                      <td>
                        <p class="govuk-body-m govuk-!-margin-bottom-0">OFFICIAL</p>
                      </td>
                    </tr>
    
                    <tr>
                      <td class="dpr-request-details__table-heading">
                        <p class="govuk-body-m dpr-request-details__table-heading_name">Requested at:</p>
                      </td>
                      <td>
                        <p class="govuk-body-m govuk-!-margin-bottom-0">26/01/2026, 19:07:42</p>
                      </td>
                    </tr>
    
                  </tbody>
                </table>
              </div>
    
            </div>
    
            <div class="dpr-report-interactive-actions">
    
            </div>
          </div>
    
        </div>
    
        <div class="dpr-report-page__template-container">
    
          <div class="dpr-report-template-container ">
    
            <div class="dpr-report-template__page-summaries dpr-report-template__page-summaries--header">
    
            </div>
    
            <div class="dpr-report-template__page-totals dpr-report-template__page-totals--header">
    
              <div class="dpr-report-totals">
                <p class="govuk-body"></p>
              </div>
    
            </div>
    
            <div class='dpr-report-template__sections dpr-report-template__sections--summary-section'>
    
              <div id="dpr-report-sections">
    
                <div id="dpr-summary-section-section-1" class="dpr-summary-section-section dpr-report-section" aria-labelledby="section-title-1">
    
                  <div class="dpr-report-section__title">
                    <h2 id="section-title-1" class="govuk-heading-m">First: One, Second: A
    
                    </h2>
                  </div>
    
                  <div class="dpr-summary-container-group dpr-summary-container-group-section-footer">
    
                    <div class="dpr-summary-container">
                      <table class="govuk-table">
    
                        <thead class="govuk-table__head">
                          <tr class="govuk-table__row">
    
                            <th scope="col" class="govuk-table__header">Field 1</th>
    
                            <th scope="col" class="govuk-table__header">Field 2</th>
    
                            <th scope="col" class="govuk-table__header">Field 3</th>
    
                            <th scope="col" class="govuk-table__header">Field 4</th>
    
                          </tr>
                        </thead>
    
                        <tbody class="govuk-table__body">
    
                          <tr class="govuk-table__row">
    
                            <td class="govuk-table__cell govuk-table__cell--string">Section One A Header</td>
    
                            <td class="govuk-table__cell govuk-table__cell--numeric">1</td>
    
                            <td class="govuk-table__cell govuk-table__cell--numeric">12219380923</td>
    
                            <td class="govuk-table__cell govuk-table__cell--string">4 Freds</td>
    
                          </tr>
    
                        </tbody>
                      </table>
    
                    </div>
    
                    <div class="dpr-summary-container">
                      <table class="govuk-table">
    
                        <thead class="govuk-table__head">
                          <tr class="govuk-table__row">
    
                            <th scope="col" class="govuk-table__header">Field 1</th>
    
                            <th scope="col" class="govuk-table__header">Field 2</th>
    
                            <th scope="col" class="govuk-table__header">Field 3</th>
    
                            <th scope="col" class="govuk-table__header">Field 4</th>
    
                          </tr>
                        </thead>
    
                        <tbody class="govuk-table__body">
    
                          <tr class="govuk-table__row">
    
                            <td class="govuk-table__cell govuk-table__cell--string">Section One A Footer</td>
    
                            <td class="govuk-table__cell govuk-table__cell--numeric">1</td>
    
                            <td class="govuk-table__cell govuk-table__cell--numeric">12219380923</td>
    
                            <td class="govuk-table__cell govuk-table__cell--string">6 Freds</td>
    
                          </tr>
    
                        </tbody>
                      </table>
    
                    </div>
    
                  </div>
    
                </div>
    
                <div id="dpr-summary-section-section-2" class="dpr-summary-section-section dpr-report-section" aria-labelledby="section-title-2">
    
                  <div class="dpr-report-section__title">
                    <h2 id="section-title-2" class="govuk-heading-m">First: One, Second: B
    
                    </h2>
                  </div>
    
                  <div class="dpr-summary-container-group dpr-summary-container-group-section-footer">
    
                    <div class="dpr-summary-container">
                      <table class="govuk-table">
    
                        <thead class="govuk-table__head">
                          <tr class="govuk-table__row">
    
                            <th scope="col" class="govuk-table__header">Field 1</th>
    
                            <th scope="col" class="govuk-table__header">Field 2</th>
    
                            <th scope="col" class="govuk-table__header">Field 3</th>
    
                            <th scope="col" class="govuk-table__header">Field 4</th>
    
                          </tr>
                        </thead>
    
                        <tbody class="govuk-table__body">
    
                          <tr class="govuk-table__row">
    
                            <td class="govuk-table__cell govuk-table__cell--string">Section One B Footer</td>
    
                            <td class="govuk-table__cell govuk-table__cell--numeric">1</td>
    
                            <td class="govuk-table__cell govuk-table__cell--numeric">12219380923</td>
    
                            <td class="govuk-table__cell govuk-table__cell--string">7 Freds</td>
    
                          </tr>
    
                        </tbody>
                      </table>
    
                    </div>
    
                  </div>
    
                </div>
    
                <div id="dpr-summary-section-section-3" class="dpr-summary-section-section dpr-report-section" aria-labelledby="section-title-3">
    
                  <div class="dpr-report-section__title">
                    <h2 id="section-title-3" class="govuk-heading-m">First: Two, Second: A
    
                    </h2>
                  </div>
    
                  <div class="dpr-summary-container-group dpr-summary-container-group-section-footer">
    
                    <div class="dpr-summary-container">
                      <table class="govuk-table">
    
                        <thead class="govuk-table__head">
                          <tr class="govuk-table__row">
    
                            <th scope="col" class="govuk-table__header">Field 1</th>
    
                            <th scope="col" class="govuk-table__header">Field 2</th>
    
                            <th scope="col" class="govuk-table__header">Field 3</th>
    
                            <th scope="col" class="govuk-table__header">Field 4</th>
    
                          </tr>
                        </thead>
    
                        <tbody class="govuk-table__body">
    
                          <tr class="govuk-table__row">
    
                            <td class="govuk-table__cell govuk-table__cell--string">Section Two A Header</td>
    
                            <td class="govuk-table__cell govuk-table__cell--numeric">1</td>
    
                            <td class="govuk-table__cell govuk-table__cell--numeric">12219380923</td>
    
                            <td class="govuk-table__cell govuk-table__cell--string">5 Freds</td>
    
                          </tr>
    
                        </tbody>
                      </table>
    
                    </div>
    
                  </div>
    
                </div>
    
                <div id="dpr-summary-section-section-4" class="dpr-summary-section-section dpr-report-section" aria-labelledby="section-title-4">
    
                  <div class="dpr-report-section__title">
                    <h2 id="section-title-4" class="govuk-heading-m">First: Two, Second: B
    
                    </h2>
                  </div>
    
                </div>
    
              </div>
    
            </div>
    
            <div class="dpr-report-template__page-totals dpr-report-template__page-totals--footer">
    
              <div class="dpr-report-totals">
                <p class="govuk-body"></p>
              </div>
    
            </div>
    
            <div class="dpr-report-template__page-summaries dpr-report-template__page-summaries--footer">
    
            </div>
    
          </div>
    
        </div>
    
      </div>
    </div>
    

    {%- from "dpr/components/_reports/report-page/view.njk" import dprReportPage -%}
    
    {% set data = {
      filterData: {
        filters: [],
        selectedFilters: [],
        canSaveDefaults: true
      },
      count: 100,
      nestedBaseUrl: '/embedded/platform',
      csrfToken: 'csrfToken',
      loadType: 'async',
      type: 'report',
      tableId: 'tblId_1769454461356',
      reportId: 'report-template-examples',
      id: 'report-template-example-summary-section-better',
      actions: [],
      canDownload: false,
      reportName: 'Report templates',
      name: 'Summary-section',
      description: 'template: "summary-section".</br> A report with summaries in sections',
      classification: 'OFFICIAL',
      printable: true,
      specification: {
        template: 'summary-section',
        sections: ['section1', 'section2'],
        fields: [
          {
            name: 'section1',
            display: 'First',
            sortable: false,
            defaultsort: false,
            type: 'string',
            mandatory: false,
            visible: false
          },
          {
            name: 'section2',
            display: 'Second',
            sortable: false,
            defaultsort: false,
            type: 'string',
            mandatory: false,
            visible: false
          }
        ]
      },
      template: 'summary-section',
      fields: [
        {
          name: 'section1',
          display: 'First',
          sortable: false,
          defaultsort: false,
          type: 'string',
          mandatory: false,
          visible: false
        },
        {
          name: 'section2',
          display: 'Second',
          sortable: false,
          defaultsort: false,
          type: 'string',
          mandatory: false,
          visible: false
        }
      ],
      executionId: 'exId_1769454461356',
      requestedTimestamp: '26/01/2026, 19:07:42',
      querySummary: [],
      queryData: {},
      requestUrl: {
        fullUrl:
          'http://localhost:3010/embedded/platform/dpr/request-report/report/report-template-examples/report-template-example-summary-section-better/filters',
        pathname:
          '/embedded/platform/dpr/request-report/report/report-template-examples/report-template-example-summary-section-better/filters',
        search: ''
      },
      reportUrl:
        '/embedded/platform/dpr/view-report/async/report/report-template-examples/report-template-example-summary-section-better/tblId_1769454461356/report',
      pathname:
        '/embedded/platform/dpr/view-report/async/report/report-template-examples/report-template-example-summary-section-better/tblId_1769454461356/report',
      dataTable: {
        rowCount: 100,
        summaries: {},
        sections: [
          {
            key: '[{"name":"section1","value":"One"},{"name":"section2","value":"A"}]',
            keyObj: [
              {
                name: 'section1',
                value: 'One'
              },
              {
                name: 'section2',
                value: 'A'
              }
            ],
            title: 'First: One, Second: A',
            count: 17,
            summaries: {
              'section-footer': [
                {
                  head: [
                    {
                      text: 'Field 1'
                    },
                    {
                      text: 'Field 2'
                    },
                    {
                      text: 'Field 3'
                    },
                    {
                      text: 'Field 4'
                    }
                  ],
                  rows: [
                    [
                      {
                        fieldName: 'field1',
                        text: 'Section One A Header',
                        format: 'string',
                        classes: ''
                      },
                      {
                        fieldName: 'field2',
                        text: 1,
                        format: 'numeric',
                        classes: ''
                      },
                      {
                        fieldName: 'field3',
                        text: 12219380923,
                        format: 'numeric',
                        classes: ''
                      },
                      {
                        fieldName: 'field4',
                        text: '4 Freds',
                        format: 'string',
                        classes: ''
                      }
                    ]
                  ],
                  rowCount: 1,
                  colCount: 4
                },
                {
                  head: [
                    {
                      text: 'Field 1'
                    },
                    {
                      text: 'Field 2'
                    },
                    {
                      text: 'Field 3'
                    },
                    {
                      text: 'Field 4'
                    }
                  ],
                  rows: [
                    [
                      {
                        fieldName: 'field1',
                        text: 'Section One A Footer',
                        format: 'string',
                        classes: ''
                      },
                      {
                        fieldName: 'field2',
                        text: 1,
                        format: 'numeric',
                        classes: ''
                      },
                      {
                        fieldName: 'field3',
                        text: 12219380923,
                        format: 'numeric',
                        classes: ''
                      },
                      {
                        fieldName: 'field4',
                        text: '6 Freds',
                        format: 'string',
                        classes: ''
                      }
                    ]
                  ],
                  rowCount: 1,
                  colCount: 4
                }
              ]
            },
            data: {
              head: [],
              rows: [],
              rowCount: 17,
              colCount: 0
            }
          },
          {
            key: '[{"name":"section1","value":"One"},{"name":"section2","value":"B"}]',
            keyObj: [
              {
                name: 'section1',
                value: 'One'
              },
              {
                name: 'section2',
                value: 'B'
              }
            ],
            title: 'First: One, Second: B',
            count: 33,
            summaries: {
              'section-footer': [
                {
                  head: [
                    {
                      text: 'Field 1'
                    },
                    {
                      text: 'Field 2'
                    },
                    {
                      text: 'Field 3'
                    },
                    {
                      text: 'Field 4'
                    }
                  ],
                  rows: [
                    [
                      {
                        fieldName: 'field1',
                        text: 'Section One B Footer',
                        format: 'string',
                        classes: ''
                      },
                      {
                        fieldName: 'field2',
                        text: 1,
                        format: 'numeric',
                        classes: ''
                      },
                      {
                        fieldName: 'field3',
                        text: 12219380923,
                        format: 'numeric',
                        classes: ''
                      },
                      {
                        fieldName: 'field4',
                        text: '7 Freds',
                        format: 'string',
                        classes: ''
                      }
                    ]
                  ],
                  rowCount: 1,
                  colCount: 4
                }
              ]
            },
            data: {
              head: [],
              rows: [],
              rowCount: 33,
              colCount: 0
            }
          },
          {
            key: '[{"name":"section1","value":"Two"},{"name":"section2","value":"A"}]',
            keyObj: [
              {
                name: 'section1',
                value: 'Two'
              },
              {
                name: 'section2',
                value: 'A'
              }
            ],
            title: 'First: Two, Second: A',
            count: 17,
            summaries: {
              'section-footer': [
                {
                  head: [
                    {
                      text: 'Field 1'
                    },
                    {
                      text: 'Field 2'
                    },
                    {
                      text: 'Field 3'
                    },
                    {
                      text: 'Field 4'
                    }
                  ],
                  rows: [
                    [
                      {
                        fieldName: 'field1',
                        text: 'Section Two A Header',
                        format: 'string',
                        classes: ''
                      },
                      {
                        fieldName: 'field2',
                        text: 1,
                        format: 'numeric',
                        classes: ''
                      },
                      {
                        fieldName: 'field3',
                        text: 12219380923,
                        format: 'numeric',
                        classes: ''
                      },
                      {
                        fieldName: 'field4',
                        text: '5 Freds',
                        format: 'string',
                        classes: ''
                      }
                    ]
                  ],
                  rowCount: 1,
                  colCount: 4
                }
              ]
            },
            data: {
              head: [],
              rows: [],
              rowCount: 17,
              colCount: 0
            }
          },
          {
            key: '[{"name":"section1","value":"Two"},{"name":"section2","value":"B"}]',
            keyObj: [
              {
                name: 'section1',
                value: 'Two'
              },
              {
                name: 'section2',
                value: 'B'
              }
            ],
            title: 'First: Two, Second: B',
            count: 33,
            summaries: {},
            data: {
              head: [],
              rows: [],
              rowCount: 33,
              colCount: 0
            }
          }
        ]
      }
    } %}
    
    {{ dprReportPage(data) }}