UNPKG

40.4 kBHTMLView Raw
1<!--
2 Copyright IBM Corp. 2016, 2018
3
4 This source code is licensed under the Apache-2.0 license found in the
5 LICENSE file in the root directory of this source tree.
6-->
7<!-- v10 Data Table -->
8 <div class="bx--data-table-container " data-table>
9 <div class="bx--data-table-header">
10 <h4 class="bx--data-table-header__title">Table title</h4>
11 <p class="bx--data-table-header__description">Optional Helper Text</p>
12 </div>
13 <!-- Toolbar Content -->
14 <section class="bx--table-toolbar ">
15 <!-- Batch actions -->
16 <div class="bx--batch-actions" aria-label="Table Action Bar">
17 <div class="bx--action-list">
18 <button class="bx--btn bx--btn--primary" type="button">
19 Delete
20 <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M6 6h1v6H6zm3 0h1v6H9z"></path><path d="M2 3v1h1v10c0 .6.4 1 1 1h8c.6 0 1-.4 1-1V4h1V3H2zm2 11V4h8v10H4zM6 1h4v1H6z"></path></svg>
21 </button>
22 <button class="bx--btn bx--btn--primary" type="button">
23 Save
24 <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M13.9 4.6l-2.5-2.5c-.1 0-.3-.1-.4-.1H3c-.6 0-1 .4-1 1v10c0 .6.4 1 1 1h10c.6 0 1-.4 1-1V5c0-.1-.1-.3-.1-.4zM6 3h4v2H6V3zm4 10H6V9h4v4zm1 0V9c0-.6-.4-1-1-1H6c-.6 0-1 .4-1 1v4H3V3h2v2c0 .6.4 1 1 1h4c.6 0 1-.4 1-1V3.2l2 2V13h-2z"></path></svg>
25 </button>
26 <button class="bx--btn bx--btn--primary" type="button">
27 Download
28 <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M13 7l-.7-.7-3.8 3.8V1h-1v9.1L3.7 6.3 3 7l5 5zm0 5v2H3v-2H2v2c0 .6.4 1 1 1h10c.6 0 1-.4 1-1v-2h-1z"></path></svg>
29 </button>
30 <button data-event="action-bar-cancel" class="bx--btn bx--btn--primary bx--batch-summary__cancel">Cancel</button>
31 </div>
32 <div class="bx--batch-summary">
33 <p class="bx--batch-summary__para">
34 <span data-items-selected>3</span> items selected
35 </p>
36 </div>
37 </div>
38
39 <div class="bx--toolbar-content">
40 <!-- Default hidden search -->
41 <div class="bx--toolbar-search-container-expandable">
42 <div data-search class="bx--search bx--search--sm" role="search">
43 <div class="bx--search-magnifier" tabindex="0">
44 <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="M15 14.3L10.7 10c1.9-2.3 1.6-5.8-.7-7.7S4.2.7 2.3 3 .7 8.8 3 10.7c2 1.7 5 1.7 7 0l4.3 4.3.7-.7zM2 6.5C2 4 4 2 6.5 2S11 4 11 6.5 9 11 6.5 11 2 9 2 6.5z"></path></svg>
45 </div>
46 <label id="search-input-label-1" class="bx--label" for="search__input-2">Search</label>
47 <input class="bx--search-input" type="text" id="search__input-2" role="search" placeholder="Search" aria-labelledby="search-input-label-1">
48 <button class="bx--search-close bx--search-close--hidden" title="Clear search input" aria-label="Clear search input">
49 <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M12 4.7l-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8z"></path></svg>
50 </button>
51 </div>
52 </div>
53
54 <!-- Persistent Search -->
55
56 <!-- Toolbar Overflow Menu -->
57 <div class="bx--overflow-menu bx--toolbar-action" data-overflow-menu role="button" tabindex="0" aria-label="Overflow" aria-haspopup="true"
58 aria-expanded="false" >
59 <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--toolbar-action__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M13.5 8.4v-.8l1-.8c.4-.3.4-.9.2-1.3l-1.2-2c-.2-.3-.5-.5-.9-.5-.1 0-.2 0-.3.1l-1.2.4c-.2-.1-.4-.3-.7-.4l-.3-1.3c0-.5-.4-.8-.9-.8H6.8c-.5 0-.9.3-1 .8l-.2 1.3c-.3.1-.5.2-.7.3L3.7 3h-.3c-.4 0-.7.2-.9.5l-1.2 2c-.2.4-.1.9.3 1.3l.9.9v.8l-.9.7c-.4.3-.5.9-.2 1.3l1.2 2c.1.3.4.5.8.5.1 0 .2 0 .3-.1l1.2-.4c.2.1.4.3.7.4l.3 1.3c.1.5.5.8 1 .8h2.4c.5 0 .9-.3 1-.8l.3-1.3c.2-.1.4-.2.7-.4l1.2.4c.1 0 .2.1.3.1.4 0 .7-.2.9-.5l1.1-2c.2-.4.2-.9-.2-1.3l-1.1-.8zm-.9 3.6l-1.7-.6c-.4.3-.9.6-1.4.8L9.2 14H6.8l-.4-1.8c-.5-.2-.9-.5-1.4-.8l-1.6.6-1.2-2 1.4-1.2c-.1-.5-.1-1.1 0-1.6L2.2 6l1.2-2 1.7.6c.4-.4.9-.6 1.4-.8L6.8 2h2.4l.4 1.8c.5.2.9.5 1.4.8l1.6-.6 1.2 2-1.4 1.2c.1.5.1 1.1 0 1.6l1.4 1.2-1.2 2z"></path><path d="M8 11c-1.7 0-3-1.3-3-3s1.3-3 3-3 3 1.3 3 3c0 1.6-1.3 3-3 3zm0-5c-1.1 0-2 .8-2 1.9V8c0 1.1.8 2 1.9 2H8c1.1 0 2-.8 2-1.9V8c0-1.1-.8-2-2-2 .1 0 0 0 0 0z"></path></svg>
60 <ul class="bx--overflow-menu-options bx--overflow-menu--flip" tabindex="-1" role="menu" aria-label="Overflow" data-floating-menu-direction="bottom">
61 <li class="bx--overflow-menu-options__option bx--overflow-menu--data-table " role="presentation">
62 <button class="bx--overflow-menu-options__btn" role="menuitem" data-floating-menu-primary-focus >
63 <div class="bx--overflow-menu-options__option-content">
64 Option 1
65 </div>
66 </button>
67 </li>
68 <li class="bx--overflow-menu-options__option bx--overflow-menu--data-table " role="presentation">
69 <button class="bx--overflow-menu-options__btn" role="menuitem" >
70 <div class="bx--overflow-menu-options__option-content">
71 Option 2
72 </div>
73 </button>
74 </li>
75 <li class="bx--overflow-menu-options__option bx--overflow-menu--data-table " role="presentation">
76 <button class="bx--overflow-menu-options__btn" role="menuitem" >
77 <div class="bx--overflow-menu-options__option-content">
78 Option 3
79 </div>
80 </button>
81 </li>
82 </ul>
83 </div>
84
85 <!-- Toolbar primary button -->
86 <button class="bx--btn bx--btn--sm bx--btn--primary">
87 Primary Button
88 <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--btn__icon" width="20" height="20" viewBox="0 0 32 32" aria-hidden="true"><path d="M17 15V7h-2v8H7v2h8v8h2v-8h8v-2h-8z"></path></svg>
89 </button>
90 </div>
91 </section>
92 <!-- End Toolbar Content -->
93
94 <!-- Table -->
95 <table class="bx--data-table bx--data-table--sort bx--data-table--visible-overflow-menu " >
96 <thead>
97 <tr>
98 <th class="bx--table-column-checkbox">
99 <!-- checkbox th -->
100 <input data-event="select-all" id="bx--checkbox-20" class="bx--checkbox" type="checkbox" value="green" name="checkbox-20">
101 <label for="bx--checkbox-20" class="bx--checkbox-label" aria-label="Label name"></label>
102 </th>
103 <th >
104 <!-- checkbox th -->
105 <!-- sortable th -->
106 <button class="bx--table-sort" data-event="sort" title="Name">
107 <span class="bx--table-header-label">Name</span>
108 <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--table-sort__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M12.3 9.3l-3.8 3.8V1h-1v12.1L3.7 9.3 3 10l5 5 5-5z"></path></svg>
109 <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--table-sort__icon-unsorted" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M13.8 10.3L12 12.1V2h-1v10.1l-1.8-1.8-.7.7 3 3 3-3zM4.5 2l-3 3 .7.7L4 3.9V14h1V3.9l1.8 1.8.7-.7z"></path></svg>
110 </button>
111 <!-- no sort th -->
112 </th>
113 <th >
114 <!-- checkbox th -->
115 <!-- sortable th -->
116 <button class="bx--table-sort" data-event="sort" title="Protocol">
117 <span class="bx--table-header-label">Protocol</span>
118 <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--table-sort__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M12.3 9.3l-3.8 3.8V1h-1v12.1L3.7 9.3 3 10l5 5 5-5z"></path></svg>
119 <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--table-sort__icon-unsorted" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M13.8 10.3L12 12.1V2h-1v10.1l-1.8-1.8-.7.7 3 3 3-3zM4.5 2l-3 3 .7.7L4 3.9V14h1V3.9l1.8 1.8.7-.7z"></path></svg>
120 </button>
121 <!-- no sort th -->
122 </th>
123 <th >
124 <!-- checkbox th -->
125 <!-- sortable th -->
126 <button class="bx--table-sort" data-event="sort" title="Port">
127 <span class="bx--table-header-label">Port</span>
128 <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--table-sort__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M12.3 9.3l-3.8 3.8V1h-1v12.1L3.7 9.3 3 10l5 5 5-5z"></path></svg>
129 <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--table-sort__icon-unsorted" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M13.8 10.3L12 12.1V2h-1v10.1l-1.8-1.8-.7.7 3 3 3-3zM4.5 2l-3 3 .7.7L4 3.9V14h1V3.9l1.8 1.8.7-.7z"></path></svg>
130 </button>
131 <!-- no sort th -->
132 </th>
133 <th >
134 <!-- checkbox th -->
135 <!-- sortable th -->
136 <button class="bx--table-sort" data-event="sort" title="Rule">
137 <span class="bx--table-header-label">Rule</span>
138 <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--table-sort__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M12.3 9.3l-3.8 3.8V1h-1v12.1L3.7 9.3 3 10l5 5 5-5z"></path></svg>
139 <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--table-sort__icon-unsorted" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M13.8 10.3L12 12.1V2h-1v10.1l-1.8-1.8-.7.7 3 3 3-3zM4.5 2l-3 3 .7.7L4 3.9V14h1V3.9l1.8 1.8.7-.7z"></path></svg>
140 </button>
141 <!-- no sort th -->
142 </th>
143 <th >
144 <!-- checkbox th -->
145 <!-- sortable th -->
146 <button class="bx--table-sort" data-event="sort" title="Attached Groups">
147 <span class="bx--table-header-label">Attached Groups</span>
148 <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--table-sort__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M12.3 9.3l-3.8 3.8V1h-1v12.1L3.7 9.3 3 10l5 5 5-5z"></path></svg>
149 <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--table-sort__icon-unsorted" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M13.8 10.3L12 12.1V2h-1v10.1l-1.8-1.8-.7.7 3 3 3-3zM4.5 2l-3 3 .7.7L4 3.9V14h1V3.9l1.8 1.8.7-.7z"></path></svg>
150 </button>
151 <!-- no sort th -->
152 </th>
153 <th >
154 <!-- checkbox th -->
155 <!-- sortable th -->
156 <button class="bx--table-sort" data-event="sort" title="Status">
157 <span class="bx--table-header-label">Status</span>
158 <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--table-sort__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M12.3 9.3l-3.8 3.8V1h-1v12.1L3.7 9.3 3 10l5 5 5-5z"></path></svg>
159 <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--table-sort__icon-unsorted" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M13.8 10.3L12 12.1V2h-1v10.1l-1.8-1.8-.7.7 3 3 3-3zM4.5 2l-3 3 .7.7L4 3.9V14h1V3.9l1.8 1.8.7-.7z"></path></svg>
160 </button>
161 <!-- no sort th -->
162 </th>
163 <th class="bx--table-column-menu">
164 <!-- checkbox th -->
165 </th>
166 </tr>
167 </thead>
168 <tbody>
169 <tr >
170 <!-- expand icon td -->
171 <td class="bx--table-column-checkbox">
172 <input data-event="select" id="bx--checkbox-13" class="bx--checkbox" type="checkbox" value="green" name="checkbox-13" >
173 <label for="bx--checkbox-13" class="bx--checkbox-label" aria-label="Label name"></label>
174 </td>
175 <!-- inline action td's -->
176 <!-- expand icon td -->
177 <td >
178 <!-- truncated new markup -->
179 Load Balancer 1
180 </td>
181 <!-- expand icon td -->
182 <td >
183 <!-- truncated new markup -->
184 HTTP
185 </td>
186 <!-- expand icon td -->
187 <td >
188 <!-- truncated new markup -->
189 80
190 </td>
191 <!-- expand icon td -->
192 <td >
193 <!-- truncated new markup -->
194 Round Robin
195 </td>
196 <!-- expand icon td -->
197 <td >
198 <!-- truncated new markup -->
199 Maureen&#x27;s VM Groups Testing a really long text here
200 </td>
201 <!-- expand icon td -->
202 <td >
203 <!-- truncated new markup -->
204 Active
205 </td>
206 <!-- expand icon td -->
207 <td class="bx--table-column-menu">
208 <div data-overflow-menu role="menu" tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
209 <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>
210 <ul class="bx--overflow-menu-options bx--overflow-menu--flip">
211
212 <li class="bx--overflow-menu-options__option bx--table-row--menu-option">
213 <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">
214 <div class="bx--overflow-menu-options__option-content">
215 <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M1 13h14v1H1zm11.7-8.5c.4-.4.4-1 0-1.4l-1.8-1.8c-.4-.4-1-.4-1.4 0L2 8.8V12h3.2l7.5-7.5zM10.2 2L12 3.8l-1.5 1.5-1.8-1.8L10.2 2zM3 11V9.2l5-5L9.8 6l-5 5H3z"></path></svg> Edit
216 </div>
217 </button>
218 </li>
219 <li class="bx--overflow-menu-options__option bx--table-row--menu-option">
220 <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">
221 <div class="bx--overflow-menu-options__option-content">
222 <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M13 7l-.7-.7-3.8 3.8V1h-1v9.1L3.7 6.3 3 7l5 5zm0 5v2H3v-2H2v2c0 .6.4 1 1 1h10c.6 0 1-.4 1-1v-2h-1z"></path></svg> Download
223 </div>
224 </button>
225 </li>
226 <li class="bx--overflow-menu-options__option bx--table-row--menu-option">
227 <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">
228 <div class="bx--overflow-menu-options__option-content">
229 <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M13.9 4.6l-2.5-2.5c-.1 0-.3-.1-.4-.1H3c-.6 0-1 .4-1 1v10c0 .6.4 1 1 1h10c.6 0 1-.4 1-1V5c0-.1-.1-.3-.1-.4zM6 3h4v2H6V3zm4 10H6V9h4v4zm1 0V9c0-.6-.4-1-1-1H6c-.6 0-1 .4-1 1v4H3V3h2v2c0 .6.4 1 1 1h4c.6 0 1-.4 1-1V3.2l2 2V13h-2z"></path></svg> Save
230 </div>
231 </button>
232 </li>
233 <li class="bx--overflow-menu-options__option bx--table-row--menu-option">
234 <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">
235 <div class="bx--overflow-menu-options__option-content">
236 <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M6 6h1v6H6zm3 0h1v6H9z"></path><path d="M2 3v1h1v10c0 .6.4 1 1 1h8c.6 0 1-.4 1-1V4h1V3H2zm2 11V4h8v10H4zM6 1h4v1H6z"></path></svg> Delete
237 </div>
238 </button>
239 </li>
240
241 </ul>
242 </div>
243 </td>
244 <!-- inline edit tds -->
245 </tr>
246 <!-- Expandable child row -->
247 <tr >
248 <!-- expand icon td -->
249 <td class="bx--table-column-checkbox">
250 <input data-event="select" id="bx--checkbox-14" class="bx--checkbox" type="checkbox" value="green" name="checkbox-14" >
251 <label for="bx--checkbox-14" class="bx--checkbox-label" aria-label="Label name"></label>
252 </td>
253 <!-- inline action td's -->
254 <!-- expand icon td -->
255 <td >
256 <!-- truncated new markup -->
257 Load Balancer 5
258 </td>
259 <!-- expand icon td -->
260 <td >
261 <!-- truncated new markup -->
262 HTTP
263 </td>
264 <!-- expand icon td -->
265 <td >
266 <!-- truncated new markup -->
267 80
268 </td>
269 <!-- expand icon td -->
270 <td >
271 <!-- truncated new markup -->
272 Round Robin
273 </td>
274 <!-- expand icon td -->
275 <td >
276 <!-- truncated new markup -->
277 Maureen&#x27;s VM Groups
278 </td>
279 <!-- expand icon td -->
280 <td >
281 <!-- truncated new markup -->
282 Active
283 </td>
284 <!-- expand icon td -->
285 <td class="bx--table-column-menu">
286 <div data-overflow-menu role="menu" tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
287 <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>
288 <ul class="bx--overflow-menu-options bx--overflow-menu--flip">
289
290 <li class="bx--overflow-menu-options__option bx--table-row--menu-option">
291 <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">
292 <div class="bx--overflow-menu-options__option-content">
293 <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M1 13h14v1H1zm11.7-8.5c.4-.4.4-1 0-1.4l-1.8-1.8c-.4-.4-1-.4-1.4 0L2 8.8V12h3.2l7.5-7.5zM10.2 2L12 3.8l-1.5 1.5-1.8-1.8L10.2 2zM3 11V9.2l5-5L9.8 6l-5 5H3z"></path></svg> Edit
294 </div>
295 </button>
296 </li>
297 <li class="bx--overflow-menu-options__option bx--table-row--menu-option">
298 <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">
299 <div class="bx--overflow-menu-options__option-content">
300 <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M13 7l-.7-.7-3.8 3.8V1h-1v9.1L3.7 6.3 3 7l5 5zm0 5v2H3v-2H2v2c0 .6.4 1 1 1h10c.6 0 1-.4 1-1v-2h-1z"></path></svg> Download
301 </div>
302 </button>
303 </li>
304 <li class="bx--overflow-menu-options__option bx--table-row--menu-option">
305 <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">
306 <div class="bx--overflow-menu-options__option-content">
307 <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M13.9 4.6l-2.5-2.5c-.1 0-.3-.1-.4-.1H3c-.6 0-1 .4-1 1v10c0 .6.4 1 1 1h10c.6 0 1-.4 1-1V5c0-.1-.1-.3-.1-.4zM6 3h4v2H6V3zm4 10H6V9h4v4zm1 0V9c0-.6-.4-1-1-1H6c-.6 0-1 .4-1 1v4H3V3h2v2c0 .6.4 1 1 1h4c.6 0 1-.4 1-1V3.2l2 2V13h-2z"></path></svg> Save
308 </div>
309 </button>
310 </li>
311 <li class="bx--overflow-menu-options__option bx--table-row--menu-option">
312 <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">
313 <div class="bx--overflow-menu-options__option-content">
314 <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M6 6h1v6H6zm3 0h1v6H9z"></path><path d="M2 3v1h1v10c0 .6.4 1 1 1h8c.6 0 1-.4 1-1V4h1V3H2zm2 11V4h8v10H4zM6 1h4v1H6z"></path></svg> Delete
315 </div>
316 </button>
317 </li>
318
319 </ul>
320 </div>
321 </td>
322 <!-- inline edit tds -->
323 </tr>
324 <!-- Expandable child row -->
325 <tr >
326 <!-- expand icon td -->
327 <td class="bx--table-column-checkbox">
328 <input data-event="select" id="bx--checkbox-15" class="bx--checkbox" type="checkbox" value="green" name="checkbox-15" >
329 <label for="bx--checkbox-15" class="bx--checkbox-label" aria-label="Label name"></label>
330 </td>
331 <!-- inline action td's -->
332 <!-- expand icon td -->
333 <td >
334 <!-- truncated new markup -->
335 Load Balancer 5
336 </td>
337 <!-- expand icon td -->
338 <td >
339 <!-- truncated new markup -->
340 HTTP
341 </td>
342 <!-- expand icon td -->
343 <td >
344 <!-- truncated new markup -->
345 80
346 </td>
347 <!-- expand icon td -->
348 <td >
349 <!-- truncated new markup -->
350 Round Robin
351 </td>
352 <!-- expand icon td -->
353 <td >
354 <!-- truncated new markup -->
355 Maureen&#x27;s VM Groups
356 </td>
357 <!-- expand icon td -->
358 <td >
359 <!-- truncated new markup -->
360 Active
361 </td>
362 <!-- expand icon td -->
363 <td class="bx--table-column-menu">
364 <div data-overflow-menu role="menu" tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
365 <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>
366 <ul class="bx--overflow-menu-options bx--overflow-menu--flip">
367
368 <li class="bx--overflow-menu-options__option bx--table-row--menu-option">
369 <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">
370 <div class="bx--overflow-menu-options__option-content">
371 <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M1 13h14v1H1zm11.7-8.5c.4-.4.4-1 0-1.4l-1.8-1.8c-.4-.4-1-.4-1.4 0L2 8.8V12h3.2l7.5-7.5zM10.2 2L12 3.8l-1.5 1.5-1.8-1.8L10.2 2zM3 11V9.2l5-5L9.8 6l-5 5H3z"></path></svg> Edit
372 </div>
373 </button>
374 </li>
375 <li class="bx--overflow-menu-options__option bx--table-row--menu-option">
376 <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">
377 <div class="bx--overflow-menu-options__option-content">
378 <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M13 7l-.7-.7-3.8 3.8V1h-1v9.1L3.7 6.3 3 7l5 5zm0 5v2H3v-2H2v2c0 .6.4 1 1 1h10c.6 0 1-.4 1-1v-2h-1z"></path></svg> Download
379 </div>
380 </button>
381 </li>
382 <li class="bx--overflow-menu-options__option bx--table-row--menu-option">
383 <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">
384 <div class="bx--overflow-menu-options__option-content">
385 <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M13.9 4.6l-2.5-2.5c-.1 0-.3-.1-.4-.1H3c-.6 0-1 .4-1 1v10c0 .6.4 1 1 1h10c.6 0 1-.4 1-1V5c0-.1-.1-.3-.1-.4zM6 3h4v2H6V3zm4 10H6V9h4v4zm1 0V9c0-.6-.4-1-1-1H6c-.6 0-1 .4-1 1v4H3V3h2v2c0 .6.4 1 1 1h4c.6 0 1-.4 1-1V3.2l2 2V13h-2z"></path></svg> Save
386 </div>
387 </button>
388 </li>
389 <li class="bx--overflow-menu-options__option bx--table-row--menu-option">
390 <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">
391 <div class="bx--overflow-menu-options__option-content">
392 <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M6 6h1v6H6zm3 0h1v6H9z"></path><path d="M2 3v1h1v10c0 .6.4 1 1 1h8c.6 0 1-.4 1-1V4h1V3H2zm2 11V4h8v10H4zM6 1h4v1H6z"></path></svg> Delete
393 </div>
394 </button>
395 </li>
396
397 </ul>
398 </div>
399 </td>
400 <!-- inline edit tds -->
401 </tr>
402 <!-- Expandable child row -->
403 <tr >
404 <!-- expand icon td -->
405 <td class="bx--table-column-checkbox">
406 <input data-event="select" id="bx--checkbox-11" class="bx--checkbox" type="checkbox" value="green" name="checkbox-11" >
407 <label for="bx--checkbox-11" class="bx--checkbox-label" aria-label="Label name"></label>
408 </td>
409 <!-- inline action td's -->
410 <!-- expand icon td -->
411 <td >
412 <!-- truncated new markup -->
413 Load Balancer 5
414 </td>
415 <!-- expand icon td -->
416 <td >
417 <!-- truncated new markup -->
418 HTTP
419 </td>
420 <!-- expand icon td -->
421 <td >
422 <!-- truncated new markup -->
423 80
424 </td>
425 <!-- expand icon td -->
426 <td >
427 <!-- truncated new markup -->
428 Round Robin
429 </td>
430 <!-- expand icon td -->
431 <td >
432 <!-- truncated new markup -->
433 Maureen&#x27;s VM Groups
434 </td>
435 <!-- expand icon td -->
436 <td >
437 <!-- truncated new markup -->
438 Active
439 </td>
440 <!-- expand icon td -->
441 <td class="bx--table-column-menu">
442 <div data-overflow-menu role="menu" tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
443 <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>
444 <ul class="bx--overflow-menu-options bx--overflow-menu--flip">
445
446 <li class="bx--overflow-menu-options__option bx--table-row--menu-option">
447 <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">
448 <div class="bx--overflow-menu-options__option-content">
449 <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M1 13h14v1H1zm11.7-8.5c.4-.4.4-1 0-1.4l-1.8-1.8c-.4-.4-1-.4-1.4 0L2 8.8V12h3.2l7.5-7.5zM10.2 2L12 3.8l-1.5 1.5-1.8-1.8L10.2 2zM3 11V9.2l5-5L9.8 6l-5 5H3z"></path></svg> Edit
450 </div>
451 </button>
452 </li>
453 <li class="bx--overflow-menu-options__option bx--table-row--menu-option">
454 <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">
455 <div class="bx--overflow-menu-options__option-content">
456 <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M13 7l-.7-.7-3.8 3.8V1h-1v9.1L3.7 6.3 3 7l5 5zm0 5v2H3v-2H2v2c0 .6.4 1 1 1h10c.6 0 1-.4 1-1v-2h-1z"></path></svg> Download
457 </div>
458 </button>
459 </li>
460 <li class="bx--overflow-menu-options__option bx--table-row--menu-option">
461 <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">
462 <div class="bx--overflow-menu-options__option-content">
463 <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M13.9 4.6l-2.5-2.5c-.1 0-.3-.1-.4-.1H3c-.6 0-1 .4-1 1v10c0 .6.4 1 1 1h10c.6 0 1-.4 1-1V5c0-.1-.1-.3-.1-.4zM6 3h4v2H6V3zm4 10H6V9h4v4zm1 0V9c0-.6-.4-1-1-1H6c-.6 0-1 .4-1 1v4H3V3h2v2c0 .6.4 1 1 1h4c.6 0 1-.4 1-1V3.2l2 2V13h-2z"></path></svg> Save
464 </div>
465 </button>
466 </li>
467 <li class="bx--overflow-menu-options__option bx--table-row--menu-option">
468 <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">
469 <div class="bx--overflow-menu-options__option-content">
470 <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M6 6h1v6H6zm3 0h1v6H9z"></path><path d="M2 3v1h1v10c0 .6.4 1 1 1h8c.6 0 1-.4 1-1V4h1V3H2zm2 11V4h8v10H4zM6 1h4v1H6z"></path></svg> Delete
471 </div>
472 </button>
473 </li>
474
475 </ul>
476 </div>
477 </td>
478 <!-- inline edit tds -->
479 </tr>
480 <!-- Expandable child row -->
481 <tr >
482 <!-- expand icon td -->
483 <td class="bx--table-column-checkbox">
484 <input data-event="select" id="bx--checkbox-12" class="bx--checkbox" type="checkbox" value="green" name="checkbox-12" >
485 <label for="bx--checkbox-12" class="bx--checkbox-label" aria-label="Label name"></label>
486 </td>
487 <!-- inline action td's -->
488 <!-- expand icon td -->
489 <td >
490 <!-- truncated new markup -->
491 Load Balancer 5
492 </td>
493 <!-- expand icon td -->
494 <td >
495 <!-- truncated new markup -->
496 HTTP
497 </td>
498 <!-- expand icon td -->
499 <td >
500 <!-- truncated new markup -->
501 80
502 </td>
503 <!-- expand icon td -->
504 <td >
505 <!-- truncated new markup -->
506 Round Robin
507 </td>
508 <!-- expand icon td -->
509 <td >
510 <!-- truncated new markup -->
511 Maureen&#x27;s VM Groups
512 </td>
513 <!-- expand icon td -->
514 <td >
515 <!-- truncated new markup -->
516 Active
517 </td>
518 <!-- expand icon td -->
519 <td class="bx--table-column-menu">
520 <div data-overflow-menu role="menu" tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
521 <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>
522 <ul class="bx--overflow-menu-options bx--overflow-menu--flip">
523
524 <li class="bx--overflow-menu-options__option bx--table-row--menu-option">
525 <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">
526 <div class="bx--overflow-menu-options__option-content">
527 <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M1 13h14v1H1zm11.7-8.5c.4-.4.4-1 0-1.4l-1.8-1.8c-.4-.4-1-.4-1.4 0L2 8.8V12h3.2l7.5-7.5zM10.2 2L12 3.8l-1.5 1.5-1.8-1.8L10.2 2zM3 11V9.2l5-5L9.8 6l-5 5H3z"></path></svg> Edit
528 </div>
529 </button>
530 </li>
531 <li class="bx--overflow-menu-options__option bx--table-row--menu-option">
532 <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">
533 <div class="bx--overflow-menu-options__option-content">
534 <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M13 7l-.7-.7-3.8 3.8V1h-1v9.1L3.7 6.3 3 7l5 5zm0 5v2H3v-2H2v2c0 .6.4 1 1 1h10c.6 0 1-.4 1-1v-2h-1z"></path></svg> Download
535 </div>
536 </button>
537 </li>
538 <li class="bx--overflow-menu-options__option bx--table-row--menu-option">
539 <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">
540 <div class="bx--overflow-menu-options__option-content">
541 <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M13.9 4.6l-2.5-2.5c-.1 0-.3-.1-.4-.1H3c-.6 0-1 .4-1 1v10c0 .6.4 1 1 1h10c.6 0 1-.4 1-1V5c0-.1-.1-.3-.1-.4zM6 3h4v2H6V3zm4 10H6V9h4v4zm1 0V9c0-.6-.4-1-1-1H6c-.6 0-1 .4-1 1v4H3V3h2v2c0 .6.4 1 1 1h4c.6 0 1-.4 1-1V3.2l2 2V13h-2z"></path></svg> Save
542 </div>
543 </button>
544 </li>
545 <li class="bx--overflow-menu-options__option bx--table-row--menu-option">
546 <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">
547 <div class="bx--overflow-menu-options__option-content">
548 <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M6 6h1v6H6zm3 0h1v6H9z"></path><path d="M2 3v1h1v10c0 .6.4 1 1 1h8c.6 0 1-.4 1-1V4h1V3H2zm2 11V4h8v10H4zM6 1h4v1H6z"></path></svg> Delete
549 </div>
550 </button>
551 </li>
552
553 </ul>
554 </div>
555 </td>
556 <!-- inline edit tds -->
557 </tr>
558 <!-- Expandable child row -->
559 </tbody>
560 </table>
561
562 <!-- Pagination -->
563</div>