carbon-components/html/data-table/data-table--show-overflow-menus.html

The Carbon Design System is IBM’s open-source design system for products and experiences.

<!--
  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">Optional Helper Text</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" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bx--btn__icon" width="16" height="16" viewBox="0 0 32 32" aria-hidden="true"><path d="M12 12H14V24H12zM18 12H20V24H18z"></path><path d="M4 6V8H6V28a2 2 0 002 2H24a2 2 0 002-2V8h2V6zM8 28V8H24V28zM12 2H20V4H12z"></path></svg>
            </button>
            <button class="bx--btn bx--btn--primary" type="button">
              Save
              <svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" 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" xmlns="http://www.w3.org/2000/svg" fill="currentColor" 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 -->
           <div class="bx--toolbar-search-container-expandable">
             <div data-search class="bx--search bx--search--sm" role="search">
               <div class="bx--search-magnifier" tabindex="0">
                 <svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bx--toolbar-action__icon" 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" xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="16" height="16" viewBox="0 0 32 32" aria-hidden="true"><path d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"></path></svg>
                </button>
              </div>
            </div>

            <!-- Persistent Search -->

            <!-- 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" xmlns="http://www.w3.org/2000/svg" fill="currentColor" 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" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bx--btn__icon" width="20" height="20" viewBox="0 0 32 32" aria-hidden="true"><path d="M17 15L17 8 15 8 15 15 8 15 8 17 15 17 15 24 17 24 17 17 24 17 24 15z"></path></svg>
          </button>
      </div>
    </section>
  <!-- End Toolbar Content -->

  <!-- Table -->
  <table class="bx--data-table  bx--data-table--sort bx--data-table--visible-overflow-menu  " >
    <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" xmlns="http://www.w3.org/2000/svg" fill="currentColor" 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" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bx--table-sort__icon-unsorted" width="16" height="16" viewBox="0 0 32 32" aria-hidden="true"><path d="M27.6 20.6L24 24.2 24 4 22 4 22 24.2 18.4 20.6 17 22 23 28 29 22zM9 4L3 10 4.4 11.4 8 7.8 8 28 10 28 10 7.8 13.6 11.4 15 10z"></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" xmlns="http://www.w3.org/2000/svg" fill="currentColor" 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" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bx--table-sort__icon-unsorted" width="16" height="16" viewBox="0 0 32 32" aria-hidden="true"><path d="M27.6 20.6L24 24.2 24 4 22 4 22 24.2 18.4 20.6 17 22 23 28 29 22zM9 4L3 10 4.4 11.4 8 7.8 8 28 10 28 10 7.8 13.6 11.4 15 10z"></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" xmlns="http://www.w3.org/2000/svg" fill="currentColor" 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" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bx--table-sort__icon-unsorted" width="16" height="16" viewBox="0 0 32 32" aria-hidden="true"><path d="M27.6 20.6L24 24.2 24 4 22 4 22 24.2 18.4 20.6 17 22 23 28 29 22zM9 4L3 10 4.4 11.4 8 7.8 8 28 10 28 10 7.8 13.6 11.4 15 10z"></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" xmlns="http://www.w3.org/2000/svg" fill="currentColor" 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" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bx--table-sort__icon-unsorted" width="16" height="16" viewBox="0 0 32 32" aria-hidden="true"><path d="M27.6 20.6L24 24.2 24 4 22 4 22 24.2 18.4 20.6 17 22 23 28 29 22zM9 4L3 10 4.4 11.4 8 7.8 8 28 10 28 10 7.8 13.6 11.4 15 10z"></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" xmlns="http://www.w3.org/2000/svg" fill="currentColor" 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" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bx--table-sort__icon-unsorted" width="16" height="16" viewBox="0 0 32 32" aria-hidden="true"><path d="M27.6 20.6L24 24.2 24 4 22 4 22 24.2 18.4 20.6 17 22 23 28 29 22zM9 4L3 10 4.4 11.4 8 7.8 8 28 10 28 10 7.8 13.6 11.4 15 10z"></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" xmlns="http://www.w3.org/2000/svg" fill="currentColor" 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" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bx--table-sort__icon-unsorted" width="16" height="16" viewBox="0 0 32 32" aria-hidden="true"><path d="M27.6 20.6L24 24.2 24 4 22 4 22 24.2 18.4 20.6 17 22 23 28 29 22zM9 4L3 10 4.4 11.4 8 7.8 8 28 10 28 10 7.8 13.6 11.4 15 10z"></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-16" class="bx--checkbox" type="checkbox" value="green" name="checkbox-16" >
                <label for="bx--checkbox-16" 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’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" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bx--overflow-menu__icon" width="16" height="16" viewBox="0 0 32 32" aria-hidden="true"><circle cx="16" cy="8" r="2"></circle><circle cx="16" cy="16" r="2"></circle><circle cx="16" cy="24" r="2"></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" xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="16" height="16" viewBox="0 0 32 32" aria-hidden="true"><path d="M2 26H30V28H2zM25.4 9c.8-.8.8-2 0-2.8 0 0 0 0 0 0l-3.6-3.6c-.8-.8-2-.8-2.8 0 0 0 0 0 0 0l-15 15V24h6.4L25.4 9zM20.4 4L24 7.6l-3 3L17.4 7 20.4 4zM6 22v-3.6l10-10 3.6 3.6-10 10H6z"></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" xmlns="http://www.w3.org/2000/svg" fill="currentColor" 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" xmlns="http://www.w3.org/2000/svg" fill="currentColor" 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" xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="16" height="16" viewBox="0 0 32 32" aria-hidden="true"><path d="M12 12H14V24H12zM18 12H20V24H18z"></path><path d="M4 6V8H6V28a2 2 0 002 2H24a2 2 0 002-2V8h2V6zM8 28V8H24V28zM12 2H20V4H12z"></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’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" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bx--overflow-menu__icon" width="16" height="16" viewBox="0 0 32 32" aria-hidden="true"><circle cx="16" cy="8" r="2"></circle><circle cx="16" cy="16" r="2"></circle><circle cx="16" cy="24" r="2"></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" xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="16" height="16" viewBox="0 0 32 32" aria-hidden="true"><path d="M2 26H30V28H2zM25.4 9c.8-.8.8-2 0-2.8 0 0 0 0 0 0l-3.6-3.6c-.8-.8-2-.8-2.8 0 0 0 0 0 0 0l-15 15V24h6.4L25.4 9zM20.4 4L24 7.6l-3 3L17.4 7 20.4 4zM6 22v-3.6l10-10 3.6 3.6-10 10H6z"></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" xmlns="http://www.w3.org/2000/svg" fill="currentColor" 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" xmlns="http://www.w3.org/2000/svg" fill="currentColor" 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" xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="16" height="16" viewBox="0 0 32 32" aria-hidden="true"><path d="M12 12H14V24H12zM18 12H20V24H18z"></path><path d="M4 6V8H6V28a2 2 0 002 2H24a2 2 0 002-2V8h2V6zM8 28V8H24V28zM12 2H20V4H12z"></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’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" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bx--overflow-menu__icon" width="16" height="16" viewBox="0 0 32 32" aria-hidden="true"><circle cx="16" cy="8" r="2"></circle><circle cx="16" cy="16" r="2"></circle><circle cx="16" cy="24" r="2"></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" xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="16" height="16" viewBox="0 0 32 32" aria-hidden="true"><path d="M2 26H30V28H2zM25.4 9c.8-.8.8-2 0-2.8 0 0 0 0 0 0l-3.6-3.6c-.8-.8-2-.8-2.8 0 0 0 0 0 0 0l-15 15V24h6.4L25.4 9zM20.4 4L24 7.6l-3 3L17.4 7 20.4 4zM6 22v-3.6l10-10 3.6 3.6-10 10H6z"></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" xmlns="http://www.w3.org/2000/svg" fill="currentColor" 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" xmlns="http://www.w3.org/2000/svg" fill="currentColor" 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" xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="16" height="16" viewBox="0 0 32 32" aria-hidden="true"><path d="M12 12H14V24H12zM18 12H20V24H18z"></path><path d="M4 6V8H6V28a2 2 0 002 2H24a2 2 0 002-2V8h2V6zM8 28V8H24V28zM12 2H20V4H12z"></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’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" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bx--overflow-menu__icon" width="16" height="16" viewBox="0 0 32 32" aria-hidden="true"><circle cx="16" cy="8" r="2"></circle><circle cx="16" cy="16" r="2"></circle><circle cx="16" cy="24" r="2"></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" xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="16" height="16" viewBox="0 0 32 32" aria-hidden="true"><path d="M2 26H30V28H2zM25.4 9c.8-.8.8-2 0-2.8 0 0 0 0 0 0l-3.6-3.6c-.8-.8-2-.8-2.8 0 0 0 0 0 0 0l-15 15V24h6.4L25.4 9zM20.4 4L24 7.6l-3 3L17.4 7 20.4 4zM6 22v-3.6l10-10 3.6 3.6-10 10H6z"></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" xmlns="http://www.w3.org/2000/svg" fill="currentColor" 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" xmlns="http://www.w3.org/2000/svg" fill="currentColor" 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" xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="16" height="16" viewBox="0 0 32 32" aria-hidden="true"><path d="M12 12H14V24H12zM18 12H20V24H18z"></path><path d="M4 6V8H6V28a2 2 0 002 2H24a2 2 0 002-2V8h2V6zM8 28V8H24V28zM12 2H20V4H12z"></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’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" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bx--overflow-menu__icon" width="16" height="16" viewBox="0 0 32 32" aria-hidden="true"><circle cx="16" cy="8" r="2"></circle><circle cx="16" cy="16" r="2"></circle><circle cx="16" cy="24" r="2"></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" xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="16" height="16" viewBox="0 0 32 32" aria-hidden="true"><path d="M2 26H30V28H2zM25.4 9c.8-.8.8-2 0-2.8 0 0 0 0 0 0l-3.6-3.6c-.8-.8-2-.8-2.8 0 0 0 0 0 0 0l-15 15V24h6.4L25.4 9zM20.4 4L24 7.6l-3 3L17.4 7 20.4 4zM6 22v-3.6l10-10 3.6 3.6-10 10H6z"></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" xmlns="http://www.w3.org/2000/svg" fill="currentColor" 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" xmlns="http://www.w3.org/2000/svg" fill="currentColor" 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" xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="16" height="16" viewBox="0 0 32 32" aria-hidden="true"><path d="M12 12H14V24H12zM18 12H20V24H18z"></path><path d="M4 6V8H6V28a2 2 0 002 2H24a2 2 0 002-2V8h2V6zM8 28V8H24V28zM12 2H20V4H12z"></path></svg> Delete
                          </div>
                        </button>
                      </li>

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

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