carbon-components
Version:
The Carbon Design System is IBM’s open-source design system for products and experiences.
564 lines (546 loc) • 41 kB
HTML
<!--
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--zebra 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" 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>