Example Reports List, with summaries

This is an example report using the list template, with summaries

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>
                  List - with summaries
                </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-list-summaries/tableId/tblId_1769506471246/form?reportUrl=/embedded/platform/dpr/view-report/async/report/report-template-examples/report-template-list-summaries/tblId_1769506471246/report&amp;reportSearch=%3Fcolumns%3Dfield1%26columns%3Dfield2%26columns%3Dfield3%26columns%3Dfield4" 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">List - with summaries</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: "list".</br> A report with summaries.</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>
    
                    </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">List - with summaries</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: "list".</br> A report with summaries.</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>
    
                  </tbody>
                </table>
              </div>
    
            </div>
    
            <div class="dpr-report-interactive-actions">
    
              <div class="dpr-columns-section-wrapper">
                <div class="dpr-columns-section-heading">
                  <p class="govuk-body"><strong>Columns</strong></p>
                </div>
    
                <div class="dpr-interactive-filters-accordion">
    
                  <div class="columns-section-button">
                    <details class="govuk-details">
                      <summary class="govuk-details__summary">
                        <span class="govuk-details__summary-text">
                          Show columns (4 of 7 shown)
                        </span>
                      </summary>
                      <div class="govuk-details__text">
    
                        <form data-dpr-module="columns" class="dpr-columns-form" method="post" action="./report/apply-columns">
                          <input type="hidden" name="_csrf" value="csrfToken">
                          <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="field2" checked>
                                    <label class="govuk-label govuk-checkboxes__label" for="columns-2">
                                      Field 2
                                    </label>
    
                                  </div>
    
                                  <div class="govuk-checkboxes__item">
                                    <input class="govuk-checkboxes__input" id="columns-3" name="columns" type="checkbox" value="field3" checked>
                                    <label class="govuk-label govuk-checkboxes__label" for="columns-3">
                                      Field 3
                                    </label>
    
                                  </div>
    
                                  <div class="govuk-checkboxes__item">
                                    <input class="govuk-checkboxes__input" id="columns-4" name="columns" type="checkbox" value="field4" checked>
                                    <label class="govuk-label govuk-checkboxes__label" for="columns-4">
                                      Field 4
                                    </label>
    
                                  </div>
    
                                  <div class="govuk-checkboxes__item">
                                    <input class="govuk-checkboxes__input" id="columns-5" name="columns" type="checkbox" value="field6">
                                    <label class="govuk-label govuk-checkboxes__label" for="columns-5">
                                      Field 6
                                    </label>
    
                                  </div>
    
                                  <div class="govuk-checkboxes__item">
                                    <input class="govuk-checkboxes__input" id="columns-6" name="columns" type="checkbox" value="section1">
                                    <label class="govuk-label govuk-checkboxes__label" for="columns-6">
                                      First
                                    </label>
    
                                  </div>
    
                                  <div class="govuk-checkboxes__item">
                                    <input class="govuk-checkboxes__input" id="columns-7" name="columns" type="checkbox" value="section2">
                                    <label class="govuk-label govuk-checkboxes__label" for="columns-7">
                                      Second
                                    </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>
          </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 class="dpr-summary-container-group dpr-summary-container-group-page-header">
    
                <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">Total</th>
    
                      </tr>
                    </thead>
    
                    <tbody class="govuk-table__body">
    
                      <tr class="govuk-table__row">
    
                        <td class="govuk-table__cell govuk-table__cell--numeric">52</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">Other Total</th>
    
                      </tr>
                    </thead>
    
                    <tbody class="govuk-table__body">
    
                      <tr class="govuk-table__row">
    
                        <td class="govuk-table__cell govuk-table__cell--numeric">52</td>
    
                      </tr>
    
                    </tbody>
                  </table>
    
                </div>
    
              </div>
    
            </div>
    
            <div class="dpr-report-template__page-totals dpr-report-template__page-totals--header">
    
              <div class="dpr-report-totals">
                <p class="govuk-body">Showing <strong>1</strong> to <strong>20</strong> of <strong>100</strong> results</p>
              </div>
    
            </div>
    
            <div class='dpr-report-template__sections dpr-report-template__sections--list'>
    
              <div id="dpr-report-sections">
    
                <div id="dpr-list-section-1" class="dpr-list-section dpr-report-section">
    
                  <div id="dpr-list-section-data-1" class="dpr-list-section__data">
    
                    <div id="table-container-1" class='dpr-table-container dpr-table-container--list' data-dpr-module="data-table" aria-labelledby="dpr-report-name">
                      <div class="dpr-overflow-gradient" id="dpr-overflow-gradient-1"></div>
                      <div class="dpr-table-wrapper" id="dpr-table-wrapper-1">
                        <div class="dpr-table-content">
                          <table class="govuk-table dpr-data-table" id="dpr-data-table-1" data-classification="OFFICIAL" data-col-length="4">
    
                            <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--numeric dpr-report-summary-cell dpr-report-summary-cell-table-header">57</td>
    
                                <td class="govuk-table__cell govuk-table__cell--numeric dpr-report-summary-cell dpr-report-summary-cell-table-header">1</td>
    
                                <td class="govuk-table__cell govuk-table__cell--numeric dpr-report-summary-cell dpr-report-summary-cell-table-header"></td>
    
                                <td class="govuk-table__cell govuk-table__cell--string dpr-report-summary-cell dpr-report-summary-cell-table-header">3 Freds</td>
    
                              </tr>
    
                              <tr class="govuk-table__row">
    
                                <td class="govuk-table__cell govuk-table__cell--string">Value 1</td>
    
                                <td class="govuk-table__cell govuk-table__cell--string">Value 2</td>
    
                                <td class="govuk-table__cell govuk-table__cell--string">01/02/03 01:00</td>
    
                                <td class="govuk-table__cell govuk-table__cell--string">Value 4</td>
    
                              </tr>
    
                              <tr class="govuk-table__row">
    
                                <td class="govuk-table__cell govuk-table__cell--string">Value 1</td>
    
                                <td class="govuk-table__cell govuk-table__cell--string">Value 2</td>
    
                                <td class="govuk-table__cell govuk-table__cell--string">01/02/03 01:00</td>
    
                                <td class="govuk-table__cell govuk-table__cell--string">Value 4</td>
    
                              </tr>
    
                              <tr class="govuk-table__row">
    
                                <td class="govuk-table__cell govuk-table__cell--string">Value 1</td>
    
                                <td class="govuk-table__cell govuk-table__cell--string">Value 2</td>
    
                                <td class="govuk-table__cell govuk-table__cell--string">01/02/03 01:00</td>
    
                                <td class="govuk-table__cell govuk-table__cell--string">Value 4</td>
    
                              </tr>
    
                              <tr class="govuk-table__row">
    
                                <td class="govuk-table__cell govuk-table__cell--string">Value 1</td>
    
                                <td class="govuk-table__cell govuk-table__cell--string">Value 2</td>
    
                                <td class="govuk-table__cell govuk-table__cell--string">01/02/03 01:00</td>
    
                                <td class="govuk-table__cell govuk-table__cell--string">Value 4</td>
    
                              </tr>
    
                            </tbody>
                          </table>
    
                        </div>
                      </div>
                    </div>
    
                  </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">Showing <strong>1</strong> to <strong>20</strong> of <strong>100</strong> results</p>
              </div>
    
            </div>
    
            <div class="dpr-report-template__page-summaries dpr-report-template__page-summaries--footer">
    
              <div class="dpr-summary-container-group dpr-summary-container-group-page-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">Good (%)</th>
    
                        <th scope="col" class="govuk-table__header">Bad (%)</th>
    
                        <th scope="col" class="govuk-table__header">Ugly (%)</th>
    
                      </tr>
                    </thead>
    
                    <tbody class="govuk-table__body">
    
                      <tr class="govuk-table__row">
    
                        <td class="govuk-table__cell govuk-table__cell--numeric">1</td>
    
                        <td class="govuk-table__cell govuk-table__cell--numeric">10</td>
    
                        <td class="govuk-table__cell govuk-table__cell--numeric">89</td>
    
                      </tr>
    
                    </tbody>
                  </table>
    
                </div>
    
              </div>
    
            </div>
    
            <div class="dpr-report-template__pagination">
    
              <div class="dpr-pagination">
                <div class="govuk-grid-column-three-quarters govuk-!-padding-left-0">
                  <nav class="govuk-pagination" aria-label="Pagination">
    
                    <ul class="govuk-pagination__list">
    
                      <li class="govuk-pagination__item govuk-pagination__item--current">
    
                        <a class="govuk-link govuk-pagination__link" href="/embedded/platform/dpr/view-report/async/report/report-template-examples/report-template-list-summaries/tblId_1769506471246/report?columns=field1&amp;columns=field2&amp;columns=field3&amp;columns=field4&amp;selectedPage=1" aria-label="Page 1" aria-current="page">
                          1
                        </a>
    
                      </li>
    
                      <li class="govuk-pagination__item">
    
                        <a class="govuk-link govuk-pagination__link" href="/embedded/platform/dpr/view-report/async/report/report-template-examples/report-template-list-summaries/tblId_1769506471246/report?columns=field1&amp;columns=field2&amp;columns=field3&amp;columns=field4&amp;selectedPage=2" aria-label="Page 2">
                          2
                        </a>
    
                      </li>
    
                      <li class="govuk-pagination__item govuk-pagination__item--ellipsis">
    
                        &ctdot;
    
                      </li>
    
                      <li class="govuk-pagination__item">
    
                        <a class="govuk-link govuk-pagination__link" href="/embedded/platform/dpr/view-report/async/report/report-template-examples/report-template-list-summaries/tblId_1769506471246/report?columns=field1&amp;columns=field2&amp;columns=field3&amp;columns=field4&amp;selectedPage=5" aria-label="Page 5">
                          5
                        </a>
    
                      </li>
    
                    </ul>
    
                    <div class="govuk-pagination__next">
                      <a class="govuk-link govuk-pagination__link" href="/embedded/platform/dpr/view-report/async/report/report-template-examples/report-template-list-summaries/tblId_1769506471246/report?columns=field1&amp;columns=field2&amp;columns=field3&amp;columns=field4&amp;selectedPage=2" rel="next">
    
                        <span class="govuk-pagination__link-title">
                          Next<span class="govuk-visually-hidden"> page</span>
                        </span>
    
                        <svg class="govuk-pagination__icon govuk-pagination__icon--next" xmlns="http://www.w3.org/2000/svg" height="13" width="15" aria-hidden="true" focusable="false" viewBox="0 0 15 13">
                          <path d="m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z"></path>
                        </svg>
    
                      </a>
                    </div>
    
                  </nav>
    
                </div>
    
                <div class="govuk-grid-column-one-quarter govuk-!-padding-0 data-table-page-size-container">
                  <div class="data-table-page-size">
                    <div class="govuk-input__wrapper">
                      <form id="pagination-page-size-form" data-dpr-module="pagination">
    
                        <div class="govuk-form-group">
    
                          <select class="govuk-select" id="page-size-select" name="pageSize" aria-label="Page size">
    
                            <option value="10">10</option>
    
                            <option value="20" selected>20</option>
    
                            <option value="100">100</option>
    
                            <option value="200">200</option>
    
                            <option value="100">All</option>
    
                          </select>
    
                        </div>
    
                      </form>
                      <div class="govuk-input__suffix drp-pagination-rows-suffix" aria-hidden="true">
                        rows per page
                      </div>
                    </div>
                  </div>
                </div>
              </div>
    
            </div>
    
          </div>
    
        </div>
    
      </div>
    </div>
    

    
    {%- from "dpr/components/_reports/report-page/view.njk" import dprReportPage -%}
    
    {% set data = {
      columns: {
        name: 'columns',
        options: [
          {
            text: 'Field 1',
            value: 'field1',
            disabled: false
          },
          {
            text: 'Field 2',
            value: 'field2',
            disabled: false
          },
          {
            text: 'Field 3',
            value: 'field3',
            disabled: false
          },
          {
            text: 'Field 4',
            value: 'field4'
          },
          {
            text: 'Field 6',
            value: 'field6',
            disabled: false
          },
          {
            text: 'First',
            value: 'section1',
            disabled: false
          },
          {
            text: 'Second',
            value: 'section2',
            disabled: false
          }
        ],
        text: 'Select report columns',
        value: ['field1', 'field2', 'field3', 'field4']
      },
      filterData: {
        filters: [],
        selectedFilters: [],
        canSaveDefaults: true
      },
      count: 100,
      nestedBaseUrl: '/embedded/platform',
      csrfToken: 'csrfToken',
      loadType: 'async',
      type: 'report',
      tableId: 'tblId_1769506471246',
      reportId: 'report-template-examples',
      id: 'report-template-list-summaries',
      actions: [],
      canDownload: false,
      reportName: 'Report templates',
      name: 'List - with summaries',
      description: 'Template: "list".</br> A report with summaries.',
      classification: 'OFFICIAL',
      printable: true,
      specification: {
        template: 'list',
        fields: [
          {
            name: 'field1',
            display: 'Field 1',
            sortable: true,
            defaultsort: true,
            type: 'string',
            mandatory: false,
            visible: true,
            filter: {
              type: 'Radio',
              staticOptions: [
                {
                  name: 'value1.1',
                  display: 'Value 1.1'
                },
                {
                  name: 'value1.2',
                  display: 'Value 1.2'
                },
                {
                  name: 'value1.3',
                  display: 'Value 1.3'
                }
              ],
              mandatory: false
            }
          },
          {
            name: 'field2',
            display: 'Field 2',
            sortable: true,
            type: 'string',
            mandatory: false,
            visible: true,
            filter: {
              type: 'Select',
              staticOptions: [
                {
                  name: 'value2.1',
                  display: 'Value 2.1'
                },
                {
                  name: 'value2.2',
                  display: 'Value 2.2'
                },
                {
                  name: 'value2.3',
                  display: 'Value 2.3'
                }
              ],
              mandatory: false
            }
          },
          {
            name: 'field3',
            display: 'Field 3',
            sortable: false,
            type: 'date',
            mandatory: false,
            visible: true,
            filter: {
              type: 'daterange',
              min: '2003-02-01',
              max: '2007-05-04',
              mandatory: false
            }
          },
          {
            name: 'field4',
            display: 'Field 4',
            sortable: false,
            type: 'string',
            visible: true,
            filter: {
              type: 'autocomplete',
              dynamicOptions: {
                minimumLength: 3,
                returnAsStaticOptions: true
              },
              staticOptions: [
                {
                  name: 'Fezzick',
                  display: 'Fezzick'
                },
                {
                  name: 'Inigo Montoya',
                  display: 'Inigo Montoya'
                },
                {
                  name: 'Prince Humperdink',
                  display: 'Prince Humperdink'
                },
                {
                  name: 'Princess Buttercup',
                  display: 'Princess Buttercup'
                },
                {
                  name: 'Westley',
                  display: 'Westley'
                }
              ],
              mandatory: false,
              pattern: '(?!Invalid).+'
            }
          },
          {
            name: 'field6',
            display: 'Field 6',
            sortable: false,
            type: 'string',
            mandatory: false,
            filter: {
              type: 'text',
              pattern: 'Value 6\\.\\d',
              mandatory: false
            }
          },
          {
            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: 'list',
      fields: [
        {
          name: 'field1',
          display: 'Field 1',
          sortable: true,
          defaultsort: true,
          type: 'string',
          mandatory: false,
          visible: true,
          filter: {
            type: 'Radio',
            staticOptions: [
              {
                name: 'value1.1',
                display: 'Value 1.1'
              },
              {
                name: 'value1.2',
                display: 'Value 1.2'
              },
              {
                name: 'value1.3',
                display: 'Value 1.3'
              }
            ],
            mandatory: false
          }
        },
        {
          name: 'field2',
          display: 'Field 2',
          sortable: true,
          type: 'string',
          mandatory: false,
          visible: true,
          filter: {
            type: 'Select',
            staticOptions: [
              {
                name: 'value2.1',
                display: 'Value 2.1'
              },
              {
                name: 'value2.2',
                display: 'Value 2.2'
              },
              {
                name: 'value2.3',
                display: 'Value 2.3'
              }
            ],
            mandatory: false
          }
        },
        {
          name: 'field3',
          display: 'Field 3',
          sortable: false,
          type: 'date',
          mandatory: false,
          visible: true,
          filter: {
            type: 'daterange',
            min: '2003-02-01',
            max: '2007-05-04',
            mandatory: false
          }
        },
        {
          name: 'field4',
          display: 'Field 4',
          sortable: false,
          type: 'string',
          visible: true,
          filter: {
            type: 'autocomplete',
            dynamicOptions: {
              minimumLength: 3,
              returnAsStaticOptions: true
            },
            staticOptions: [
              {
                name: 'Fezzick',
                display: 'Fezzick'
              },
              {
                name: 'Inigo Montoya',
                display: 'Inigo Montoya'
              },
              {
                name: 'Prince Humperdink',
                display: 'Prince Humperdink'
              },
              {
                name: 'Princess Buttercup',
                display: 'Princess Buttercup'
              },
              {
                name: 'Westley',
                display: 'Westley'
              }
            ],
            mandatory: false,
            pattern: '(?!Invalid).+'
          }
        },
        {
          name: 'field6',
          display: 'Field 6',
          sortable: false,
          type: 'string',
          mandatory: false,
          filter: {
            type: 'text',
            pattern: 'Value 6\\.\\d',
            mandatory: false
          }
        },
        {
          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
        }
      ],
      reportUrl:
        '/embedded/platform/dpr/view-report/async/report/report-template-examples/report-template-list-summaries/tblId_1769506471246/report',
      reportSearch: '?columns=field1&columns=field2&columns=field3&columns=field4',
      encodedSearch: '%3Fcolumns%3Dfield1%26columns%3Dfield2%26columns%3Dfield3%26columns%3Dfield4',
      pathname:
        '/embedded/platform/dpr/view-report/async/report/report-template-examples/report-template-list-summaries/tblId_1769506471246/report',
      pagination: {
        next: '/embedded/platform/dpr/view-report/async/report/report-template-examples/report-template-list-summaries/tblId_1769506471246/report?columns=field1&columns=field2&columns=field3&columns=field4&selectedPage=2',
        pages: [
          {
            number: 1,
            href: '/embedded/platform/dpr/view-report/async/report/report-template-examples/report-template-list-summaries/tblId_1769506471246/report?columns=field1&columns=field2&columns=field3&columns=field4&selectedPage=1',
            current: true
          },
          {
            number: 2,
            href: '/embedded/platform/dpr/view-report/async/report/report-template-examples/report-template-list-summaries/tblId_1769506471246/report?columns=field1&columns=field2&columns=field3&columns=field4&selectedPage=2',
            current: false
          },
          {
            ellipsis: true
          },
          {
            number: 5,
            href: '/embedded/platform/dpr/view-report/async/report/report-template-examples/report-template-list-summaries/tblId_1769506471246/report?columns=field1&columns=field2&columns=field3&columns=field4&selectedPage=5',
            current: false
          }
        ],
        pageSize: 20,
        currentPage: 1,
        totalRows: 100,
        sizes: [
          {
            value: 10,
            text: '10'
          },
          {
            value: 20,
            text: '20'
          },
          {
            value: 100,
            text: '100'
          },
          {
            value: 200,
            text: '200'
          },
          {
            value: 100,
            text: 'All'
          }
        ]
      },
      totals: 'Showing <strong>1</strong> to <strong>20</strong> of <strong>100</strong> results',
      dataTable: {
        rowCount: 20,
        summaries: {
          'page-header': [
            {
              head: [
                {
                  text: 'Total'
                }
              ],
              rows: [
                [
                  {
                    fieldName: 'total',
                    text: 52,
                    format: 'numeric',
                    classes: ''
                  }
                ]
              ],
              rowCount: 1,
              colCount: 1
            },
            {
              head: [
                {
                  text: 'Other Total'
                }
              ],
              rows: [
                [
                  {
                    fieldName: 'total',
                    text: 52,
                    format: 'numeric',
                    classes: ''
                  }
                ]
              ],
              rowCount: 1,
              colCount: 1
            }
          ],
          'page-footer': [
            {
              head: [
                {
                  text: 'Good (%)'
                },
                {
                  text: 'Bad (%)'
                },
                {
                  text: 'Ugly (%)'
                }
              ],
              rows: [
                [
                  {
                    fieldName: 'percentGood',
                    text: 1,
                    format: 'numeric',
                    classes: ''
                  },
                  {
                    fieldName: 'percentBad',
                    text: 10,
                    format: 'numeric',
                    classes: ''
                  },
                  {
                    fieldName: 'percentUgly',
                    text: 89,
                    format: 'numeric',
                    classes: ''
                  }
                ]
              ],
              rowCount: 1,
              colCount: 3
            }
          ]
        },
        sections: [
          {
            key: '',
            keyObj: [],
            data: {
              head: [
                {
                  text: 'Field 1'
                },
                {
                  text: 'Field 2'
                },
                {
                  text: 'Field 3'
                },
                {
                  text: 'Field 4'
                }
              ],
              rows: [
                [
                  {
                    fieldName: 'field1',
                    text: 57,
                    format: 'numeric',
                    classes: 'dpr-report-summary-cell dpr-report-summary-cell-table-header'
                  },
                  {
                    fieldName: 'field2',
                    text: 1,
                    format: 'numeric',
                    classes: 'dpr-report-summary-cell dpr-report-summary-cell-table-header'
                  },
                  {
                    fieldName: 'field3',
                    format: 'numeric',
                    classes: 'dpr-report-summary-cell dpr-report-summary-cell-table-header'
                  },
                  {
                    fieldName: 'field4',
                    text: '3 Freds',
                    format: 'string',
                    classes: 'dpr-report-summary-cell dpr-report-summary-cell-table-header'
                  }
                ],
                [
                  {
                    fieldName: 'field1',
                    text: 'Value 1',
                    format: 'string',
                    classes: ''
                  },
                  {
                    fieldName: 'field2',
                    text: 'Value 2',
                    format: 'string',
                    classes: ''
                  },
                  {
                    fieldName: 'field3',
                    text: '01/02/03 01:00',
                    format: 'string',
                    classes: ''
                  },
                  {
                    fieldName: 'field4',
                    text: 'Value 4',
                    format: 'string',
                    classes: ''
                  }
                ],
                [
                  {
                    fieldName: 'field1',
                    text: 'Value 1',
                    format: 'string',
                    classes: ''
                  },
                  {
                    fieldName: 'field2',
                    text: 'Value 2',
                    format: 'string',
                    classes: ''
                  },
                  {
                    fieldName: 'field3',
                    text: '01/02/03 01:00',
                    format: 'string',
                    classes: ''
                  },
                  {
                    fieldName: 'field4',
                    text: 'Value 4',
                    format: 'string',
                    classes: ''
                  }
                ],
                [
                  {
                    fieldName: 'field1',
                    text: 'Value 1',
                    format: 'string',
                    classes: ''
                  },
                  {
                    fieldName: 'field2',
                    text: 'Value 2',
                    format: 'string',
                    classes: ''
                  },
                  {
                    fieldName: 'field3',
                    text: '01/02/03 01:00',
                    format: 'string',
                    classes: ''
                  },
                  {
                    fieldName: 'field4',
                    text: 'Value 4',
                    format: 'string',
                    classes: ''
                  }
                ],
                [
                  {
                    fieldName: 'field1',
                    text: 'Value 1',
                    format: 'string',
                    classes: ''
                  },
                  {
                    fieldName: 'field2',
                    text: 'Value 2',
                    format: 'string',
                    classes: ''
                  },
                  {
                    fieldName: 'field3',
                    text: '01/02/03 01:00',
                    format: 'string',
                    classes: ''
                  },
                  {
                    fieldName: 'field4',
                    text: 'Value 4',
                    format: 'string',
                    classes: ''
                  }
                ]
              ],
              rowCount: 20,
              colCount: 4
            },
            count: 20,
            summaries: {
              'table-header': [
                {
                  head: [
                    {
                      text: 'Field 1'
                    },
                    {
                      text: 'Field 2'
                    },
                    {
                      text: 'Field 3'
                    },
                    {
                      text: 'Field 4'
                    }
                  ],
                  rows: [
                    [
                      {
                        fieldName: 'field1',
                        text: 57,
                        format: 'numeric',
                        classes: ''
                      },
                      {
                        fieldName: 'field2',
                        text: 1,
                        format: 'numeric',
                        classes: ''
                      },
                      {
                        fieldName: 'field1',
                        text: 57,
                        format: 'numeric',
                        classes: ''
                      },
                      {
                        fieldName: 'field4',
                        text: '3 Freds',
                        format: 'string',
                        classes: ''
                      }
                    ]
                  ],
                  rowCount: 1,
                  colCount: 4
                }
              ],
              'table-footer': [
                {
                  head: [
                    {
                      text: 'Field 1'
                    },
                    {
                      text: 'Field 2'
                    },
                    {
                      text: 'Field 3'
                    },
                    {
                      text: 'Field 4'
                    }
                  ],
                  rows: [
                    [
                      {
                        fieldName: 'field1',
                        text: 57,
                        format: 'numeric',
                        classes: ''
                      },
                      {
                        fieldName: 'field2',
                        text: 1,
                        format: 'numeric',
                        classes: ''
                      },
                      {
                        fieldName: 'field1',
                        text: 57,
                        format: 'numeric',
                        classes: ''
                      },
                      {
                        fieldName: 'field4',
                        text: '3 Freds',
                        format: 'string',
                        classes: ''
                      }
                    ]
                  ],
                  rowCount: 1,
                  colCount: 4
                }
              ]
            }
          }
        ]
      }
    } %}
    
    {{ dprReportPage(data) }}