Data table

Name Protocol Port Rule Attached Groups Status
Load Balancer 1 HTTP 80 Round Robin Maureen's VM Groups Testing a really long text here Active
Load Balancer 5 HTTP 80 Round Robin Maureen's VM Groups Active
Load Balancer 5 HTTP 80 Round Robin Maureen's VM Groups Active
Load Balancer 5 HTTP 80 Round Robin Maureen's VM Groups Active
Load Balancer 5 HTTP 80 Round Robin Maureen's VM Groups Active
Code:
<!--
  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 -->
  <!-- End Toolbar Content -->

  <section class="bx--data-table_inner-container">
  <!-- Table -->
  <table class="bx--data-table  bx--data-table--sticky-header  " >
    <thead>
      <tr>
          <th >
            <!-- checkbox th -->
            <!-- sortable th  -->
                  <span class="bx--table-header-label">Name</span>
                                        </th>
          <th >
            <!-- checkbox th -->
            <!-- sortable th  -->
                  <span class="bx--table-header-label">Protocol</span>
                                        </th>
          <th >
            <!-- checkbox th -->
            <!-- sortable th  -->
                  <span class="bx--table-header-label">Port</span>
                                        </th>
          <th >
            <!-- checkbox th -->
            <!-- sortable th  -->
                  <span class="bx--table-header-label">Rule</span>
                                        </th>
          <th >
            <!-- checkbox th -->
            <!-- sortable th  -->
                  <span class="bx--table-header-label">Attached Groups</span>
                                        </th>
          <th >
            <!-- checkbox th -->
            <!-- sortable th  -->
                  <span class="bx--table-header-label">Status</span>
                                        </th>
      </tr>
    </thead>
  <tbody>
      <tr >
          <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  Load Balancer 1
              </td>
                      <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  HTTP
              </td>
                      <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  80
              </td>
                      <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  Round Robin
              </td>
                      <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  Maureen&#x27;s VM Groups Testing a really long text here
              </td>
                      <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  Active
              </td>
                  </tr>
      <!-- Expandable child row -->
      <tr >
          <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  Load Balancer 5
              </td>
                      <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  HTTP
              </td>
                      <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  80
              </td>
                      <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  Round Robin
              </td>
                      <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  Maureen&#x27;s VM Groups
              </td>
                      <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  Active
              </td>
                  </tr>
      <!-- Expandable child row -->
      <tr >
          <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  Load Balancer 5
              </td>
                      <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  HTTP
              </td>
                      <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  80
              </td>
                      <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  Round Robin
              </td>
                      <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  Maureen&#x27;s VM Groups
              </td>
                      <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  Active
              </td>
                  </tr>
      <!-- Expandable child row -->
      <tr >
          <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  Load Balancer 5
              </td>
                      <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  HTTP
              </td>
                      <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  80
              </td>
                      <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  Round Robin
              </td>
                      <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  Maureen&#x27;s VM Groups
              </td>
                      <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  Active
              </td>
                  </tr>
      <!-- Expandable child row -->
      <tr >
          <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  Load Balancer 5
              </td>
                      <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  HTTP
              </td>
                      <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  80
              </td>
                      <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  Round Robin
              </td>
                      <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  Maureen&#x27;s VM Groups
              </td>
                      <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  Active
              </td>
                  </tr>
      <!-- Expandable child row -->
    </tbody>
  </table>
  </section>

  <!-- Pagination -->
</div>

Expandable data table

Table title

3 items selected

Load Balancer 1 HTTP 80 Round Robin Maureen's VM Groups Active

A variety of content types can live here. Be sure to follow Carbon design guidelines for spacing and alignment.

Load Balancer 1 HTTP 80 Round Robin Maureen's VM Groups Active

A variety of content types can live here. Be sure to follow Carbon design guidelines for spacing and alignment.

Code:
<!--
  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 -->
  <div class="bx--data-table-container " data-table>
    <div class="bx--data-table-header">
      <h4 class="bx--data-table-header__title">Table title</h4>
      <p class="bx--data-table-header__description"></p>
    </div>
    <!-- Toolbar Content -->
    <section class="bx--table-toolbar ">
      <!-- Batch actions -->
      <div class="bx--batch-actions" aria-label="Table Action Bar">
          <div class="bx--action-list">
            <button class="bx--btn bx--btn--primary" type="button">
              Delete
              <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M6 6h1v6H6zm3 0h1v6H9z"></path><path d="M2 3v1h1v10c0 .6.4 1 1 1h8c.6 0 1-.4 1-1V4h1V3H2zm2 11V4h8v10H4zM6 1h4v1H6z"></path></svg>
            </button>
            <button class="bx--btn bx--btn--primary" type="button">
              Save
              <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M13.9 4.6l-2.5-2.5c-.1 0-.3-.1-.4-.1H3c-.6 0-1 .4-1 1v10c0 .6.4 1 1 1h10c.6 0 1-.4 1-1V5c0-.1-.1-.3-.1-.4zM6 3h4v2H6V3zm4 10H6V9h4v4zm1 0V9c0-.6-.4-1-1-1H6c-.6 0-1 .4-1 1v4H3V3h2v2c0 .6.4 1 1 1h4c.6 0 1-.4 1-1V3.2l2 2V13h-2z"></path></svg>
            </button>
            <button class="bx--btn bx--btn--primary" type="button">
              Download
              <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M13 7l-.7-.7-3.8 3.8V1h-1v9.1L3.7 6.3 3 7l5 5zm0 5v2H3v-2H2v2c0 .6.4 1 1 1h10c.6 0 1-.4 1-1v-2h-1z"></path></svg>
            </button>
            <button data-event="action-bar-cancel" class="bx--btn bx--btn--primary bx--batch-summary__cancel">Cancel</button>
          </div>
        <div class="bx--batch-summary">
          <p class="bx--batch-summary__para">
          <span data-items-selected>3</span> items selected
        </p>
        </div>
      </div>

     <div class="bx--toolbar-content">
          <!--  Default hidden search -->

            <!-- Persistent Search -->
            <div class="bx--toolbar-search-container-persistent">
              <div data-search class="bx--search bx--search--sm" role="search">
                <div class="bx--search-magnifier">
                  <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M15 14.3L10.7 10c1.9-2.3 1.6-5.8-.7-7.7S4.2.7 2.3 3 .7 8.8 3 10.7c2 1.7 5 1.7 7 0l4.3 4.3.7-.7zM2 6.5C2 4 4 2 6.5 2S11 4 11 6.5 9 11 6.5 11 2 9 2 6.5z"></path></svg>
                </div>
                <label id="search-input-label-1" class="bx--label" for="search__input-2">Search</label>
                <input class="bx--search-input" type="text" id="search__input-2" role="search" placeholder="Search" aria-labelledby="search-input-label-1">
                <button class="bx--search-close bx--search-close--hidden" title="Clear search input" aria-label="Clear search input">
                  <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M12 4.7l-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8z"></path></svg>
                </button>
              </div>
            </div>

            <!-- Toolbar Overflow Menu -->
            <div class="bx--overflow-menu bx--toolbar-action" data-overflow-menu role="button" tabindex="0" aria-label="Overflow" aria-haspopup="true"
              aria-expanded="false" >
              <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--toolbar-action__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M13.5 8.4v-.8l1-.8c.4-.3.4-.9.2-1.3l-1.2-2c-.2-.3-.5-.5-.9-.5-.1 0-.2 0-.3.1l-1.2.4c-.2-.1-.4-.3-.7-.4l-.3-1.3c0-.5-.4-.8-.9-.8H6.8c-.5 0-.9.3-1 .8l-.2 1.3c-.3.1-.5.2-.7.3L3.7 3h-.3c-.4 0-.7.2-.9.5l-1.2 2c-.2.4-.1.9.3 1.3l.9.9v.8l-.9.7c-.4.3-.5.9-.2 1.3l1.2 2c.1.3.4.5.8.5.1 0 .2 0 .3-.1l1.2-.4c.2.1.4.3.7.4l.3 1.3c.1.5.5.8 1 .8h2.4c.5 0 .9-.3 1-.8l.3-1.3c.2-.1.4-.2.7-.4l1.2.4c.1 0 .2.1.3.1.4 0 .7-.2.9-.5l1.1-2c.2-.4.2-.9-.2-1.3l-1.1-.8zm-.9 3.6l-1.7-.6c-.4.3-.9.6-1.4.8L9.2 14H6.8l-.4-1.8c-.5-.2-.9-.5-1.4-.8l-1.6.6-1.2-2 1.4-1.2c-.1-.5-.1-1.1 0-1.6L2.2 6l1.2-2 1.7.6c.4-.4.9-.6 1.4-.8L6.8 2h2.4l.4 1.8c.5.2.9.5 1.4.8l1.6-.6 1.2 2-1.4 1.2c.1.5.1 1.1 0 1.6l1.4 1.2-1.2 2z"></path><path d="M8 11c-1.7 0-3-1.3-3-3s1.3-3 3-3 3 1.3 3 3c0 1.6-1.3 3-3 3zm0-5c-1.1 0-2 .8-2 1.9V8c0 1.1.8 2 1.9 2H8c1.1 0 2-.8 2-1.9V8c0-1.1-.8-2-2-2 .1 0 0 0 0 0z"></path></svg>
              <ul class="bx--overflow-menu-options bx--overflow-menu--flip" tabindex="-1" role="menu" aria-label="Overflow" data-floating-menu-direction="bottom">
                <li class="bx--overflow-menu-options__option  bx--overflow-menu--data-table " role="presentation">
                  <button class="bx--overflow-menu-options__btn" role="menuitem"  data-floating-menu-primary-focus >
                    <div class="bx--overflow-menu-options__option-content">
                    Option 1
                    </div>
                  </button>
                </li>
                <li class="bx--overflow-menu-options__option  bx--overflow-menu--data-table " role="presentation">
                  <button class="bx--overflow-menu-options__btn" role="menuitem" >
                    <div class="bx--overflow-menu-options__option-content">
                    Option 2
                    </div>
                  </button>
                </li>
                <li class="bx--overflow-menu-options__option  bx--overflow-menu--data-table " role="presentation">
                  <button class="bx--overflow-menu-options__btn" role="menuitem" >
                    <div class="bx--overflow-menu-options__option-content">
                    Option 3
                    </div>
                  </button>
                </li>
              </ul>
            </div>

          <!--  Toolbar primary button -->
          <button class="bx--btn bx--btn--sm bx--btn--primary">
             Primary Button 
            <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--btn__icon" width="20" height="20" viewBox="0 0 32 32" aria-hidden="true"><path d="M17 15V7h-2v8H7v2h8v8h2v-8h8v-2h-8z"></path></svg>
          </button>
      </div>
    </section>
  <!-- End Toolbar Content -->

  <!-- Table -->
  <table class="bx--data-table  bx--data-table--sort  " >
    <thead>
      <tr>
          <th  class="bx--table-expand" data-event="expandAll">
            <!-- checkbox th -->
            <!-- sortable th  -->
                  <span class="bx--table-header-label"></span>
                                        </th>
          <th  class="bx--table-column-checkbox">
            <!-- checkbox th -->
              <input data-event="select-all" id="bx--checkbox-20" class="bx--checkbox" type="checkbox" value="green" name="checkbox-20">
              <label for="bx--checkbox-20" class="bx--checkbox-label" aria-label="Label name"></label>
          </th>
          <th >
            <!-- checkbox th -->
            <!-- sortable th  -->
                <button class="bx--table-sort" data-event="sort" title="Name">
                  <span class="bx--table-header-label">Name</span>
                  <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--table-sort__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M12.3 9.3l-3.8 3.8V1h-1v12.1L3.7 9.3 3 10l5 5 5-5z"></path></svg>
                  <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--table-sort__icon-unsorted" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M13.8 10.3L12 12.1V2h-1v10.1l-1.8-1.8-.7.7 3 3 3-3zM4.5 2l-3 3 .7.7L4 3.9V14h1V3.9l1.8 1.8.7-.7z"></path></svg>
                </button>
              <!-- no sort th -->
                        </th>
          <th >
            <!-- checkbox th -->
            <!-- sortable th  -->
                <button class="bx--table-sort" data-event="sort" title="Protocol">
                  <span class="bx--table-header-label">Protocol</span>
                  <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--table-sort__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M12.3 9.3l-3.8 3.8V1h-1v12.1L3.7 9.3 3 10l5 5 5-5z"></path></svg>
                  <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--table-sort__icon-unsorted" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M13.8 10.3L12 12.1V2h-1v10.1l-1.8-1.8-.7.7 3 3 3-3zM4.5 2l-3 3 .7.7L4 3.9V14h1V3.9l1.8 1.8.7-.7z"></path></svg>
                </button>
              <!-- no sort th -->
                        </th>
          <th >
            <!-- checkbox th -->
            <!-- sortable th  -->
                <button class="bx--table-sort" data-event="sort" title="Ports">
                  <span class="bx--table-header-label">Ports</span>
                  <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--table-sort__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M12.3 9.3l-3.8 3.8V1h-1v12.1L3.7 9.3 3 10l5 5 5-5z"></path></svg>
                  <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--table-sort__icon-unsorted" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M13.8 10.3L12 12.1V2h-1v10.1l-1.8-1.8-.7.7 3 3 3-3zM4.5 2l-3 3 .7.7L4 3.9V14h1V3.9l1.8 1.8.7-.7z"></path></svg>
                </button>
              <!-- no sort th -->
                        </th>
          <th >
            <!-- checkbox th -->
            <!-- sortable th  -->
                <button class="bx--table-sort" data-event="sort" title="Rule">
                  <span class="bx--table-header-label">Rule</span>
                  <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--table-sort__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M12.3 9.3l-3.8 3.8V1h-1v12.1L3.7 9.3 3 10l5 5 5-5z"></path></svg>
                  <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--table-sort__icon-unsorted" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M13.8 10.3L12 12.1V2h-1v10.1l-1.8-1.8-.7.7 3 3 3-3zM4.5 2l-3 3 .7.7L4 3.9V14h1V3.9l1.8 1.8.7-.7z"></path></svg>
                </button>
              <!-- no sort th -->
                        </th>
          <th >
            <!-- checkbox th -->
            <!-- sortable th  -->
                <button class="bx--table-sort" data-event="sort" title="Attached Groups">
                  <span class="bx--table-header-label">Attached Groups</span>
                  <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--table-sort__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M12.3 9.3l-3.8 3.8V1h-1v12.1L3.7 9.3 3 10l5 5 5-5z"></path></svg>
                  <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--table-sort__icon-unsorted" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M13.8 10.3L12 12.1V2h-1v10.1l-1.8-1.8-.7.7 3 3 3-3zM4.5 2l-3 3 .7.7L4 3.9V14h1V3.9l1.8 1.8.7-.7z"></path></svg>
                </button>
              <!-- no sort th -->
                        </th>
          <th >
            <!-- checkbox th -->
            <!-- sortable th  -->
                <button class="bx--table-sort" data-event="sort" title="Status">
                  <span class="bx--table-header-label">Status</span>
                  <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--table-sort__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M12.3 9.3l-3.8 3.8V1h-1v12.1L3.7 9.3 3 10l5 5 5-5z"></path></svg>
                  <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--table-sort__icon-unsorted" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M13.8 10.3L12 12.1V2h-1v10.1l-1.8-1.8-.7.7 3 3 3-3zM4.5 2l-3 3 .7.7L4 3.9V14h1V3.9l1.8 1.8.7-.7z"></path></svg>
                </button>
              <!-- no sort th -->
                        </th>
      </tr>
    </thead>
  <tbody>
      <tr class="bx--parent-row" data-parent-row  >
          <!-- expand icon td -->
              <td class="bx--table-expand" data-event="expand">
                <button class="bx--table-expand__button">
                  <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--table-expand__svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M11 8l-5 5-.7-.7L9.6 8 5.3 3.7 6 3z"></path></svg>
                </button>
              </td>
            <!-- checkbox td -->
          <!-- expand icon td -->
              <td class="bx--table-column-checkbox">
                <input data-event="select" id="bx--checkbox-13" class="bx--checkbox" type="checkbox" value="green" name="checkbox-13" >
                <label for="bx--checkbox-13" class="bx--checkbox-label" aria-label="Label name"></label>
              </td>
            <!-- inline action td's -->
          <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  Load Balancer 1
              </td>
                      <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  HTTP
              </td>
                      <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  80
              </td>
                      <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  Round Robin
              </td>
                      <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  Maureen&#x27;s VM Groups
              </td>
                      <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  Active
              </td>
                  </tr>
      <!-- Expandable child row -->
          <tr class="bx--expandable-row bx--expandable-row--hidden" data-child-row>
            <td colspan="8">
              <div class="bx--child-row-inner-container">
                 <p>A variety of content types can live here. Be sure to follow Carbon design guidelines for spacing and alignment.</p>
    
              </div>
            </td>
          </tr>
      <tr class="bx--parent-row" data-parent-row  >
          <!-- expand icon td -->
              <td class="bx--table-expand" data-event="expand">
                <button class="bx--table-expand__button">
                  <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--table-expand__svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M11 8l-5 5-.7-.7L9.6 8 5.3 3.7 6 3z"></path></svg>
                </button>
              </td>
            <!-- checkbox td -->
          <!-- expand icon td -->
              <td class="bx--table-column-checkbox">
                <input data-event="select" id="bx--checkbox-12" class="bx--checkbox" type="checkbox" value="green" name="checkbox-12" >
                <label for="bx--checkbox-12" class="bx--checkbox-label" aria-label="Label name"></label>
              </td>
            <!-- inline action td's -->
          <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  Load Balancer 1
              </td>
                      <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  HTTP
              </td>
                      <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  80
              </td>
                      <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  Round Robin
              </td>
                      <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  Maureen&#x27;s VM Groups
              </td>
                      <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  Active
              </td>
                  </tr>
      <!-- Expandable child row -->
          <tr class="bx--expandable-row bx--expandable-row--hidden" data-child-row>
            <td colspan="8">
              <div class="bx--child-row-inner-container">
                 <p>A variety of content types can live here. Be sure to follow Carbon design guidelines for spacing and alignment.</p>
    
              </div>
            </td>
          </tr>
    </tbody>
  </table>

  <!-- Pagination -->
</div>

Data table with pagination

Table title

3 items selected

Load Balancer 1 HTTP 80 Round Robin Maureen's VM Groups Testing a really long text here Active
Load Balancer 5 HTTP 80 Round Robin Maureen's VM Groups Active
Load Balancer 5 HTTP 80 Round Robin Maureen's VM Groups Active
Load Balancer 5 HTTP 80 Round Robin Maureen's VM Groups Active
Load Balancer 5 HTTP 80 Round Robin Maureen's VM Groups Active
1-10 of 50 items
Code:
<!--
  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 -->
  <div class="bx--data-table-container bx--data-table--max-width" data-table>
    <div class="bx--data-table-header">
      <h4 class="bx--data-table-header__title">Table title</h4>
      <p class="bx--data-table-header__description"></p>
    </div>
    <!-- Toolbar Content -->
    <section class="bx--table-toolbar ">
      <!-- Batch actions -->
      <div class="bx--batch-actions" aria-label="Table Action Bar">
          <div class="bx--action-list">
            <button class="bx--btn bx--btn--primary" type="button">
              Delete
              <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M6 6h1v6H6zm3 0h1v6H9z"></path><path d="M2 3v1h1v10c0 .6.4 1 1 1h8c.6 0 1-.4 1-1V4h1V3H2zm2 11V4h8v10H4zM6 1h4v1H6z"></path></svg>
            </button>
            <button class="bx--btn bx--btn--primary" type="button">
              Save
              <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M13.9 4.6l-2.5-2.5c-.1 0-.3-.1-.4-.1H3c-.6 0-1 .4-1 1v10c0 .6.4 1 1 1h10c.6 0 1-.4 1-1V5c0-.1-.1-.3-.1-.4zM6 3h4v2H6V3zm4 10H6V9h4v4zm1 0V9c0-.6-.4-1-1-1H6c-.6 0-1 .4-1 1v4H3V3h2v2c0 .6.4 1 1 1h4c.6 0 1-.4 1-1V3.2l2 2V13h-2z"></path></svg>
            </button>
            <button class="bx--btn bx--btn--primary" type="button">
              Download
              <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M13 7l-.7-.7-3.8 3.8V1h-1v9.1L3.7 6.3 3 7l5 5zm0 5v2H3v-2H2v2c0 .6.4 1 1 1h10c.6 0 1-.4 1-1v-2h-1z"></path></svg>
            </button>
            <button data-event="action-bar-cancel" class="bx--btn bx--btn--primary bx--batch-summary__cancel">Cancel</button>
          </div>
        <div class="bx--batch-summary">
          <p class="bx--batch-summary__para">
          <span data-items-selected>3</span> items selected
        </p>
        </div>
      </div>

     <div class="bx--toolbar-content">
          <!--  Default hidden search -->

            <!-- Persistent Search -->
            <div class="bx--toolbar-search-container-persistent">
              <div data-search class="bx--search bx--search--sm" role="search">
                <div class="bx--search-magnifier">
                  <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M15 14.3L10.7 10c1.9-2.3 1.6-5.8-.7-7.7S4.2.7 2.3 3 .7 8.8 3 10.7c2 1.7 5 1.7 7 0l4.3 4.3.7-.7zM2 6.5C2 4 4 2 6.5 2S11 4 11 6.5 9 11 6.5 11 2 9 2 6.5z"></path></svg>
                </div>
                <label id="search-input-label-1" class="bx--label" for="search__input-2">Search</label>
                <input class="bx--search-input" type="text" id="search__input-2" role="search" placeholder="Search" aria-labelledby="search-input-label-1">
                <button class="bx--search-close bx--search-close--hidden" title="Clear search input" aria-label="Clear search input">
                  <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M12 4.7l-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8z"></path></svg>
                </button>
              </div>
            </div>

            <!-- Toolbar Overflow Menu -->
            <div class="bx--overflow-menu bx--toolbar-action" data-overflow-menu role="button" tabindex="0" aria-label="Overflow" aria-haspopup="true"
              aria-expanded="false" >
              <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--toolbar-action__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M13.5 8.4v-.8l1-.8c.4-.3.4-.9.2-1.3l-1.2-2c-.2-.3-.5-.5-.9-.5-.1 0-.2 0-.3.1l-1.2.4c-.2-.1-.4-.3-.7-.4l-.3-1.3c0-.5-.4-.8-.9-.8H6.8c-.5 0-.9.3-1 .8l-.2 1.3c-.3.1-.5.2-.7.3L3.7 3h-.3c-.4 0-.7.2-.9.5l-1.2 2c-.2.4-.1.9.3 1.3l.9.9v.8l-.9.7c-.4.3-.5.9-.2 1.3l1.2 2c.1.3.4.5.8.5.1 0 .2 0 .3-.1l1.2-.4c.2.1.4.3.7.4l.3 1.3c.1.5.5.8 1 .8h2.4c.5 0 .9-.3 1-.8l.3-1.3c.2-.1.4-.2.7-.4l1.2.4c.1 0 .2.1.3.1.4 0 .7-.2.9-.5l1.1-2c.2-.4.2-.9-.2-1.3l-1.1-.8zm-.9 3.6l-1.7-.6c-.4.3-.9.6-1.4.8L9.2 14H6.8l-.4-1.8c-.5-.2-.9-.5-1.4-.8l-1.6.6-1.2-2 1.4-1.2c-.1-.5-.1-1.1 0-1.6L2.2 6l1.2-2 1.7.6c.4-.4.9-.6 1.4-.8L6.8 2h2.4l.4 1.8c.5.2.9.5 1.4.8l1.6-.6 1.2 2-1.4 1.2c.1.5.1 1.1 0 1.6l1.4 1.2-1.2 2z"></path><path d="M8 11c-1.7 0-3-1.3-3-3s1.3-3 3-3 3 1.3 3 3c0 1.6-1.3 3-3 3zm0-5c-1.1 0-2 .8-2 1.9V8c0 1.1.8 2 1.9 2H8c1.1 0 2-.8 2-1.9V8c0-1.1-.8-2-2-2 .1 0 0 0 0 0z"></path></svg>
              <ul class="bx--overflow-menu-options bx--overflow-menu--flip" tabindex="-1" role="menu" aria-label="Overflow" data-floating-menu-direction="bottom">
                <li class="bx--overflow-menu-options__option  bx--overflow-menu--data-table " role="presentation">
                  <button class="bx--overflow-menu-options__btn" role="menuitem"  data-floating-menu-primary-focus >
                    <div class="bx--overflow-menu-options__option-content">
                    Option 1
                    </div>
                  </button>
                </li>
                <li class="bx--overflow-menu-options__option  bx--overflow-menu--data-table " role="presentation">
                  <button class="bx--overflow-menu-options__btn" role="menuitem" >
                    <div class="bx--overflow-menu-options__option-content">
                    Option 2
                    </div>
                  </button>
                </li>
                <li class="bx--overflow-menu-options__option  bx--overflow-menu--data-table " role="presentation">
                  <button class="bx--overflow-menu-options__btn" role="menuitem" >
                    <div class="bx--overflow-menu-options__option-content">
                    Option 3
                    </div>
                  </button>
                </li>
              </ul>
            </div>

          <!--  Toolbar primary button -->
          <button class="bx--btn bx--btn--sm bx--btn--primary">
             Primary Button 
            <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--btn__icon" width="20" height="20" viewBox="0 0 32 32" aria-hidden="true"><path d="M17 15V7h-2v8H7v2h8v8h2v-8h8v-2h-8z"></path></svg>
          </button>
      </div>
    </section>
  <!-- End Toolbar Content -->

  <section class="bx--data-table_inner-container">
  <!-- Table -->
  <table class="bx--data-table  bx--data-table--sticky-header bx--data-table--sort  " >
    <thead>
      <tr>
          <th  class="bx--table-column-checkbox">
            <!-- checkbox th -->
              <input data-event="select-all" id="bx--checkbox-20" class="bx--checkbox" type="checkbox" value="green" name="checkbox-20">
              <label for="bx--checkbox-20" class="bx--checkbox-label" aria-label="Label name"></label>
          </th>
          <th >
            <!-- checkbox th -->
            <!-- sortable th  -->
                <button class="bx--table-sort" data-event="sort" title="Name">
                  <span class="bx--table-header-label">Name</span>
                  <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--table-sort__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M12.3 9.3l-3.8 3.8V1h-1v12.1L3.7 9.3 3 10l5 5 5-5z"></path></svg>
                  <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--table-sort__icon-unsorted" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M13.8 10.3L12 12.1V2h-1v10.1l-1.8-1.8-.7.7 3 3 3-3zM4.5 2l-3 3 .7.7L4 3.9V14h1V3.9l1.8 1.8.7-.7z"></path></svg>
                </button>
              <!-- no sort th -->
                        </th>
          <th >
            <!-- checkbox th -->
            <!-- sortable th  -->
                <button class="bx--table-sort" data-event="sort" title="Protocol">
                  <span class="bx--table-header-label">Protocol</span>
                  <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--table-sort__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M12.3 9.3l-3.8 3.8V1h-1v12.1L3.7 9.3 3 10l5 5 5-5z"></path></svg>
                  <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--table-sort__icon-unsorted" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M13.8 10.3L12 12.1V2h-1v10.1l-1.8-1.8-.7.7 3 3 3-3zM4.5 2l-3 3 .7.7L4 3.9V14h1V3.9l1.8 1.8.7-.7z"></path></svg>
                </button>
              <!-- no sort th -->
                        </th>
          <th >
            <!-- checkbox th -->
            <!-- sortable th  -->
                <button class="bx--table-sort" data-event="sort" title="Port">
                  <span class="bx--table-header-label">Port</span>
                  <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--table-sort__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M12.3 9.3l-3.8 3.8V1h-1v12.1L3.7 9.3 3 10l5 5 5-5z"></path></svg>
                  <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--table-sort__icon-unsorted" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M13.8 10.3L12 12.1V2h-1v10.1l-1.8-1.8-.7.7 3 3 3-3zM4.5 2l-3 3 .7.7L4 3.9V14h1V3.9l1.8 1.8.7-.7z"></path></svg>
                </button>
              <!-- no sort th -->
                        </th>
          <th >
            <!-- checkbox th -->
            <!-- sortable th  -->
                <button class="bx--table-sort" data-event="sort" title="Rule">
                  <span class="bx--table-header-label">Rule</span>
                  <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--table-sort__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M12.3 9.3l-3.8 3.8V1h-1v12.1L3.7 9.3 3 10l5 5 5-5z"></path></svg>
                  <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--table-sort__icon-unsorted" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M13.8 10.3L12 12.1V2h-1v10.1l-1.8-1.8-.7.7 3 3 3-3zM4.5 2l-3 3 .7.7L4 3.9V14h1V3.9l1.8 1.8.7-.7z"></path></svg>
                </button>
              <!-- no sort th -->
                        </th>
          <th >
            <!-- checkbox th -->
            <!-- sortable th  -->
                <button class="bx--table-sort" data-event="sort" title="Attached Groups">
                  <span class="bx--table-header-label">Attached Groups</span>
                  <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--table-sort__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M12.3 9.3l-3.8 3.8V1h-1v12.1L3.7 9.3 3 10l5 5 5-5z"></path></svg>
                  <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--table-sort__icon-unsorted" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M13.8 10.3L12 12.1V2h-1v10.1l-1.8-1.8-.7.7 3 3 3-3zM4.5 2l-3 3 .7.7L4 3.9V14h1V3.9l1.8 1.8.7-.7z"></path></svg>
                </button>
              <!-- no sort th -->
                        </th>
          <th >
            <!-- checkbox th -->
            <!-- sortable th  -->
                <button class="bx--table-sort" data-event="sort" title="Status">
                  <span class="bx--table-header-label">Status</span>
                  <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--table-sort__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M12.3 9.3l-3.8 3.8V1h-1v12.1L3.7 9.3 3 10l5 5 5-5z"></path></svg>
                  <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--table-sort__icon-unsorted" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M13.8 10.3L12 12.1V2h-1v10.1l-1.8-1.8-.7.7 3 3 3-3zM4.5 2l-3 3 .7.7L4 3.9V14h1V3.9l1.8 1.8.7-.7z"></path></svg>
                </button>
              <!-- no sort th -->
                        </th>
          <th  class="bx--table-column-menu">
            <!-- checkbox th -->
          </th>
      </tr>
    </thead>
  <tbody>
      <tr >
          <!-- expand icon td -->
              <td class="bx--table-column-checkbox">
                <input data-event="select" id="bx--checkbox-13" class="bx--checkbox" type="checkbox" value="green" name="checkbox-13" >
                <label for="bx--checkbox-13" class="bx--checkbox-label" aria-label="Label name"></label>
              </td>
            <!-- inline action td's -->
          <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  Load Balancer 1
              </td>
                      <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  HTTP
              </td>
                      <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  80
              </td>
                      <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  Round Robin
              </td>
                      <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  Maureen&#x27;s VM Groups Testing a really long text here
              </td>
                      <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  Active
              </td>
                      <!-- expand icon td -->
              <td class="bx--table-column-menu">
                <div data-overflow-menu role="menu" tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
                  <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--overflow-menu__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><circle cx="8" cy="3" r="1"></circle><circle cx="8" cy="8" r="1"></circle><circle cx="8" cy="13" r="1"></circle></svg>
                  <ul class="bx--overflow-menu-options bx--overflow-menu--flip">

                      <li class="bx--overflow-menu-options__option bx--table-row--menu-option">
                        <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">
                          <div class="bx--overflow-menu-options__option-content">
                           <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M1 13h14v1H1zm11.7-8.5c.4-.4.4-1 0-1.4l-1.8-1.8c-.4-.4-1-.4-1.4 0L2 8.8V12h3.2l7.5-7.5zM10.2 2L12 3.8l-1.5 1.5-1.8-1.8L10.2 2zM3 11V9.2l5-5L9.8 6l-5 5H3z"></path></svg> Edit
                          </div>
                        </button>
                      </li>
                      <li class="bx--overflow-menu-options__option bx--table-row--menu-option">
                        <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">
                          <div class="bx--overflow-menu-options__option-content">
                            <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M13 7l-.7-.7-3.8 3.8V1h-1v9.1L3.7 6.3 3 7l5 5zm0 5v2H3v-2H2v2c0 .6.4 1 1 1h10c.6 0 1-.4 1-1v-2h-1z"></path></svg> Download
                          </div>
                        </button>
                      </li>
                      <li class="bx--overflow-menu-options__option bx--table-row--menu-option">
                        <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">
                          <div class="bx--overflow-menu-options__option-content">
                            <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M13.9 4.6l-2.5-2.5c-.1 0-.3-.1-.4-.1H3c-.6 0-1 .4-1 1v10c0 .6.4 1 1 1h10c.6 0 1-.4 1-1V5c0-.1-.1-.3-.1-.4zM6 3h4v2H6V3zm4 10H6V9h4v4zm1 0V9c0-.6-.4-1-1-1H6c-.6 0-1 .4-1 1v4H3V3h2v2c0 .6.4 1 1 1h4c.6 0 1-.4 1-1V3.2l2 2V13h-2z"></path></svg> Save
                          </div>
                        </button>
                      </li>
                      <li class="bx--overflow-menu-options__option bx--table-row--menu-option">
                        <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">
                          <div class="bx--overflow-menu-options__option-content">
                            <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M6 6h1v6H6zm3 0h1v6H9z"></path><path d="M2 3v1h1v10c0 .6.4 1 1 1h8c.6 0 1-.4 1-1V4h1V3H2zm2 11V4h8v10H4zM6 1h4v1H6z"></path></svg> Delete
                          </div>
                        </button>
                      </li>

                  </ul>
                </div>
              </td>
            <!-- inline edit tds -->
      </tr>
      <!-- Expandable child row -->
      <tr >
          <!-- expand icon td -->
              <td class="bx--table-column-checkbox">
                <input data-event="select" id="bx--checkbox-14" class="bx--checkbox" type="checkbox" value="green" name="checkbox-14" >
                <label for="bx--checkbox-14" class="bx--checkbox-label" aria-label="Label name"></label>
              </td>
            <!-- inline action td's -->
          <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  Load Balancer 5
              </td>
                      <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  HTTP
              </td>
                      <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  80
              </td>
                      <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  Round Robin
              </td>
                      <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  Maureen&#x27;s VM Groups
              </td>
                      <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  Active
              </td>
                      <!-- expand icon td -->
              <td class="bx--table-column-menu">
                <div data-overflow-menu role="menu" tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
                  <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--overflow-menu__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><circle cx="8" cy="3" r="1"></circle><circle cx="8" cy="8" r="1"></circle><circle cx="8" cy="13" r="1"></circle></svg>
                  <ul class="bx--overflow-menu-options bx--overflow-menu--flip">

                      <li class="bx--overflow-menu-options__option bx--table-row--menu-option">
                        <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">
                          <div class="bx--overflow-menu-options__option-content">
                           <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M1 13h14v1H1zm11.7-8.5c.4-.4.4-1 0-1.4l-1.8-1.8c-.4-.4-1-.4-1.4 0L2 8.8V12h3.2l7.5-7.5zM10.2 2L12 3.8l-1.5 1.5-1.8-1.8L10.2 2zM3 11V9.2l5-5L9.8 6l-5 5H3z"></path></svg> Edit
                          </div>
                        </button>
                      </li>
                      <li class="bx--overflow-menu-options__option bx--table-row--menu-option">
                        <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">
                          <div class="bx--overflow-menu-options__option-content">
                            <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M13 7l-.7-.7-3.8 3.8V1h-1v9.1L3.7 6.3 3 7l5 5zm0 5v2H3v-2H2v2c0 .6.4 1 1 1h10c.6 0 1-.4 1-1v-2h-1z"></path></svg> Download
                          </div>
                        </button>
                      </li>
                      <li class="bx--overflow-menu-options__option bx--table-row--menu-option">
                        <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">
                          <div class="bx--overflow-menu-options__option-content">
                            <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M13.9 4.6l-2.5-2.5c-.1 0-.3-.1-.4-.1H3c-.6 0-1 .4-1 1v10c0 .6.4 1 1 1h10c.6 0 1-.4 1-1V5c0-.1-.1-.3-.1-.4zM6 3h4v2H6V3zm4 10H6V9h4v4zm1 0V9c0-.6-.4-1-1-1H6c-.6 0-1 .4-1 1v4H3V3h2v2c0 .6.4 1 1 1h4c.6 0 1-.4 1-1V3.2l2 2V13h-2z"></path></svg> Save
                          </div>
                        </button>
                      </li>
                      <li class="bx--overflow-menu-options__option bx--table-row--menu-option">
                        <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">
                          <div class="bx--overflow-menu-options__option-content">
                            <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M6 6h1v6H6zm3 0h1v6H9z"></path><path d="M2 3v1h1v10c0 .6.4 1 1 1h8c.6 0 1-.4 1-1V4h1V3H2zm2 11V4h8v10H4zM6 1h4v1H6z"></path></svg> Delete
                          </div>
                        </button>
                      </li>

                  </ul>
                </div>
              </td>
            <!-- inline edit tds -->
      </tr>
      <!-- Expandable child row -->
      <tr >
          <!-- expand icon td -->
              <td class="bx--table-column-checkbox">
                <input data-event="select" id="bx--checkbox-15" class="bx--checkbox" type="checkbox" value="green" name="checkbox-15" >
                <label for="bx--checkbox-15" class="bx--checkbox-label" aria-label="Label name"></label>
              </td>
            <!-- inline action td's -->
          <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  Load Balancer 5
              </td>
                      <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  HTTP
              </td>
                      <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  80
              </td>
                      <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  Round Robin
              </td>
                      <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  Maureen&#x27;s VM Groups
              </td>
                      <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  Active
              </td>
                      <!-- expand icon td -->
              <td class="bx--table-column-menu">
                <div data-overflow-menu role="menu" tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
                  <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--overflow-menu__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><circle cx="8" cy="3" r="1"></circle><circle cx="8" cy="8" r="1"></circle><circle cx="8" cy="13" r="1"></circle></svg>
                  <ul class="bx--overflow-menu-options bx--overflow-menu--flip">

                      <li class="bx--overflow-menu-options__option bx--table-row--menu-option">
                        <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">
                          <div class="bx--overflow-menu-options__option-content">
                           <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M1 13h14v1H1zm11.7-8.5c.4-.4.4-1 0-1.4l-1.8-1.8c-.4-.4-1-.4-1.4 0L2 8.8V12h3.2l7.5-7.5zM10.2 2L12 3.8l-1.5 1.5-1.8-1.8L10.2 2zM3 11V9.2l5-5L9.8 6l-5 5H3z"></path></svg> Edit
                          </div>
                        </button>
                      </li>
                      <li class="bx--overflow-menu-options__option bx--table-row--menu-option">
                        <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">
                          <div class="bx--overflow-menu-options__option-content">
                            <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M13 7l-.7-.7-3.8 3.8V1h-1v9.1L3.7 6.3 3 7l5 5zm0 5v2H3v-2H2v2c0 .6.4 1 1 1h10c.6 0 1-.4 1-1v-2h-1z"></path></svg> Download
                          </div>
                        </button>
                      </li>
                      <li class="bx--overflow-menu-options__option bx--table-row--menu-option">
                        <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">
                          <div class="bx--overflow-menu-options__option-content">
                            <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M13.9 4.6l-2.5-2.5c-.1 0-.3-.1-.4-.1H3c-.6 0-1 .4-1 1v10c0 .6.4 1 1 1h10c.6 0 1-.4 1-1V5c0-.1-.1-.3-.1-.4zM6 3h4v2H6V3zm4 10H6V9h4v4zm1 0V9c0-.6-.4-1-1-1H6c-.6 0-1 .4-1 1v4H3V3h2v2c0 .6.4 1 1 1h4c.6 0 1-.4 1-1V3.2l2 2V13h-2z"></path></svg> Save
                          </div>
                        </button>
                      </li>
                      <li class="bx--overflow-menu-options__option bx--table-row--menu-option">
                        <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">
                          <div class="bx--overflow-menu-options__option-content">
                            <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M6 6h1v6H6zm3 0h1v6H9z"></path><path d="M2 3v1h1v10c0 .6.4 1 1 1h8c.6 0 1-.4 1-1V4h1V3H2zm2 11V4h8v10H4zM6 1h4v1H6z"></path></svg> Delete
                          </div>
                        </button>
                      </li>

                  </ul>
                </div>
              </td>
            <!-- inline edit tds -->
      </tr>
      <!-- Expandable child row -->
      <tr >
          <!-- expand icon td -->
              <td class="bx--table-column-checkbox">
                <input data-event="select" id="bx--checkbox-11" class="bx--checkbox" type="checkbox" value="green" name="checkbox-11" >
                <label for="bx--checkbox-11" class="bx--checkbox-label" aria-label="Label name"></label>
              </td>
            <!-- inline action td's -->
          <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  Load Balancer 5
              </td>
                      <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  HTTP
              </td>
                      <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  80
              </td>
                      <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  Round Robin
              </td>
                      <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  Maureen&#x27;s VM Groups
              </td>
                      <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  Active
              </td>
                      <!-- expand icon td -->
              <td class="bx--table-column-menu">
                <div data-overflow-menu role="menu" tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
                  <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--overflow-menu__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><circle cx="8" cy="3" r="1"></circle><circle cx="8" cy="8" r="1"></circle><circle cx="8" cy="13" r="1"></circle></svg>
                  <ul class="bx--overflow-menu-options bx--overflow-menu--flip">

                      <li class="bx--overflow-menu-options__option bx--table-row--menu-option">
                        <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">
                          <div class="bx--overflow-menu-options__option-content">
                           <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M1 13h14v1H1zm11.7-8.5c.4-.4.4-1 0-1.4l-1.8-1.8c-.4-.4-1-.4-1.4 0L2 8.8V12h3.2l7.5-7.5zM10.2 2L12 3.8l-1.5 1.5-1.8-1.8L10.2 2zM3 11V9.2l5-5L9.8 6l-5 5H3z"></path></svg> Edit
                          </div>
                        </button>
                      </li>
                      <li class="bx--overflow-menu-options__option bx--table-row--menu-option">
                        <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">
                          <div class="bx--overflow-menu-options__option-content">
                            <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M13 7l-.7-.7-3.8 3.8V1h-1v9.1L3.7 6.3 3 7l5 5zm0 5v2H3v-2H2v2c0 .6.4 1 1 1h10c.6 0 1-.4 1-1v-2h-1z"></path></svg> Download
                          </div>
                        </button>
                      </li>
                      <li class="bx--overflow-menu-options__option bx--table-row--menu-option">
                        <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">
                          <div class="bx--overflow-menu-options__option-content">
                            <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M13.9 4.6l-2.5-2.5c-.1 0-.3-.1-.4-.1H3c-.6 0-1 .4-1 1v10c0 .6.4 1 1 1h10c.6 0 1-.4 1-1V5c0-.1-.1-.3-.1-.4zM6 3h4v2H6V3zm4 10H6V9h4v4zm1 0V9c0-.6-.4-1-1-1H6c-.6 0-1 .4-1 1v4H3V3h2v2c0 .6.4 1 1 1h4c.6 0 1-.4 1-1V3.2l2 2V13h-2z"></path></svg> Save
                          </div>
                        </button>
                      </li>
                      <li class="bx--overflow-menu-options__option bx--table-row--menu-option">
                        <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">
                          <div class="bx--overflow-menu-options__option-content">
                            <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M6 6h1v6H6zm3 0h1v6H9z"></path><path d="M2 3v1h1v10c0 .6.4 1 1 1h8c.6 0 1-.4 1-1V4h1V3H2zm2 11V4h8v10H4zM6 1h4v1H6z"></path></svg> Delete
                          </div>
                        </button>
                      </li>

                  </ul>
                </div>
              </td>
            <!-- inline edit tds -->
      </tr>
      <!-- Expandable child row -->
      <tr >
          <!-- expand icon td -->
              <td class="bx--table-column-checkbox">
                <input data-event="select" id="bx--checkbox-12" class="bx--checkbox" type="checkbox" value="green" name="checkbox-12" >
                <label for="bx--checkbox-12" class="bx--checkbox-label" aria-label="Label name"></label>
              </td>
            <!-- inline action td's -->
          <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  Load Balancer 5
              </td>
                      <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  HTTP
              </td>
                      <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  80
              </td>
                      <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  Round Robin
              </td>
                      <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  Maureen&#x27;s VM Groups
              </td>
                      <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  Active
              </td>
                      <!-- expand icon td -->
              <td class="bx--table-column-menu">
                <div data-overflow-menu role="menu" tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
                  <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--overflow-menu__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><circle cx="8" cy="3" r="1"></circle><circle cx="8" cy="8" r="1"></circle><circle cx="8" cy="13" r="1"></circle></svg>
                  <ul class="bx--overflow-menu-options bx--overflow-menu--flip">

                      <li class="bx--overflow-menu-options__option bx--table-row--menu-option">
                        <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">
                          <div class="bx--overflow-menu-options__option-content">
                           <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M1 13h14v1H1zm11.7-8.5c.4-.4.4-1 0-1.4l-1.8-1.8c-.4-.4-1-.4-1.4 0L2 8.8V12h3.2l7.5-7.5zM10.2 2L12 3.8l-1.5 1.5-1.8-1.8L10.2 2zM3 11V9.2l5-5L9.8 6l-5 5H3z"></path></svg> Edit
                          </div>
                        </button>
                      </li>
                      <li class="bx--overflow-menu-options__option bx--table-row--menu-option">
                        <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">
                          <div class="bx--overflow-menu-options__option-content">
                            <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M13 7l-.7-.7-3.8 3.8V1h-1v9.1L3.7 6.3 3 7l5 5zm0 5v2H3v-2H2v2c0 .6.4 1 1 1h10c.6 0 1-.4 1-1v-2h-1z"></path></svg> Download
                          </div>
                        </button>
                      </li>
                      <li class="bx--overflow-menu-options__option bx--table-row--menu-option">
                        <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">
                          <div class="bx--overflow-menu-options__option-content">
                            <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M13.9 4.6l-2.5-2.5c-.1 0-.3-.1-.4-.1H3c-.6 0-1 .4-1 1v10c0 .6.4 1 1 1h10c.6 0 1-.4 1-1V5c0-.1-.1-.3-.1-.4zM6 3h4v2H6V3zm4 10H6V9h4v4zm1 0V9c0-.6-.4-1-1-1H6c-.6 0-1 .4-1 1v4H3V3h2v2c0 .6.4 1 1 1h4c.6 0 1-.4 1-1V3.2l2 2V13h-2z"></path></svg> Save
                          </div>
                        </button>
                      </li>
                      <li class="bx--overflow-menu-options__option bx--table-row--menu-option">
                        <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">
                          <div class="bx--overflow-menu-options__option-content">
                            <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M6 6h1v6H6zm3 0h1v6H9z"></path><path d="M2 3v1h1v10c0 .6.4 1 1 1h8c.6 0 1-.4 1-1V4h1V3H2zm2 11V4h8v10H4zM6 1h4v1H6z"></path></svg> Delete
                          </div>
                        </button>
                      </li>

                  </ul>
                </div>
              </td>
            <!-- inline edit tds -->
      </tr>
      <!-- Expandable child row -->
    </tbody>
  </table>
  </section>

  <!-- Pagination -->
  <div class="bx--pagination" data-pagination>
    <div class="bx--pagination__left">
      <label
         id="select-id-pagination-count-label"
         class="bx--pagination__text"
         for="select-id-pagination-count"
       >
         Items per page:
       </label>
       <div class="bx--select bx--select--inline bx--select__item-count">
         <select
           class="bx--select-input"
           id="select-id-pagination-count"
           aria-label="select number of items per page"
           tabindex="0"
           data-items-per-page
         >
           <option class="bx--select-option" value="10" selected>10</option>
           <option class="bx--select-option" value="20">20</option>
           <option class="bx--select-option" value="30">30</option>
           <option class="bx--select-option" value="40">40</option>
           <option class="bx--select-option" value="50">50</option>
         </select>
         <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--select__arrow" width="10" height="6" viewBox="0 0 10 6" aria-hidden="true"><path d="M5 6L0 1 .7.3 5 4.6 9.3.3l.7.7z"></path></svg>
      </div>
      <span class="bx--pagination__text">
         <span data-displayed-item-range>1-10</span> of
         <span data-total-items>50</span> items
      </span>
    </div>
    <div class="bx--pagination__right">
       <div class="bx--select bx--select--inline bx--select__page-number">
         <select
           class="bx--select-input"
           id="select-id-pagination-page"
           aria-label="select page number to view"
           tabindex="0"
           data-page-number-input
         >
           <option class="bx--select-option" value="1" selected>1</option>
           <option class="bx--select-option" value="2">2</option>
           <option class="bx--select-option" value="3">3</option>
           <option class="bx--select-option" value="4">4</option>
           <option class="bx--select-option" value="5">5</option>
         </select>
         <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--select__arrow" width="10" height="6" viewBox="0 0 10 6" aria-hidden="true"><path d="M5 6L0 1 .7.3 5 4.6 9.3.3l.7.7z"></path></svg>
       </div>
       <label
        id="select-id-pagination-page-label"
        class="bx--pagination__text"
        for="select-id-pagination-page"
      >
        of 5 pages
      </label>
      <button class="bx--pagination__button bx--pagination__button--backward" tabindex="0" data-page-backward aria-label="Backward button">
        <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--pagination__nav-arrow" width="20" height="20" viewBox="0 0 32 32" aria-hidden="true"><path d="M19 23l-8-7 8-7v14z"></path></svg>
      </button>
      <button class="bx--pagination__button bx--pagination__button--forward" tabindex="0" data-page-forward aria-label="Forward button">
        <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--pagination__nav-arrow" width="20" height="20" viewBox="0 0 32 32" aria-hidden="true"><path d="M13 9l8 7-8 7V9z"></path></svg>
      </button>
    </div>
  </div>
</div>

Documentation

SCSS

The update to tables splits out the scss files into multiple partial files with specific functionality, with a main index file bringing them together.

Files

Name Description
data-table index file, brings in all functionality
data-table-core Core styles and base modifiers, required
data-table-action Action bar styles
data-table-expandable Expandable row styles
data-table-sort Sortable header styles

Modifiers

Name Description
bx--data-table--compact Change table row height to 24
bx--data-table--short Change table row height to 32
bx--data-table--tall Change table row height to 64
bx--data-table--zebra Toggle on zebra striping
bx--data-table--static Change default table width from 100% to auto
bx--data-table--no-border Remove default border on table cells
bx--data-table--visible-overflow-menu Show overflow menu icons by default (without hover)

JavaScript

Getting component class reference

ES2015
import { DataTable } from 'carbon-components';
With pre-build bundle (carbon-components.min.js)
var DataTable = CarbonComponents.DataTable;

Instantiating

// `#my-data-table` is an element with `[data-data-table]` attribute
DataTable.create(document.getElementById('my-data-table'));

Public Methods

Name Params Descriptions
release Deletes the instance and removes document event listeners
refreshRows When adding in new table rows, reinitialize parent-child relationships. Not required if not using expandable rows
Example - Keeping data table in sync with dynamic change in rows list (For expantable table)
// `#my-data-table` is an element with `[data-data-table]` attribute
var dataTableInstance = DataTable.create(
  document.getElementById('my-data-table')
);
dataTableInstance.refreshRows();

Events

Key Value Description
eventBeforeExpand data-table-beforetoggleexpand Row expansion event
eventAfterExpand data-table-aftertoggleexpand Row expansion event
eventBeforeSort data-table-beforetogglesort Sort event
eventAfterSort data-table-aftertogglesort Sort event
eventTrigger [data-event] Data attribute for clickable events
eventParentContainer [data-parent-row] Data attribute for event container
Example - Preventing a table expando from being toggled in a certain condition
document.addEventListener('data-table-beforetoggleexpand', function(evt) {
  if (!myApplication.shouldToggleExpando(evt.target)) {
    evt.preventDefault();
  }
});
Example - Sorting table content
document.addEventListener('data-table-aftertogglesort', function(evt) {
  // `evt.target` will be `div.bx--data-table-container`
  // `evt.detail.element` will be `button.bx--table-sort` whose sorting is changed,
  // and will have `bx--table-sort--ascending` class or not depending on the sorting state
  evt.target.querySelector(
    'tbody'
  ).innerHTML = myApplication.resortTableContent(
    evt.target,
    evt.detail.element
  );
});

Options

Key Value Description
selectorInit [data-table] Required css class to target table element
selectorToolbar .bx--table--toolbar Toolbar parent selector
selectorActions .bx--batch-actions Action bar parent selector
selectorCount [data-items-selected] Selected count span selector
selectorActionCancel .bx--batch-summary__cancel Action cancel button selector
selectorCheckbox .bx--checkbox Checkbox class selector
selectorExpandCells .bx--table-expand Expand td selector
selectorExpandableRows .bx--expandable-row Expand tr selector
selectorParentRows .bx--parent-row Parent row selector
selectorChildRow [data-child-row] Child row selector
selectorTableBody tbody Generic tbody selector
classExpandableRow bx--expandable-row Expandable Row parent class
classExpandableRowHidden bx--expandable-row--hidden Initial hidden class
classExpandableRowHover bx--expandable-row--hover Hover styles class
classTableSortAscending bx--table-sort--ascending Ascending sort icon class
classTableSortActive bx--table-sort--active Active sort icon class

FAQ

How do I sort the tables The table component does not sort the table for you, rather it emits an event and toggles the sort UI. It is up to the user to re-render the table rows sorted; you can see this in action in the React Storybook.

How do I use the expandable rows If you would like to programmatically expand table rows, you can add the bx--expandable-row to the selectorParentRows elements.

How do I activate the batch actions pane If you would like to programmatically activate the batch actions pane, you can add bx--batch-actions--active to the bx--batch-actions element.