carbon-components/src/components/data-table/data-table.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.
-->
<!-- v10 Data Table -->
{{#if hasToolbar}}
  <div class="{{@root.prefix}}--data-table-container {{#if sticky}}{{@root.prefix}}--data-table--max-width{{/if}}" data-table{{#if hasExpandAll}} data-table-demo-expand-all-manager{{/if}}>
    <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{{#if small}} {{@root.prefix}}--btn--sm{{/if}}" type="button">
              Delete
              {{ carbon-icon 'Delete16' class=(add @root.prefix '--btn__icon')}}
            </button>
            <button class="{{@root.prefix}}--btn {{@root.prefix}}--btn--primary{{#if small}} {{@root.prefix}}--btn--sm{{/if}}" type="button">
              Save
              {{ carbon-icon 'Save16' class=(add @root.prefix '--btn__icon')}}
            </button>
            <button class="{{@root.prefix}}--btn {{@root.prefix}}--btn--primary{{#if small}} {{@root.prefix}}--btn--sm{{/if}}" 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{{#if small}} {{@root.prefix}}--btn--sm{{/if}}">{{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}}{{#if displayOverflowMenus}} {{@root.prefix}}--data-table--visible-overflow-menu{{/if}} {{#if short}}{{@root.prefix}}--data-table--short{{/if}} {{#if static}}{{@root.prefix}}--data-table--static{{/if}}" >
    <thead>
      <tr>
        {{#each columns}}
          <th {{#if checkbox}} class="{{@root.prefix}}--table-column-checkbox"{{/if}}{{#if menu}} class="{{@root.prefix}}--table-column-menu"{{/if}}{{#if section}} class="{{@root.prefix}}--table-expand"{{/if}}{{#if numerical}} class="{{@root.prefix}}--data-table--numerical-cell"{{/if}}{{#if section}} data-event="expandAll"{{/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 (and section ../hasExpandAll)}}
              <button class="{{@root.prefix}}--table-expand__button">
                {{ carbon-icon 'ChevronRight16' class=(add @root.prefix '--table-expand__svg') }}
              </button>
            {{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 ../../../tall}}
                    {{#if (and row.secondaryText column.secondary)}}
                    <div class="{{@root.prefix}}--data-table--cell-secondary-text">
                      {{row.secondaryText}}
                    </div>
                    {{/if}}
                  {{/if}}
                {{/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}}

  <!-- 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 (not small)}}</div>{{/if}}