Report Examples Parent-child-section report

Contents

    <div class="govuk-width-container">
      <div class="govuk-width-container report-list-container">
    
        <div class="dpr-reports-heading-container govuk-!-margin-top-5">
    
          <div class="dpr-report-header">
            <div class="dpr-report-heading">
    
              <div class="dpr-report-heading__title">
                <span class="govuk-caption-l">Example report</span>
                <h1 class="govuk-heading-l">
                  Parent Child Section Template
                </h1>
              </div>
    
              <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>
    
            <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="/download/test-report-4/variantId-27/tblId_1747127055494/feedback?reportUrl=/async/report/test-report-4/variantId-27/request/tblId_1747127055494/report&amp;reportSearch=%3Fcolumns%3Dfield1%26columns%3DchildKey" 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">
                    <tbody>
    
                      <tr>
                        <td class="dpr-request-details__table-heading">
                          <p class="govuk-body-m dpr-request-details__table-heading_name">Name:</p>
                        </td>
                        <td>
                          <h1 class="govuk-heading-s govuk-!-margin-bottom-1">Parent Child Section Template</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>
                          <h1 class="govuk-heading-s govuk-!-margin-bottom-1">Example report</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-1">A report with parent and child datasets 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-1">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-2">13/05/2025, 10:04:17</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">
                  <tbody>
    
                    <tr>
                      <td class="dpr-request-details__table-heading">
                        <p class="govuk-body-m dpr-request-details__table-heading_name">Name:</p>
                      </td>
                      <td>
                        <h1 class="govuk-heading-s govuk-!-margin-bottom-1">Parent Child Section Template</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>
                        <h1 class="govuk-heading-s govuk-!-margin-bottom-1">Example report</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-1">A report with parent and child datasets 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-1">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-2">13/05/2025, 10:04:17</p>
                      </td>
                    </tr>
    
                  </tbody>
                </table>
              </div>
    
            </div>
          </div>
    
        </div>
    
        <div class="report-template-container  ">
    
          <div class="dpr-sync-report-actions">
    
            <div class="dpr-columns-section-wrapper">
    
              <div class="columns-section-button">
                <details class="govuk-details">
                  <summary class="govuk-details__summary">
                    <span class="govuk-details__summary-text">
                      Columns (2 of 2 shown)
                    </span>
                  </summary>
                  <div class="govuk-details__text">
    
                    <form data-dpr-module="columns" class="dpr-columns-form">
                      <div class="columns-container">
    
                        <div class="govuk-form-group govuk-!-margin-bottom-3">
    
                          <fieldset class="govuk-fieldset" aria-label="columns checkboxes">
    
                            <legend class="govuk-fieldset__legend govuk-label govuk-!-font-weight-bold">
    
                              Select report columns
    
                            </legend>
    
                            <div class="govuk-checkboxes govuk-checkboxes--small" data-module="govuk-checkboxes">
    
                              <div class="govuk-checkboxes__item">
                                <input class="govuk-checkboxes__input" id="columns" name="columns" type="checkbox" value="field1" checked>
                                <label class="govuk-label govuk-checkboxes__label" for="columns">
                                  Field 1
                                </label>
    
                              </div>
    
                              <div class="govuk-checkboxes__item">
                                <input class="govuk-checkboxes__input" id="columns-2" name="columns" type="checkbox" value="childKey" checked>
                                <label class="govuk-label govuk-checkboxes__label" for="columns-2">
                                  Child key
                                </label>
    
                              </div>
    
                            </div>
    
                          </fieldset>
    
                        </div>
    
                      </div>
    
                      <div class="govuk-button-group">
    
                        <button type="submit" class="govuk-button govuk-button govuk-!-margin-bottom-0 dpr-apply-columns-button" data-module="govuk-button">
                          Apply Columns
                        </button>
    
                        <a class="govuk-link govuk-link--no-visited-state dpr-reset-columns-button" href="#">Reset columns</a>
                      </div>
                    </form>
    
                  </div>
                </details>
    
              </div>
            </div>
    
          </div>
    
          <div class="dpr-report-totals">
            <p class="govuk-body"></p>
          </div>
    
          <div class='dpr-table-container'>
    
            <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="2">
    
                  <tbody class="govuk-table__body">
    
                    <tr class="govuk-table__row">
    
                      <td class="govuk-table__cell" colspan="2">
                        <h2>Section 1: Section 1, Section 2: Section 1.1 <span class='govuk-caption-m'>3 results</span></h2>
                      </td>
    
                    </tr>
    
                    <tr class="govuk-table__row">
    
                      <td class="govuk-table__cell govuk-table__header">Field 1</td>
    
                      <td class="govuk-table__cell govuk-table__header">Child key</td>
    
                    </tr>
    
                    <tr class="govuk-table__row">
    
                      <td class="govuk-table__cell govuk-table__cell--string">Parent 1</td>
    
                      <td class="govuk-table__cell govuk-table__cell--string">one</td>
    
                    </tr>
    
                    <tr class="govuk-table__row">
    
                      <td class="govuk-table__cell govuk-table__cell--string" colspan="2">
                        <div class='dpr-child-report'>
                          <h3>Child Report</h3>
                          <table class='govuk-table'>
                            <thead class='govuk-table__head'>
                              <th scope='col' class='govuk-table__header'>Child Field 1</th>
                              <th scope='col' class='govuk-table__header'>Child Field 2</th>
                            </thead>
                            <tbody class='govuk-table__body'>
                              <tr class='govuk-table__row'>
                                <td class='govuk-table__cell govuk-table__cell--string '>Child one - Parent 1</td>
                                <td class='govuk-table__cell govuk-table__cell--string '>Other value</td>
                              </tr>
                              <tr class='govuk-table__row'>
                                <td class='govuk-table__cell govuk-table__cell--string '>Child two - Parent 1</td>
                                <td class='govuk-table__cell govuk-table__cell--string '>Other value</td>
                              </tr>
                            </tbody>
                          </table>
                        </div>
                      </td>
    
                    </tr>
    
                    <tr class="govuk-table__row">
    
                      <td class="govuk-table__cell govuk-table__header">Field 1</td>
    
                      <td class="govuk-table__cell govuk-table__header">Child key</td>
    
                    </tr>
    
                    <tr class="govuk-table__row">
    
                      <td class="govuk-table__cell govuk-table__cell--string">Parent 2</td>
    
                      <td class="govuk-table__cell govuk-table__cell--string">two</td>
    
                    </tr>
    
                    <tr class="govuk-table__row">
    
                      <td class="govuk-table__cell govuk-table__cell--string" colspan="2">
                        <div class='dpr-child-report'>
                          <h3>Child Report</h3>
                          <table class='govuk-table'>
                            <thead class='govuk-table__head'>
                              <th scope='col' class='govuk-table__header'>Child Field 1</th>
                              <th scope='col' class='govuk-table__header'>Child Field 2</th>
                            </thead>
                            <tbody class='govuk-table__body'>
                              <tr class='govuk-table__row'>
                                <td class='govuk-table__cell govuk-table__cell--string '>Child one - Parent 2</td>
                                <td class='govuk-table__cell govuk-table__cell--string '>Other value</td>
                              </tr>
                              <tr class='govuk-table__row'>
                                <td class='govuk-table__cell govuk-table__cell--string '>Child two - Parent 2</td>
                                <td class='govuk-table__cell govuk-table__cell--string '>Other value</td>
                              </tr>
                            </tbody>
                          </table>
                        </div>
                      </td>
    
                    </tr>
    
                    <tr class="govuk-table__row">
    
                      <td class="govuk-table__cell govuk-table__header">Field 1</td>
    
                      <td class="govuk-table__cell govuk-table__header">Child key</td>
    
                    </tr>
    
                    <tr class="govuk-table__row">
    
                      <td class="govuk-table__cell govuk-table__cell--string">Parent 3</td>
    
                      <td class="govuk-table__cell govuk-table__cell--string">three</td>
    
                    </tr>
    
                    <tr class="govuk-table__row">
    
                      <td class="govuk-table__cell govuk-table__cell--string" colspan="2">
                        <div class='dpr-child-report'>
                          <h3>Child Report</h3>
                          <table class='govuk-table'>
                            <thead class='govuk-table__head'>
                              <th scope='col' class='govuk-table__header'>Child Field 1</th>
                              <th scope='col' class='govuk-table__header'>Child Field 2</th>
                            </thead>
                            <tbody class='govuk-table__body'>
                              <tr class='govuk-table__row'>
                                <td class='govuk-table__cell govuk-table__cell--string '>Child one - Parent 3</td>
                                <td class='govuk-table__cell govuk-table__cell--string '>Other value</td>
                              </tr>
                              <tr class='govuk-table__row'>
                                <td class='govuk-table__cell govuk-table__cell--string '>Child two - Parent 3</td>
                                <td class='govuk-table__cell govuk-table__cell--string '>Other value</td>
                              </tr>
                            </tbody>
                          </table>
                        </div>
                      </td>
    
                    </tr>
    
                    <tr class="govuk-table__row">
    
                      <td class="govuk-table__cell" colspan="2">
                        <h2>Section 1: Section 1, Section 2: Section 1.2 <span class='govuk-caption-m'>2 results</span></h2>
                      </td>
    
                    </tr>
    
                    <tr class="govuk-table__row">
    
                      <td class="govuk-table__cell govuk-table__header">Field 1</td>
    
                      <td class="govuk-table__cell govuk-table__header">Child key</td>
    
                    </tr>
    
                    <tr class="govuk-table__row">
    
                      <td class="govuk-table__cell govuk-table__cell--string">Parent 4</td>
    
                      <td class="govuk-table__cell govuk-table__cell--string">four</td>
    
                    </tr>
    
                    <tr class="govuk-table__row">
    
                      <td class="govuk-table__cell govuk-table__cell--string" colspan="2">
                        <div class='dpr-child-report'>
                          <h3>Child Report</h3>
                          <table class='govuk-table'>
                            <thead class='govuk-table__head'>
                              <th scope='col' class='govuk-table__header'>Child Field 1</th>
                              <th scope='col' class='govuk-table__header'>Child Field 2</th>
                            </thead>
                            <tbody class='govuk-table__body'>
                              <tr class='govuk-table__row'>
                                <td class='govuk-table__cell govuk-table__cell--string '>Child one - Parent 4</td>
                                <td class='govuk-table__cell govuk-table__cell--string '>Other value</td>
                              </tr>
                              <tr class='govuk-table__row'>
                                <td class='govuk-table__cell govuk-table__cell--string '>Child two - Parent 4</td>
                                <td class='govuk-table__cell govuk-table__cell--string '>Other value</td>
                              </tr>
                            </tbody>
                          </table>
                        </div>
                      </td>
    
                    </tr>
    
                    <tr class="govuk-table__row">
    
                      <td class="govuk-table__cell govuk-table__header">Field 1</td>
    
                      <td class="govuk-table__cell govuk-table__header">Child key</td>
    
                    </tr>
    
                    <tr class="govuk-table__row">
    
                      <td class="govuk-table__cell govuk-table__cell--string">Parent 5</td>
    
                      <td class="govuk-table__cell govuk-table__cell--string">five</td>
    
                    </tr>
    
                    <tr class="govuk-table__row">
    
                      <td class="govuk-table__cell govuk-table__cell--string" colspan="2">
                        <div class='dpr-child-report'>
                          <h3>Child Report</h3>
                          <table class='govuk-table'>
                            <thead class='govuk-table__head'>
                              <th scope='col' class='govuk-table__header'>Child Field 1</th>
                              <th scope='col' class='govuk-table__header'>Child Field 2</th>
                            </thead>
                            <tbody class='govuk-table__body'>
                              <tr class='govuk-table__row'>
                                <td class='govuk-table__cell govuk-table__cell--string '>Child one - Parent 5</td>
                                <td class='govuk-table__cell govuk-table__cell--string '>Other value</td>
                              </tr>
                              <tr class='govuk-table__row'>
                                <td class='govuk-table__cell govuk-table__cell--string '>Child two - Parent 5</td>
                                <td class='govuk-table__cell govuk-table__cell--string '>Other value</td>
                              </tr>
                            </tbody>
                          </table>
                        </div>
                      </td>
    
                    </tr>
    
                    <tr class="govuk-table__row">
    
                      <td class="govuk-table__cell" colspan="2">
                        <h2>Section 1: Section 2, Section 2: Section 2.1 <span class='govuk-caption-m'>1 result</span></h2>
                      </td>
    
                    </tr>
    
                    <tr class="govuk-table__row">
    
                      <td class="govuk-table__cell govuk-table__header">Field 1</td>
    
                      <td class="govuk-table__cell govuk-table__header">Child key</td>
    
                    </tr>
    
                    <tr class="govuk-table__row">
    
                      <td class="govuk-table__cell govuk-table__cell--string">Parent 6</td>
    
                      <td class="govuk-table__cell govuk-table__cell--string">six</td>
    
                    </tr>
    
                    <tr class="govuk-table__row">
    
                      <td class="govuk-table__cell govuk-table__cell--string" colspan="2">
                        <div class='dpr-child-report'>
                          <h3>Child Report</h3>
                          <table class='govuk-table'>
                            <thead class='govuk-table__head'>
                              <th scope='col' class='govuk-table__header'>Child Field 1</th>
                              <th scope='col' class='govuk-table__header'>Child Field 2</th>
                            </thead>
                            <tbody class='govuk-table__body'>
                              <tr class='govuk-table__row'>
                                <td class='govuk-table__cell govuk-table__cell--string '>Child one - Parent 6</td>
                                <td class='govuk-table__cell govuk-table__cell--string '>Other value</td>
                              </tr>
                              <tr class='govuk-table__row'>
                                <td class='govuk-table__cell govuk-table__cell--string '>Child two - Parent 6</td>
                                <td class='govuk-table__cell govuk-table__cell--string '>Other value</td>
                              </tr>
                            </tbody>
                          </table>
                        </div>
                      </td>
    
                    </tr>
    
                    <tr class="govuk-table__row">
    
                      <td class="govuk-table__cell" colspan="2">
                        <h2>Section 1: Section 2, Section 2: Section 2.2 <span class='govuk-caption-m'>2 results</span></h2>
                      </td>
    
                    </tr>
    
                    <tr class="govuk-table__row">
    
                      <td class="govuk-table__cell govuk-table__header">Field 1</td>
    
                      <td class="govuk-table__cell govuk-table__header">Child key</td>
    
                    </tr>
    
                    <tr class="govuk-table__row">
    
                      <td class="govuk-table__cell govuk-table__cell--string">Parent 7</td>
    
                      <td class="govuk-table__cell govuk-table__cell--string">seven</td>
    
                    </tr>
    
                    <tr class="govuk-table__row">
    
                      <td class="govuk-table__cell govuk-table__cell--string" colspan="2">
                        <div class='dpr-child-report'>
                          <h3>Child Report</h3>
                          <table class='govuk-table'>
                            <thead class='govuk-table__head'>
                              <th scope='col' class='govuk-table__header'>Child Field 1</th>
                              <th scope='col' class='govuk-table__header'>Child Field 2</th>
                            </thead>
                            <tbody class='govuk-table__body'>
                              <tr class='govuk-table__row'>
                                <td class='govuk-table__cell govuk-table__cell--string '>Child one - Parent 7</td>
                                <td class='govuk-table__cell govuk-table__cell--string '>Other value</td>
                              </tr>
                              <tr class='govuk-table__row'>
                                <td class='govuk-table__cell govuk-table__cell--string '>Child two - Parent 7</td>
                                <td class='govuk-table__cell govuk-table__cell--string '>Other value</td>
                              </tr>
                            </tbody>
                          </table>
                        </div>
                      </td>
    
                    </tr>
    
                    <tr class="govuk-table__row">
    
                      <td class="govuk-table__cell govuk-table__header">Field 1</td>
    
                      <td class="govuk-table__cell govuk-table__header">Child key</td>
    
                    </tr>
    
                    <tr class="govuk-table__row">
    
                      <td class="govuk-table__cell govuk-table__cell--string">Parent 8</td>
    
                      <td class="govuk-table__cell govuk-table__cell--string">eight</td>
    
                    </tr>
    
                    <tr class="govuk-table__row">
    
                      <td class="govuk-table__cell govuk-table__cell--string" colspan="2">
                        <div class='dpr-child-report'>
                          <h3>Child Report</h3>
                          <table class='govuk-table'>
                            <thead class='govuk-table__head'>
                              <th scope='col' class='govuk-table__header'>Child Field 1</th>
                              <th scope='col' class='govuk-table__header'>Child Field 2</th>
                            </thead>
                            <tbody class='govuk-table__body'>
                              <tr class='govuk-table__row'>
                                <td class='govuk-table__cell govuk-table__cell--string '>Child one - Parent 8</td>
                                <td class='govuk-table__cell govuk-table__cell--string '>Other value</td>
                              </tr>
                              <tr class='govuk-table__row'>
                                <td class='govuk-table__cell govuk-table__cell--string '>Child two - Parent 8</td>
                                <td class='govuk-table__cell govuk-table__cell--string '>Other value</td>
                              </tr>
                            </tbody>
                          </table>
                        </div>
                      </td>
    
                    </tr>
    
                  </tbody>
                </table>
    
              </div>
            </div>
    
          </div>
    
          <div class='govuk-!-margin-bottom-6'>
    
            <div class="dpr-report-totals">
              <p class="govuk-body"></p>
            </div>
    
          </div>
    
        </div>
    
      </div>
    </div>
    

    
    {%- from "dpr/components/_reports/report-wrapper/view.njk" import dprReportWrapper -%}
    
    {% set data = {
      "columns": {
        "name": "columns",
        "options": [
          {
            "text": "Field 1",
            "value": "field1",
            "disabled": false
          },
          {
            "text": "Child key",
            "value": "childKey",
            "disabled": false
          }
        ],
        "text": "Select report columns",
        "value": [
          "field1",
          "childKey"
        ]
      },
      "filterData": {
        "filters": [],
        "selectedFilters": []
      },
      "count": 100,
      "csrfToken": "csrfToken",
      "classification": "OFFICIAL",
      "template": "parent-child-section",
      "loadType": "async",
      "type": "report",
      "actions": [],
      "canDownload": false,
      "printable": true,
      "reportName": "Example report",
      "name": "Parent Child Section Template",
      "description": "A report with parent and child datasets in sections",
      "requestedTimestamp": "13/05/2025, 10:04:17",
      "reportId": "test-report-4",
      "tableId": "tblId_1747127055494",
      "id": "variantId-27",
      "executionId": "exId_1747127055494",
      "querySummary": [],
      "requestUrl": {
        "fullUrl": "http://localhost:3010/async/report/test-report-4/variantId-27/request",
        "pathname": "/async/report/test-report-4/variantId-27/request",
        "search": ""
      },
      "reportUrl": "/async/report/test-report-4/variantId-27/request/tblId_1747127055494/report",
      "reportSearch": "?columns=field1&columns=childKey",
      "encodedSearch": "%3Fcolumns%3Dfield1%26columns%3DchildKey",
      "search": "?columns=field1&columns=childKey",
      "pathname": "/async/report/test-report-4/variantId-27/request/tblId_1747127055494/report",
      "dataTable": {
        "head": null,
        "rows": [
          [
            {
              "colspan": 2,
              "html": "<h2>Section 1: Section 1, Section 2: Section 1.1 <span class='govuk-caption-m'>3 results</span></h2>"
            }
          ],
          [
            {
              "text": "Field 1",
              "classes": "govuk-table__header"
            },
            {
              "text": "Child key",
              "classes": "govuk-table__header"
            }
          ],
          [
            {
              "fieldName": "field1",
              "text": "Parent 1",
              "format": "string",
              "classes": ""
            },
            {
              "fieldName": "childKey",
              "text": "one",
              "format": "string",
              "classes": ""
            }
          ],
          [
            {
              "format": "string",
              "html": "<div class='dpr-child-report'><h3>Child Report</h3><table class='govuk-table'><thead class='govuk-table__head'><th scope='col' class='govuk-table__header'>Child Field 1</th><th scope='col' class='govuk-table__header'>Child Field 2</th></thead><tbody class='govuk-table__body'><tr class='govuk-table__row'><td class='govuk-table__cell govuk-table__cell--string '>Child one - Parent 1</td><td class='govuk-table__cell govuk-table__cell--string '>Other value</td></tr><tr class='govuk-table__row'><td class='govuk-table__cell govuk-table__cell--string '>Child two - Parent 1</td><td class='govuk-table__cell govuk-table__cell--string '>Other value</td></tr></tbody></table></div>",
              "colspan": 2
            }
          ],
          [
            {
              "text": "Field 1",
              "classes": "govuk-table__header"
            },
            {
              "text": "Child key",
              "classes": "govuk-table__header"
            }
          ],
          [
            {
              "fieldName": "field1",
              "text": "Parent 2",
              "format": "string",
              "classes": ""
            },
            {
              "fieldName": "childKey",
              "text": "two",
              "format": "string",
              "classes": ""
            }
          ],
          [
            {
              "format": "string",
              "html": "<div class='dpr-child-report'><h3>Child Report</h3><table class='govuk-table'><thead class='govuk-table__head'><th scope='col' class='govuk-table__header'>Child Field 1</th><th scope='col' class='govuk-table__header'>Child Field 2</th></thead><tbody class='govuk-table__body'><tr class='govuk-table__row'><td class='govuk-table__cell govuk-table__cell--string '>Child one - Parent 2</td><td class='govuk-table__cell govuk-table__cell--string '>Other value</td></tr><tr class='govuk-table__row'><td class='govuk-table__cell govuk-table__cell--string '>Child two - Parent 2</td><td class='govuk-table__cell govuk-table__cell--string '>Other value</td></tr></tbody></table></div>",
              "colspan": 2
            }
          ],
          [
            {
              "text": "Field 1",
              "classes": "govuk-table__header"
            },
            {
              "text": "Child key",
              "classes": "govuk-table__header"
            }
          ],
          [
            {
              "fieldName": "field1",
              "text": "Parent 3",
              "format": "string",
              "classes": ""
            },
            {
              "fieldName": "childKey",
              "text": "three",
              "format": "string",
              "classes": ""
            }
          ],
          [
            {
              "format": "string",
              "html": "<div class='dpr-child-report'><h3>Child Report</h3><table class='govuk-table'><thead class='govuk-table__head'><th scope='col' class='govuk-table__header'>Child Field 1</th><th scope='col' class='govuk-table__header'>Child Field 2</th></thead><tbody class='govuk-table__body'><tr class='govuk-table__row'><td class='govuk-table__cell govuk-table__cell--string '>Child one - Parent 3</td><td class='govuk-table__cell govuk-table__cell--string '>Other value</td></tr><tr class='govuk-table__row'><td class='govuk-table__cell govuk-table__cell--string '>Child two - Parent 3</td><td class='govuk-table__cell govuk-table__cell--string '>Other value</td></tr></tbody></table></div>",
              "colspan": 2
            }
          ],
          [
            {
              "colspan": 2,
              "html": "<h2>Section 1: Section 1, Section 2: Section 1.2 <span class='govuk-caption-m'>2 results</span></h2>"
            }
          ],
          [
            {
              "text": "Field 1",
              "classes": "govuk-table__header"
            },
            {
              "text": "Child key",
              "classes": "govuk-table__header"
            }
          ],
          [
            {
              "fieldName": "field1",
              "text": "Parent 4",
              "format": "string",
              "classes": ""
            },
            {
              "fieldName": "childKey",
              "text": "four",
              "format": "string",
              "classes": ""
            }
          ],
          [
            {
              "format": "string",
              "html": "<div class='dpr-child-report'><h3>Child Report</h3><table class='govuk-table'><thead class='govuk-table__head'><th scope='col' class='govuk-table__header'>Child Field 1</th><th scope='col' class='govuk-table__header'>Child Field 2</th></thead><tbody class='govuk-table__body'><tr class='govuk-table__row'><td class='govuk-table__cell govuk-table__cell--string '>Child one - Parent 4</td><td class='govuk-table__cell govuk-table__cell--string '>Other value</td></tr><tr class='govuk-table__row'><td class='govuk-table__cell govuk-table__cell--string '>Child two - Parent 4</td><td class='govuk-table__cell govuk-table__cell--string '>Other value</td></tr></tbody></table></div>",
              "colspan": 2
            }
          ],
          [
            {
              "text": "Field 1",
              "classes": "govuk-table__header"
            },
            {
              "text": "Child key",
              "classes": "govuk-table__header"
            }
          ],
          [
            {
              "fieldName": "field1",
              "text": "Parent 5",
              "format": "string",
              "classes": ""
            },
            {
              "fieldName": "childKey",
              "text": "five",
              "format": "string",
              "classes": ""
            }
          ],
          [
            {
              "format": "string",
              "html": "<div class='dpr-child-report'><h3>Child Report</h3><table class='govuk-table'><thead class='govuk-table__head'><th scope='col' class='govuk-table__header'>Child Field 1</th><th scope='col' class='govuk-table__header'>Child Field 2</th></thead><tbody class='govuk-table__body'><tr class='govuk-table__row'><td class='govuk-table__cell govuk-table__cell--string '>Child one - Parent 5</td><td class='govuk-table__cell govuk-table__cell--string '>Other value</td></tr><tr class='govuk-table__row'><td class='govuk-table__cell govuk-table__cell--string '>Child two - Parent 5</td><td class='govuk-table__cell govuk-table__cell--string '>Other value</td></tr></tbody></table></div>",
              "colspan": 2
            }
          ],
          [
            {
              "colspan": 2,
              "html": "<h2>Section 1: Section 2, Section 2: Section 2.1 <span class='govuk-caption-m'>1 result</span></h2>"
            }
          ],
          [
            {
              "text": "Field 1",
              "classes": "govuk-table__header"
            },
            {
              "text": "Child key",
              "classes": "govuk-table__header"
            }
          ],
          [
            {
              "fieldName": "field1",
              "text": "Parent 6",
              "format": "string",
              "classes": ""
            },
            {
              "fieldName": "childKey",
              "text": "six",
              "format": "string",
              "classes": ""
            }
          ],
          [
            {
              "format": "string",
              "html": "<div class='dpr-child-report'><h3>Child Report</h3><table class='govuk-table'><thead class='govuk-table__head'><th scope='col' class='govuk-table__header'>Child Field 1</th><th scope='col' class='govuk-table__header'>Child Field 2</th></thead><tbody class='govuk-table__body'><tr class='govuk-table__row'><td class='govuk-table__cell govuk-table__cell--string '>Child one - Parent 6</td><td class='govuk-table__cell govuk-table__cell--string '>Other value</td></tr><tr class='govuk-table__row'><td class='govuk-table__cell govuk-table__cell--string '>Child two - Parent 6</td><td class='govuk-table__cell govuk-table__cell--string '>Other value</td></tr></tbody></table></div>",
              "colspan": 2
            }
          ],
          [
            {
              "colspan": 2,
              "html": "<h2>Section 1: Section 2, Section 2: Section 2.2 <span class='govuk-caption-m'>2 results</span></h2>"
            }
          ],
          [
            {
              "text": "Field 1",
              "classes": "govuk-table__header"
            },
            {
              "text": "Child key",
              "classes": "govuk-table__header"
            }
          ],
          [
            {
              "fieldName": "field1",
              "text": "Parent 7",
              "format": "string",
              "classes": ""
            },
            {
              "fieldName": "childKey",
              "text": "seven",
              "format": "string",
              "classes": ""
            }
          ],
          [
            {
              "format": "string",
              "html": "<div class='dpr-child-report'><h3>Child Report</h3><table class='govuk-table'><thead class='govuk-table__head'><th scope='col' class='govuk-table__header'>Child Field 1</th><th scope='col' class='govuk-table__header'>Child Field 2</th></thead><tbody class='govuk-table__body'><tr class='govuk-table__row'><td class='govuk-table__cell govuk-table__cell--string '>Child one - Parent 7</td><td class='govuk-table__cell govuk-table__cell--string '>Other value</td></tr><tr class='govuk-table__row'><td class='govuk-table__cell govuk-table__cell--string '>Child two - Parent 7</td><td class='govuk-table__cell govuk-table__cell--string '>Other value</td></tr></tbody></table></div>",
              "colspan": 2
            }
          ],
          [
            {
              "text": "Field 1",
              "classes": "govuk-table__header"
            },
            {
              "text": "Child key",
              "classes": "govuk-table__header"
            }
          ],
          [
            {
              "fieldName": "field1",
              "text": "Parent 8",
              "format": "string",
              "classes": ""
            },
            {
              "fieldName": "childKey",
              "text": "eight",
              "format": "string",
              "classes": ""
            }
          ],
          [
            {
              "format": "string",
              "html": "<div class='dpr-child-report'><h3>Child Report</h3><table class='govuk-table'><thead class='govuk-table__head'><th scope='col' class='govuk-table__header'>Child Field 1</th><th scope='col' class='govuk-table__header'>Child Field 2</th></thead><tbody class='govuk-table__body'><tr class='govuk-table__row'><td class='govuk-table__cell govuk-table__cell--string '>Child one - Parent 8</td><td class='govuk-table__cell govuk-table__cell--string '>Other value</td></tr><tr class='govuk-table__row'><td class='govuk-table__cell govuk-table__cell--string '>Child two - Parent 8</td><td class='govuk-table__cell govuk-table__cell--string '>Other value</td></tr></tbody></table></div>",
              "colspan": 2
            }
          ]
        ],
        "rowCount": 8,
        "colCount": 2
      }
    }
    %}
    
    {{ dprReportWrapper(data) }}