Data table

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 -->

  <!-- Table -->
  <table class="bx--data-table   " >
    <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>

  <!-- 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 6H7V12H6zM9 6H10V12H9z"></path><path d="M2 3v1h1v10c0 .6.4 1 1 1h8c.6 0 1-.4 1-1V4h1V3H2zM4 14V4h8v10H4zM6 1H10V2H6z"></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.5C11.3,2.1,11.1,2,11,2H3C2.4,2,2,2.4,2,3v10c0,0.6,0.4,1,1,1h10c0.6,0,1-0.4,1-1V5	C14,4.9,13.9,4.7,13.9,4.6z M6,3h4v2H6V3z M10,13H6V9h4V13z M11,13V9c0-0.6-0.4-1-1-1H6C5.4,8,5,8.4,5,9v4H3V3h2v2c0,0.6,0.4,1,1,1	h4c0.6,0,1-0.4,1-1V3.2l2,2V13H11z"></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 7L12.3 6.3 8.5 10.1 8.5 1 7.5 1 7.5 10.1 3.7 6.3 3 7 8 12zM13 12v2H3v-2H2v2l0 0c0 .6.4 1 1 1h10c.6 0 1-.4 1-1l0 0v-2H13z"></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-0.7-7.7S4.2,0.7,2.3,3S0.7,8.8,3,10.7c2,1.7,5,1.7,7,0l4.3,4.3L15,14.3z M2,6.5	C2,4,4,2,6.5,2S11,4,11,6.5S9,11,6.5,11S2,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.7L11.3 4 8 7.3 4.7 4 4 4.7 7.3 8 4 11.3 4.7 12 8 8.7 11.3 12 12 11.3 8.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.4c0-0.1,0-0.3,0-0.4c0-0.1,0-0.3,0-0.4l1-0.8c0.4-0.3,0.4-0.9,0.2-1.3l-1.2-2C13.3,3.2,13,3,12.6,3	c-0.1,0-0.2,0-0.3,0.1l-1.2,0.4c-0.2-0.1-0.4-0.3-0.7-0.4l-0.3-1.3C10.1,1.3,9.7,1,9.2,1H6.8c-0.5,0-0.9,0.3-1,0.8L5.6,3.1	C5.3,3.2,5.1,3.3,4.9,3.4L3.7,3C3.6,3,3.5,3,3.4,3C3,3,2.7,3.2,2.5,3.5l-1.2,2C1.1,5.9,1.2,6.4,1.6,6.8l0.9,0.9c0,0.1,0,0.3,0,0.4	c0,0.1,0,0.3,0,0.4L1.6,9.2c-0.4,0.3-0.5,0.9-0.2,1.3l1.2,2C2.7,12.8,3,13,3.4,13c0.1,0,0.2,0,0.3-0.1l1.2-0.4	c0.2,0.1,0.4,0.3,0.7,0.4l0.3,1.3c0.1,0.5,0.5,0.8,1,0.8h2.4c0.5,0,0.9-0.3,1-0.8l0.3-1.3c0.2-0.1,0.4-0.2,0.7-0.4l1.2,0.4	c0.1,0,0.2,0.1,0.3,0.1c0.4,0,0.7-0.2,0.9-0.5l1.1-2c0.2-0.4,0.2-0.9-0.2-1.3L13.5,8.4z M12.6,12l-1.7-0.6c-0.4,0.3-0.9,0.6-1.4,0.8	L9.2,14H6.8l-0.4-1.8c-0.5-0.2-0.9-0.5-1.4-0.8L3.4,12l-1.2-2l1.4-1.2c-0.1-0.5-0.1-1.1,0-1.6L2.2,6l1.2-2l1.7,0.6	C5.5,4.2,6,4,6.5,3.8L6.8,2h2.4l0.4,1.8c0.5,0.2,0.9,0.5,1.4,0.8L12.6,4l1.2,2l-1.4,1.2c0.1,0.5,0.1,1.1,0,1.6l1.4,1.2L12.6,12z"></path><path d="M8,11c-1.7,0-3-1.3-3-3s1.3-3,3-3s3,1.3,3,3C11,9.6,9.7,11,8,11C8,11,8,11,8,11z M8,6C6.9,6,6,6.8,6,7.9C6,7.9,6,8,6,8	c0,1.1,0.8,2,1.9,2c0,0,0.1,0,0.1,0c1.1,0,2-0.8,2-1.9c0,0,0-0.1,0-0.1C10,6.9,9.2,6,8,6C8.1,6,8,6,8,6z"></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 15L17 7 15 7 15 15 7 15 7 17 15 17 15 25 17 25 17 17 25 17 25 15 17 15z"></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.3L8.5 13.1 8.5 1 7.5 1 7.5 13.1 3.7 9.3 3 10 8 15 13 10z"></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.1 12 2 11 2 11 12.1 9.2 10.3 8.5 11 11.5 14 14.5 11zM4.5 2L1.5 5 2.2 5.7 4 3.9 4 14 5 14 5 3.9 6.8 5.7 7.5 5z"></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.3L8.5 13.1 8.5 1 7.5 1 7.5 13.1 3.7 9.3 3 10 8 15 13 10z"></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.1 12 2 11 2 11 12.1 9.2 10.3 8.5 11 11.5 14 14.5 11zM4.5 2L1.5 5 2.2 5.7 4 3.9 4 14 5 14 5 3.9 6.8 5.7 7.5 5z"></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.3L8.5 13.1 8.5 1 7.5 1 7.5 13.1 3.7 9.3 3 10 8 15 13 10z"></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.1 12 2 11 2 11 12.1 9.2 10.3 8.5 11 11.5 14 14.5 11zM4.5 2L1.5 5 2.2 5.7 4 3.9 4 14 5 14 5 3.9 6.8 5.7 7.5 5z"></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.3L8.5 13.1 8.5 1 7.5 1 7.5 13.1 3.7 9.3 3 10 8 15 13 10z"></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.1 12 2 11 2 11 12.1 9.2 10.3 8.5 11 11.5 14 14.5 11zM4.5 2L1.5 5 2.2 5.7 4 3.9 4 14 5 14 5 3.9 6.8 5.7 7.5 5z"></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.3L8.5 13.1 8.5 1 7.5 1 7.5 13.1 3.7 9.3 3 10 8 15 13 10z"></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.1 12 2 11 2 11 12.1 9.2 10.3 8.5 11 11.5 14 14.5 11zM4.5 2L1.5 5 2.2 5.7 4 3.9 4 14 5 14 5 3.9 6.8 5.7 7.5 5z"></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.3L8.5 13.1 8.5 1 7.5 1 7.5 13.1 3.7 9.3 3 10 8 15 13 10z"></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.1 12 2 11 2 11 12.1 9.2 10.3 8.5 11 11.5 14 14.5 11zM4.5 2L1.5 5 2.2 5.7 4 3.9 4 14 5 14 5 3.9 6.8 5.7 7.5 5z"></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 8L6 13 5.3 12.3 9.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 8L6 13 5.3 12.3 9.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 " 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 6H7V12H6zM9 6H10V12H9z"></path><path d="M2 3v1h1v10c0 .6.4 1 1 1h8c.6 0 1-.4 1-1V4h1V3H2zM4 14V4h8v10H4zM6 1H10V2H6z"></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.5C11.3,2.1,11.1,2,11,2H3C2.4,2,2,2.4,2,3v10c0,0.6,0.4,1,1,1h10c0.6,0,1-0.4,1-1V5	C14,4.9,13.9,4.7,13.9,4.6z M6,3h4v2H6V3z M10,13H6V9h4V13z M11,13V9c0-0.6-0.4-1-1-1H6C5.4,8,5,8.4,5,9v4H3V3h2v2c0,0.6,0.4,1,1,1	h4c0.6,0,1-0.4,1-1V3.2l2,2V13H11z"></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 7L12.3 6.3 8.5 10.1 8.5 1 7.5 1 7.5 10.1 3.7 6.3 3 7 8 12zM13 12v2H3v-2H2v2l0 0c0 .6.4 1 1 1h10c.6 0 1-.4 1-1l0 0v-2H13z"></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-0.7-7.7S4.2,0.7,2.3,3S0.7,8.8,3,10.7c2,1.7,5,1.7,7,0l4.3,4.3L15,14.3z M2,6.5	C2,4,4,2,6.5,2S11,4,11,6.5S9,11,6.5,11S2,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.7L11.3 4 8 7.3 4.7 4 4 4.7 7.3 8 4 11.3 4.7 12 8 8.7 11.3 12 12 11.3 8.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.4c0-0.1,0-0.3,0-0.4c0-0.1,0-0.3,0-0.4l1-0.8c0.4-0.3,0.4-0.9,0.2-1.3l-1.2-2C13.3,3.2,13,3,12.6,3	c-0.1,0-0.2,0-0.3,0.1l-1.2,0.4c-0.2-0.1-0.4-0.3-0.7-0.4l-0.3-1.3C10.1,1.3,9.7,1,9.2,1H6.8c-0.5,0-0.9,0.3-1,0.8L5.6,3.1	C5.3,3.2,5.1,3.3,4.9,3.4L3.7,3C3.6,3,3.5,3,3.4,3C3,3,2.7,3.2,2.5,3.5l-1.2,2C1.1,5.9,1.2,6.4,1.6,6.8l0.9,0.9c0,0.1,0,0.3,0,0.4	c0,0.1,0,0.3,0,0.4L1.6,9.2c-0.4,0.3-0.5,0.9-0.2,1.3l1.2,2C2.7,12.8,3,13,3.4,13c0.1,0,0.2,0,0.3-0.1l1.2-0.4	c0.2,0.1,0.4,0.3,0.7,0.4l0.3,1.3c0.1,0.5,0.5,0.8,1,0.8h2.4c0.5,0,0.9-0.3,1-0.8l0.3-1.3c0.2-0.1,0.4-0.2,0.7-0.4l1.2,0.4	c0.1,0,0.2,0.1,0.3,0.1c0.4,0,0.7-0.2,0.9-0.5l1.1-2c0.2-0.4,0.2-0.9-0.2-1.3L13.5,8.4z M12.6,12l-1.7-0.6c-0.4,0.3-0.9,0.6-1.4,0.8	L9.2,14H6.8l-0.4-1.8c-0.5-0.2-0.9-0.5-1.4-0.8L3.4,12l-1.2-2l1.4-1.2c-0.1-0.5-0.1-1.1,0-1.6L2.2,6l1.2-2l1.7,0.6	C5.5,4.2,6,4,6.5,3.8L6.8,2h2.4l0.4,1.8c0.5,0.2,0.9,0.5,1.4,0.8L12.6,4l1.2,2l-1.4,1.2c0.1,0.5,0.1,1.1,0,1.6l1.4,1.2L12.6,12z"></path><path d="M8,11c-1.7,0-3-1.3-3-3s1.3-3,3-3s3,1.3,3,3C11,9.6,9.7,11,8,11C8,11,8,11,8,11z M8,6C6.9,6,6,6.8,6,7.9C6,7.9,6,8,6,8	c0,1.1,0.8,2,1.9,2c0,0,0.1,0,0.1,0c1.1,0,2-0.8,2-1.9c0,0,0-0.1,0-0.1C10,6.9,9.2,6,8,6C8.1,6,8,6,8,6z"></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 15L17 7 15 7 15 15 7 15 7 17 15 17 15 25 17 25 17 17 25 17 25 15 17 15z"></path></svg>
          </button>
      </div>
    </section>
  <!-- End Toolbar Content -->

  <!-- Table -->
  <table class="bx--data-table  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.3L8.5 13.1 8.5 1 7.5 1 7.5 13.1 3.7 9.3 3 10 8 15 13 10z"></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.1 12 2 11 2 11 12.1 9.2 10.3 8.5 11 11.5 14 14.5 11zM4.5 2L1.5 5 2.2 5.7 4 3.9 4 14 5 14 5 3.9 6.8 5.7 7.5 5z"></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.3L8.5 13.1 8.5 1 7.5 1 7.5 13.1 3.7 9.3 3 10 8 15 13 10z"></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.1 12 2 11 2 11 12.1 9.2 10.3 8.5 11 11.5 14 14.5 11zM4.5 2L1.5 5 2.2 5.7 4 3.9 4 14 5 14 5 3.9 6.8 5.7 7.5 5z"></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.3L8.5 13.1 8.5 1 7.5 1 7.5 13.1 3.7 9.3 3 10 8 15 13 10z"></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.1 12 2 11 2 11 12.1 9.2 10.3 8.5 11 11.5 14 14.5 11zM4.5 2L1.5 5 2.2 5.7 4 3.9 4 14 5 14 5 3.9 6.8 5.7 7.5 5z"></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.3L8.5 13.1 8.5 1 7.5 1 7.5 13.1 3.7 9.3 3 10 8 15 13 10z"></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.1 12 2 11 2 11 12.1 9.2 10.3 8.5 11 11.5 14 14.5 11zM4.5 2L1.5 5 2.2 5.7 4 3.9 4 14 5 14 5 3.9 6.8 5.7 7.5 5z"></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.3L8.5 13.1 8.5 1 7.5 1 7.5 13.1 3.7 9.3 3 10 8 15 13 10z"></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.1 12 2 11 2 11 12.1 9.2 10.3 8.5 11 11.5 14 14.5 11zM4.5 2L1.5 5 2.2 5.7 4 3.9 4 14 5 14 5 3.9 6.8 5.7 7.5 5z"></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.3L8.5 13.1 8.5 1 7.5 1 7.5 13.1 3.7 9.3 3 10 8 15 13 10z"></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.1 12 2 11 2 11 12.1 9.2 10.3 8.5 11 11.5 14 14.5 11zM4.5 2L1.5 5 2.2 5.7 4 3.9 4 14 5 14 5 3.9 6.8 5.7 7.5 5z"></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 13H15V14H1zM12.7 4.5c.4-.4.4-1 0-1.4 0 0 0 0 0 0l-1.8-1.8c-.4-.4-1-.4-1.4 0 0 0 0 0 0 0L2 8.8V12h3.2L12.7 4.5zM10.2 2L12 3.8l-1.5 1.5L8.7 3.5 10.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 7L12.3 6.3 8.5 10.1 8.5 1 7.5 1 7.5 10.1 3.7 6.3 3 7 8 12zM13 12v2H3v-2H2v2l0 0c0 .6.4 1 1 1h10c.6 0 1-.4 1-1l0 0v-2H13z"></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.5C11.3,2.1,11.1,2,11,2H3C2.4,2,2,2.4,2,3v10c0,0.6,0.4,1,1,1h10c0.6,0,1-0.4,1-1V5	C14,4.9,13.9,4.7,13.9,4.6z M6,3h4v2H6V3z M10,13H6V9h4V13z M11,13V9c0-0.6-0.4-1-1-1H6C5.4,8,5,8.4,5,9v4H3V3h2v2c0,0.6,0.4,1,1,1	h4c0.6,0,1-0.4,1-1V3.2l2,2V13H11z"></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 6H7V12H6zM9 6H10V12H9z"></path><path d="M2 3v1h1v10c0 .6.4 1 1 1h8c.6 0 1-.4 1-1V4h1V3H2zM4 14V4h8v10H4zM6 1H10V2H6z"></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 13H15V14H1zM12.7 4.5c.4-.4.4-1 0-1.4 0 0 0 0 0 0l-1.8-1.8c-.4-.4-1-.4-1.4 0 0 0 0 0 0 0L2 8.8V12h3.2L12.7 4.5zM10.2 2L12 3.8l-1.5 1.5L8.7 3.5 10.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 7L12.3 6.3 8.5 10.1 8.5 1 7.5 1 7.5 10.1 3.7 6.3 3 7 8 12zM13 12v2H3v-2H2v2l0 0c0 .6.4 1 1 1h10c.6 0 1-.4 1-1l0 0v-2H13z"></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.5C11.3,2.1,11.1,2,11,2H3C2.4,2,2,2.4,2,3v10c0,0.6,0.4,1,1,1h10c0.6,0,1-0.4,1-1V5	C14,4.9,13.9,4.7,13.9,4.6z M6,3h4v2H6V3z M10,13H6V9h4V13z M11,13V9c0-0.6-0.4-1-1-1H6C5.4,8,5,8.4,5,9v4H3V3h2v2c0,0.6,0.4,1,1,1	h4c0.6,0,1-0.4,1-1V3.2l2,2V13H11z"></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 6H7V12H6zM9 6H10V12H9z"></path><path d="M2 3v1h1v10c0 .6.4 1 1 1h8c.6 0 1-.4 1-1V4h1V3H2zM4 14V4h8v10H4zM6 1H10V2H6z"></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 13H15V14H1zM12.7 4.5c.4-.4.4-1 0-1.4 0 0 0 0 0 0l-1.8-1.8c-.4-.4-1-.4-1.4 0 0 0 0 0 0 0L2 8.8V12h3.2L12.7 4.5zM10.2 2L12 3.8l-1.5 1.5L8.7 3.5 10.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 7L12.3 6.3 8.5 10.1 8.5 1 7.5 1 7.5 10.1 3.7 6.3 3 7 8 12zM13 12v2H3v-2H2v2l0 0c0 .6.4 1 1 1h10c.6 0 1-.4 1-1l0 0v-2H13z"></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.5C11.3,2.1,11.1,2,11,2H3C2.4,2,2,2.4,2,3v10c0,0.6,0.4,1,1,1h10c0.6,0,1-0.4,1-1V5	C14,4.9,13.9,4.7,13.9,4.6z M6,3h4v2H6V3z M10,13H6V9h4V13z M11,13V9c0-0.6-0.4-1-1-1H6C5.4,8,5,8.4,5,9v4H3V3h2v2c0,0.6,0.4,1,1,1	h4c0.6,0,1-0.4,1-1V3.2l2,2V13H11z"></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 6H7V12H6zM9 6H10V12H9z"></path><path d="M2 3v1h1v10c0 .6.4 1 1 1h8c.6 0 1-.4 1-1V4h1V3H2zM4 14V4h8v10H4zM6 1H10V2H6z"></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 13H15V14H1zM12.7 4.5c.4-.4.4-1 0-1.4 0 0 0 0 0 0l-1.8-1.8c-.4-.4-1-.4-1.4 0 0 0 0 0 0 0L2 8.8V12h3.2L12.7 4.5zM10.2 2L12 3.8l-1.5 1.5L8.7 3.5 10.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 7L12.3 6.3 8.5 10.1 8.5 1 7.5 1 7.5 10.1 3.7 6.3 3 7 8 12zM13 12v2H3v-2H2v2l0 0c0 .6.4 1 1 1h10c.6 0 1-.4 1-1l0 0v-2H13z"></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.5C11.3,2.1,11.1,2,11,2H3C2.4,2,2,2.4,2,3v10c0,0.6,0.4,1,1,1h10c0.6,0,1-0.4,1-1V5	C14,4.9,13.9,4.7,13.9,4.6z M6,3h4v2H6V3z M10,13H6V9h4V13z M11,13V9c0-0.6-0.4-1-1-1H6C5.4,8,5,8.4,5,9v4H3V3h2v2c0,0.6,0.4,1,1,1	h4c0.6,0,1-0.4,1-1V3.2l2,2V13H11z"></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 6H7V12H6zM9 6H10V12H9z"></path><path d="M2 3v1h1v10c0 .6.4 1 1 1h8c.6 0 1-.4 1-1V4h1V3H2zM4 14V4h8v10H4zM6 1H10V2H6z"></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 13H15V14H1zM12.7 4.5c.4-.4.4-1 0-1.4 0 0 0 0 0 0l-1.8-1.8c-.4-.4-1-.4-1.4 0 0 0 0 0 0 0L2 8.8V12h3.2L12.7 4.5zM10.2 2L12 3.8l-1.5 1.5L8.7 3.5 10.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 7L12.3 6.3 8.5 10.1 8.5 1 7.5 1 7.5 10.1 3.7 6.3 3 7 8 12zM13 12v2H3v-2H2v2l0 0c0 .6.4 1 1 1h10c.6 0 1-.4 1-1l0 0v-2H13z"></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.5C11.3,2.1,11.1,2,11,2H3C2.4,2,2,2.4,2,3v10c0,0.6,0.4,1,1,1h10c0.6,0,1-0.4,1-1V5	C14,4.9,13.9,4.7,13.9,4.6z M6,3h4v2H6V3z M10,13H6V9h4V13z M11,13V9c0-0.6-0.4-1-1-1H6C5.4,8,5,8.4,5,9v4H3V3h2v2c0,0.6,0.4,1,1,1	h4c0.6,0,1-0.4,1-1V3.2l2,2V13H11z"></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 6H7V12H6zM9 6H10V12H9z"></path><path d="M2 3v1h1v10c0 .6.4 1 1 1h8c.6 0 1-.4 1-1V4h1V3H2zM4 14V4h8v10H4zM6 1H10V2H6z"></path></svg> Delete
                          </div>
                        </button>
                      </li>

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

  <!-- 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 0.7 0.3 5 4.6 9.3 0.3 10 1z"></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 0.7 0.3 5 4.6 9.3 0.3 10 1z"></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 23L11 16 19 9 19 23z"></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 9L21 16 13 23 13 9z"></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.