carbon-components/src/components/data-table-v2/data-table-v2.hbs

<!--
  Copyright IBM Corp. 2016, 2018

  This source code is licensed under the Apache-2.0 license found in the
  LICENSE file in the root directory of this source tree.
-->
{{#if (not componentsX)}}
  {{#if hasToolbar}}
  <div class="{{@root.prefix}}--data-table-v2-container" data-table-v2>
    <h4 class="{{@root.prefix}}--data-table-v2-header">{{title}}</h4>
    <section class="{{@root.prefix}}--table-toolbar">
      {{#if batchActions}}
        <div class="{{@root.prefix}}--batch-actions" aria-label="Table Action Bar">
          <div class="{{@root.prefix}}--action-list">
            {{#each batchActions}}
              <button class="{{@root.prefix}}--btn {{@root.prefix}}--btn--sm {{@root.prefix}}--btn--ghost" type="button">
                {{label}}
                {{{icon}}}
              </button>
            {{/each}}
          </div>
          <div class="{{@root.prefix}}--batch-summary">
            <p class="{{@root.prefix}}--batch-summary__para">{{{selectedItemsCounterLabel}}}</p>
            <button data-event="action-bar-cancel" class="{{@root.prefix}}--batch-summary__cancel">{{cancelLabel}}</button>
          </div>
        </div>
      {{/if}}

      <div class="{{@root.prefix}}--toolbar-search-container">
        <div data-search class="{{@root.prefix}}--search {{@root.prefix}}--search--sm {{@root.prefix}}--search--light" role="search">
          <svg class="{{@root.prefix}}--search-magnifier" width="16" height="16" viewBox="0 0 16 16">
            <path d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm4.936-1.27l4.563 4.557-.707.708-4.563-4.558a6.5 6.5 0 1 1 .707-.707z"
              fill-rule="nonzero" />
          </svg>
          <label id="{{searchLabelId}}" class="{{@root.prefix}}--label" for="{{searchInputId}}">{{searchLabel}}</label>
          <input class="{{@root.prefix}}--search-input" type="text" id="{{searchInputId}}" role="search" placeholder="{{searchLabel}}" aria-labelledby="{{searchLabelId}}">
          <button class="{{@root.prefix}}--search-close {{@root.prefix}}--search-close--hidden" title="{{clearSearchLabel}}" aria-label="{{clearSearchLabel}}">
            <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
              <path d="M8 6.586L5.879 4.464 4.464 5.88 6.586 8l-2.122 2.121 1.415 1.415L8 9.414l2.121 2.122 1.415-1.415L9.414 8l2.122-2.121-1.415-1.415L8 6.586zM8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"
                fill-rule="evenodd" />
            </svg>
          </button>
        </div>
      </div>

      {{#if toolbarActions}}
        <div class="{{@root.prefix}}--toolbar-content">
          {{#each toolbarActions}}
            <button class="{{@root.prefix}}--toolbar-action">
              {{{icon}}}
            </button>
          {{/each}}

          <button class="{{@root.prefix}}--btn {{@root.prefix}}--btn--sm {{@root.prefix}}--btn--primary">{{addNewLabel}}</button>
        </div>
      {{/if}}
    </section>
  {{/if}}

  <table class="{{@root.prefix}}--data-table-v2{{#if zebra}} {{@root.prefix}}--data-table-v2--zebra{{/if}}{{#if small}} {{@root.prefix}}--data-table-v2--compact{{/if}}">
    <thead>
      <tr>
        {{#each columns}}
          <th>
            {{#if checkbox}}
              <input data-event="select-all" id="{{checkboxId}}" class="{{@root.prefix}}--checkbox" type="checkbox" value="{{checkboxValue}}" name="{{checkboxName}}">
              <label for="{{checkboxId}}" class="{{@root.prefix}}--checkbox-label" aria-label="{{title}}"></label>
            {{else if (not menu)}}
              {{#if sortable}}
                <button class="{{@root.prefix}}--table-sort-v2" data-event="sort">
                  <span class="{{@root.prefix}}--table-header-label">{{title}}</span>
                  <svg class="{{@root.prefix}}--table-sort-v2__icon" width="10" height="5" viewBox="0 0 10 5" aria-label="{{../sortLabel}}" alt="{{../sortLabel}}">
                    <title>{{../sortLabel}}</title>
                    <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
                  </svg>
                </button>
              {{else if small}}
                {{title}}
              {{else}}
                <span class="{{@root.prefix}}--table-header-label">{{title}}</span>
              {{/if}}
            {{/if}}
          </th>
        {{/each}}
      </tr>
    </thead>
    <tbody>
      {{#each rows as |row|}}
        <tr{{#if row.sectionContent}} class="{{@root.prefix}}--parent-row-v2" data-parent-row{{/if}}>
          {{#each ../columns as |column|}}
            {{#with (lookup row column.name) as |data|}}
              {{#if column.section}}
                <td class="{{@root.prefix}}--table-expand-v2" data-event="expand">
                  <button class="{{@root.prefix}}--table-expand-v2__button">
                    <svg class="{{@root.prefix}}--table-expand-v2__svg" width="7" height="12" viewBox="0 0 7 12">
                      <path fill-rule="nonzero" d="M5.569 5.994L0 .726.687 0l6.336 5.994-6.335 6.002L0 11.27z" />
                    </svg>
                  </button>
                </td>
              {{else if column.checkbox}}
                <td>
                  <input data-event="select" id="{{data.id}}" class="{{@root.prefix}}--checkbox" type="checkbox" value="{{data.value}}" name="{{data.name}}">
                  <label for="{{data.id}}" class="{{@root.prefix}}--checkbox-label" aria-label="{{data.label}}"></label>
                </td>
              {{else if column.menu}}
                <td class="{{@root.prefix}}--table-overflow">
                  <div data-overflow-menu tabindex="0" aria-label="{{data.label}}" class="{{@root.prefix}}--overflow-menu">
                    <svg class="{{@root.prefix}}--overflow-menu__icon" width="3" height="15" viewBox="0 0 3 15">
                      <g fill-rule="evenodd">
                        <circle cx="1.5" cy="1.5" r="1.5" />
                        <circle cx="1.5" cy="7.5" r="1.5" />
                        <circle cx="1.5" cy="13.5" r="1.5" />
                      </g>
                    </svg>
                    <ul class="{{@root.prefix}}--overflow-menu-options{{#if data.flip}} {{@root.prefix}}--overflow-menu--flip{{/if}}">
                      {{#each data.items}}
                        <li class="{{@root.prefix}}--overflow-menu-options__option{{#if danger}} {{@root.prefix}}--overflow-menu-options__option--danger{{/if}}">
                          <button class="{{@root.prefix}}--overflow-menu-options__btn" onclick="console.log('keyboard action')">{{label}}</button>
                        </li>
                      {{/each}}
                    </ul>
                  </div>
                </td>
              {{else if (and row.editable column.editing)}}
                <td class="{{@root.prefix}}--data-table-cell--editable {{@root.prefix}}--data-table-cell--editing">
                  <div class="{{@root.prefix}}--data-table__edit-field">
                    <label class="{{@root.prefix}}--label" for="edit-cell:{{row.id}}:{{column.name}}">Edit Name: {{data}}</label>
                    <input type="text" class="{{@root.prefix}}--text-input" id="edit-cell:{{row.id}}:{{column.name}}" value="{{data}}">
                  </div>
                  <div class="{{@root.prefix}}--data-table__edit-actions">
                    <button class="{{@root.prefix}}--btn {{@root.prefix}}--btn--secondary {{@root.prefix}}--btn--sm">{{../../../cancelLabel}}</button>
                    <button class="{{@root.prefix}}--btn {{@root.prefix}}--btn--primary {{@root.prefix}}--btn--sm">{{../../../saveLabel}}</button>
                  </div>
                </td>
              {{else if column.editable}}
                <td class="{{@root.prefix}}--data-table-cell--editable"><span class="{{@root.prefix}}--data-table-cell__content">{{data}}</span></td>
              {{else}}
                <td>{{data}}</td>
              {{/if}}
            {{/with}}
          {{/each}}
        </tr>
        {{#if row.sectionContent}}
          <tr class="{{@root.prefix}}--expandable-row-v2 {{@root.prefix}}--expandable-row--hidden-v2" data-child-row>
            <td colspan="{{../columns.length}}">
              {{{row.sectionContent}}}
            </td>
          </tr>
        {{/if}}
      {{/each}}
    </tbody>
  </table>

  {{#if (not small)}}</div>{{/if}}
  {{#if hasPager}}
    <div class="{{@root.prefix}}--pagination" data-pagination>
      <div class="{{@root.prefix}}--pagination__left">
        <span class="{{@root.prefix}}--pagination__text">Items per page:</span>
        <div class="{{@root.prefix}}--select {{@root.prefix}}--select--inline">
          <label for="select-id-pagination" class="{{@root.prefix}}--visually-hidden">Number of items per page</label>
          <select id="select-id-pagination" class="{{@root.prefix}}--select-input" data-items-per-page>
            <option class="{{@root.prefix}}--select-option" value="10" selected>10</option>
            <option class="{{@root.prefix}}--select-option" value="20">20</option>
            <option class="{{@root.prefix}}--select-option" value="30">30</option>
            <option class="{{@root.prefix}}--select-option" value="40">40</option>
            <option class="{{@root.prefix}}--select-option" value="50">50</option>
          </select>
          <svg class="{{@root.prefix}}--select__arrow" width="10" height="5" viewBox="0 0 10 5">
            <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
          </svg>
        </div>
        <span class="{{@root.prefix}}--pagination__text">
          <span>|&nbsp;</span>
          <span data-displayed-item-range>1-10</span> of
          <span data-total-items>40</span> items</span>
      </div>
      <div class="{{@root.prefix}}--pagination__right {{@root.prefix}}--pagination--inline">
        <span class="{{@root.prefix}}--pagination__text">
          <span data-displayed-page-number>1</span> of
          <span data-total-pages>4</span> pages</span>
        <button class="{{@root.prefix}}--pagination__button {{@root.prefix}}--pagination__button--backward" data-page-backward aria-label="Backward button">
          <svg class="{{@root.prefix}}--pagination__button-icon" width="7" height="12" viewBox="0 0 7 12">
            <path fill-rule="nonzero" d="M1.45 6.002L7 11.27l-.685.726L0 6.003 6.315 0 7 .726z" />
          </svg>
        </button>
        <label for="page-number-input" class="{{@root.prefix}}--visually-hidden">Page number input</label>
        <div class="{{@root.prefix}}--select {{@root.prefix}}--select--inline">
          <label for="select-id-pagination" class="{{@root.prefix}}--visually-hidden">Number of items per page</label>
          <select id="select-id-pagination" class="{{@root.prefix}}--select-input" data-page-number-input>
            <option class="{{@root.prefix}}--select-option" value="1" selected>1</option>
            <option class="{{@root.prefix}}--select-option" value="2">2</option>
            <option class="{{@root.prefix}}--select-option" value="3">3</option>
            <option class="{{@root.prefix}}--select-option" value="4">4</option>
            <option class="{{@root.prefix}}--select-option" value="5">5</option>
          </select>
          <svg class="{{@root.prefix}}--select__arrow" width="10" height="5" viewBox="0 0 10 5">
            <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
          </svg>
        </div>
        <button class="{{@root.prefix}}--pagination__button {{@root.prefix}}--pagination__button--forward" data-page-forward aria-label="Forward button">
          <svg class="{{@root.prefix}}--pagination__button-icon" width="7" height="12" viewBox="0 0 7 12">
            <path fill-rule="nonzero" d="M5.569 5.994L0 .726.687 0l6.336 5.994-6.335 6.002L0 11.27z" />
          </svg>
        </button>
      </div>
    </div>
  {{/if}}
{{/if}}

<!-- v10 Data Table -->
{{#if componentsX}}
  {{#if hasToolbar}}
  <div class="{{@root.prefix}}--data-table-container {{#if sticky}}{{@root.prefix}}--data-table--max-width{{/if}}" data-table>
    <div class="{{@root.prefix}}--data-table-header">
      <h4 class="{{@root.prefix}}--data-table-header__title">{{title}}</h4>
      <p class="{{@root.prefix}}--data-table-header__description">{{optionalHelper}}</p>
    </div>
    <!-- Toolbar Content -->
    <section class="{{@root.prefix}}--table-toolbar {{#if small}} {{@root.prefix}}--table-toolbar--small {{/if}}">
      {{#if batchActions}}
      <!-- Batch actions -->
      <div class="{{@root.prefix}}--batch-actions" aria-label="Table Action Bar">
          <div class="{{@root.prefix}}--action-list">
            <button class="{{@root.prefix}}--btn {{@root.prefix}}--btn--primary" type="button">
              Delete
              {{ carbon-icon 'Delete16' class=(add @root.prefix '--btn__icon')}}
            </button>
            <button class="{{@root.prefix}}--btn {{@root.prefix}}--btn--primary" type="button">
              Save
              {{ carbon-icon 'Save16' class=(add @root.prefix '--btn__icon')}}
            </button>
            <button class="{{@root.prefix}}--btn {{@root.prefix}}--btn--primary" type="button">
              Download
              {{ carbon-icon 'Download16' class=(add @root.prefix '--btn__icon')}}
            </button>
            <button data-event="action-bar-cancel" class="{{@root.prefix}}--btn {{@root.prefix}}--btn--primary {{@root.prefix}}--batch-summary__cancel">{{cancelLabel}}</button>
          </div>
        <div class="{{@root.prefix}}--batch-summary">
          <p class="{{@root.prefix}}--batch-summary__para">{{{selectedItemsCounterLabel}}}</p>
        </div>
      </div>
      {{/if}}

      {{#if toolbarActions}}
     <div class="{{@root.prefix}}--toolbar-content">
          <!--  Default hidden search -->
         {{#is state "default"}}
           <div class="{{@root.prefix}}--toolbar-search-container-expandable">
             <div data-search class="{{@root.prefix}}--search {{@root.prefix}}--search--sm" role="search">
               <div class="{{@root.prefix}}--search-magnifier" tabindex="0">
                 {{ carbon-icon 'Search16' class=(add @root.prefix '--toolbar-action__icon')}}
               </div>
               <label id="{{searchLabelId}}" class="{{@root.prefix}}--label" for="{{searchInputId}}">{{searchLabel}}</label>
                <input class="{{@root.prefix}}--search-input" type="text" id="{{searchInputId}}" role="search" placeholder="{{searchLabel}}" aria-labelledby="{{searchLabelId}}">
                <button class="{{@root.prefix}}--search-close {{@root.prefix}}--search-close--hidden" title="{{clearSearchLabel}}" aria-label="{{clearSearchLabel}}">
                  {{ carbon-icon 'Close16'}}
                </button>
              </div>
            </div>
            {{/is}}

            <!-- Persistent Search -->
            {{#is state "persistent-search"}}
            <div class="{{@root.prefix}}--toolbar-search-container-persistent">
              <div data-search class="{{@root.prefix}}--search {{@root.prefix}}--search--sm" role="search">
                <div class="{{@root.prefix}}--search-magnifier">
                  {{ carbon-icon 'Search16'}}
                </div>
                <label id="{{searchLabelId}}" class="{{@root.prefix}}--label" for="{{searchInputId}}">{{searchLabel}}</label>
                <input class="{{@root.prefix}}--search-input" type="text" id="{{searchInputId}}" role="search" placeholder="{{searchLabel}}" aria-labelledby="{{searchLabelId}}">
                <button class="{{@root.prefix}}--search-close {{@root.prefix}}--search-close--hidden" title="{{clearSearchLabel}}" aria-label="{{clearSearchLabel}}">
                  {{ carbon-icon 'Close16'}}
                </button>
              </div>
            </div>
            {{/is}}

            <!-- Toolbar Overflow Menu -->
            {{#each toolbarActionsX as |toolbar|}}
            <div class="{{@root.prefix}}--overflow-menu {{@root.prefix}}--toolbar-action" data-overflow-menu role="button" tabindex="0" aria-label="Overflow" aria-haspopup="true"
              aria-expanded="false" {{#if disabled}} disabled {{/if}}>
              {{ carbon-icon 'Settings16' class=(add @root.prefix '--toolbar-action__icon')}}
              <ul class="{{@root.prefix}}--overflow-menu-options {{@root.prefix}}--overflow-menu--flip" tabindex="-1" role="menu" aria-label="Overflow" data-floating-menu-direction="bottom">
                {{#each toolbar.overflowItems}}
                <li class="{{@root.prefix}}--overflow-menu-options__option {{#if (not ../../small)}} {{@root.prefix}}--overflow-menu--data-table {{/if}}" role="presentation">
                  <button class="{{@root.prefix}}--overflow-menu-options__btn" role="menuitem" {{#if primaryFocus}} data-floating-menu-primary-focus {{/if}}>
                    <div class="{{@root.prefix}}--overflow-menu-options__option-content">
                    {{label}}
                    </div>
                  </button>
                </li>
                {{/each}}
              </ul>
            </div>
            {{/each}}

          <!--  Toolbar primary button -->
          <button class="{{@root.prefix}}--btn {{@root.prefix}}--btn--sm {{@root.prefix}}--btn--primary">
            {{#if small }} Primary {{else}} Primary Button {{/if}}
            {{ carbon-icon 'Add20' class=(add @root.prefix '--btn__icon') }}
          </button>
      </div>
      {{/if}}
    </section>
  {{/if}}
  <!-- End Toolbar Content -->

  {{#if sticky}}
  <section class="{{@root.prefix}}--data-table_inner-container">
  {{/if}}
  <!-- Table -->
  <table class="{{@root.prefix}}--data-table {{#if truncate}}{{@root.prefix}}--data-table--overflow-truncate{{/if}} {{#if sticky}}{{@root.prefix}}--data-table--sticky-header{{/if}} {{#if zebra}}{{@root.prefix}}--data-table--zebra{{/if}}{{#if small}} {{@root.prefix}}--data-table--compact{{/if}} {{#if tall}}{{@root.prefix}}--data-table--tall {{/if}}{{#if sort}} {{@root.prefix}}--data-table--sort {{/if}}" >
    <thead>
      <tr>
        {{#each columns}}
          <th {{#if checkbox}} class="{{@root.prefix}}--table-column-checkbox" {{/if}}{{#if section}}class="{{@root.prefix}}--table-expand"{{/if}} {{#if numerical}} class="{{@root.prefix}}--data-table--numerical-cell" {{/if}}>
            <!-- checkbox th -->
            {{#if checkbox}}
              <input data-event="select-all" id="{{checkboxId}}" class="{{@root.prefix}}--checkbox" type="checkbox" value="{{checkboxValue}}" name="{{checkboxName}}">
              <label for="{{checkboxId}}" class="{{@root.prefix}}--checkbox-label" aria-label="{{title}}"></label>
            {{else if (not menu)}}
            <!-- sortable th  -->
              {{#if sortable}}
                <button class="{{@root.prefix}}--table-sort" data-event="sort" title="{{title}}">
                  <span class="{{@root.prefix}}--table-header-label">{{title}}</span>
                  {{carbon-icon 'ArrowDown16' class=(add @root.prefix '--table-sort__icon')}}
                  {{carbon-icon 'Arrows16' class=(add @root.prefix '--table-sort__icon-unsorted')}}
                  {{#if ../truncate}}
                    <div id="label-tooltip" role="tooltip" data-floating-menu-direction="bottom" class="{{@root.prefix}}--tooltip" data-avoid-focus-on-open>
                      <span class="{{@root.prefix}}--tooltip__caret"></span>
                      <p class="{{@root.prefix}}--tooltip__text">{{title}}</p>
                    </div>
                  {{/if}}
                </button>
              <!-- no sort th -->
                {{else if small}}
                  {{title}}
                {{else}}
                  <span class="{{@root.prefix}}--table-header-label">{{title}}</span>
                {{/if}}
              {{/if}}
          </th>
        {{/each}}
      </tr>
    </thead>
  <tbody>
    {{#each rows as |row|}}
      <tr{{#if row.sectionContent}} class="{{@root.prefix}}--parent-row" data-parent-row {{/if}} {{#if row.disabled}} class="{{@root.prefix}}--row-disabled" {{/if}}>
        {{#each ../columns as |column|}}
          {{#with (lookup row column.name) as |data|}}
          <!-- expand icon td -->
            {{#if column.section}}
              <td class="{{@root.prefix}}--table-expand" data-event="expand">
                <button class="{{@root.prefix}}--table-expand__button">
                  {{ carbon-icon 'ChevronRight16' class=(add @root.prefix '--table-expand__svg') }}
                </button>
              </td>
            <!-- checkbox td -->
            {{else if column.checkbox}}
              <td class="{{@root.prefix}}--table-column-checkbox">
                <input data-event="select" id="{{data.id}}" class="{{@root.prefix}}--checkbox" type="checkbox" value="{{data.value}}" name="{{data.name}}" {{#if row.disabled}} disabled {{/if}}>
                <label for="{{data.id}}" class="{{@root.prefix}}--checkbox-label" aria-label="{{data.label}}"></label>
              </td>
            <!-- inline action td's -->
            {{else if column.additionalIcons}}
              <td class="{{@root.prefix}}--table-column-icon">
                <button {{#if row.disabled}} disabled {{/if}}>
                  {{{data.svg}}}
                </button>
              </td>
            <!-- overflow menu td -->
            {{else if column.menu}}
              <td class="{{@root.prefix}}--table-column-menu">
                <div data-overflow-menu role="menu" tabindex="0" aria-label="{{data.label}}" class="{{@root.prefix}}--overflow-menu">
                  {{ carbon-icon 'OverflowMenuVertical16' class=(add @root.prefix '--overflow-menu__icon') }}
                  <ul class="{{@root.prefix}}--overflow-menu-options{{#if data.flip}} {{@root.prefix}}--overflow-menu--flip{{/if}}">

                      <li class="{{@root.prefix}}--overflow-menu-options__option {{@root.prefix}}--table-row--menu-option">
                        <button class="{{@root.prefix}}--overflow-menu-options__btn" onclick="console.log('keyboard action')">
                          <div class="{{@root.prefix}}--overflow-menu-options__option-content">
                           {{ carbon-icon 'Edit16' }} Edit
                          </div>
                        </button>
                      </li>
                      <li class="{{@root.prefix}}--overflow-menu-options__option {{@root.prefix}}--table-row--menu-option">
                        <button class="{{@root.prefix}}--overflow-menu-options__btn" onclick="console.log('keyboard action')">
                          <div class="{{@root.prefix}}--overflow-menu-options__option-content">
                            {{ carbon-icon 'Download16' }} Download
                          </div>
                        </button>
                      </li>
                      <li class="{{@root.prefix}}--overflow-menu-options__option {{@root.prefix}}--table-row--menu-option">
                        <button class="{{@root.prefix}}--overflow-menu-options__btn" onclick="console.log('keyboard action')">
                          <div class="{{@root.prefix}}--overflow-menu-options__option-content">
                            {{ carbon-icon 'Save16' }} Save
                          </div>
                        </button>
                      </li>
                      <li class="{{@root.prefix}}--overflow-menu-options__option {{@root.prefix}}--table-row--menu-option">
                        <button class="{{@root.prefix}}--overflow-menu-options__btn" onclick="console.log('keyboard action')">
                          <div class="{{@root.prefix}}--overflow-menu-options__option-content">
                            {{ carbon-icon 'Delete16' }} Delete
                          </div>
                        </button>
                      </li>

                  </ul>
                </div>
              </td>
            <!-- inline edit tds -->
            {{else if (and row.editable column.editing)}}
              <td class="{{@root.prefix}}--data-table-cell--editable {{@root.prefix}}--data-table-cell--editing">
                <div class="{{@root.prefix}}--data-table__edit-field">
                  <label class="{{@root.prefix}}--label" for="edit-cell:{{row.id}}:{{column.name}}">Edit Name: {{data}}</label>
                  <input type="text" class="{{@root.prefix}}--text-input" id="edit-cell:{{row.id}}:{{column.name}}" value="{{data}}">
                </div>
                <div class="{{@root.prefix}}--data-table__edit-actions">
                  <button class="{{@root.prefix}}--btn {{@root.prefix}}--btn--secondary {{@root.prefix}}--btn--sm">{{../../../cancelLabel}}</button>
                  <button class="{{@root.prefix}}--btn {{@root.prefix}}--btn--primary {{@root.prefix}}--btn--sm">{{../../../saveLabel}}</button>
                </div>
              </td>
            {{else if column.editable}}
              <td class="{{@root.prefix}}--data-table-cell--editable"><span class="{{@root.prefix}}--data-table-cell__content">{{data}}</span></td>
            <!-- all other td's -->
            {{else}}
              <td {{#if column.numerical}} class="{{@root.prefix}}--data-table--numerical-cell" {{/if}}>
                <!-- truncated new markup -->
                {{#if ../../truncate}}
                  <span class="{{@root.prefix}}--table-cell-content" aria-describedby="label-tooltip">{{data}}
                      {{#if ../../../tall }}
                        {{#if (and row.secondaryText column.secondary)}}
                        <div class="{{@root.prefix}}--data-table--cell-secondary-text">
                          {{row.secondaryText}}
                        </div>
                        {{/if}}
                      {{/if}}
                    </span>
                  <div id="label-tooltip" role="tooltip" data-floating-menu-direction="bottom" class="{{@root.prefix}}--tooltip" data-avoid-focus-on-open>
                    <span class="{{@root.prefix}}--tooltip__caret"></span>
                    <p class="{{@root.prefix}}--tooltip__text">{{data}}</p>
                  </div>
                <!-- default (non truncated) -->
                {{else}}
                  {{data}}
                {{/if}}
              </td>
            {{/if}}
          {{/with}}
        {{/each}}
      </tr>
      <!-- Expandable child row -->
      {{#if row.sectionContent}}
          <tr class="{{@root.prefix}}--expandable-row {{@root.prefix}}--expandable-row--hidden" data-child-row>
            <td colspan="{{../columns.length}}">
              <div class="{{@root.prefix}}--child-row-inner-container">
                {{{row.sectionContent}}}
              </div>
            </td>
          </tr>
        {{/if}}
      {{/each}}
    </tbody>
  </table>
  {{#if sticky}}
  </section>
  {{/if}}

 {{#if (not small)}}</div>{{/if}}
<!-- Pagination -->
  {{#if hasPager}}
 <div class="{{@root.prefix}}--pagination" data-pagination>
   <div class="{{@root.prefix}}--pagination__left">
     <label
        id="select-id-pagination-count-label"
        class="{{@root.prefix}}--pagination__text"
        for="select-id-pagination-count"
      >
        Items per page:
      </label>
      <div class="{{@root.prefix}}--select {{@root.prefix}}--select--inline {{@root.prefix}}--select__item-count">
        <select
          class="{{@root.prefix}}--select-input"
          id="select-id-pagination-count"
          aria-label="select number of items per page"
          tabindex="0"
          data-items-per-page
        >
          <option class="{{@root.prefix}}--select-option" value="10" selected>10</option>
          <option class="{{@root.prefix}}--select-option" value="20">20</option>
          <option class="{{@root.prefix}}--select-option" value="30">30</option>
          <option class="{{@root.prefix}}--select-option" value="40">40</option>
          <option class="{{@root.prefix}}--select-option" value="50">50</option>
        </select>
        {{ carbon-icon 'ChevronDownGlyph' class=(add @root.prefix '--select__arrow') }}
     </div>
     <span class="{{@root.prefix}}--pagination__text">
        <span data-displayed-item-range>1-10</span> of
        <span data-total-items>50</span> items
     </span>
   </div>
   <div class="{{@root.prefix}}--pagination__right">
      <div class="{{@root.prefix}}--select {{@root.prefix}}--select--inline {{@root.prefix}}--select__page-number">
        <select
          class="{{@root.prefix}}--select-input"
          id="select-id-pagination-page"
          aria-label="select page number to view"
          tabindex="0"
          data-page-number-input
        >
          <option class="{{@root.prefix}}--select-option" value="1" selected>1</option>
          <option class="{{@root.prefix}}--select-option" value="2">2</option>
          <option class="{{@root.prefix}}--select-option" value="3">3</option>
          <option class="{{@root.prefix}}--select-option" value="4">4</option>
          <option class="{{@root.prefix}}--select-option" value="5">5</option>
        </select>
        {{ carbon-icon 'ChevronDownGlyph' class=(add @root.prefix '--select__arrow')}}
      </div>
      <label
       id="select-id-pagination-page-label"
       class="{{@root.prefix}}--pagination__text"
       for="select-id-pagination-page"
     >
       of 5 pages
     </label>
     <button class="{{@root.prefix}}--pagination__button {{@root.prefix}}--pagination__button--backward" tabindex="0" data-page-backward aria-label="Backward button">
       {{ carbon-icon 'CaretLeft20' class=(add @root.prefix '--pagination__nav-arrow')}}
     </button>
     <button class="{{@root.prefix}}--pagination__button {{@root.prefix}}--pagination__button--forward" tabindex="0" data-page-forward aria-label="Forward button">
       {{ carbon-icon 'CaretRight20' class=(add @root.prefix '--pagination__nav-arrow')}}
     </button>
   </div>
 </div>
 {{/if}}
{{/if}}