UNPKG

43.9 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 bx--data-table--max-width" 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"></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
42 <!-- Persistent Search -->
43 <div class="bx--toolbar-search-container-persistent">
44 <div data-search class="bx--search bx--search--sm" role="search">
45 <div class="bx--search-magnifier">
46 <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M15 14.3L10.7 10c1.9-2.3 1.6-5.8-.7-7.7S4.2.7 2.3 3 .7 8.8 3 10.7c2 1.7 5 1.7 7 0l4.3 4.3.7-.7zM2 6.5C2 4 4 2 6.5 2S11 4 11 6.5 9 11 6.5 11 2 9 2 6.5z"></path></svg>
47 </div>
48 <label id="search-input-label-1" class="bx--label" for="search__input-2">Search</label>
49 <input class="bx--search-input" type="text" id="search__input-2" role="search" placeholder="Search" aria-labelledby="search-input-label-1">
50 <button class="bx--search-close bx--search-close--hidden" title="Clear search input" aria-label="Clear search input">
51 <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>
52 </button>
53 </div>
54 </div>
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 <section class="bx--data-table_inner-container">
95 <!-- Table -->
96 <table class="bx--data-table bx--data-table--sticky-header bx--data-table--sort " >
97 <thead>
98 <tr>
99 <th class="bx--table-column-checkbox">
100 <!-- checkbox th -->
101 <input data-event="select-all" id="bx--checkbox-20" class="bx--checkbox" type="checkbox" value="green" name="checkbox-20">
102 <label for="bx--checkbox-20" class="bx--checkbox-label" aria-label="Label name"></label>
103 </th>
104 <th >
105 <!-- checkbox th -->
106 <!-- sortable th -->
107 <button class="bx--table-sort" data-event="sort" title="Name">
108 <span class="bx--table-header-label">Name</span>
109 <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>
110 <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>
111 </button>
112 <!-- no sort th -->
113 </th>
114 <th >
115 <!-- checkbox th -->
116 <!-- sortable th -->
117 <button class="bx--table-sort" data-event="sort" title="Protocol">
118 <span class="bx--table-header-label">Protocol</span>
119 <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>
120 <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>
121 </button>
122 <!-- no sort th -->
123 </th>
124 <th >
125 <!-- checkbox th -->
126 <!-- sortable th -->
127 <button class="bx--table-sort" data-event="sort" title="Port">
128 <span class="bx--table-header-label">Port</span>
129 <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>
130 <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>
131 </button>
132 <!-- no sort th -->
133 </th>
134 <th >
135 <!-- checkbox th -->
136 <!-- sortable th -->
137 <button class="bx--table-sort" data-event="sort" title="Rule">
138 <span class="bx--table-header-label">Rule</span>
139 <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>
140 <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>
141 </button>
142 <!-- no sort th -->
143 </th>
144 <th >
145 <!-- checkbox th -->
146 <!-- sortable th -->
147 <button class="bx--table-sort" data-event="sort" title="Attached Groups">
148 <span class="bx--table-header-label">Attached Groups</span>
149 <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>
150 <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>
151 </button>
152 <!-- no sort th -->
153 </th>
154 <th >
155 <!-- checkbox th -->
156 <!-- sortable th -->
157 <button class="bx--table-sort" data-event="sort" title="Status">
158 <span class="bx--table-header-label">Status</span>
159 <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>
160 <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>
161 </button>
162 <!-- no sort th -->
163 </th>
164 <th class="bx--table-column-menu">
165 <!-- checkbox th -->
166 </th>
167 </tr>
168 </thead>
169 <tbody>
170 <tr >
171 <!-- expand icon td -->
172 <td class="bx--table-column-checkbox">
173 <input data-event="select" id="bx--checkbox-13" class="bx--checkbox" type="checkbox" value="green" name="checkbox-13" >
174 <label for="bx--checkbox-13" class="bx--checkbox-label" aria-label="Label name"></label>
175 </td>
176 <!-- inline action td's -->
177 <!-- expand icon td -->
178 <td >
179 <!-- truncated new markup -->
180 Load Balancer 1
181 </td>
182 <!-- expand icon td -->
183 <td >
184 <!-- truncated new markup -->
185 HTTP
186 </td>
187 <!-- expand icon td -->
188 <td >
189 <!-- truncated new markup -->
190 80
191 </td>
192 <!-- expand icon td -->
193 <td >
194 <!-- truncated new markup -->
195 Round Robin
196 </td>
197 <!-- expand icon td -->
198 <td >
199 <!-- truncated new markup -->
200 Maureen&#x27;s VM Groups Testing a really long text here
201 </td>
202 <!-- expand icon td -->
203 <td >
204 <!-- truncated new markup -->
205 Active
206 </td>
207 <!-- expand icon td -->
208 <td class="bx--table-column-menu">
209 <div data-overflow-menu role="menu" tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
210 <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>
211 <ul class="bx--overflow-menu-options bx--overflow-menu--flip">
212
213 <li class="bx--overflow-menu-options__option bx--table-row--menu-option">
214 <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">
215 <div class="bx--overflow-menu-options__option-content">
216 <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
217 </div>
218 </button>
219 </li>
220 <li class="bx--overflow-menu-options__option bx--table-row--menu-option">
221 <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">
222 <div class="bx--overflow-menu-options__option-content">
223 <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
224 </div>
225 </button>
226 </li>
227 <li class="bx--overflow-menu-options__option bx--table-row--menu-option">
228 <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">
229 <div class="bx--overflow-menu-options__option-content">
230 <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
231 </div>
232 </button>
233 </li>
234 <li class="bx--overflow-menu-options__option bx--table-row--menu-option">
235 <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">
236 <div class="bx--overflow-menu-options__option-content">
237 <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
238 </div>
239 </button>
240 </li>
241
242 </ul>
243 </div>
244 </td>
245 <!-- inline edit tds -->
246 </tr>
247 <!-- Expandable child row -->
248 <tr >
249 <!-- expand icon td -->
250 <td class="bx--table-column-checkbox">
251 <input data-event="select" id="bx--checkbox-14" class="bx--checkbox" type="checkbox" value="green" name="checkbox-14" >
252 <label for="bx--checkbox-14" class="bx--checkbox-label" aria-label="Label name"></label>
253 </td>
254 <!-- inline action td's -->
255 <!-- expand icon td -->
256 <td >
257 <!-- truncated new markup -->
258 Load Balancer 5
259 </td>
260 <!-- expand icon td -->
261 <td >
262 <!-- truncated new markup -->
263 HTTP
264 </td>
265 <!-- expand icon td -->
266 <td >
267 <!-- truncated new markup -->
268 80
269 </td>
270 <!-- expand icon td -->
271 <td >
272 <!-- truncated new markup -->
273 Round Robin
274 </td>
275 <!-- expand icon td -->
276 <td >
277 <!-- truncated new markup -->
278 Maureen&#x27;s VM Groups
279 </td>
280 <!-- expand icon td -->
281 <td >
282 <!-- truncated new markup -->
283 Active
284 </td>
285 <!-- expand icon td -->
286 <td class="bx--table-column-menu">
287 <div data-overflow-menu role="menu" tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
288 <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>
289 <ul class="bx--overflow-menu-options bx--overflow-menu--flip">
290
291 <li class="bx--overflow-menu-options__option bx--table-row--menu-option">
292 <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">
293 <div class="bx--overflow-menu-options__option-content">
294 <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
295 </div>
296 </button>
297 </li>
298 <li class="bx--overflow-menu-options__option bx--table-row--menu-option">
299 <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">
300 <div class="bx--overflow-menu-options__option-content">
301 <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
302 </div>
303 </button>
304 </li>
305 <li class="bx--overflow-menu-options__option bx--table-row--menu-option">
306 <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">
307 <div class="bx--overflow-menu-options__option-content">
308 <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
309 </div>
310 </button>
311 </li>
312 <li class="bx--overflow-menu-options__option bx--table-row--menu-option">
313 <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">
314 <div class="bx--overflow-menu-options__option-content">
315 <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
316 </div>
317 </button>
318 </li>
319
320 </ul>
321 </div>
322 </td>
323 <!-- inline edit tds -->
324 </tr>
325 <!-- Expandable child row -->
326 <tr >
327 <!-- expand icon td -->
328 <td class="bx--table-column-checkbox">
329 <input data-event="select" id="bx--checkbox-15" class="bx--checkbox" type="checkbox" value="green" name="checkbox-15" >
330 <label for="bx--checkbox-15" class="bx--checkbox-label" aria-label="Label name"></label>
331 </td>
332 <!-- inline action td's -->
333 <!-- expand icon td -->
334 <td >
335 <!-- truncated new markup -->
336 Load Balancer 5
337 </td>
338 <!-- expand icon td -->
339 <td >
340 <!-- truncated new markup -->
341 HTTP
342 </td>
343 <!-- expand icon td -->
344 <td >
345 <!-- truncated new markup -->
346 80
347 </td>
348 <!-- expand icon td -->
349 <td >
350 <!-- truncated new markup -->
351 Round Robin
352 </td>
353 <!-- expand icon td -->
354 <td >
355 <!-- truncated new markup -->
356 Maureen&#x27;s VM Groups
357 </td>
358 <!-- expand icon td -->
359 <td >
360 <!-- truncated new markup -->
361 Active
362 </td>
363 <!-- expand icon td -->
364 <td class="bx--table-column-menu">
365 <div data-overflow-menu role="menu" tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
366 <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>
367 <ul class="bx--overflow-menu-options bx--overflow-menu--flip">
368
369 <li class="bx--overflow-menu-options__option bx--table-row--menu-option">
370 <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">
371 <div class="bx--overflow-menu-options__option-content">
372 <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
373 </div>
374 </button>
375 </li>
376 <li class="bx--overflow-menu-options__option bx--table-row--menu-option">
377 <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">
378 <div class="bx--overflow-menu-options__option-content">
379 <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
380 </div>
381 </button>
382 </li>
383 <li class="bx--overflow-menu-options__option bx--table-row--menu-option">
384 <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">
385 <div class="bx--overflow-menu-options__option-content">
386 <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
387 </div>
388 </button>
389 </li>
390 <li class="bx--overflow-menu-options__option bx--table-row--menu-option">
391 <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">
392 <div class="bx--overflow-menu-options__option-content">
393 <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
394 </div>
395 </button>
396 </li>
397
398 </ul>
399 </div>
400 </td>
401 <!-- inline edit tds -->
402 </tr>
403 <!-- Expandable child row -->
404 <tr >
405 <!-- expand icon td -->
406 <td class="bx--table-column-checkbox">
407 <input data-event="select" id="bx--checkbox-11" class="bx--checkbox" type="checkbox" value="green" name="checkbox-11" >
408 <label for="bx--checkbox-11" class="bx--checkbox-label" aria-label="Label name"></label>
409 </td>
410 <!-- inline action td's -->
411 <!-- expand icon td -->
412 <td >
413 <!-- truncated new markup -->
414 Load Balancer 5
415 </td>
416 <!-- expand icon td -->
417 <td >
418 <!-- truncated new markup -->
419 HTTP
420 </td>
421 <!-- expand icon td -->
422 <td >
423 <!-- truncated new markup -->
424 80
425 </td>
426 <!-- expand icon td -->
427 <td >
428 <!-- truncated new markup -->
429 Round Robin
430 </td>
431 <!-- expand icon td -->
432 <td >
433 <!-- truncated new markup -->
434 Maureen&#x27;s VM Groups
435 </td>
436 <!-- expand icon td -->
437 <td >
438 <!-- truncated new markup -->
439 Active
440 </td>
441 <!-- expand icon td -->
442 <td class="bx--table-column-menu">
443 <div data-overflow-menu role="menu" tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
444 <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>
445 <ul class="bx--overflow-menu-options bx--overflow-menu--flip">
446
447 <li class="bx--overflow-menu-options__option bx--table-row--menu-option">
448 <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">
449 <div class="bx--overflow-menu-options__option-content">
450 <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
451 </div>
452 </button>
453 </li>
454 <li class="bx--overflow-menu-options__option bx--table-row--menu-option">
455 <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">
456 <div class="bx--overflow-menu-options__option-content">
457 <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
458 </div>
459 </button>
460 </li>
461 <li class="bx--overflow-menu-options__option bx--table-row--menu-option">
462 <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">
463 <div class="bx--overflow-menu-options__option-content">
464 <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
465 </div>
466 </button>
467 </li>
468 <li class="bx--overflow-menu-options__option bx--table-row--menu-option">
469 <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">
470 <div class="bx--overflow-menu-options__option-content">
471 <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
472 </div>
473 </button>
474 </li>
475
476 </ul>
477 </div>
478 </td>
479 <!-- inline edit tds -->
480 </tr>
481 <!-- Expandable child row -->
482 <tr >
483 <!-- expand icon td -->
484 <td class="bx--table-column-checkbox">
485 <input data-event="select" id="bx--checkbox-12" class="bx--checkbox" type="checkbox" value="green" name="checkbox-12" >
486 <label for="bx--checkbox-12" class="bx--checkbox-label" aria-label="Label name"></label>
487 </td>
488 <!-- inline action td's -->
489 <!-- expand icon td -->
490 <td >
491 <!-- truncated new markup -->
492 Load Balancer 5
493 </td>
494 <!-- expand icon td -->
495 <td >
496 <!-- truncated new markup -->
497 HTTP
498 </td>
499 <!-- expand icon td -->
500 <td >
501 <!-- truncated new markup -->
502 80
503 </td>
504 <!-- expand icon td -->
505 <td >
506 <!-- truncated new markup -->
507 Round Robin
508 </td>
509 <!-- expand icon td -->
510 <td >
511 <!-- truncated new markup -->
512 Maureen&#x27;s VM Groups
513 </td>
514 <!-- expand icon td -->
515 <td >
516 <!-- truncated new markup -->
517 Active
518 </td>
519 <!-- expand icon td -->
520 <td class="bx--table-column-menu">
521 <div data-overflow-menu role="menu" tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
522 <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>
523 <ul class="bx--overflow-menu-options bx--overflow-menu--flip">
524
525 <li class="bx--overflow-menu-options__option bx--table-row--menu-option">
526 <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">
527 <div class="bx--overflow-menu-options__option-content">
528 <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
529 </div>
530 </button>
531 </li>
532 <li class="bx--overflow-menu-options__option bx--table-row--menu-option">
533 <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">
534 <div class="bx--overflow-menu-options__option-content">
535 <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
536 </div>
537 </button>
538 </li>
539 <li class="bx--overflow-menu-options__option bx--table-row--menu-option">
540 <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">
541 <div class="bx--overflow-menu-options__option-content">
542 <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
543 </div>
544 </button>
545 </li>
546 <li class="bx--overflow-menu-options__option bx--table-row--menu-option">
547 <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">
548 <div class="bx--overflow-menu-options__option-content">
549 <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
550 </div>
551 </button>
552 </li>
553
554 </ul>
555 </div>
556 </td>
557 <!-- inline edit tds -->
558 </tr>
559 <!-- Expandable child row -->
560 </tbody>
561 </table>
562 </section>
563
564 <!-- Pagination -->
565 <div class="bx--pagination" data-pagination>
566 <div class="bx--pagination__left">
567 <label
568 id="select-id-pagination-count-label"
569 class="bx--pagination__text"
570 for="select-id-pagination-count"
571 >
572 Items per page:
573 </label>
574 <div class="bx--select bx--select--inline bx--select__item-count">
575 <select
576 class="bx--select-input"
577 id="select-id-pagination-count"
578 aria-label="select number of items per page"
579 tabindex="0"
580 data-items-per-page
581 >
582 <option class="bx--select-option" value="10" selected>10</option>
583 <option class="bx--select-option" value="20">20</option>
584 <option class="bx--select-option" value="30">30</option>
585 <option class="bx--select-option" value="40">40</option>
586 <option class="bx--select-option" value="50">50</option>
587 </select>
588 <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--select__arrow" width="10" height="6" viewBox="0 0 10 6" aria-hidden="true"><path d="M5 6L0 1 .7.3 5 4.6 9.3.3l.7.7z"></path></svg>
589 </div>
590 <span class="bx--pagination__text">
591 <span data-displayed-item-range>1-10</span> of
592 <span data-total-items>50</span> items
593 </span>
594 </div>
595 <div class="bx--pagination__right">
596 <div class="bx--select bx--select--inline bx--select__page-number">
597 <select
598 class="bx--select-input"
599 id="select-id-pagination-page"
600 aria-label="select page number to view"
601 tabindex="0"
602 data-page-number-input
603 >
604 <option class="bx--select-option" value="1" selected>1</option>
605 <option class="bx--select-option" value="2">2</option>
606 <option class="bx--select-option" value="3">3</option>
607 <option class="bx--select-option" value="4">4</option>
608 <option class="bx--select-option" value="5">5</option>
609 </select>
610 <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--select__arrow" width="10" height="6" viewBox="0 0 10 6" aria-hidden="true"><path d="M5 6L0 1 .7.3 5 4.6 9.3.3l.7.7z"></path></svg>
611 </div>
612 <label
613 id="select-id-pagination-page-label"
614 class="bx--pagination__text"
615 for="select-id-pagination-page"
616 >
617 of 5 pages
618 </label>
619 <button class="bx--pagination__button bx--pagination__button--backward" tabindex="0" data-page-backward aria-label="Backward button">
620 <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--pagination__nav-arrow" width="20" height="20" viewBox="0 0 32 32" aria-hidden="true"><path d="M19 23l-8-7 8-7v14z"></path></svg>
621 </button>
622 <button class="bx--pagination__button bx--pagination__button--forward" tabindex="0" data-page-forward aria-label="Forward button">
623 <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--pagination__nav-arrow" width="20" height="20" viewBox="0 0 32 32" aria-hidden="true"><path d="M13 9l8 7-8 7V9z"></path></svg>
624 </button>
625 </div>
626 </div>
627</div>