Report Examples Row-section-child report
This is an example report using the row-section-child template
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__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">
<span class="govuk-caption-l">C Test Report</span>
<h1 class="govuk-heading-l">
Sectioned Rows + child template
</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="/download/test-report-3/variantId-31/tblId_1749034042532/feedback?reportUrl=/async/report/test-report-3/variantId-31/request/tblId_1749034042532/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">
<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-0">Sectioned Rows + child 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-0">C Test 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-0">A report with sectioned rows and child report</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">04/06/2025, 11:47:24</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-0">Sectioned Rows + child 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-0">C Test 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-0">A report with sectioned rows and child report</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">04/06/2025, 11:47:24</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="dpr-report-interactive-actions">
</div>
</div>
</div>
<div class="report-template-container ">
<div class="dpr-report-totals">
<p class="govuk-body"></p>
</div>
<div class='dpr-table-container dpr-table-container--row-section-child'>
<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">
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th scope="col" class="govuk-table__header dpr-row-section-header"></th>
<th scope="col" class="govuk-table__header pr-row-section-header-value"></th>
</tr>
</thead>
<tbody class="govuk-table__body">
<tr class="govuk-table__row">
<td class="govuk-table__cell dpr-section-header" colspan="2">
<h2 class="govuk-heading-m">Data columns as rows</h2>
</td>
</tr>
<tr class="govuk-table__row">
<td class="govuk-table__cell dpr-section-header-spacer-bottom" colspan="2"></td>
</tr>
<tr class="govuk-table__row">
<td class="govuk-table__cell dpr-row-heading">Field One</td>
<td class="govuk-table__cell dpr-row-heading-data">Value 1</td>
</tr>
<tr class="govuk-table__row">
<td class="govuk-table__cell dpr-row-heading">Field Two</td>
<td class="govuk-table__cell dpr-row-heading-data">Value 2</td>
</tr>
<tr class="govuk-table__row">
<td class="govuk-table__cell dpr-section-header-spacer" colspan="2"></td>
</tr>
<tr class="govuk-table__row">
<td class="govuk-table__cell dpr-section-header" colspan="2">
<h2 class="govuk-heading-m">Child report</h2>
</td>
</tr>
<tr class="govuk-table__row">
<td class="govuk-table__cell dpr-section-header-spacer-bottom" colspan="2"></td>
</tr>
<tr class="govuk-table__row">
<td class="govuk-table__cell dpr-row-heading">Han Solo</td>
<td class="govuk-table__cell dpr-row-heading-data">Never tell me the odds.</td>
</tr>
<tr class="govuk-table__row">
<td class="govuk-table__cell dpr-row-heading">Master Yoda</td>
<td class="govuk-table__cell dpr-row-heading-data">Do or do not. There is no try</td>
</tr>
<tr class="govuk-table__row">
<td class="govuk-table__cell dpr-row-heading">Obi-wan Kenobi</td>
<td class="govuk-table__cell dpr-row-heading-data">Hello there</td>
</tr>
<tr class="govuk-table__row">
<td class="govuk-table__cell dpr-section-header-spacer" colspan="2"></td>
</tr>
<tr class="govuk-table__row">
<td class="govuk-table__cell dpr-section-header" colspan="2">
<h2 class="govuk-heading-m">Child report 2</h2>
</td>
</tr>
<tr class="govuk-table__row">
<td class="govuk-table__cell dpr-section-header-spacer-bottom" colspan="2"></td>
</tr>
<tr class="govuk-table__row">
<td class="govuk-table__cell dpr-row-heading">Homer Simpson</td>
<td class="govuk-table__cell dpr-row-heading-data">Doh!</td>
</tr>
<tr class="govuk-table__row">
<td class="govuk-table__cell dpr-row-heading">Mr Burns</td>
<td class="govuk-table__cell dpr-row-heading-data">Excellent!</td>
</tr>
<tr class="govuk-table__row">
<td class="govuk-table__cell dpr-row-heading">Ned Flanders</td>
<td class="govuk-table__cell dpr-row-heading-data">Hi-diddly-ho, neighborino</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 = {
"filterData": {
"filters": [],
"selectedFilters": []
},
"count": 100,
"csrfToken": "csrfToken",
"classification": "OFFICIAL",
"template": "row-section-child",
"loadType": "async",
"type": "report",
"actions": [
],
"canDownload": false,
"printable": true,
"reportName": "C Test Report",
"name": "Sectioned Rows + child template",
"description": "A report with sectioned rows and child report",
"requestedTimestamp": "04/06/2025, 11:47:24",
"reportId": "test-report-3",
"tableId": "tblId_1749034042532",
"id": "variantId-31",
"executionId": "exId_1749034042532",
"querySummary": [],
"requestUrl": {
"fullUrl": "http://localhost:3010/async/report/test-report-3/variantId-31/request",
"pathname": "/async/report/test-report-3/variantId-31/request",
"search": ""
},
"reportUrl": "/async/report/test-report-3/variantId-31/request/tblId_1749034042532/report",
"reportSearch": null,
"search": null,
"pathname": "/async/report/test-report-3/variantId-31/request/tblId_1749034042532/report",
"dataTable": [
{
"head": [
{
"text": "",
"classes": "dpr-row-section-header"
},
{
"text": "",
"classes": "pr-row-section-header-value"
}
],
"rows": [
[
{
"classes": "dpr-section-header",
"colspan": 2,
"html": "<h2 class=\"govuk-heading-m\">Data columns as rows</h2>"
}
],
[
{
"classes": "dpr-section-header-spacer-bottom",
"colspan": 2,
"text": ""
}
],
[
{
"text": "Field One",
"classes": "dpr-row-heading"
},
{
"text": "Value 1",
"classes": "dpr-row-heading-data"
}
],
[
{
"text": "Field Two",
"classes": "dpr-row-heading"
},
{
"text": "Value 2",
"classes": "dpr-row-heading-data"
}
],
[
{
"classes": "dpr-section-header-spacer",
"colspan": 2,
"text": ""
}
],
[
{
"classes": "dpr-section-header",
"colspan": 2,
"html": "<h2 class=\"govuk-heading-m\">Child report</h2>"
}
],
[
{
"classes": "dpr-section-header-spacer-bottom",
"colspan": 2,
"text": ""
}
],
[
{
"text": "Han Solo",
"classes": "dpr-row-heading"
},
{
"text": "Never tell me the odds.",
"classes": "dpr-row-heading-data"
}
],
[
{
"text": "Master Yoda",
"classes": "dpr-row-heading"
},
{
"text": "Do or do not. There is no try",
"classes": "dpr-row-heading-data"
}
],
[
{
"text": "Obi-wan Kenobi",
"classes": "dpr-row-heading"
},
{
"text": "Hello there",
"classes": "dpr-row-heading-data"
}
],
[
{
"classes": "dpr-section-header-spacer",
"colspan": 2,
"text": ""
}
],
[
{
"classes": "dpr-section-header",
"colspan": 2,
"html": "<h2 class=\"govuk-heading-m\">Child report 2</h2>"
}
],
[
{
"classes": "dpr-section-header-spacer-bottom",
"colspan": 2,
"text": ""
}
],
[
{
"text": "Homer Simpson",
"classes": "dpr-row-heading"
},
{
"text": "Doh!",
"classes": "dpr-row-heading-data"
}
],
[
{
"text": "Mr Burns",
"classes": "dpr-row-heading"
},
{
"text": "Excellent!",
"classes": "dpr-row-heading-data"
}
],
[
{
"text": "Ned Flanders",
"classes": "dpr-row-heading"
},
{
"text": "Hi-diddly-ho, neighborino",
"classes": "dpr-row-heading-data"
}
]
],
"rowCount": 1,
"colCount": 2
}
]
}
%}
{{ dprReportWrapper(data) }}