@patternfly/patternfly 4.159.0 → 4.160.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -2
- package/RELEASE-NOTES.md +30 -0
- package/base/_globals.scss +0 -16
- package/base/patternfly-globals.css +0 -14
- package/components/Table/table.css +3 -3
- package/components/Table/table.scss +3 -3
- package/components/Toolbar/toolbar.css +4 -2
- package/components/Toolbar/toolbar.scss +6 -2
- package/docs/components/Select/examples/Select.md +12 -11
- package/docs/components/Table/examples/Table.md +2168 -76
- package/docs/demos/Button/examples/Button.md +176 -0
- package/docs/demos/Card/examples/Card.md +164 -112
- package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +79 -0
- package/docs/demos/PasswordStrength/examples/PasswordStrength.md +4 -4
- package/docs/demos/Table/examples/Table.md +3734 -95
- package/package.json +1 -1
- package/patternfly-base.css +0 -14
- package/patternfly-no-reset.css +7 -5
- package/patternfly.css +7 -19
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -6,113 +6,3752 @@ wrapperTag: div
|
|
|
6
6
|
|
|
7
7
|
### Sticky first column
|
|
8
8
|
|
|
9
|
-
```
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
9
|
+
```html isFullscreen
|
|
10
|
+
<div class="pf-c-page" id="sticky-first-column-demo">
|
|
11
|
+
<a
|
|
12
|
+
class="pf-c-skip-to-content pf-c-button pf-m-primary"
|
|
13
|
+
href="#main-content-sticky-first-column-demo"
|
|
14
|
+
>Skip to content</a>
|
|
15
|
+
<header class="pf-c-page__header">
|
|
16
|
+
<div class="pf-c-page__header-brand">
|
|
17
|
+
<div class="pf-c-page__header-brand-toggle">
|
|
18
|
+
<button
|
|
19
|
+
class="pf-c-button pf-m-plain"
|
|
20
|
+
type="button"
|
|
21
|
+
id="sticky-first-column-demo-nav-toggle"
|
|
22
|
+
aria-label="Global navigation"
|
|
23
|
+
aria-expanded="true"
|
|
24
|
+
aria-controls="sticky-first-column-demo-primary-nav"
|
|
25
|
+
>
|
|
26
|
+
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
27
|
+
</button>
|
|
28
|
+
</div>
|
|
29
|
+
<a href="#" class="pf-c-page__header-brand-link">
|
|
30
|
+
<img
|
|
31
|
+
class="pf-c-brand"
|
|
32
|
+
src="/assets/images/PF-Masthead-Logo.svg"
|
|
33
|
+
alt="PatternFly logo"
|
|
34
|
+
/>
|
|
35
|
+
</a>
|
|
36
|
+
</div>
|
|
37
|
+
<div class="pf-c-page__header-tools">
|
|
38
|
+
<div class="pf-c-page__header-tools-group">
|
|
39
|
+
<div
|
|
40
|
+
class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg"
|
|
41
|
+
>
|
|
42
|
+
<button
|
|
43
|
+
class="pf-c-button pf-m-plain"
|
|
44
|
+
type="button"
|
|
45
|
+
aria-label="Settings"
|
|
46
|
+
>
|
|
47
|
+
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
48
|
+
</button>
|
|
49
|
+
</div>
|
|
50
|
+
<div
|
|
51
|
+
class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg"
|
|
52
|
+
>
|
|
53
|
+
<button
|
|
54
|
+
class="pf-c-button pf-m-plain"
|
|
55
|
+
type="button"
|
|
56
|
+
aria-label="Help"
|
|
57
|
+
>
|
|
58
|
+
<i class="pf-icon pf-icon-help" aria-hidden="true"></i>
|
|
59
|
+
</button>
|
|
60
|
+
</div>
|
|
61
|
+
</div>
|
|
62
|
+
<div class="pf-c-page__header-tools-group">
|
|
63
|
+
<div class="pf-c-page__header-tools-item pf-m-hidden-on-lg">
|
|
64
|
+
<div class="pf-c-dropdown">
|
|
65
|
+
<button
|
|
66
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
67
|
+
id="sticky-first-column-demo-dropdown-kebab-1-button"
|
|
68
|
+
aria-expanded="false"
|
|
69
|
+
type="button"
|
|
70
|
+
aria-label="Actions"
|
|
71
|
+
>
|
|
72
|
+
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
73
|
+
</button>
|
|
74
|
+
<ul
|
|
75
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
76
|
+
aria-labelledby="sticky-first-column-demo-dropdown-kebab-1-button"
|
|
77
|
+
hidden
|
|
78
|
+
>
|
|
79
|
+
<li>
|
|
80
|
+
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
|
|
81
|
+
</li>
|
|
82
|
+
<li>
|
|
83
|
+
<button class="pf-c-dropdown__menu-item" type="button">Action</button>
|
|
84
|
+
</li>
|
|
85
|
+
<li>
|
|
86
|
+
<a
|
|
87
|
+
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
88
|
+
href="#"
|
|
89
|
+
aria-disabled="true"
|
|
90
|
+
tabindex="-1"
|
|
91
|
+
>Disabled link</a>
|
|
92
|
+
</li>
|
|
93
|
+
<li>
|
|
94
|
+
<button
|
|
95
|
+
class="pf-c-dropdown__menu-item"
|
|
96
|
+
type="button"
|
|
97
|
+
disabled
|
|
98
|
+
>Disabled action</button>
|
|
99
|
+
</li>
|
|
100
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
101
|
+
<li>
|
|
102
|
+
<a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
|
|
103
|
+
</li>
|
|
104
|
+
</ul>
|
|
105
|
+
</div>
|
|
106
|
+
</div>
|
|
107
|
+
<div
|
|
108
|
+
class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-md"
|
|
109
|
+
>
|
|
110
|
+
<div class="pf-c-dropdown">
|
|
111
|
+
<button
|
|
112
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
113
|
+
id="sticky-first-column-demo-dropdown-kebab-2-button"
|
|
114
|
+
aria-expanded="false"
|
|
115
|
+
type="button"
|
|
116
|
+
>
|
|
117
|
+
<span class="pf-c-dropdown__toggle-text">John Smith</span>
|
|
118
|
+
<span class="pf-c-dropdown__toggle-icon">
|
|
119
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
120
|
+
</span>
|
|
121
|
+
</button>
|
|
122
|
+
<ul
|
|
123
|
+
class="pf-c-dropdown__menu"
|
|
124
|
+
aria-labelledby="sticky-first-column-demo-dropdown-kebab-2-button"
|
|
125
|
+
hidden
|
|
126
|
+
>
|
|
127
|
+
<li>
|
|
128
|
+
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
|
|
129
|
+
</li>
|
|
130
|
+
<li>
|
|
131
|
+
<button class="pf-c-dropdown__menu-item" type="button">Action</button>
|
|
132
|
+
</li>
|
|
133
|
+
<li>
|
|
134
|
+
<a
|
|
135
|
+
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
136
|
+
href="#"
|
|
137
|
+
aria-disabled="true"
|
|
138
|
+
tabindex="-1"
|
|
139
|
+
>Disabled link</a>
|
|
140
|
+
</li>
|
|
141
|
+
<li>
|
|
142
|
+
<button
|
|
143
|
+
class="pf-c-dropdown__menu-item"
|
|
144
|
+
type="button"
|
|
145
|
+
disabled
|
|
146
|
+
>Disabled action</button>
|
|
147
|
+
</li>
|
|
148
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
149
|
+
<li>
|
|
150
|
+
<a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
|
|
151
|
+
</li>
|
|
152
|
+
</ul>
|
|
153
|
+
</div>
|
|
154
|
+
</div>
|
|
155
|
+
</div>
|
|
156
|
+
<img
|
|
157
|
+
class="pf-c-avatar"
|
|
158
|
+
src="/assets/images/img_avatar.svg"
|
|
159
|
+
alt="Avatar image"
|
|
160
|
+
/>
|
|
161
|
+
</div>
|
|
162
|
+
</header>
|
|
163
|
+
<div class="pf-c-page__sidebar">
|
|
164
|
+
<div class="pf-c-page__sidebar-body">
|
|
165
|
+
<nav
|
|
166
|
+
class="pf-c-nav"
|
|
167
|
+
id="sticky-first-column-demo-primary-nav"
|
|
168
|
+
aria-label="Global"
|
|
169
|
+
>
|
|
170
|
+
<ul class="pf-c-nav__list">
|
|
171
|
+
<li class="pf-c-nav__item pf-m-expandable pf-m-expanded pf-m-current">
|
|
172
|
+
<button class="pf-c-nav__link" aria-expanded="true">
|
|
173
|
+
Components
|
|
174
|
+
<span class="pf-c-nav__toggle">
|
|
175
|
+
<span class="pf-c-nav__toggle-icon">
|
|
176
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
177
|
+
</span>
|
|
178
|
+
</span>
|
|
179
|
+
</button>
|
|
180
|
+
<section
|
|
181
|
+
class="pf-c-nav__subnav"
|
|
182
|
+
aria-labelledby="sticky-first-column-demo-subnav-title1"
|
|
183
|
+
>
|
|
184
|
+
<h2
|
|
185
|
+
class="pf-c-nav__subnav-title pf-screen-reader"
|
|
186
|
+
id="sticky-first-column-demo-subnav-title1"
|
|
187
|
+
>First nav item</h2>
|
|
188
|
+
<ul class="pf-c-nav__list">
|
|
189
|
+
<li class="pf-c-nav__item">
|
|
190
|
+
<a href="#" class="pf-c-nav__link">Forms</a>
|
|
191
|
+
</li>
|
|
192
|
+
<li class="pf-c-nav__item">
|
|
193
|
+
<a href="#" class="pf-c-nav__link">Table</a>
|
|
194
|
+
</li>
|
|
195
|
+
<li class="pf-c-nav__item">
|
|
196
|
+
<a
|
|
197
|
+
href="#"
|
|
198
|
+
class="pf-c-nav__link pf-m-current"
|
|
199
|
+
aria-current="page"
|
|
200
|
+
>Data list</a>
|
|
201
|
+
</li>
|
|
202
|
+
<li class="pf-c-nav__item">
|
|
203
|
+
<a href="#" class="pf-c-nav__link">Icons</a>
|
|
204
|
+
</li>
|
|
205
|
+
<li class="pf-c-nav__item">
|
|
206
|
+
<a href="#" class="pf-c-nav__link">Layouts</a>
|
|
207
|
+
</li>
|
|
208
|
+
<li class="pf-c-nav__item">
|
|
209
|
+
<a href="#" class="pf-c-nav__link">List</a>
|
|
210
|
+
</li>
|
|
211
|
+
</ul>
|
|
212
|
+
</section>
|
|
213
|
+
</li>
|
|
214
|
+
<li class="pf-c-nav__item pf-m-expandable">
|
|
215
|
+
<button class="pf-c-nav__link" aria-expanded="false">
|
|
216
|
+
Patterns
|
|
217
|
+
<span class="pf-c-nav__toggle">
|
|
218
|
+
<span class="pf-c-nav__toggle-icon">
|
|
219
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
220
|
+
</span>
|
|
221
|
+
</span>
|
|
222
|
+
</button>
|
|
223
|
+
<section
|
|
224
|
+
class="pf-c-nav__subnav"
|
|
225
|
+
aria-labelledby="sticky-first-column-demo-subnav-title2"
|
|
226
|
+
hidden
|
|
227
|
+
>
|
|
228
|
+
<h2
|
|
229
|
+
class="pf-c-nav__subnav-title pf-screen-reader"
|
|
230
|
+
id="sticky-first-column-demo-subnav-title2"
|
|
231
|
+
>Second nav item</h2>
|
|
232
|
+
<ul class="pf-c-nav__list"></ul>
|
|
233
|
+
</section>
|
|
234
|
+
</li>
|
|
235
|
+
<li class="pf-c-nav__item pf-m-expandable">
|
|
236
|
+
<button class="pf-c-nav__link" aria-expanded="false">
|
|
237
|
+
Typography
|
|
238
|
+
<span class="pf-c-nav__toggle">
|
|
239
|
+
<span class="pf-c-nav__toggle-icon">
|
|
240
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
241
|
+
</span>
|
|
242
|
+
</span>
|
|
243
|
+
</button>
|
|
244
|
+
<section
|
|
245
|
+
class="pf-c-nav__subnav"
|
|
246
|
+
aria-labelledby="sticky-first-column-demo-subnav-title3"
|
|
247
|
+
hidden
|
|
248
|
+
>
|
|
249
|
+
<h2
|
|
250
|
+
class="pf-c-nav__subnav-title pf-screen-reader"
|
|
251
|
+
id="sticky-first-column-demo-subnav-title3"
|
|
252
|
+
>Third nav item</h2>
|
|
253
|
+
<ul class="pf-c-nav__list"></ul>
|
|
254
|
+
</section>
|
|
255
|
+
</li>
|
|
256
|
+
<li class="pf-c-nav__item pf-m-expandable">
|
|
257
|
+
<button class="pf-c-nav__link" aria-expanded="false">
|
|
258
|
+
Icons
|
|
259
|
+
<span class="pf-c-nav__toggle">
|
|
260
|
+
<span class="pf-c-nav__toggle-icon">
|
|
261
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
262
|
+
</span>
|
|
263
|
+
</span>
|
|
264
|
+
</button>
|
|
265
|
+
<section
|
|
266
|
+
class="pf-c-nav__subnav"
|
|
267
|
+
aria-labelledby="sticky-first-column-demo-subnav-title4"
|
|
268
|
+
hidden
|
|
269
|
+
>
|
|
270
|
+
<h2
|
|
271
|
+
class="pf-c-nav__subnav-title pf-screen-reader"
|
|
272
|
+
id="sticky-first-column-demo-subnav-title4"
|
|
273
|
+
>Second nav item</h2>
|
|
274
|
+
<ul class="pf-c-nav__list"></ul>
|
|
275
|
+
</section>
|
|
276
|
+
</li>
|
|
277
|
+
<li class="pf-c-nav__item pf-m-expandable">
|
|
278
|
+
<button class="pf-c-nav__link" aria-expanded="false">
|
|
279
|
+
Colors
|
|
280
|
+
<span class="pf-c-nav__toggle">
|
|
281
|
+
<span class="pf-c-nav__toggle-icon">
|
|
282
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
283
|
+
</span>
|
|
284
|
+
</span>
|
|
285
|
+
</button>
|
|
286
|
+
<section
|
|
287
|
+
class="pf-c-nav__subnav"
|
|
288
|
+
aria-labelledby="sticky-first-column-demo-subnav-title5"
|
|
289
|
+
hidden
|
|
290
|
+
>
|
|
291
|
+
<h2
|
|
292
|
+
class="pf-c-nav__subnav-title pf-screen-reader"
|
|
293
|
+
id="sticky-first-column-demo-subnav-title5"
|
|
294
|
+
>Second nav item</h2>
|
|
295
|
+
<ul class="pf-c-nav__list"></ul>
|
|
296
|
+
</section>
|
|
297
|
+
</li>
|
|
298
|
+
</ul>
|
|
299
|
+
</nav>
|
|
300
|
+
</div>
|
|
301
|
+
</div>
|
|
302
|
+
<main
|
|
303
|
+
class="pf-c-page__main"
|
|
304
|
+
tabindex="-1"
|
|
305
|
+
id="main-content-sticky-first-column-demo"
|
|
306
|
+
>
|
|
307
|
+
<section class="pf-c-page__main-subnav pf-m-limit-width">
|
|
308
|
+
<div class="pf-c-page__main-body">
|
|
309
|
+
<nav class="pf-c-nav pf-m-horizontal-subnav" aria-label="Local">
|
|
310
|
+
<ul class="pf-c-nav__list">
|
|
311
|
+
<li class="pf-c-nav__item">
|
|
312
|
+
<a
|
|
313
|
+
href="#"
|
|
314
|
+
class="pf-c-nav__link pf-m-current"
|
|
315
|
+
aria-current="page"
|
|
316
|
+
>Item 1</a>
|
|
317
|
+
</li>
|
|
318
|
+
<li class="pf-c-nav__item">
|
|
319
|
+
<a href="#" class="pf-c-nav__link">Item 2</a>
|
|
320
|
+
</li>
|
|
321
|
+
<li class="pf-c-nav__item">
|
|
322
|
+
<a href="#" class="pf-c-nav__link">Item 3</a>
|
|
323
|
+
</li>
|
|
324
|
+
</ul>
|
|
325
|
+
</nav>
|
|
326
|
+
</div>
|
|
327
|
+
</section>
|
|
328
|
+
<section class="pf-c-page__main-section pf-m-light">
|
|
329
|
+
<div class="pf-c-content">
|
|
330
|
+
<h1>Table demos</h1>
|
|
331
|
+
<p>Below is an example of a Table.</p>
|
|
332
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum suscipit venenatis enim, ut ultrices metus ornare at. Curabitur vel nibh id leo finibus suscipit. Curabitur eu tellus lectus. Vivamus lacus leo, lobortis ac convallis ac, dapibus vel ligula. Suspendisse vitae felis at augue blandit sollicitudin. Sed erat metus, pellentesque vel accumsan vitae, tincidunt id erat. Mauris et pharetra felis. Duis at nisi leo. Nam blandit dui dui, in euismod est dapibus sed. Vivamus sed dolor ullamcorper, euismod orci efficitur, ornare leo. Sed sit amet sollicitudin nulla. Nunc tristique sem ut est laoreet efficitur. Cras tristique finibus risus, eget fringilla tellus porta vitae. Duis id nunc ultricies, ultrices nibh vel, sollicitudin tellus.</p>
|
|
333
|
+
</div>
|
|
334
|
+
</section>
|
|
335
|
+
<section
|
|
336
|
+
class="pf-c-page__main-section pf-m-limit-width pf-m-no-padding pf-m-padding-on-xl"
|
|
337
|
+
>
|
|
338
|
+
<div class="pf-c-page__main-body">
|
|
339
|
+
<div class="pf-c-scroll-outer-wrapper">
|
|
340
|
+
<div class="pf-c-toolbar">
|
|
341
|
+
<div class="pf-c-toolbar__content">
|
|
342
|
+
<div class="pf-c-toolbar__content-section pf-m-nowrap">
|
|
343
|
+
<div
|
|
344
|
+
class="pf-c-toolbar__group pf-m-toggle-group pf-m-show-on-xl"
|
|
345
|
+
>
|
|
346
|
+
<div class="pf-c-toolbar__toggle">
|
|
347
|
+
<button
|
|
348
|
+
class="pf-c-button pf-m-plain"
|
|
349
|
+
type="button"
|
|
350
|
+
aria-label="Show filters"
|
|
351
|
+
aria-expanded="false"
|
|
352
|
+
aria-controls="-expandable-content"
|
|
353
|
+
>
|
|
354
|
+
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
355
|
+
</button>
|
|
356
|
+
</div>
|
|
357
|
+
|
|
358
|
+
<div class="pf-c-toolbar__item pf-m-bulk-select">
|
|
359
|
+
<div class="pf-c-dropdown">
|
|
360
|
+
<div class="pf-c-dropdown__toggle pf-m-split-button">
|
|
361
|
+
<label
|
|
362
|
+
class="pf-c-dropdown__toggle-check"
|
|
363
|
+
for="-bulk-select-toggle-check"
|
|
364
|
+
>
|
|
365
|
+
<input
|
|
366
|
+
type="checkbox"
|
|
367
|
+
id="-bulk-select-toggle-check"
|
|
368
|
+
aria-label="Select all"
|
|
369
|
+
/>
|
|
370
|
+
</label>
|
|
371
|
+
|
|
372
|
+
<button
|
|
373
|
+
class="pf-c-dropdown__toggle-button"
|
|
374
|
+
type="button"
|
|
375
|
+
aria-expanded="false"
|
|
376
|
+
id="-bulk-select-toggle-button"
|
|
377
|
+
aria-label="Dropdown toggle"
|
|
378
|
+
>
|
|
379
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
380
|
+
</button>
|
|
381
|
+
</div>
|
|
382
|
+
<ul class="pf-c-dropdown__menu" hidden>
|
|
383
|
+
<li>
|
|
384
|
+
<button
|
|
385
|
+
class="pf-c-dropdown__menu-item"
|
|
386
|
+
type="button"
|
|
387
|
+
>Select all</button>
|
|
388
|
+
</li>
|
|
389
|
+
<li>
|
|
390
|
+
<button
|
|
391
|
+
class="pf-c-dropdown__menu-item"
|
|
392
|
+
type="button"
|
|
393
|
+
>Select none</button>
|
|
394
|
+
</li>
|
|
395
|
+
<li>
|
|
396
|
+
<button
|
|
397
|
+
class="pf-c-dropdown__menu-item"
|
|
398
|
+
type="button"
|
|
399
|
+
>Other action</button>
|
|
400
|
+
</li>
|
|
401
|
+
</ul>
|
|
402
|
+
</div>
|
|
403
|
+
</div>
|
|
404
|
+
|
|
405
|
+
<div class="pf-c-toolbar__item pf-m-search-filter">
|
|
406
|
+
<div
|
|
407
|
+
class="pf-c-input-group"
|
|
408
|
+
aria-label="search filter"
|
|
409
|
+
role="group"
|
|
410
|
+
>
|
|
411
|
+
<div class="pf-c-dropdown">
|
|
412
|
+
<button
|
|
413
|
+
class="pf-c-dropdown__toggle"
|
|
414
|
+
id="--button"
|
|
415
|
+
aria-expanded="false"
|
|
416
|
+
type="button"
|
|
417
|
+
>
|
|
418
|
+
<span class="pf-c-dropdown__toggle-text">Name</span>
|
|
419
|
+
<span class="pf-c-dropdown__toggle-icon">
|
|
420
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
421
|
+
</span>
|
|
422
|
+
</button>
|
|
423
|
+
<ul
|
|
424
|
+
class="pf-c-dropdown__menu"
|
|
425
|
+
aria-labelledby="--button"
|
|
426
|
+
hidden
|
|
427
|
+
>
|
|
428
|
+
<li>
|
|
429
|
+
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
|
|
430
|
+
</li>
|
|
431
|
+
<li>
|
|
432
|
+
<button
|
|
433
|
+
class="pf-c-dropdown__menu-item"
|
|
434
|
+
type="button"
|
|
435
|
+
>Action</button>
|
|
436
|
+
</li>
|
|
437
|
+
<li>
|
|
438
|
+
<a
|
|
439
|
+
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
440
|
+
href="#"
|
|
441
|
+
aria-disabled="true"
|
|
442
|
+
tabindex="-1"
|
|
443
|
+
>Disabled link</a>
|
|
444
|
+
</li>
|
|
445
|
+
<li>
|
|
446
|
+
<button
|
|
447
|
+
class="pf-c-dropdown__menu-item"
|
|
448
|
+
type="button"
|
|
449
|
+
disabled
|
|
450
|
+
>Disabled action</button>
|
|
451
|
+
</li>
|
|
452
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
453
|
+
<li>
|
|
454
|
+
<a
|
|
455
|
+
class="pf-c-dropdown__menu-item"
|
|
456
|
+
href="#"
|
|
457
|
+
>Separated link</a>
|
|
458
|
+
</li>
|
|
459
|
+
</ul>
|
|
460
|
+
</div>
|
|
461
|
+
<input
|
|
462
|
+
class="pf-c-form-control"
|
|
463
|
+
type="search"
|
|
464
|
+
id="--search-filter-input"
|
|
465
|
+
name="-search-filter-input"
|
|
466
|
+
aria-label="input with dropdown and button"
|
|
467
|
+
aria-describedby="--button"
|
|
468
|
+
/>
|
|
469
|
+
</div>
|
|
470
|
+
</div>
|
|
471
|
+
</div>
|
|
472
|
+
|
|
473
|
+
<div class="pf-c-toolbar__item">
|
|
474
|
+
<button
|
|
475
|
+
class="pf-c-button pf-m-plain"
|
|
476
|
+
type="button"
|
|
477
|
+
aria-label="Sort"
|
|
478
|
+
>
|
|
479
|
+
<i class="fas fa-sort-amount-down" aria-hidden="true"></i>
|
|
480
|
+
</button>
|
|
481
|
+
</div>
|
|
482
|
+
|
|
483
|
+
<div class="pf-c-overflow-menu" id="-overflow-menu">
|
|
484
|
+
<div
|
|
485
|
+
class="pf-c-overflow-menu__content pf-u-display-none pf-u-display-flex-on-lg"
|
|
486
|
+
>
|
|
487
|
+
<div class="pf-c-overflow-menu__group pf-m-button-group">
|
|
488
|
+
<div class="pf-c-overflow-menu__item">
|
|
489
|
+
<button
|
|
490
|
+
class="pf-c-button pf-m-primary"
|
|
491
|
+
type="button"
|
|
492
|
+
>Create instance</button>
|
|
493
|
+
</div>
|
|
494
|
+
</div>
|
|
495
|
+
</div>
|
|
496
|
+
<div class="pf-c-overflow-menu__control">
|
|
497
|
+
<div class="pf-c-dropdown">
|
|
498
|
+
<button
|
|
499
|
+
class="pf-c-button pf-c-dropdown__toggle pf-m-plain"
|
|
500
|
+
type="button"
|
|
501
|
+
id="-overflow-menu-dropdown-toggle"
|
|
502
|
+
aria-label="Dropdown with additional options"
|
|
503
|
+
aria-expanded="false"
|
|
504
|
+
>
|
|
505
|
+
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
506
|
+
</button>
|
|
507
|
+
<ul
|
|
508
|
+
class="pf-c-dropdown__menu"
|
|
509
|
+
aria-labelledby="-overflow-menu-dropdown-toggle"
|
|
510
|
+
hidden
|
|
511
|
+
>
|
|
512
|
+
<li>
|
|
513
|
+
<button class="pf-c-dropdown__menu-item">Action 7</button>
|
|
514
|
+
</li>
|
|
515
|
+
</ul>
|
|
516
|
+
</div>
|
|
517
|
+
</div>
|
|
518
|
+
</div>
|
|
519
|
+
|
|
520
|
+
<div class="pf-c-toolbar__item pf-m-pagination">
|
|
521
|
+
<div class="pf-c-pagination pf-m-compact">
|
|
522
|
+
<div class="pf-c-options-menu">
|
|
523
|
+
<div
|
|
524
|
+
class="pf-c-options-menu__toggle pf-m-text pf-m-plain"
|
|
525
|
+
>
|
|
526
|
+
<span class="pf-c-options-menu__toggle-text">
|
|
527
|
+
<b>1 - 10</b> of
|
|
528
|
+
<b>36</b>
|
|
529
|
+
</span>
|
|
530
|
+
<button
|
|
531
|
+
class="pf-c-options-menu__toggle-button"
|
|
532
|
+
id="-top-pagination-toggle"
|
|
533
|
+
aria-haspopup="listbox"
|
|
534
|
+
aria-expanded="false"
|
|
535
|
+
aria-label="Items per page"
|
|
536
|
+
>
|
|
537
|
+
<span class="pf-c-options-menu__toggle-button-icon">
|
|
538
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
539
|
+
</span>
|
|
540
|
+
</button>
|
|
541
|
+
</div>
|
|
542
|
+
<ul
|
|
543
|
+
class="pf-c-options-menu__menu"
|
|
544
|
+
aria-labelledby="-top-pagination-toggle"
|
|
545
|
+
hidden
|
|
546
|
+
>
|
|
547
|
+
<li>
|
|
548
|
+
<button
|
|
549
|
+
class="pf-c-options-menu__menu-item"
|
|
550
|
+
type="button"
|
|
551
|
+
>5 per page</button>
|
|
552
|
+
</li>
|
|
553
|
+
<li>
|
|
554
|
+
<button
|
|
555
|
+
class="pf-c-options-menu__menu-item"
|
|
556
|
+
type="button"
|
|
557
|
+
>
|
|
558
|
+
10 per page
|
|
559
|
+
<div class="pf-c-options-menu__menu-item-icon">
|
|
560
|
+
<i class="fas fa-check" aria-hidden="true"></i>
|
|
561
|
+
</div>
|
|
562
|
+
</button>
|
|
563
|
+
</li>
|
|
564
|
+
<li>
|
|
565
|
+
<button
|
|
566
|
+
class="pf-c-options-menu__menu-item"
|
|
567
|
+
type="button"
|
|
568
|
+
>20 per page</button>
|
|
569
|
+
</li>
|
|
570
|
+
</ul>
|
|
571
|
+
</div>
|
|
572
|
+
<nav
|
|
573
|
+
class="pf-c-pagination__nav"
|
|
574
|
+
aria-label="Toolbar top pagination"
|
|
575
|
+
>
|
|
576
|
+
<div class="pf-c-pagination__nav-control pf-m-prev">
|
|
577
|
+
<button
|
|
578
|
+
class="pf-c-button pf-m-plain"
|
|
579
|
+
type="button"
|
|
580
|
+
disabled
|
|
581
|
+
aria-label="Go to previous page"
|
|
582
|
+
>
|
|
583
|
+
<i class="fas fa-angle-left" aria-hidden="true"></i>
|
|
584
|
+
</button>
|
|
585
|
+
</div>
|
|
586
|
+
<div class="pf-c-pagination__nav-control pf-m-next">
|
|
587
|
+
<button
|
|
588
|
+
class="pf-c-button pf-m-plain"
|
|
589
|
+
type="button"
|
|
590
|
+
aria-label="Go to next page"
|
|
591
|
+
>
|
|
592
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
593
|
+
</button>
|
|
594
|
+
</div>
|
|
595
|
+
</nav>
|
|
596
|
+
</div>
|
|
597
|
+
</div>
|
|
598
|
+
</div>
|
|
599
|
+
|
|
600
|
+
<div
|
|
601
|
+
class="pf-c-toolbar__expandable-content pf-m-hidden"
|
|
602
|
+
id="-expandable-content"
|
|
603
|
+
hidden
|
|
604
|
+
></div>
|
|
605
|
+
</div>
|
|
606
|
+
</div>
|
|
607
|
+
<div class="pf-c-scroll-inner-wrapper">
|
|
608
|
+
<table
|
|
609
|
+
class="pf-c-table"
|
|
610
|
+
role="grid"
|
|
611
|
+
aria-label="This is a scrollable table"
|
|
612
|
+
id="sticky-first-column-demo-table"
|
|
613
|
+
>
|
|
614
|
+
<thead>
|
|
615
|
+
<tr role="row">
|
|
616
|
+
<th
|
|
617
|
+
class="pf-m-border-right pf-m-truncate pf-c-table__sort pf-c-table__sticky-column"
|
|
618
|
+
role="columnheader"
|
|
619
|
+
aria-sort="none"
|
|
620
|
+
data-label="Example th"
|
|
621
|
+
scope="col"
|
|
622
|
+
style="--pf-c-table__sticky-column--MinWidth: 100px;"
|
|
623
|
+
>
|
|
624
|
+
<button class="pf-c-table__button">
|
|
625
|
+
<div class="pf-c-table__button-content">
|
|
626
|
+
<span class="pf-c-table__text">Fact</span>
|
|
627
|
+
<span class="pf-c-table__sort-indicator">
|
|
628
|
+
<i class="fas fa-arrows-alt-v"></i>
|
|
629
|
+
</span>
|
|
630
|
+
</div>
|
|
631
|
+
</button>
|
|
632
|
+
</th>
|
|
633
|
+
<th
|
|
634
|
+
class="pf-m-truncate pf-c-table__sort"
|
|
635
|
+
role="columnheader"
|
|
636
|
+
aria-sort="none"
|
|
637
|
+
data-label="Example th"
|
|
638
|
+
scope="col"
|
|
639
|
+
>
|
|
640
|
+
<button class="pf-c-table__button">
|
|
641
|
+
<div class="pf-c-table__button-content">
|
|
642
|
+
<span class="pf-c-table__text">State</span>
|
|
643
|
+
<span class="pf-c-table__sort-indicator">
|
|
644
|
+
<i class="fas fa-arrows-alt-v"></i>
|
|
645
|
+
</span>
|
|
646
|
+
</div>
|
|
647
|
+
</button>
|
|
648
|
+
</th>
|
|
649
|
+
<th
|
|
650
|
+
class="pf-m-truncate"
|
|
651
|
+
role="columnheader"
|
|
652
|
+
data-label="Example th"
|
|
653
|
+
scope="col"
|
|
654
|
+
>Header 3</th>
|
|
655
|
+
<th
|
|
656
|
+
class="pf-m-truncate"
|
|
657
|
+
role="columnheader"
|
|
658
|
+
data-label="Example th"
|
|
659
|
+
scope="col"
|
|
660
|
+
>Header 4</th>
|
|
661
|
+
<th
|
|
662
|
+
class="pf-m-truncate"
|
|
663
|
+
role="columnheader"
|
|
664
|
+
data-label="Example th"
|
|
665
|
+
scope="col"
|
|
666
|
+
>Header 5</th>
|
|
667
|
+
<th
|
|
668
|
+
class="pf-m-truncate"
|
|
669
|
+
role="columnheader"
|
|
670
|
+
data-label="Example th"
|
|
671
|
+
scope="col"
|
|
672
|
+
>Header 6</th>
|
|
673
|
+
<th
|
|
674
|
+
class="pf-m-truncate"
|
|
675
|
+
role="columnheader"
|
|
676
|
+
data-label="Example th"
|
|
677
|
+
scope="col"
|
|
678
|
+
>Header 7</th>
|
|
679
|
+
<th
|
|
680
|
+
class="pf-m-truncate"
|
|
681
|
+
role="columnheader"
|
|
682
|
+
data-label="Example th"
|
|
683
|
+
scope="col"
|
|
684
|
+
>Header 8</th>
|
|
685
|
+
<th
|
|
686
|
+
class="pf-m-truncate"
|
|
687
|
+
role="columnheader"
|
|
688
|
+
data-label="Example th"
|
|
689
|
+
scope="col"
|
|
690
|
+
>Header 9</th>
|
|
691
|
+
</tr>
|
|
692
|
+
</thead>
|
|
693
|
+
|
|
694
|
+
<tbody role="rowgroup">
|
|
695
|
+
<tr role="row">
|
|
696
|
+
<th
|
|
697
|
+
class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
|
|
698
|
+
role="columnheader"
|
|
699
|
+
data-label="Example th"
|
|
700
|
+
scope="col"
|
|
701
|
+
style="--pf-c-table__sticky-column--MinWidth: 100px;"
|
|
702
|
+
>Fact 1</th>
|
|
703
|
+
<td
|
|
704
|
+
class="pf-m-nowrap"
|
|
705
|
+
role="cell"
|
|
706
|
+
data-label="Example td"
|
|
707
|
+
>State 1</td>
|
|
708
|
+
<td
|
|
709
|
+
class="pf-m-nowrap"
|
|
710
|
+
role="cell"
|
|
711
|
+
data-label="Example td"
|
|
712
|
+
>Test cell 1-3</td>
|
|
713
|
+
<td
|
|
714
|
+
class="pf-m-nowrap"
|
|
715
|
+
role="cell"
|
|
716
|
+
data-label="Example td"
|
|
717
|
+
>Test cell 1-4</td>
|
|
718
|
+
<td
|
|
719
|
+
class="pf-m-nowrap"
|
|
720
|
+
role="cell"
|
|
721
|
+
data-label="Example td"
|
|
722
|
+
>Test cell 1-5</td>
|
|
723
|
+
<td
|
|
724
|
+
class="pf-m-nowrap"
|
|
725
|
+
role="cell"
|
|
726
|
+
data-label="Example td"
|
|
727
|
+
>Test cell 1-6</td>
|
|
728
|
+
<td
|
|
729
|
+
class="pf-m-nowrap"
|
|
730
|
+
role="cell"
|
|
731
|
+
data-label="Example td"
|
|
732
|
+
>Test cell 1-7</td>
|
|
733
|
+
<td
|
|
734
|
+
class="pf-m-nowrap"
|
|
735
|
+
role="cell"
|
|
736
|
+
data-label="Example td"
|
|
737
|
+
>Test cell 1-8</td>
|
|
738
|
+
<td
|
|
739
|
+
class="pf-m-nowrap"
|
|
740
|
+
role="cell"
|
|
741
|
+
data-label="Example td"
|
|
742
|
+
>Test cell 1-9</td>
|
|
743
|
+
</tr>
|
|
744
|
+
<tr role="row">
|
|
745
|
+
<th
|
|
746
|
+
class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
|
|
747
|
+
role="columnheader"
|
|
748
|
+
data-label="Example th"
|
|
749
|
+
scope="col"
|
|
750
|
+
style="--pf-c-table__sticky-column--MinWidth: 100px;"
|
|
751
|
+
>Fact 2</th>
|
|
752
|
+
<td
|
|
753
|
+
class="pf-m-nowrap"
|
|
754
|
+
role="cell"
|
|
755
|
+
data-label="Example td"
|
|
756
|
+
>State 2</td>
|
|
757
|
+
<td
|
|
758
|
+
class="pf-m-nowrap"
|
|
759
|
+
role="cell"
|
|
760
|
+
data-label="Example td"
|
|
761
|
+
>Test cell 2-3</td>
|
|
762
|
+
<td
|
|
763
|
+
class="pf-m-nowrap"
|
|
764
|
+
role="cell"
|
|
765
|
+
data-label="Example td"
|
|
766
|
+
>Test cell 2-4</td>
|
|
767
|
+
<td
|
|
768
|
+
class="pf-m-nowrap"
|
|
769
|
+
role="cell"
|
|
770
|
+
data-label="Example td"
|
|
771
|
+
>Test cell 2-5</td>
|
|
772
|
+
<td
|
|
773
|
+
class="pf-m-nowrap"
|
|
774
|
+
role="cell"
|
|
775
|
+
data-label="Example td"
|
|
776
|
+
>Test cell 2-6</td>
|
|
777
|
+
<td
|
|
778
|
+
class="pf-m-nowrap"
|
|
779
|
+
role="cell"
|
|
780
|
+
data-label="Example td"
|
|
781
|
+
>Test cell 2-7</td>
|
|
782
|
+
<td
|
|
783
|
+
class="pf-m-nowrap"
|
|
784
|
+
role="cell"
|
|
785
|
+
data-label="Example td"
|
|
786
|
+
>Test cell 2-8</td>
|
|
787
|
+
<td
|
|
788
|
+
class="pf-m-nowrap"
|
|
789
|
+
role="cell"
|
|
790
|
+
data-label="Example td"
|
|
791
|
+
>Test cell 2-9</td>
|
|
792
|
+
</tr>
|
|
793
|
+
<tr role="row">
|
|
794
|
+
<th
|
|
795
|
+
class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
|
|
796
|
+
role="columnheader"
|
|
797
|
+
data-label="Example th"
|
|
798
|
+
scope="col"
|
|
799
|
+
style="--pf-c-table__sticky-column--MinWidth: 100px;"
|
|
800
|
+
>Fact 3</th>
|
|
801
|
+
<td
|
|
802
|
+
class="pf-m-nowrap"
|
|
803
|
+
role="cell"
|
|
804
|
+
data-label="Example td"
|
|
805
|
+
>State 3</td>
|
|
806
|
+
<td
|
|
807
|
+
class="pf-m-nowrap"
|
|
808
|
+
role="cell"
|
|
809
|
+
data-label="Example td"
|
|
810
|
+
>Test cell 3-3</td>
|
|
811
|
+
<td
|
|
812
|
+
class="pf-m-nowrap"
|
|
813
|
+
role="cell"
|
|
814
|
+
data-label="Example td"
|
|
815
|
+
>Test cell 3-4</td>
|
|
816
|
+
<td
|
|
817
|
+
class="pf-m-nowrap"
|
|
818
|
+
role="cell"
|
|
819
|
+
data-label="Example td"
|
|
820
|
+
>Test cell 3-5</td>
|
|
821
|
+
<td
|
|
822
|
+
class="pf-m-nowrap"
|
|
823
|
+
role="cell"
|
|
824
|
+
data-label="Example td"
|
|
825
|
+
>Test cell 3-6</td>
|
|
826
|
+
<td
|
|
827
|
+
class="pf-m-nowrap"
|
|
828
|
+
role="cell"
|
|
829
|
+
data-label="Example td"
|
|
830
|
+
>Test cell 3-7</td>
|
|
831
|
+
<td
|
|
832
|
+
class="pf-m-nowrap"
|
|
833
|
+
role="cell"
|
|
834
|
+
data-label="Example td"
|
|
835
|
+
>Test cell 3-8</td>
|
|
836
|
+
<td
|
|
837
|
+
class="pf-m-nowrap"
|
|
838
|
+
role="cell"
|
|
839
|
+
data-label="Example td"
|
|
840
|
+
>Test cell 3-9</td>
|
|
841
|
+
</tr>
|
|
842
|
+
<tr role="row">
|
|
843
|
+
<th
|
|
844
|
+
class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
|
|
845
|
+
role="columnheader"
|
|
846
|
+
data-label="Example th"
|
|
847
|
+
scope="col"
|
|
848
|
+
style="--pf-c-table__sticky-column--MinWidth: 100px;"
|
|
849
|
+
>Fact 4</th>
|
|
850
|
+
<td
|
|
851
|
+
class="pf-m-nowrap"
|
|
852
|
+
role="cell"
|
|
853
|
+
data-label="Example td"
|
|
854
|
+
>State 4</td>
|
|
855
|
+
<td
|
|
856
|
+
class="pf-m-nowrap"
|
|
857
|
+
role="cell"
|
|
858
|
+
data-label="Example td"
|
|
859
|
+
>Test cell 4-3</td>
|
|
860
|
+
<td
|
|
861
|
+
class="pf-m-nowrap"
|
|
862
|
+
role="cell"
|
|
863
|
+
data-label="Example td"
|
|
864
|
+
>Test cell 4-4</td>
|
|
865
|
+
<td
|
|
866
|
+
class="pf-m-nowrap"
|
|
867
|
+
role="cell"
|
|
868
|
+
data-label="Example td"
|
|
869
|
+
>Test cell 4-5</td>
|
|
870
|
+
<td
|
|
871
|
+
class="pf-m-nowrap"
|
|
872
|
+
role="cell"
|
|
873
|
+
data-label="Example td"
|
|
874
|
+
>Test cell 4-6</td>
|
|
875
|
+
<td
|
|
876
|
+
class="pf-m-nowrap"
|
|
877
|
+
role="cell"
|
|
878
|
+
data-label="Example td"
|
|
879
|
+
>Test cell 4-7</td>
|
|
880
|
+
<td
|
|
881
|
+
class="pf-m-nowrap"
|
|
882
|
+
role="cell"
|
|
883
|
+
data-label="Example td"
|
|
884
|
+
>Test cell 4-8</td>
|
|
885
|
+
<td
|
|
886
|
+
class="pf-m-nowrap"
|
|
887
|
+
role="cell"
|
|
888
|
+
data-label="Example td"
|
|
889
|
+
>Test cell 4-9</td>
|
|
890
|
+
</tr>
|
|
891
|
+
<tr role="row">
|
|
892
|
+
<th
|
|
893
|
+
class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
|
|
894
|
+
role="columnheader"
|
|
895
|
+
data-label="Example th"
|
|
896
|
+
scope="col"
|
|
897
|
+
style="--pf-c-table__sticky-column--MinWidth: 100px;"
|
|
898
|
+
>Fact 5</th>
|
|
899
|
+
<td
|
|
900
|
+
class="pf-m-nowrap"
|
|
901
|
+
role="cell"
|
|
902
|
+
data-label="Example td"
|
|
903
|
+
>State 5</td>
|
|
904
|
+
<td
|
|
905
|
+
class="pf-m-nowrap"
|
|
906
|
+
role="cell"
|
|
907
|
+
data-label="Example td"
|
|
908
|
+
>Test cell 5-3</td>
|
|
909
|
+
<td
|
|
910
|
+
class="pf-m-nowrap"
|
|
911
|
+
role="cell"
|
|
912
|
+
data-label="Example td"
|
|
913
|
+
>Test cell 5-4</td>
|
|
914
|
+
<td
|
|
915
|
+
class="pf-m-nowrap"
|
|
916
|
+
role="cell"
|
|
917
|
+
data-label="Example td"
|
|
918
|
+
>Test cell 5-5</td>
|
|
919
|
+
<td
|
|
920
|
+
class="pf-m-nowrap"
|
|
921
|
+
role="cell"
|
|
922
|
+
data-label="Example td"
|
|
923
|
+
>Test cell 5-6</td>
|
|
924
|
+
<td
|
|
925
|
+
class="pf-m-nowrap"
|
|
926
|
+
role="cell"
|
|
927
|
+
data-label="Example td"
|
|
928
|
+
>Test cell 5-7</td>
|
|
929
|
+
<td
|
|
930
|
+
class="pf-m-nowrap"
|
|
931
|
+
role="cell"
|
|
932
|
+
data-label="Example td"
|
|
933
|
+
>Test cell 5-8</td>
|
|
934
|
+
<td
|
|
935
|
+
class="pf-m-nowrap"
|
|
936
|
+
role="cell"
|
|
937
|
+
data-label="Example td"
|
|
938
|
+
>Test cell 5-9</td>
|
|
939
|
+
</tr>
|
|
940
|
+
<tr role="row">
|
|
941
|
+
<th
|
|
942
|
+
class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
|
|
943
|
+
role="columnheader"
|
|
944
|
+
data-label="Example th"
|
|
945
|
+
scope="col"
|
|
946
|
+
style="--pf-c-table__sticky-column--MinWidth: 100px;"
|
|
947
|
+
>Fact 6</th>
|
|
948
|
+
<td
|
|
949
|
+
class="pf-m-nowrap"
|
|
950
|
+
role="cell"
|
|
951
|
+
data-label="Example td"
|
|
952
|
+
>State 6</td>
|
|
953
|
+
<td
|
|
954
|
+
class="pf-m-nowrap"
|
|
955
|
+
role="cell"
|
|
956
|
+
data-label="Example td"
|
|
957
|
+
>Test cell 6-3</td>
|
|
958
|
+
<td
|
|
959
|
+
class="pf-m-nowrap"
|
|
960
|
+
role="cell"
|
|
961
|
+
data-label="Example td"
|
|
962
|
+
>Test cell 6-4</td>
|
|
963
|
+
<td
|
|
964
|
+
class="pf-m-nowrap"
|
|
965
|
+
role="cell"
|
|
966
|
+
data-label="Example td"
|
|
967
|
+
>Test cell 6-5</td>
|
|
968
|
+
<td
|
|
969
|
+
class="pf-m-nowrap"
|
|
970
|
+
role="cell"
|
|
971
|
+
data-label="Example td"
|
|
972
|
+
>Test cell 6-6</td>
|
|
973
|
+
<td
|
|
974
|
+
class="pf-m-nowrap"
|
|
975
|
+
role="cell"
|
|
976
|
+
data-label="Example td"
|
|
977
|
+
>Test cell 6-7</td>
|
|
978
|
+
<td
|
|
979
|
+
class="pf-m-nowrap"
|
|
980
|
+
role="cell"
|
|
981
|
+
data-label="Example td"
|
|
982
|
+
>Test cell 6-8</td>
|
|
983
|
+
<td
|
|
984
|
+
class="pf-m-nowrap"
|
|
985
|
+
role="cell"
|
|
986
|
+
data-label="Example td"
|
|
987
|
+
>Test cell 6-9</td>
|
|
988
|
+
</tr>
|
|
989
|
+
<tr role="row">
|
|
990
|
+
<th
|
|
991
|
+
class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
|
|
992
|
+
role="columnheader"
|
|
993
|
+
data-label="Example th"
|
|
994
|
+
scope="col"
|
|
995
|
+
style="--pf-c-table__sticky-column--MinWidth: 100px;"
|
|
996
|
+
>Fact 7</th>
|
|
997
|
+
<td
|
|
998
|
+
class="pf-m-nowrap"
|
|
999
|
+
role="cell"
|
|
1000
|
+
data-label="Example td"
|
|
1001
|
+
>State 7</td>
|
|
1002
|
+
<td
|
|
1003
|
+
class="pf-m-nowrap"
|
|
1004
|
+
role="cell"
|
|
1005
|
+
data-label="Example td"
|
|
1006
|
+
>Test cell 7-3</td>
|
|
1007
|
+
<td
|
|
1008
|
+
class="pf-m-nowrap"
|
|
1009
|
+
role="cell"
|
|
1010
|
+
data-label="Example td"
|
|
1011
|
+
>Test cell 7-4</td>
|
|
1012
|
+
<td
|
|
1013
|
+
class="pf-m-nowrap"
|
|
1014
|
+
role="cell"
|
|
1015
|
+
data-label="Example td"
|
|
1016
|
+
>Test cell 7-5</td>
|
|
1017
|
+
<td
|
|
1018
|
+
class="pf-m-nowrap"
|
|
1019
|
+
role="cell"
|
|
1020
|
+
data-label="Example td"
|
|
1021
|
+
>Test cell 7-6</td>
|
|
1022
|
+
<td
|
|
1023
|
+
class="pf-m-nowrap"
|
|
1024
|
+
role="cell"
|
|
1025
|
+
data-label="Example td"
|
|
1026
|
+
>Test cell 7-7</td>
|
|
1027
|
+
<td
|
|
1028
|
+
class="pf-m-nowrap"
|
|
1029
|
+
role="cell"
|
|
1030
|
+
data-label="Example td"
|
|
1031
|
+
>Test cell 7-8</td>
|
|
1032
|
+
<td
|
|
1033
|
+
class="pf-m-nowrap"
|
|
1034
|
+
role="cell"
|
|
1035
|
+
data-label="Example td"
|
|
1036
|
+
>Test cell 7-9</td>
|
|
1037
|
+
</tr>
|
|
1038
|
+
<tr role="row">
|
|
1039
|
+
<th
|
|
1040
|
+
class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
|
|
1041
|
+
role="columnheader"
|
|
1042
|
+
data-label="Example th"
|
|
1043
|
+
scope="col"
|
|
1044
|
+
style="--pf-c-table__sticky-column--MinWidth: 100px;"
|
|
1045
|
+
>Fact 8</th>
|
|
1046
|
+
<td
|
|
1047
|
+
class="pf-m-nowrap"
|
|
1048
|
+
role="cell"
|
|
1049
|
+
data-label="Example td"
|
|
1050
|
+
>State 8</td>
|
|
1051
|
+
<td
|
|
1052
|
+
class="pf-m-nowrap"
|
|
1053
|
+
role="cell"
|
|
1054
|
+
data-label="Example td"
|
|
1055
|
+
>Test cell 8-3</td>
|
|
1056
|
+
<td
|
|
1057
|
+
class="pf-m-nowrap"
|
|
1058
|
+
role="cell"
|
|
1059
|
+
data-label="Example td"
|
|
1060
|
+
>Test cell 8-4</td>
|
|
1061
|
+
<td
|
|
1062
|
+
class="pf-m-nowrap"
|
|
1063
|
+
role="cell"
|
|
1064
|
+
data-label="Example td"
|
|
1065
|
+
>Test cell 8-5</td>
|
|
1066
|
+
<td
|
|
1067
|
+
class="pf-m-nowrap"
|
|
1068
|
+
role="cell"
|
|
1069
|
+
data-label="Example td"
|
|
1070
|
+
>Test cell 8-6</td>
|
|
1071
|
+
<td
|
|
1072
|
+
class="pf-m-nowrap"
|
|
1073
|
+
role="cell"
|
|
1074
|
+
data-label="Example td"
|
|
1075
|
+
>Test cell 8-7</td>
|
|
1076
|
+
<td
|
|
1077
|
+
class="pf-m-nowrap"
|
|
1078
|
+
role="cell"
|
|
1079
|
+
data-label="Example td"
|
|
1080
|
+
>Test cell 8-8</td>
|
|
1081
|
+
<td
|
|
1082
|
+
class="pf-m-nowrap"
|
|
1083
|
+
role="cell"
|
|
1084
|
+
data-label="Example td"
|
|
1085
|
+
>Test cell 8-9</td>
|
|
1086
|
+
</tr>
|
|
1087
|
+
<tr role="row">
|
|
1088
|
+
<th
|
|
1089
|
+
class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
|
|
1090
|
+
role="columnheader"
|
|
1091
|
+
data-label="Example th"
|
|
1092
|
+
scope="col"
|
|
1093
|
+
style="--pf-c-table__sticky-column--MinWidth: 100px;"
|
|
1094
|
+
>Fact 9</th>
|
|
1095
|
+
<td
|
|
1096
|
+
class="pf-m-nowrap"
|
|
1097
|
+
role="cell"
|
|
1098
|
+
data-label="Example td"
|
|
1099
|
+
>State 9</td>
|
|
1100
|
+
<td
|
|
1101
|
+
class="pf-m-nowrap"
|
|
1102
|
+
role="cell"
|
|
1103
|
+
data-label="Example td"
|
|
1104
|
+
>Test cell 9-3</td>
|
|
1105
|
+
<td
|
|
1106
|
+
class="pf-m-nowrap"
|
|
1107
|
+
role="cell"
|
|
1108
|
+
data-label="Example td"
|
|
1109
|
+
>Test cell 9-4</td>
|
|
1110
|
+
<td
|
|
1111
|
+
class="pf-m-nowrap"
|
|
1112
|
+
role="cell"
|
|
1113
|
+
data-label="Example td"
|
|
1114
|
+
>Test cell 9-5</td>
|
|
1115
|
+
<td
|
|
1116
|
+
class="pf-m-nowrap"
|
|
1117
|
+
role="cell"
|
|
1118
|
+
data-label="Example td"
|
|
1119
|
+
>Test cell 9-6</td>
|
|
1120
|
+
<td
|
|
1121
|
+
class="pf-m-nowrap"
|
|
1122
|
+
role="cell"
|
|
1123
|
+
data-label="Example td"
|
|
1124
|
+
>Test cell 9-7</td>
|
|
1125
|
+
<td
|
|
1126
|
+
class="pf-m-nowrap"
|
|
1127
|
+
role="cell"
|
|
1128
|
+
data-label="Example td"
|
|
1129
|
+
>Test cell 9-8</td>
|
|
1130
|
+
<td
|
|
1131
|
+
class="pf-m-nowrap"
|
|
1132
|
+
role="cell"
|
|
1133
|
+
data-label="Example td"
|
|
1134
|
+
>Test cell 9-9</td>
|
|
1135
|
+
</tr>
|
|
1136
|
+
</tbody>
|
|
1137
|
+
</table>
|
|
1138
|
+
</div>
|
|
1139
|
+
<div class="pf-c-pagination pf-m-bottom">
|
|
1140
|
+
<div class="pf-c-options-menu pf-m-top">
|
|
1141
|
+
<div class="pf-c-options-menu__toggle pf-m-text pf-m-plain">
|
|
1142
|
+
<span class="pf-c-options-menu__toggle-text">
|
|
1143
|
+
<b>1 - 10</b> of
|
|
1144
|
+
<b>36</b>
|
|
1145
|
+
</span>
|
|
1146
|
+
<button
|
|
1147
|
+
class="pf-c-options-menu__toggle-button"
|
|
1148
|
+
id="{{page--id}}-pagination-options-menu-bottom-example-toggle"
|
|
1149
|
+
aria-haspopup="listbox"
|
|
1150
|
+
aria-expanded="false"
|
|
1151
|
+
aria-label="Items per page"
|
|
1152
|
+
>
|
|
1153
|
+
<span class="pf-c-options-menu__toggle-button-icon">
|
|
1154
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1155
|
+
</span>
|
|
1156
|
+
</button>
|
|
1157
|
+
</div>
|
|
1158
|
+
<ul
|
|
1159
|
+
class="pf-c-options-menu__menu pf-m-top"
|
|
1160
|
+
aria-labelledby="{{page--id}}-pagination-options-menu-bottom-example-toggle"
|
|
1161
|
+
hidden
|
|
1162
|
+
>
|
|
1163
|
+
<li>
|
|
1164
|
+
<button
|
|
1165
|
+
class="pf-c-options-menu__menu-item"
|
|
1166
|
+
type="button"
|
|
1167
|
+
>5 per page</button>
|
|
1168
|
+
</li>
|
|
1169
|
+
<li>
|
|
1170
|
+
<button class="pf-c-options-menu__menu-item" type="button">
|
|
1171
|
+
10 per page
|
|
1172
|
+
<div class="pf-c-options-menu__menu-item-icon">
|
|
1173
|
+
<i class="fas fa-check" aria-hidden="true"></i>
|
|
1174
|
+
</div>
|
|
1175
|
+
</button>
|
|
1176
|
+
</li>
|
|
1177
|
+
<li>
|
|
1178
|
+
<button
|
|
1179
|
+
class="pf-c-options-menu__menu-item"
|
|
1180
|
+
type="button"
|
|
1181
|
+
>20 per page</button>
|
|
1182
|
+
</li>
|
|
1183
|
+
</ul>
|
|
1184
|
+
</div>
|
|
1185
|
+
<nav class="pf-c-pagination__nav" aria-label="Pagination">
|
|
1186
|
+
<div class="pf-c-pagination__nav-control pf-m-first">
|
|
1187
|
+
<button
|
|
1188
|
+
class="pf-c-button pf-m-plain"
|
|
1189
|
+
type="button"
|
|
1190
|
+
disabled
|
|
1191
|
+
aria-label="Go to first page"
|
|
1192
|
+
>
|
|
1193
|
+
<i class="fas fa-angle-double-left" aria-hidden="true"></i>
|
|
1194
|
+
</button>
|
|
1195
|
+
</div>
|
|
1196
|
+
<div class="pf-c-pagination__nav-control pf-m-prev">
|
|
1197
|
+
<button
|
|
1198
|
+
class="pf-c-button pf-m-plain"
|
|
1199
|
+
type="button"
|
|
1200
|
+
disabled
|
|
1201
|
+
aria-label="Go to previous page"
|
|
1202
|
+
>
|
|
1203
|
+
<i class="fas fa-angle-left" aria-hidden="true"></i>
|
|
1204
|
+
</button>
|
|
1205
|
+
</div>
|
|
1206
|
+
<div class="pf-c-pagination__nav-page-select">
|
|
1207
|
+
<input
|
|
1208
|
+
class="pf-c-form-control"
|
|
1209
|
+
aria-label="Current page"
|
|
1210
|
+
type="number"
|
|
1211
|
+
min="1"
|
|
1212
|
+
max="4"
|
|
1213
|
+
value="1"
|
|
1214
|
+
/>
|
|
1215
|
+
<span aria-hidden="true">of 4</span>
|
|
1216
|
+
</div>
|
|
1217
|
+
<div class="pf-c-pagination__nav-control pf-m-next">
|
|
1218
|
+
<button
|
|
1219
|
+
class="pf-c-button pf-m-plain"
|
|
1220
|
+
type="button"
|
|
1221
|
+
aria-label="Go to next page"
|
|
1222
|
+
>
|
|
1223
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1224
|
+
</button>
|
|
1225
|
+
</div>
|
|
1226
|
+
<div class="pf-c-pagination__nav-control pf-m-last">
|
|
1227
|
+
<button
|
|
1228
|
+
class="pf-c-button pf-m-plain"
|
|
1229
|
+
type="button"
|
|
1230
|
+
aria-label="Go to last page"
|
|
1231
|
+
>
|
|
1232
|
+
<i class="fas fa-angle-double-right" aria-hidden="true"></i>
|
|
1233
|
+
</button>
|
|
1234
|
+
</div>
|
|
1235
|
+
</nav>
|
|
1236
|
+
</div>
|
|
1237
|
+
</div>
|
|
1238
|
+
</div>
|
|
1239
|
+
</section>
|
|
1240
|
+
</main>
|
|
1241
|
+
</div>
|
|
1242
|
+
|
|
1243
|
+
```
|
|
1244
|
+
|
|
1245
|
+
### Sticky multiple columns
|
|
1246
|
+
|
|
1247
|
+
```html isFullscreen
|
|
1248
|
+
<div class="pf-c-page" id="sticky-multiple-columns-demo">
|
|
1249
|
+
<a
|
|
1250
|
+
class="pf-c-skip-to-content pf-c-button pf-m-primary"
|
|
1251
|
+
href="#main-content-sticky-multiple-columns-demo"
|
|
1252
|
+
>Skip to content</a>
|
|
1253
|
+
<header class="pf-c-page__header">
|
|
1254
|
+
<div class="pf-c-page__header-brand">
|
|
1255
|
+
<div class="pf-c-page__header-brand-toggle">
|
|
1256
|
+
<button
|
|
1257
|
+
class="pf-c-button pf-m-plain"
|
|
1258
|
+
type="button"
|
|
1259
|
+
id="sticky-multiple-columns-demo-nav-toggle"
|
|
1260
|
+
aria-label="Global navigation"
|
|
1261
|
+
aria-expanded="true"
|
|
1262
|
+
aria-controls="sticky-multiple-columns-demo-primary-nav"
|
|
1263
|
+
>
|
|
1264
|
+
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
1265
|
+
</button>
|
|
1266
|
+
</div>
|
|
1267
|
+
<a href="#" class="pf-c-page__header-brand-link">
|
|
1268
|
+
<img
|
|
1269
|
+
class="pf-c-brand"
|
|
1270
|
+
src="/assets/images/PF-Masthead-Logo.svg"
|
|
1271
|
+
alt="PatternFly logo"
|
|
1272
|
+
/>
|
|
1273
|
+
</a>
|
|
1274
|
+
</div>
|
|
1275
|
+
<div class="pf-c-page__header-tools">
|
|
1276
|
+
<div class="pf-c-page__header-tools-group">
|
|
1277
|
+
<div
|
|
1278
|
+
class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg"
|
|
1279
|
+
>
|
|
1280
|
+
<button
|
|
1281
|
+
class="pf-c-button pf-m-plain"
|
|
1282
|
+
type="button"
|
|
1283
|
+
aria-label="Settings"
|
|
1284
|
+
>
|
|
1285
|
+
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
1286
|
+
</button>
|
|
1287
|
+
</div>
|
|
1288
|
+
<div
|
|
1289
|
+
class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg"
|
|
1290
|
+
>
|
|
1291
|
+
<button
|
|
1292
|
+
class="pf-c-button pf-m-plain"
|
|
1293
|
+
type="button"
|
|
1294
|
+
aria-label="Help"
|
|
1295
|
+
>
|
|
1296
|
+
<i class="pf-icon pf-icon-help" aria-hidden="true"></i>
|
|
1297
|
+
</button>
|
|
1298
|
+
</div>
|
|
1299
|
+
</div>
|
|
1300
|
+
<div class="pf-c-page__header-tools-group">
|
|
1301
|
+
<div class="pf-c-page__header-tools-item pf-m-hidden-on-lg">
|
|
1302
|
+
<div class="pf-c-dropdown">
|
|
1303
|
+
<button
|
|
1304
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
1305
|
+
id="sticky-multiple-columns-demo-dropdown-kebab-1-button"
|
|
1306
|
+
aria-expanded="false"
|
|
1307
|
+
type="button"
|
|
1308
|
+
aria-label="Actions"
|
|
1309
|
+
>
|
|
1310
|
+
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
1311
|
+
</button>
|
|
1312
|
+
<ul
|
|
1313
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
1314
|
+
aria-labelledby="sticky-multiple-columns-demo-dropdown-kebab-1-button"
|
|
1315
|
+
hidden
|
|
1316
|
+
>
|
|
1317
|
+
<li>
|
|
1318
|
+
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
|
|
1319
|
+
</li>
|
|
1320
|
+
<li>
|
|
1321
|
+
<button class="pf-c-dropdown__menu-item" type="button">Action</button>
|
|
1322
|
+
</li>
|
|
1323
|
+
<li>
|
|
1324
|
+
<a
|
|
1325
|
+
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
1326
|
+
href="#"
|
|
1327
|
+
aria-disabled="true"
|
|
1328
|
+
tabindex="-1"
|
|
1329
|
+
>Disabled link</a>
|
|
1330
|
+
</li>
|
|
1331
|
+
<li>
|
|
1332
|
+
<button
|
|
1333
|
+
class="pf-c-dropdown__menu-item"
|
|
1334
|
+
type="button"
|
|
1335
|
+
disabled
|
|
1336
|
+
>Disabled action</button>
|
|
1337
|
+
</li>
|
|
1338
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
1339
|
+
<li>
|
|
1340
|
+
<a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
|
|
1341
|
+
</li>
|
|
1342
|
+
</ul>
|
|
1343
|
+
</div>
|
|
1344
|
+
</div>
|
|
1345
|
+
<div
|
|
1346
|
+
class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-md"
|
|
1347
|
+
>
|
|
1348
|
+
<div class="pf-c-dropdown">
|
|
1349
|
+
<button
|
|
1350
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
1351
|
+
id="sticky-multiple-columns-demo-dropdown-kebab-2-button"
|
|
1352
|
+
aria-expanded="false"
|
|
1353
|
+
type="button"
|
|
1354
|
+
>
|
|
1355
|
+
<span class="pf-c-dropdown__toggle-text">John Smith</span>
|
|
1356
|
+
<span class="pf-c-dropdown__toggle-icon">
|
|
1357
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1358
|
+
</span>
|
|
1359
|
+
</button>
|
|
1360
|
+
<ul
|
|
1361
|
+
class="pf-c-dropdown__menu"
|
|
1362
|
+
aria-labelledby="sticky-multiple-columns-demo-dropdown-kebab-2-button"
|
|
1363
|
+
hidden
|
|
1364
|
+
>
|
|
1365
|
+
<li>
|
|
1366
|
+
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
|
|
1367
|
+
</li>
|
|
1368
|
+
<li>
|
|
1369
|
+
<button class="pf-c-dropdown__menu-item" type="button">Action</button>
|
|
1370
|
+
</li>
|
|
1371
|
+
<li>
|
|
1372
|
+
<a
|
|
1373
|
+
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
1374
|
+
href="#"
|
|
1375
|
+
aria-disabled="true"
|
|
1376
|
+
tabindex="-1"
|
|
1377
|
+
>Disabled link</a>
|
|
1378
|
+
</li>
|
|
1379
|
+
<li>
|
|
1380
|
+
<button
|
|
1381
|
+
class="pf-c-dropdown__menu-item"
|
|
1382
|
+
type="button"
|
|
1383
|
+
disabled
|
|
1384
|
+
>Disabled action</button>
|
|
1385
|
+
</li>
|
|
1386
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
1387
|
+
<li>
|
|
1388
|
+
<a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
|
|
1389
|
+
</li>
|
|
1390
|
+
</ul>
|
|
1391
|
+
</div>
|
|
1392
|
+
</div>
|
|
1393
|
+
</div>
|
|
1394
|
+
<img
|
|
1395
|
+
class="pf-c-avatar"
|
|
1396
|
+
src="/assets/images/img_avatar.svg"
|
|
1397
|
+
alt="Avatar image"
|
|
1398
|
+
/>
|
|
1399
|
+
</div>
|
|
1400
|
+
</header>
|
|
1401
|
+
<div class="pf-c-page__sidebar">
|
|
1402
|
+
<div class="pf-c-page__sidebar-body">
|
|
1403
|
+
<nav
|
|
1404
|
+
class="pf-c-nav"
|
|
1405
|
+
id="sticky-multiple-columns-demo-primary-nav"
|
|
1406
|
+
aria-label="Global"
|
|
1407
|
+
>
|
|
1408
|
+
<ul class="pf-c-nav__list">
|
|
1409
|
+
<li class="pf-c-nav__item pf-m-expandable pf-m-expanded pf-m-current">
|
|
1410
|
+
<button class="pf-c-nav__link" aria-expanded="true">
|
|
1411
|
+
Components
|
|
1412
|
+
<span class="pf-c-nav__toggle">
|
|
1413
|
+
<span class="pf-c-nav__toggle-icon">
|
|
1414
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1415
|
+
</span>
|
|
1416
|
+
</span>
|
|
1417
|
+
</button>
|
|
1418
|
+
<section
|
|
1419
|
+
class="pf-c-nav__subnav"
|
|
1420
|
+
aria-labelledby="sticky-multiple-columns-demo-subnav-title1"
|
|
1421
|
+
>
|
|
1422
|
+
<h2
|
|
1423
|
+
class="pf-c-nav__subnav-title pf-screen-reader"
|
|
1424
|
+
id="sticky-multiple-columns-demo-subnav-title1"
|
|
1425
|
+
>First nav item</h2>
|
|
1426
|
+
<ul class="pf-c-nav__list">
|
|
1427
|
+
<li class="pf-c-nav__item">
|
|
1428
|
+
<a href="#" class="pf-c-nav__link">Forms</a>
|
|
1429
|
+
</li>
|
|
1430
|
+
<li class="pf-c-nav__item">
|
|
1431
|
+
<a href="#" class="pf-c-nav__link">Table</a>
|
|
1432
|
+
</li>
|
|
1433
|
+
<li class="pf-c-nav__item">
|
|
1434
|
+
<a
|
|
1435
|
+
href="#"
|
|
1436
|
+
class="pf-c-nav__link pf-m-current"
|
|
1437
|
+
aria-current="page"
|
|
1438
|
+
>Data list</a>
|
|
1439
|
+
</li>
|
|
1440
|
+
<li class="pf-c-nav__item">
|
|
1441
|
+
<a href="#" class="pf-c-nav__link">Icons</a>
|
|
1442
|
+
</li>
|
|
1443
|
+
<li class="pf-c-nav__item">
|
|
1444
|
+
<a href="#" class="pf-c-nav__link">Layouts</a>
|
|
1445
|
+
</li>
|
|
1446
|
+
<li class="pf-c-nav__item">
|
|
1447
|
+
<a href="#" class="pf-c-nav__link">List</a>
|
|
1448
|
+
</li>
|
|
1449
|
+
</ul>
|
|
1450
|
+
</section>
|
|
1451
|
+
</li>
|
|
1452
|
+
<li class="pf-c-nav__item pf-m-expandable">
|
|
1453
|
+
<button class="pf-c-nav__link" aria-expanded="false">
|
|
1454
|
+
Patterns
|
|
1455
|
+
<span class="pf-c-nav__toggle">
|
|
1456
|
+
<span class="pf-c-nav__toggle-icon">
|
|
1457
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1458
|
+
</span>
|
|
1459
|
+
</span>
|
|
1460
|
+
</button>
|
|
1461
|
+
<section
|
|
1462
|
+
class="pf-c-nav__subnav"
|
|
1463
|
+
aria-labelledby="sticky-multiple-columns-demo-subnav-title2"
|
|
1464
|
+
hidden
|
|
1465
|
+
>
|
|
1466
|
+
<h2
|
|
1467
|
+
class="pf-c-nav__subnav-title pf-screen-reader"
|
|
1468
|
+
id="sticky-multiple-columns-demo-subnav-title2"
|
|
1469
|
+
>Second nav item</h2>
|
|
1470
|
+
<ul class="pf-c-nav__list"></ul>
|
|
1471
|
+
</section>
|
|
1472
|
+
</li>
|
|
1473
|
+
<li class="pf-c-nav__item pf-m-expandable">
|
|
1474
|
+
<button class="pf-c-nav__link" aria-expanded="false">
|
|
1475
|
+
Typography
|
|
1476
|
+
<span class="pf-c-nav__toggle">
|
|
1477
|
+
<span class="pf-c-nav__toggle-icon">
|
|
1478
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1479
|
+
</span>
|
|
1480
|
+
</span>
|
|
1481
|
+
</button>
|
|
1482
|
+
<section
|
|
1483
|
+
class="pf-c-nav__subnav"
|
|
1484
|
+
aria-labelledby="sticky-multiple-columns-demo-subnav-title3"
|
|
1485
|
+
hidden
|
|
1486
|
+
>
|
|
1487
|
+
<h2
|
|
1488
|
+
class="pf-c-nav__subnav-title pf-screen-reader"
|
|
1489
|
+
id="sticky-multiple-columns-demo-subnav-title3"
|
|
1490
|
+
>Third nav item</h2>
|
|
1491
|
+
<ul class="pf-c-nav__list"></ul>
|
|
1492
|
+
</section>
|
|
1493
|
+
</li>
|
|
1494
|
+
<li class="pf-c-nav__item pf-m-expandable">
|
|
1495
|
+
<button class="pf-c-nav__link" aria-expanded="false">
|
|
1496
|
+
Icons
|
|
1497
|
+
<span class="pf-c-nav__toggle">
|
|
1498
|
+
<span class="pf-c-nav__toggle-icon">
|
|
1499
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1500
|
+
</span>
|
|
1501
|
+
</span>
|
|
1502
|
+
</button>
|
|
1503
|
+
<section
|
|
1504
|
+
class="pf-c-nav__subnav"
|
|
1505
|
+
aria-labelledby="sticky-multiple-columns-demo-subnav-title4"
|
|
1506
|
+
hidden
|
|
1507
|
+
>
|
|
1508
|
+
<h2
|
|
1509
|
+
class="pf-c-nav__subnav-title pf-screen-reader"
|
|
1510
|
+
id="sticky-multiple-columns-demo-subnav-title4"
|
|
1511
|
+
>Second nav item</h2>
|
|
1512
|
+
<ul class="pf-c-nav__list"></ul>
|
|
1513
|
+
</section>
|
|
1514
|
+
</li>
|
|
1515
|
+
<li class="pf-c-nav__item pf-m-expandable">
|
|
1516
|
+
<button class="pf-c-nav__link" aria-expanded="false">
|
|
1517
|
+
Colors
|
|
1518
|
+
<span class="pf-c-nav__toggle">
|
|
1519
|
+
<span class="pf-c-nav__toggle-icon">
|
|
1520
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1521
|
+
</span>
|
|
1522
|
+
</span>
|
|
1523
|
+
</button>
|
|
1524
|
+
<section
|
|
1525
|
+
class="pf-c-nav__subnav"
|
|
1526
|
+
aria-labelledby="sticky-multiple-columns-demo-subnav-title5"
|
|
1527
|
+
hidden
|
|
1528
|
+
>
|
|
1529
|
+
<h2
|
|
1530
|
+
class="pf-c-nav__subnav-title pf-screen-reader"
|
|
1531
|
+
id="sticky-multiple-columns-demo-subnav-title5"
|
|
1532
|
+
>Second nav item</h2>
|
|
1533
|
+
<ul class="pf-c-nav__list"></ul>
|
|
1534
|
+
</section>
|
|
1535
|
+
</li>
|
|
1536
|
+
</ul>
|
|
1537
|
+
</nav>
|
|
1538
|
+
</div>
|
|
1539
|
+
</div>
|
|
1540
|
+
<main
|
|
1541
|
+
class="pf-c-page__main"
|
|
1542
|
+
tabindex="-1"
|
|
1543
|
+
id="main-content-sticky-multiple-columns-demo"
|
|
1544
|
+
>
|
|
1545
|
+
<section class="pf-c-page__main-subnav pf-m-limit-width">
|
|
1546
|
+
<div class="pf-c-page__main-body">
|
|
1547
|
+
<nav class="pf-c-nav pf-m-horizontal-subnav" aria-label="Local">
|
|
1548
|
+
<ul class="pf-c-nav__list">
|
|
1549
|
+
<li class="pf-c-nav__item">
|
|
1550
|
+
<a
|
|
1551
|
+
href="#"
|
|
1552
|
+
class="pf-c-nav__link pf-m-current"
|
|
1553
|
+
aria-current="page"
|
|
1554
|
+
>Item 1</a>
|
|
1555
|
+
</li>
|
|
1556
|
+
<li class="pf-c-nav__item">
|
|
1557
|
+
<a href="#" class="pf-c-nav__link">Item 2</a>
|
|
1558
|
+
</li>
|
|
1559
|
+
<li class="pf-c-nav__item">
|
|
1560
|
+
<a href="#" class="pf-c-nav__link">Item 3</a>
|
|
1561
|
+
</li>
|
|
1562
|
+
</ul>
|
|
1563
|
+
</nav>
|
|
1564
|
+
</div>
|
|
1565
|
+
</section>
|
|
1566
|
+
<section class="pf-c-page__main-section pf-m-light">
|
|
1567
|
+
<div class="pf-c-content">
|
|
26
1568
|
<h1>Table demos</h1>
|
|
27
1569
|
<p>Below is an example of a Table.</p>
|
|
28
1570
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum suscipit venenatis enim, ut ultrices metus ornare at. Curabitur vel nibh id leo finibus suscipit. Curabitur eu tellus lectus. Vivamus lacus leo, lobortis ac convallis ac, dapibus vel ligula. Suspendisse vitae felis at augue blandit sollicitudin. Sed erat metus, pellentesque vel accumsan vitae, tincidunt id erat. Mauris et pharetra felis. Duis at nisi leo. Nam blandit dui dui, in euismod est dapibus sed. Vivamus sed dolor ullamcorper, euismod orci efficitur, ornare leo. Sed sit amet sollicitudin nulla. Nunc tristique sem ut est laoreet efficitur. Cras tristique finibus risus, eget fringilla tellus porta vitae. Duis id nunc ultricies, ultrices nibh vel, sollicitudin tellus.</p>
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
1571
|
+
</div>
|
|
1572
|
+
</section>
|
|
1573
|
+
<section
|
|
1574
|
+
class="pf-c-page__main-section pf-m-limit-width pf-m-no-padding pf-m-padding-on-xl pf-m-overflow-scroll"
|
|
1575
|
+
>
|
|
1576
|
+
<div class="pf-c-page__main-body">
|
|
1577
|
+
<div class="pf-c-scroll-outer-wrapper">
|
|
1578
|
+
<div class="pf-c-toolbar">
|
|
1579
|
+
<div class="pf-c-toolbar__content">
|
|
1580
|
+
<div class="pf-c-toolbar__content-section pf-m-nowrap">
|
|
1581
|
+
<div
|
|
1582
|
+
class="pf-c-toolbar__group pf-m-toggle-group pf-m-show-on-xl"
|
|
1583
|
+
>
|
|
1584
|
+
<div class="pf-c-toolbar__toggle">
|
|
1585
|
+
<button
|
|
1586
|
+
class="pf-c-button pf-m-plain"
|
|
1587
|
+
type="button"
|
|
1588
|
+
aria-label="Show filters"
|
|
1589
|
+
aria-expanded="false"
|
|
1590
|
+
aria-controls="-expandable-content"
|
|
1591
|
+
>
|
|
1592
|
+
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
1593
|
+
</button>
|
|
1594
|
+
</div>
|
|
1595
|
+
|
|
1596
|
+
<div class="pf-c-toolbar__item pf-m-bulk-select">
|
|
1597
|
+
<div class="pf-c-dropdown">
|
|
1598
|
+
<div class="pf-c-dropdown__toggle pf-m-split-button">
|
|
1599
|
+
<label
|
|
1600
|
+
class="pf-c-dropdown__toggle-check"
|
|
1601
|
+
for="-bulk-select-toggle-check"
|
|
1602
|
+
>
|
|
1603
|
+
<input
|
|
1604
|
+
type="checkbox"
|
|
1605
|
+
id="-bulk-select-toggle-check"
|
|
1606
|
+
aria-label="Select all"
|
|
1607
|
+
/>
|
|
1608
|
+
</label>
|
|
1609
|
+
|
|
1610
|
+
<button
|
|
1611
|
+
class="pf-c-dropdown__toggle-button"
|
|
1612
|
+
type="button"
|
|
1613
|
+
aria-expanded="false"
|
|
1614
|
+
id="-bulk-select-toggle-button"
|
|
1615
|
+
aria-label="Dropdown toggle"
|
|
1616
|
+
>
|
|
1617
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1618
|
+
</button>
|
|
1619
|
+
</div>
|
|
1620
|
+
<ul class="pf-c-dropdown__menu" hidden>
|
|
1621
|
+
<li>
|
|
1622
|
+
<button
|
|
1623
|
+
class="pf-c-dropdown__menu-item"
|
|
1624
|
+
type="button"
|
|
1625
|
+
>Select all</button>
|
|
1626
|
+
</li>
|
|
1627
|
+
<li>
|
|
1628
|
+
<button
|
|
1629
|
+
class="pf-c-dropdown__menu-item"
|
|
1630
|
+
type="button"
|
|
1631
|
+
>Select none</button>
|
|
1632
|
+
</li>
|
|
1633
|
+
<li>
|
|
1634
|
+
<button
|
|
1635
|
+
class="pf-c-dropdown__menu-item"
|
|
1636
|
+
type="button"
|
|
1637
|
+
>Other action</button>
|
|
1638
|
+
</li>
|
|
1639
|
+
</ul>
|
|
1640
|
+
</div>
|
|
1641
|
+
</div>
|
|
1642
|
+
|
|
1643
|
+
<div class="pf-c-toolbar__item pf-m-search-filter">
|
|
1644
|
+
<div
|
|
1645
|
+
class="pf-c-input-group"
|
|
1646
|
+
aria-label="search filter"
|
|
1647
|
+
role="group"
|
|
1648
|
+
>
|
|
1649
|
+
<div class="pf-c-dropdown">
|
|
1650
|
+
<button
|
|
1651
|
+
class="pf-c-dropdown__toggle"
|
|
1652
|
+
id="--button"
|
|
1653
|
+
aria-expanded="false"
|
|
1654
|
+
type="button"
|
|
1655
|
+
>
|
|
1656
|
+
<span class="pf-c-dropdown__toggle-text">Name</span>
|
|
1657
|
+
<span class="pf-c-dropdown__toggle-icon">
|
|
1658
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1659
|
+
</span>
|
|
1660
|
+
</button>
|
|
1661
|
+
<ul
|
|
1662
|
+
class="pf-c-dropdown__menu"
|
|
1663
|
+
aria-labelledby="--button"
|
|
1664
|
+
hidden
|
|
1665
|
+
>
|
|
1666
|
+
<li>
|
|
1667
|
+
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
|
|
1668
|
+
</li>
|
|
1669
|
+
<li>
|
|
1670
|
+
<button
|
|
1671
|
+
class="pf-c-dropdown__menu-item"
|
|
1672
|
+
type="button"
|
|
1673
|
+
>Action</button>
|
|
1674
|
+
</li>
|
|
1675
|
+
<li>
|
|
1676
|
+
<a
|
|
1677
|
+
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
1678
|
+
href="#"
|
|
1679
|
+
aria-disabled="true"
|
|
1680
|
+
tabindex="-1"
|
|
1681
|
+
>Disabled link</a>
|
|
1682
|
+
</li>
|
|
1683
|
+
<li>
|
|
1684
|
+
<button
|
|
1685
|
+
class="pf-c-dropdown__menu-item"
|
|
1686
|
+
type="button"
|
|
1687
|
+
disabled
|
|
1688
|
+
>Disabled action</button>
|
|
1689
|
+
</li>
|
|
1690
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
1691
|
+
<li>
|
|
1692
|
+
<a
|
|
1693
|
+
class="pf-c-dropdown__menu-item"
|
|
1694
|
+
href="#"
|
|
1695
|
+
>Separated link</a>
|
|
1696
|
+
</li>
|
|
1697
|
+
</ul>
|
|
1698
|
+
</div>
|
|
1699
|
+
<input
|
|
1700
|
+
class="pf-c-form-control"
|
|
1701
|
+
type="search"
|
|
1702
|
+
id="--search-filter-input"
|
|
1703
|
+
name="-search-filter-input"
|
|
1704
|
+
aria-label="input with dropdown and button"
|
|
1705
|
+
aria-describedby="--button"
|
|
1706
|
+
/>
|
|
1707
|
+
</div>
|
|
1708
|
+
</div>
|
|
1709
|
+
</div>
|
|
1710
|
+
|
|
1711
|
+
<div class="pf-c-toolbar__item">
|
|
1712
|
+
<button
|
|
1713
|
+
class="pf-c-button pf-m-plain"
|
|
1714
|
+
type="button"
|
|
1715
|
+
aria-label="Sort"
|
|
1716
|
+
>
|
|
1717
|
+
<i class="fas fa-sort-amount-down" aria-hidden="true"></i>
|
|
1718
|
+
</button>
|
|
1719
|
+
</div>
|
|
1720
|
+
|
|
1721
|
+
<div class="pf-c-overflow-menu" id="-overflow-menu">
|
|
1722
|
+
<div
|
|
1723
|
+
class="pf-c-overflow-menu__content pf-u-display-none pf-u-display-flex-on-lg"
|
|
1724
|
+
>
|
|
1725
|
+
<div class="pf-c-overflow-menu__group pf-m-button-group">
|
|
1726
|
+
<div class="pf-c-overflow-menu__item">
|
|
1727
|
+
<button
|
|
1728
|
+
class="pf-c-button pf-m-primary"
|
|
1729
|
+
type="button"
|
|
1730
|
+
>Create instance</button>
|
|
1731
|
+
</div>
|
|
1732
|
+
</div>
|
|
1733
|
+
</div>
|
|
1734
|
+
<div class="pf-c-overflow-menu__control">
|
|
1735
|
+
<div class="pf-c-dropdown">
|
|
1736
|
+
<button
|
|
1737
|
+
class="pf-c-button pf-c-dropdown__toggle pf-m-plain"
|
|
1738
|
+
type="button"
|
|
1739
|
+
id="-overflow-menu-dropdown-toggle"
|
|
1740
|
+
aria-label="Dropdown with additional options"
|
|
1741
|
+
aria-expanded="false"
|
|
1742
|
+
>
|
|
1743
|
+
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
1744
|
+
</button>
|
|
1745
|
+
<ul
|
|
1746
|
+
class="pf-c-dropdown__menu"
|
|
1747
|
+
aria-labelledby="-overflow-menu-dropdown-toggle"
|
|
1748
|
+
hidden
|
|
1749
|
+
>
|
|
1750
|
+
<li>
|
|
1751
|
+
<button class="pf-c-dropdown__menu-item">Action 7</button>
|
|
1752
|
+
</li>
|
|
1753
|
+
</ul>
|
|
1754
|
+
</div>
|
|
1755
|
+
</div>
|
|
1756
|
+
</div>
|
|
1757
|
+
|
|
1758
|
+
<div class="pf-c-toolbar__item pf-m-pagination">
|
|
1759
|
+
<div class="pf-c-pagination pf-m-compact">
|
|
1760
|
+
<div class="pf-c-options-menu">
|
|
1761
|
+
<div
|
|
1762
|
+
class="pf-c-options-menu__toggle pf-m-text pf-m-plain"
|
|
1763
|
+
>
|
|
1764
|
+
<span class="pf-c-options-menu__toggle-text">
|
|
1765
|
+
<b>1 - 10</b> of
|
|
1766
|
+
<b>36</b>
|
|
1767
|
+
</span>
|
|
1768
|
+
<button
|
|
1769
|
+
class="pf-c-options-menu__toggle-button"
|
|
1770
|
+
id="-top-pagination-toggle"
|
|
1771
|
+
aria-haspopup="listbox"
|
|
1772
|
+
aria-expanded="false"
|
|
1773
|
+
aria-label="Items per page"
|
|
1774
|
+
>
|
|
1775
|
+
<span class="pf-c-options-menu__toggle-button-icon">
|
|
1776
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1777
|
+
</span>
|
|
1778
|
+
</button>
|
|
1779
|
+
</div>
|
|
1780
|
+
<ul
|
|
1781
|
+
class="pf-c-options-menu__menu"
|
|
1782
|
+
aria-labelledby="-top-pagination-toggle"
|
|
1783
|
+
hidden
|
|
1784
|
+
>
|
|
1785
|
+
<li>
|
|
1786
|
+
<button
|
|
1787
|
+
class="pf-c-options-menu__menu-item"
|
|
1788
|
+
type="button"
|
|
1789
|
+
>5 per page</button>
|
|
1790
|
+
</li>
|
|
1791
|
+
<li>
|
|
1792
|
+
<button
|
|
1793
|
+
class="pf-c-options-menu__menu-item"
|
|
1794
|
+
type="button"
|
|
1795
|
+
>
|
|
1796
|
+
10 per page
|
|
1797
|
+
<div class="pf-c-options-menu__menu-item-icon">
|
|
1798
|
+
<i class="fas fa-check" aria-hidden="true"></i>
|
|
1799
|
+
</div>
|
|
1800
|
+
</button>
|
|
1801
|
+
</li>
|
|
1802
|
+
<li>
|
|
1803
|
+
<button
|
|
1804
|
+
class="pf-c-options-menu__menu-item"
|
|
1805
|
+
type="button"
|
|
1806
|
+
>20 per page</button>
|
|
1807
|
+
</li>
|
|
1808
|
+
</ul>
|
|
1809
|
+
</div>
|
|
1810
|
+
<nav
|
|
1811
|
+
class="pf-c-pagination__nav"
|
|
1812
|
+
aria-label="Toolbar top pagination"
|
|
1813
|
+
>
|
|
1814
|
+
<div class="pf-c-pagination__nav-control pf-m-prev">
|
|
1815
|
+
<button
|
|
1816
|
+
class="pf-c-button pf-m-plain"
|
|
1817
|
+
type="button"
|
|
1818
|
+
disabled
|
|
1819
|
+
aria-label="Go to previous page"
|
|
1820
|
+
>
|
|
1821
|
+
<i class="fas fa-angle-left" aria-hidden="true"></i>
|
|
1822
|
+
</button>
|
|
1823
|
+
</div>
|
|
1824
|
+
<div class="pf-c-pagination__nav-control pf-m-next">
|
|
1825
|
+
<button
|
|
1826
|
+
class="pf-c-button pf-m-plain"
|
|
1827
|
+
type="button"
|
|
1828
|
+
aria-label="Go to next page"
|
|
1829
|
+
>
|
|
1830
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1831
|
+
</button>
|
|
1832
|
+
</div>
|
|
1833
|
+
</nav>
|
|
1834
|
+
</div>
|
|
1835
|
+
</div>
|
|
1836
|
+
</div>
|
|
1837
|
+
|
|
1838
|
+
<div
|
|
1839
|
+
class="pf-c-toolbar__expandable-content pf-m-hidden"
|
|
1840
|
+
id="-expandable-content"
|
|
1841
|
+
hidden
|
|
1842
|
+
></div>
|
|
1843
|
+
</div>
|
|
1844
|
+
</div>
|
|
1845
|
+
<div class="pf-c-scroll-inner-wrapper">
|
|
1846
|
+
<table
|
|
1847
|
+
class="pf-c-table"
|
|
1848
|
+
role="grid"
|
|
1849
|
+
aria-label="This is a scrollable table"
|
|
1850
|
+
id="sticky-multiple-columns-demo-table"
|
|
1851
|
+
>
|
|
1852
|
+
<thead>
|
|
1853
|
+
<tr role="row">
|
|
1854
|
+
<th
|
|
1855
|
+
class="pf-m-truncate pf-c-table__sort pf-c-table__sticky-column"
|
|
1856
|
+
role="columnheader"
|
|
1857
|
+
aria-sort="none"
|
|
1858
|
+
data-label="Example th"
|
|
1859
|
+
scope="col"
|
|
1860
|
+
style="--pf-c-table__sticky-column--MinWidth: 100px;"
|
|
1861
|
+
>
|
|
1862
|
+
<button class="pf-c-table__button">
|
|
1863
|
+
<div class="pf-c-table__button-content">
|
|
1864
|
+
<span class="pf-c-table__text">Fact</span>
|
|
1865
|
+
<span class="pf-c-table__sort-indicator">
|
|
1866
|
+
<i class="fas fa-arrows-alt-v"></i>
|
|
1867
|
+
</span>
|
|
1868
|
+
</div>
|
|
1869
|
+
</button>
|
|
1870
|
+
</th>
|
|
1871
|
+
<th
|
|
1872
|
+
class="pf-m-border-right pf-m-truncate pf-c-table__sort pf-c-table__sticky-column"
|
|
1873
|
+
role="columnheader"
|
|
1874
|
+
aria-sort="none"
|
|
1875
|
+
data-label="Example th"
|
|
1876
|
+
scope="col"
|
|
1877
|
+
style="--pf-c-table__sticky-column--MinWidth: 120px; --pf-c-table__sticky-column--Left: 100px;"
|
|
1878
|
+
>
|
|
1879
|
+
<button class="pf-c-table__button">
|
|
1880
|
+
<div class="pf-c-table__button-content">
|
|
1881
|
+
<span class="pf-c-table__text">State</span>
|
|
1882
|
+
<span class="pf-c-table__sort-indicator">
|
|
1883
|
+
<i class="fas fa-arrows-alt-v"></i>
|
|
1884
|
+
</span>
|
|
1885
|
+
</div>
|
|
1886
|
+
</button>
|
|
1887
|
+
</th>
|
|
1888
|
+
<th
|
|
1889
|
+
class="pf-m-truncate"
|
|
1890
|
+
role="columnheader"
|
|
1891
|
+
data-label="Example th"
|
|
1892
|
+
scope="col"
|
|
1893
|
+
>Header 3</th>
|
|
1894
|
+
<th
|
|
1895
|
+
class="pf-m-truncate"
|
|
1896
|
+
role="columnheader"
|
|
1897
|
+
data-label="Example th"
|
|
1898
|
+
scope="col"
|
|
1899
|
+
>Header 4</th>
|
|
1900
|
+
<th
|
|
1901
|
+
class="pf-m-truncate"
|
|
1902
|
+
role="columnheader"
|
|
1903
|
+
data-label="Example th"
|
|
1904
|
+
scope="col"
|
|
1905
|
+
>Header 5</th>
|
|
1906
|
+
<th
|
|
1907
|
+
class="pf-m-truncate"
|
|
1908
|
+
role="columnheader"
|
|
1909
|
+
data-label="Example th"
|
|
1910
|
+
scope="col"
|
|
1911
|
+
>Header 6</th>
|
|
1912
|
+
<th
|
|
1913
|
+
class="pf-m-truncate"
|
|
1914
|
+
role="columnheader"
|
|
1915
|
+
data-label="Example th"
|
|
1916
|
+
scope="col"
|
|
1917
|
+
>Header 7</th>
|
|
1918
|
+
<th
|
|
1919
|
+
class="pf-m-truncate"
|
|
1920
|
+
role="columnheader"
|
|
1921
|
+
data-label="Example th"
|
|
1922
|
+
scope="col"
|
|
1923
|
+
>Header 8</th>
|
|
1924
|
+
<th
|
|
1925
|
+
class="pf-m-truncate"
|
|
1926
|
+
role="columnheader"
|
|
1927
|
+
data-label="Example th"
|
|
1928
|
+
scope="col"
|
|
1929
|
+
>Header 9</th>
|
|
1930
|
+
</tr>
|
|
1931
|
+
</thead>
|
|
1932
|
+
|
|
1933
|
+
<tbody role="rowgroup">
|
|
1934
|
+
<tr role="row">
|
|
1935
|
+
<th
|
|
1936
|
+
class="pf-m-truncate pf-c-table__sticky-column"
|
|
1937
|
+
role="columnheader"
|
|
1938
|
+
data-label="Example th"
|
|
1939
|
+
scope="col"
|
|
1940
|
+
style="--pf-c-table__sticky-column--MinWidth: 100px;"
|
|
1941
|
+
>Fact 1</th>
|
|
1942
|
+
<th
|
|
1943
|
+
class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
|
|
1944
|
+
role="columnheader"
|
|
1945
|
+
data-label="Example th"
|
|
1946
|
+
scope="col"
|
|
1947
|
+
style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
|
|
1948
|
+
>State 1</th>
|
|
1949
|
+
<td
|
|
1950
|
+
class="pf-m-nowrap"
|
|
1951
|
+
role="cell"
|
|
1952
|
+
data-label="Example td"
|
|
1953
|
+
>Test cell 1-3</td>
|
|
1954
|
+
<td
|
|
1955
|
+
class="pf-m-nowrap"
|
|
1956
|
+
role="cell"
|
|
1957
|
+
data-label="Example td"
|
|
1958
|
+
>Test cell 1-4</td>
|
|
1959
|
+
<td
|
|
1960
|
+
class="pf-m-nowrap"
|
|
1961
|
+
role="cell"
|
|
1962
|
+
data-label="Example td"
|
|
1963
|
+
>Test cell 1-5</td>
|
|
1964
|
+
<td
|
|
1965
|
+
class="pf-m-nowrap"
|
|
1966
|
+
role="cell"
|
|
1967
|
+
data-label="Example td"
|
|
1968
|
+
>Test cell 1-6</td>
|
|
1969
|
+
<td
|
|
1970
|
+
class="pf-m-nowrap"
|
|
1971
|
+
role="cell"
|
|
1972
|
+
data-label="Example td"
|
|
1973
|
+
>Test cell 1-7</td>
|
|
1974
|
+
<td
|
|
1975
|
+
class="pf-m-nowrap"
|
|
1976
|
+
role="cell"
|
|
1977
|
+
data-label="Example td"
|
|
1978
|
+
>Test cell 1-8</td>
|
|
1979
|
+
<td
|
|
1980
|
+
class="pf-m-nowrap"
|
|
1981
|
+
role="cell"
|
|
1982
|
+
data-label="Example td"
|
|
1983
|
+
>Test cell 1-9</td>
|
|
1984
|
+
</tr>
|
|
1985
|
+
<tr role="row">
|
|
1986
|
+
<th
|
|
1987
|
+
class="pf-m-truncate pf-c-table__sticky-column"
|
|
1988
|
+
role="columnheader"
|
|
1989
|
+
data-label="Example th"
|
|
1990
|
+
scope="col"
|
|
1991
|
+
style="--pf-c-table__sticky-column--MinWidth: 100px;"
|
|
1992
|
+
>Fact 2</th>
|
|
1993
|
+
<th
|
|
1994
|
+
class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
|
|
1995
|
+
role="columnheader"
|
|
1996
|
+
data-label="Example th"
|
|
1997
|
+
scope="col"
|
|
1998
|
+
style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
|
|
1999
|
+
>State 2</th>
|
|
2000
|
+
<td
|
|
2001
|
+
class="pf-m-nowrap"
|
|
2002
|
+
role="cell"
|
|
2003
|
+
data-label="Example td"
|
|
2004
|
+
>Test cell 2-3</td>
|
|
2005
|
+
<td
|
|
2006
|
+
class="pf-m-nowrap"
|
|
2007
|
+
role="cell"
|
|
2008
|
+
data-label="Example td"
|
|
2009
|
+
>Test cell 2-4</td>
|
|
2010
|
+
<td
|
|
2011
|
+
class="pf-m-nowrap"
|
|
2012
|
+
role="cell"
|
|
2013
|
+
data-label="Example td"
|
|
2014
|
+
>Test cell 2-5</td>
|
|
2015
|
+
<td
|
|
2016
|
+
class="pf-m-nowrap"
|
|
2017
|
+
role="cell"
|
|
2018
|
+
data-label="Example td"
|
|
2019
|
+
>Test cell 2-6</td>
|
|
2020
|
+
<td
|
|
2021
|
+
class="pf-m-nowrap"
|
|
2022
|
+
role="cell"
|
|
2023
|
+
data-label="Example td"
|
|
2024
|
+
>Test cell 2-7</td>
|
|
2025
|
+
<td
|
|
2026
|
+
class="pf-m-nowrap"
|
|
2027
|
+
role="cell"
|
|
2028
|
+
data-label="Example td"
|
|
2029
|
+
>Test cell 2-8</td>
|
|
2030
|
+
<td
|
|
2031
|
+
class="pf-m-nowrap"
|
|
2032
|
+
role="cell"
|
|
2033
|
+
data-label="Example td"
|
|
2034
|
+
>Test cell 2-9</td>
|
|
2035
|
+
</tr>
|
|
2036
|
+
<tr role="row">
|
|
2037
|
+
<th
|
|
2038
|
+
class="pf-m-truncate pf-c-table__sticky-column"
|
|
2039
|
+
role="columnheader"
|
|
2040
|
+
data-label="Example th"
|
|
2041
|
+
scope="col"
|
|
2042
|
+
style="--pf-c-table__sticky-column--MinWidth: 100px;"
|
|
2043
|
+
>Fact 3</th>
|
|
2044
|
+
<th
|
|
2045
|
+
class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
|
|
2046
|
+
role="columnheader"
|
|
2047
|
+
data-label="Example th"
|
|
2048
|
+
scope="col"
|
|
2049
|
+
style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
|
|
2050
|
+
>State 3</th>
|
|
2051
|
+
<td
|
|
2052
|
+
class="pf-m-nowrap"
|
|
2053
|
+
role="cell"
|
|
2054
|
+
data-label="Example td"
|
|
2055
|
+
>Test cell 3-3</td>
|
|
2056
|
+
<td
|
|
2057
|
+
class="pf-m-nowrap"
|
|
2058
|
+
role="cell"
|
|
2059
|
+
data-label="Example td"
|
|
2060
|
+
>Test cell 3-4</td>
|
|
2061
|
+
<td
|
|
2062
|
+
class="pf-m-nowrap"
|
|
2063
|
+
role="cell"
|
|
2064
|
+
data-label="Example td"
|
|
2065
|
+
>Test cell 3-5</td>
|
|
2066
|
+
<td
|
|
2067
|
+
class="pf-m-nowrap"
|
|
2068
|
+
role="cell"
|
|
2069
|
+
data-label="Example td"
|
|
2070
|
+
>Test cell 3-6</td>
|
|
2071
|
+
<td
|
|
2072
|
+
class="pf-m-nowrap"
|
|
2073
|
+
role="cell"
|
|
2074
|
+
data-label="Example td"
|
|
2075
|
+
>Test cell 3-7</td>
|
|
2076
|
+
<td
|
|
2077
|
+
class="pf-m-nowrap"
|
|
2078
|
+
role="cell"
|
|
2079
|
+
data-label="Example td"
|
|
2080
|
+
>Test cell 3-8</td>
|
|
2081
|
+
<td
|
|
2082
|
+
class="pf-m-nowrap"
|
|
2083
|
+
role="cell"
|
|
2084
|
+
data-label="Example td"
|
|
2085
|
+
>Test cell 3-9</td>
|
|
2086
|
+
</tr>
|
|
2087
|
+
<tr role="row">
|
|
2088
|
+
<th
|
|
2089
|
+
class="pf-m-truncate pf-c-table__sticky-column"
|
|
2090
|
+
role="columnheader"
|
|
2091
|
+
data-label="Example th"
|
|
2092
|
+
scope="col"
|
|
2093
|
+
style="--pf-c-table__sticky-column--MinWidth: 100px;"
|
|
2094
|
+
>Fact 4</th>
|
|
2095
|
+
<th
|
|
2096
|
+
class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
|
|
2097
|
+
role="columnheader"
|
|
2098
|
+
data-label="Example th"
|
|
2099
|
+
scope="col"
|
|
2100
|
+
style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
|
|
2101
|
+
>State 4</th>
|
|
2102
|
+
<td
|
|
2103
|
+
class="pf-m-nowrap"
|
|
2104
|
+
role="cell"
|
|
2105
|
+
data-label="Example td"
|
|
2106
|
+
>Test cell 4-3</td>
|
|
2107
|
+
<td
|
|
2108
|
+
class="pf-m-nowrap"
|
|
2109
|
+
role="cell"
|
|
2110
|
+
data-label="Example td"
|
|
2111
|
+
>Test cell 4-4</td>
|
|
2112
|
+
<td
|
|
2113
|
+
class="pf-m-nowrap"
|
|
2114
|
+
role="cell"
|
|
2115
|
+
data-label="Example td"
|
|
2116
|
+
>Test cell 4-5</td>
|
|
2117
|
+
<td
|
|
2118
|
+
class="pf-m-nowrap"
|
|
2119
|
+
role="cell"
|
|
2120
|
+
data-label="Example td"
|
|
2121
|
+
>Test cell 4-6</td>
|
|
2122
|
+
<td
|
|
2123
|
+
class="pf-m-nowrap"
|
|
2124
|
+
role="cell"
|
|
2125
|
+
data-label="Example td"
|
|
2126
|
+
>Test cell 4-7</td>
|
|
2127
|
+
<td
|
|
2128
|
+
class="pf-m-nowrap"
|
|
2129
|
+
role="cell"
|
|
2130
|
+
data-label="Example td"
|
|
2131
|
+
>Test cell 4-8</td>
|
|
2132
|
+
<td
|
|
2133
|
+
class="pf-m-nowrap"
|
|
2134
|
+
role="cell"
|
|
2135
|
+
data-label="Example td"
|
|
2136
|
+
>Test cell 4-9</td>
|
|
2137
|
+
</tr>
|
|
2138
|
+
<tr role="row">
|
|
2139
|
+
<th
|
|
2140
|
+
class="pf-m-truncate pf-c-table__sticky-column"
|
|
2141
|
+
role="columnheader"
|
|
2142
|
+
data-label="Example th"
|
|
2143
|
+
scope="col"
|
|
2144
|
+
style="--pf-c-table__sticky-column--MinWidth: 100px;"
|
|
2145
|
+
>Fact 5</th>
|
|
2146
|
+
<th
|
|
2147
|
+
class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
|
|
2148
|
+
role="columnheader"
|
|
2149
|
+
data-label="Example th"
|
|
2150
|
+
scope="col"
|
|
2151
|
+
style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
|
|
2152
|
+
>State 5</th>
|
|
2153
|
+
<td
|
|
2154
|
+
class="pf-m-nowrap"
|
|
2155
|
+
role="cell"
|
|
2156
|
+
data-label="Example td"
|
|
2157
|
+
>Test cell 5-3</td>
|
|
2158
|
+
<td
|
|
2159
|
+
class="pf-m-nowrap"
|
|
2160
|
+
role="cell"
|
|
2161
|
+
data-label="Example td"
|
|
2162
|
+
>Test cell 5-4</td>
|
|
2163
|
+
<td
|
|
2164
|
+
class="pf-m-nowrap"
|
|
2165
|
+
role="cell"
|
|
2166
|
+
data-label="Example td"
|
|
2167
|
+
>Test cell 5-5</td>
|
|
2168
|
+
<td
|
|
2169
|
+
class="pf-m-nowrap"
|
|
2170
|
+
role="cell"
|
|
2171
|
+
data-label="Example td"
|
|
2172
|
+
>Test cell 5-6</td>
|
|
2173
|
+
<td
|
|
2174
|
+
class="pf-m-nowrap"
|
|
2175
|
+
role="cell"
|
|
2176
|
+
data-label="Example td"
|
|
2177
|
+
>Test cell 5-7</td>
|
|
2178
|
+
<td
|
|
2179
|
+
class="pf-m-nowrap"
|
|
2180
|
+
role="cell"
|
|
2181
|
+
data-label="Example td"
|
|
2182
|
+
>Test cell 5-8</td>
|
|
2183
|
+
<td
|
|
2184
|
+
class="pf-m-nowrap"
|
|
2185
|
+
role="cell"
|
|
2186
|
+
data-label="Example td"
|
|
2187
|
+
>Test cell 5-9</td>
|
|
2188
|
+
</tr>
|
|
2189
|
+
<tr role="row">
|
|
2190
|
+
<th
|
|
2191
|
+
class="pf-m-truncate pf-c-table__sticky-column"
|
|
2192
|
+
role="columnheader"
|
|
2193
|
+
data-label="Example th"
|
|
2194
|
+
scope="col"
|
|
2195
|
+
style="--pf-c-table__sticky-column--MinWidth: 100px;"
|
|
2196
|
+
>Fact 6</th>
|
|
2197
|
+
<th
|
|
2198
|
+
class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
|
|
2199
|
+
role="columnheader"
|
|
2200
|
+
data-label="Example th"
|
|
2201
|
+
scope="col"
|
|
2202
|
+
style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
|
|
2203
|
+
>State 6</th>
|
|
2204
|
+
<td
|
|
2205
|
+
class="pf-m-nowrap"
|
|
2206
|
+
role="cell"
|
|
2207
|
+
data-label="Example td"
|
|
2208
|
+
>Test cell 6-3</td>
|
|
2209
|
+
<td
|
|
2210
|
+
class="pf-m-nowrap"
|
|
2211
|
+
role="cell"
|
|
2212
|
+
data-label="Example td"
|
|
2213
|
+
>Test cell 6-4</td>
|
|
2214
|
+
<td
|
|
2215
|
+
class="pf-m-nowrap"
|
|
2216
|
+
role="cell"
|
|
2217
|
+
data-label="Example td"
|
|
2218
|
+
>Test cell 6-5</td>
|
|
2219
|
+
<td
|
|
2220
|
+
class="pf-m-nowrap"
|
|
2221
|
+
role="cell"
|
|
2222
|
+
data-label="Example td"
|
|
2223
|
+
>Test cell 6-6</td>
|
|
2224
|
+
<td
|
|
2225
|
+
class="pf-m-nowrap"
|
|
2226
|
+
role="cell"
|
|
2227
|
+
data-label="Example td"
|
|
2228
|
+
>Test cell 6-7</td>
|
|
2229
|
+
<td
|
|
2230
|
+
class="pf-m-nowrap"
|
|
2231
|
+
role="cell"
|
|
2232
|
+
data-label="Example td"
|
|
2233
|
+
>Test cell 6-8</td>
|
|
2234
|
+
<td
|
|
2235
|
+
class="pf-m-nowrap"
|
|
2236
|
+
role="cell"
|
|
2237
|
+
data-label="Example td"
|
|
2238
|
+
>Test cell 6-9</td>
|
|
2239
|
+
</tr>
|
|
2240
|
+
<tr role="row">
|
|
2241
|
+
<th
|
|
2242
|
+
class="pf-m-truncate pf-c-table__sticky-column"
|
|
2243
|
+
role="columnheader"
|
|
2244
|
+
data-label="Example th"
|
|
2245
|
+
scope="col"
|
|
2246
|
+
style="--pf-c-table__sticky-column--MinWidth: 100px;"
|
|
2247
|
+
>Fact 7</th>
|
|
2248
|
+
<th
|
|
2249
|
+
class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
|
|
2250
|
+
role="columnheader"
|
|
2251
|
+
data-label="Example th"
|
|
2252
|
+
scope="col"
|
|
2253
|
+
style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
|
|
2254
|
+
>State 7</th>
|
|
2255
|
+
<td
|
|
2256
|
+
class="pf-m-nowrap"
|
|
2257
|
+
role="cell"
|
|
2258
|
+
data-label="Example td"
|
|
2259
|
+
>Test cell 7-3</td>
|
|
2260
|
+
<td
|
|
2261
|
+
class="pf-m-nowrap"
|
|
2262
|
+
role="cell"
|
|
2263
|
+
data-label="Example td"
|
|
2264
|
+
>Test cell 7-4</td>
|
|
2265
|
+
<td
|
|
2266
|
+
class="pf-m-nowrap"
|
|
2267
|
+
role="cell"
|
|
2268
|
+
data-label="Example td"
|
|
2269
|
+
>Test cell 7-5</td>
|
|
2270
|
+
<td
|
|
2271
|
+
class="pf-m-nowrap"
|
|
2272
|
+
role="cell"
|
|
2273
|
+
data-label="Example td"
|
|
2274
|
+
>Test cell 7-6</td>
|
|
2275
|
+
<td
|
|
2276
|
+
class="pf-m-nowrap"
|
|
2277
|
+
role="cell"
|
|
2278
|
+
data-label="Example td"
|
|
2279
|
+
>Test cell 7-7</td>
|
|
2280
|
+
<td
|
|
2281
|
+
class="pf-m-nowrap"
|
|
2282
|
+
role="cell"
|
|
2283
|
+
data-label="Example td"
|
|
2284
|
+
>Test cell 7-8</td>
|
|
2285
|
+
<td
|
|
2286
|
+
class="pf-m-nowrap"
|
|
2287
|
+
role="cell"
|
|
2288
|
+
data-label="Example td"
|
|
2289
|
+
>Test cell 7-9</td>
|
|
2290
|
+
</tr>
|
|
2291
|
+
<tr role="row">
|
|
2292
|
+
<th
|
|
2293
|
+
class="pf-m-truncate pf-c-table__sticky-column"
|
|
2294
|
+
role="columnheader"
|
|
2295
|
+
data-label="Example th"
|
|
2296
|
+
scope="col"
|
|
2297
|
+
style="--pf-c-table__sticky-column--MinWidth: 100px;"
|
|
2298
|
+
>Fact 8</th>
|
|
2299
|
+
<th
|
|
2300
|
+
class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
|
|
2301
|
+
role="columnheader"
|
|
2302
|
+
data-label="Example th"
|
|
2303
|
+
scope="col"
|
|
2304
|
+
style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
|
|
2305
|
+
>State 8</th>
|
|
2306
|
+
<td
|
|
2307
|
+
class="pf-m-nowrap"
|
|
2308
|
+
role="cell"
|
|
2309
|
+
data-label="Example td"
|
|
2310
|
+
>Test cell 8-3</td>
|
|
2311
|
+
<td
|
|
2312
|
+
class="pf-m-nowrap"
|
|
2313
|
+
role="cell"
|
|
2314
|
+
data-label="Example td"
|
|
2315
|
+
>Test cell 8-4</td>
|
|
2316
|
+
<td
|
|
2317
|
+
class="pf-m-nowrap"
|
|
2318
|
+
role="cell"
|
|
2319
|
+
data-label="Example td"
|
|
2320
|
+
>Test cell 8-5</td>
|
|
2321
|
+
<td
|
|
2322
|
+
class="pf-m-nowrap"
|
|
2323
|
+
role="cell"
|
|
2324
|
+
data-label="Example td"
|
|
2325
|
+
>Test cell 8-6</td>
|
|
2326
|
+
<td
|
|
2327
|
+
class="pf-m-nowrap"
|
|
2328
|
+
role="cell"
|
|
2329
|
+
data-label="Example td"
|
|
2330
|
+
>Test cell 8-7</td>
|
|
2331
|
+
<td
|
|
2332
|
+
class="pf-m-nowrap"
|
|
2333
|
+
role="cell"
|
|
2334
|
+
data-label="Example td"
|
|
2335
|
+
>Test cell 8-8</td>
|
|
2336
|
+
<td
|
|
2337
|
+
class="pf-m-nowrap"
|
|
2338
|
+
role="cell"
|
|
2339
|
+
data-label="Example td"
|
|
2340
|
+
>Test cell 8-9</td>
|
|
2341
|
+
</tr>
|
|
2342
|
+
<tr role="row">
|
|
2343
|
+
<th
|
|
2344
|
+
class="pf-m-truncate pf-c-table__sticky-column"
|
|
2345
|
+
role="columnheader"
|
|
2346
|
+
data-label="Example th"
|
|
2347
|
+
scope="col"
|
|
2348
|
+
style="--pf-c-table__sticky-column--MinWidth: 100px;"
|
|
2349
|
+
>Fact 9</th>
|
|
2350
|
+
<th
|
|
2351
|
+
class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
|
|
2352
|
+
role="columnheader"
|
|
2353
|
+
data-label="Example th"
|
|
2354
|
+
scope="col"
|
|
2355
|
+
style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
|
|
2356
|
+
>State 9</th>
|
|
2357
|
+
<td
|
|
2358
|
+
class="pf-m-nowrap"
|
|
2359
|
+
role="cell"
|
|
2360
|
+
data-label="Example td"
|
|
2361
|
+
>Test cell 9-3</td>
|
|
2362
|
+
<td
|
|
2363
|
+
class="pf-m-nowrap"
|
|
2364
|
+
role="cell"
|
|
2365
|
+
data-label="Example td"
|
|
2366
|
+
>Test cell 9-4</td>
|
|
2367
|
+
<td
|
|
2368
|
+
class="pf-m-nowrap"
|
|
2369
|
+
role="cell"
|
|
2370
|
+
data-label="Example td"
|
|
2371
|
+
>Test cell 9-5</td>
|
|
2372
|
+
<td
|
|
2373
|
+
class="pf-m-nowrap"
|
|
2374
|
+
role="cell"
|
|
2375
|
+
data-label="Example td"
|
|
2376
|
+
>Test cell 9-6</td>
|
|
2377
|
+
<td
|
|
2378
|
+
class="pf-m-nowrap"
|
|
2379
|
+
role="cell"
|
|
2380
|
+
data-label="Example td"
|
|
2381
|
+
>Test cell 9-7</td>
|
|
2382
|
+
<td
|
|
2383
|
+
class="pf-m-nowrap"
|
|
2384
|
+
role="cell"
|
|
2385
|
+
data-label="Example td"
|
|
2386
|
+
>Test cell 9-8</td>
|
|
2387
|
+
<td
|
|
2388
|
+
class="pf-m-nowrap"
|
|
2389
|
+
role="cell"
|
|
2390
|
+
data-label="Example td"
|
|
2391
|
+
>Test cell 9-9</td>
|
|
2392
|
+
</tr>
|
|
2393
|
+
</tbody>
|
|
2394
|
+
</table>
|
|
2395
|
+
</div>
|
|
2396
|
+
<div class="pf-c-pagination pf-m-bottom">
|
|
2397
|
+
<div class="pf-c-options-menu pf-m-top">
|
|
2398
|
+
<div class="pf-c-options-menu__toggle pf-m-text pf-m-plain">
|
|
2399
|
+
<span class="pf-c-options-menu__toggle-text">
|
|
2400
|
+
<b>1 - 10</b> of
|
|
2401
|
+
<b>36</b>
|
|
2402
|
+
</span>
|
|
2403
|
+
<button
|
|
2404
|
+
class="pf-c-options-menu__toggle-button"
|
|
2405
|
+
id="{{page--id}}-pagination-options-menu-bottom-example-toggle"
|
|
2406
|
+
aria-haspopup="listbox"
|
|
2407
|
+
aria-expanded="false"
|
|
2408
|
+
aria-label="Items per page"
|
|
2409
|
+
>
|
|
2410
|
+
<span class="pf-c-options-menu__toggle-button-icon">
|
|
2411
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
2412
|
+
</span>
|
|
2413
|
+
</button>
|
|
2414
|
+
</div>
|
|
2415
|
+
<ul
|
|
2416
|
+
class="pf-c-options-menu__menu pf-m-top"
|
|
2417
|
+
aria-labelledby="{{page--id}}-pagination-options-menu-bottom-example-toggle"
|
|
2418
|
+
hidden
|
|
2419
|
+
>
|
|
2420
|
+
<li>
|
|
2421
|
+
<button
|
|
2422
|
+
class="pf-c-options-menu__menu-item"
|
|
2423
|
+
type="button"
|
|
2424
|
+
>5 per page</button>
|
|
2425
|
+
</li>
|
|
2426
|
+
<li>
|
|
2427
|
+
<button class="pf-c-options-menu__menu-item" type="button">
|
|
2428
|
+
10 per page
|
|
2429
|
+
<div class="pf-c-options-menu__menu-item-icon">
|
|
2430
|
+
<i class="fas fa-check" aria-hidden="true"></i>
|
|
2431
|
+
</div>
|
|
2432
|
+
</button>
|
|
2433
|
+
</li>
|
|
2434
|
+
<li>
|
|
2435
|
+
<button
|
|
2436
|
+
class="pf-c-options-menu__menu-item"
|
|
2437
|
+
type="button"
|
|
2438
|
+
>20 per page</button>
|
|
2439
|
+
</li>
|
|
2440
|
+
</ul>
|
|
2441
|
+
</div>
|
|
2442
|
+
<nav class="pf-c-pagination__nav" aria-label="Pagination">
|
|
2443
|
+
<div class="pf-c-pagination__nav-control pf-m-first">
|
|
2444
|
+
<button
|
|
2445
|
+
class="pf-c-button pf-m-plain"
|
|
2446
|
+
type="button"
|
|
2447
|
+
disabled
|
|
2448
|
+
aria-label="Go to first page"
|
|
2449
|
+
>
|
|
2450
|
+
<i class="fas fa-angle-double-left" aria-hidden="true"></i>
|
|
2451
|
+
</button>
|
|
2452
|
+
</div>
|
|
2453
|
+
<div class="pf-c-pagination__nav-control pf-m-prev">
|
|
2454
|
+
<button
|
|
2455
|
+
class="pf-c-button pf-m-plain"
|
|
2456
|
+
type="button"
|
|
2457
|
+
disabled
|
|
2458
|
+
aria-label="Go to previous page"
|
|
2459
|
+
>
|
|
2460
|
+
<i class="fas fa-angle-left" aria-hidden="true"></i>
|
|
2461
|
+
</button>
|
|
2462
|
+
</div>
|
|
2463
|
+
<div class="pf-c-pagination__nav-page-select">
|
|
2464
|
+
<input
|
|
2465
|
+
class="pf-c-form-control"
|
|
2466
|
+
aria-label="Current page"
|
|
2467
|
+
type="number"
|
|
2468
|
+
min="1"
|
|
2469
|
+
max="4"
|
|
2470
|
+
value="1"
|
|
2471
|
+
/>
|
|
2472
|
+
<span aria-hidden="true">of 4</span>
|
|
2473
|
+
</div>
|
|
2474
|
+
<div class="pf-c-pagination__nav-control pf-m-next">
|
|
2475
|
+
<button
|
|
2476
|
+
class="pf-c-button pf-m-plain"
|
|
2477
|
+
type="button"
|
|
2478
|
+
aria-label="Go to next page"
|
|
2479
|
+
>
|
|
2480
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
2481
|
+
</button>
|
|
2482
|
+
</div>
|
|
2483
|
+
<div class="pf-c-pagination__nav-control pf-m-last">
|
|
2484
|
+
<button
|
|
2485
|
+
class="pf-c-button pf-m-plain"
|
|
2486
|
+
type="button"
|
|
2487
|
+
aria-label="Go to last page"
|
|
2488
|
+
>
|
|
2489
|
+
<i class="fas fa-angle-double-right" aria-hidden="true"></i>
|
|
2490
|
+
</button>
|
|
2491
|
+
</div>
|
|
2492
|
+
</nav>
|
|
2493
|
+
</div>
|
|
2494
|
+
</div>
|
|
2495
|
+
</div>
|
|
2496
|
+
</section>
|
|
2497
|
+
</main>
|
|
2498
|
+
</div>
|
|
2499
|
+
|
|
2500
|
+
```
|
|
2501
|
+
|
|
2502
|
+
### Sticky table header and columns
|
|
2503
|
+
|
|
2504
|
+
```html isFullscreen
|
|
2505
|
+
<div class="pf-c-page" id="sticky-header-and-multiple-columns-demo">
|
|
2506
|
+
<a
|
|
2507
|
+
class="pf-c-skip-to-content pf-c-button pf-m-primary"
|
|
2508
|
+
href="#main-content-sticky-header-and-multiple-columns-demo"
|
|
2509
|
+
>Skip to content</a>
|
|
2510
|
+
<header class="pf-c-page__header">
|
|
2511
|
+
<div class="pf-c-page__header-brand">
|
|
2512
|
+
<div class="pf-c-page__header-brand-toggle">
|
|
2513
|
+
<button
|
|
2514
|
+
class="pf-c-button pf-m-plain"
|
|
2515
|
+
type="button"
|
|
2516
|
+
id="sticky-header-and-multiple-columns-demo-nav-toggle"
|
|
2517
|
+
aria-label="Global navigation"
|
|
2518
|
+
aria-expanded="true"
|
|
2519
|
+
aria-controls="sticky-header-and-multiple-columns-demo-primary-nav"
|
|
2520
|
+
>
|
|
2521
|
+
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
2522
|
+
</button>
|
|
2523
|
+
</div>
|
|
2524
|
+
<a href="#" class="pf-c-page__header-brand-link">
|
|
2525
|
+
<img
|
|
2526
|
+
class="pf-c-brand"
|
|
2527
|
+
src="/assets/images/PF-Masthead-Logo.svg"
|
|
2528
|
+
alt="PatternFly logo"
|
|
2529
|
+
/>
|
|
2530
|
+
</a>
|
|
2531
|
+
</div>
|
|
2532
|
+
<div class="pf-c-page__header-tools">
|
|
2533
|
+
<div class="pf-c-page__header-tools-group">
|
|
2534
|
+
<div
|
|
2535
|
+
class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg"
|
|
2536
|
+
>
|
|
2537
|
+
<button
|
|
2538
|
+
class="pf-c-button pf-m-plain"
|
|
2539
|
+
type="button"
|
|
2540
|
+
aria-label="Settings"
|
|
2541
|
+
>
|
|
2542
|
+
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
2543
|
+
</button>
|
|
2544
|
+
</div>
|
|
2545
|
+
<div
|
|
2546
|
+
class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg"
|
|
2547
|
+
>
|
|
2548
|
+
<button
|
|
2549
|
+
class="pf-c-button pf-m-plain"
|
|
2550
|
+
type="button"
|
|
2551
|
+
aria-label="Help"
|
|
2552
|
+
>
|
|
2553
|
+
<i class="pf-icon pf-icon-help" aria-hidden="true"></i>
|
|
2554
|
+
</button>
|
|
2555
|
+
</div>
|
|
2556
|
+
</div>
|
|
2557
|
+
<div class="pf-c-page__header-tools-group">
|
|
2558
|
+
<div class="pf-c-page__header-tools-item pf-m-hidden-on-lg">
|
|
2559
|
+
<div class="pf-c-dropdown">
|
|
2560
|
+
<button
|
|
2561
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
2562
|
+
id="sticky-header-and-multiple-columns-demo-dropdown-kebab-1-button"
|
|
2563
|
+
aria-expanded="false"
|
|
2564
|
+
type="button"
|
|
2565
|
+
aria-label="Actions"
|
|
2566
|
+
>
|
|
2567
|
+
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
2568
|
+
</button>
|
|
2569
|
+
<ul
|
|
2570
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
2571
|
+
aria-labelledby="sticky-header-and-multiple-columns-demo-dropdown-kebab-1-button"
|
|
2572
|
+
hidden
|
|
2573
|
+
>
|
|
2574
|
+
<li>
|
|
2575
|
+
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
|
|
2576
|
+
</li>
|
|
2577
|
+
<li>
|
|
2578
|
+
<button class="pf-c-dropdown__menu-item" type="button">Action</button>
|
|
2579
|
+
</li>
|
|
2580
|
+
<li>
|
|
2581
|
+
<a
|
|
2582
|
+
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
2583
|
+
href="#"
|
|
2584
|
+
aria-disabled="true"
|
|
2585
|
+
tabindex="-1"
|
|
2586
|
+
>Disabled link</a>
|
|
2587
|
+
</li>
|
|
2588
|
+
<li>
|
|
2589
|
+
<button
|
|
2590
|
+
class="pf-c-dropdown__menu-item"
|
|
2591
|
+
type="button"
|
|
2592
|
+
disabled
|
|
2593
|
+
>Disabled action</button>
|
|
2594
|
+
</li>
|
|
2595
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
2596
|
+
<li>
|
|
2597
|
+
<a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
|
|
2598
|
+
</li>
|
|
2599
|
+
</ul>
|
|
2600
|
+
</div>
|
|
2601
|
+
</div>
|
|
2602
|
+
<div
|
|
2603
|
+
class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-md"
|
|
2604
|
+
>
|
|
2605
|
+
<div class="pf-c-dropdown">
|
|
2606
|
+
<button
|
|
2607
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
2608
|
+
id="sticky-header-and-multiple-columns-demo-dropdown-kebab-2-button"
|
|
2609
|
+
aria-expanded="false"
|
|
2610
|
+
type="button"
|
|
2611
|
+
>
|
|
2612
|
+
<span class="pf-c-dropdown__toggle-text">John Smith</span>
|
|
2613
|
+
<span class="pf-c-dropdown__toggle-icon">
|
|
2614
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
2615
|
+
</span>
|
|
2616
|
+
</button>
|
|
2617
|
+
<ul
|
|
2618
|
+
class="pf-c-dropdown__menu"
|
|
2619
|
+
aria-labelledby="sticky-header-and-multiple-columns-demo-dropdown-kebab-2-button"
|
|
2620
|
+
hidden
|
|
2621
|
+
>
|
|
2622
|
+
<li>
|
|
2623
|
+
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
|
|
2624
|
+
</li>
|
|
2625
|
+
<li>
|
|
2626
|
+
<button class="pf-c-dropdown__menu-item" type="button">Action</button>
|
|
2627
|
+
</li>
|
|
2628
|
+
<li>
|
|
2629
|
+
<a
|
|
2630
|
+
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
2631
|
+
href="#"
|
|
2632
|
+
aria-disabled="true"
|
|
2633
|
+
tabindex="-1"
|
|
2634
|
+
>Disabled link</a>
|
|
2635
|
+
</li>
|
|
2636
|
+
<li>
|
|
2637
|
+
<button
|
|
2638
|
+
class="pf-c-dropdown__menu-item"
|
|
2639
|
+
type="button"
|
|
2640
|
+
disabled
|
|
2641
|
+
>Disabled action</button>
|
|
2642
|
+
</li>
|
|
2643
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
2644
|
+
<li>
|
|
2645
|
+
<a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
|
|
2646
|
+
</li>
|
|
2647
|
+
</ul>
|
|
2648
|
+
</div>
|
|
2649
|
+
</div>
|
|
2650
|
+
</div>
|
|
2651
|
+
<img
|
|
2652
|
+
class="pf-c-avatar"
|
|
2653
|
+
src="/assets/images/img_avatar.svg"
|
|
2654
|
+
alt="Avatar image"
|
|
2655
|
+
/>
|
|
2656
|
+
</div>
|
|
2657
|
+
</header>
|
|
2658
|
+
<div class="pf-c-page__sidebar">
|
|
2659
|
+
<div class="pf-c-page__sidebar-body">
|
|
2660
|
+
<nav
|
|
2661
|
+
class="pf-c-nav"
|
|
2662
|
+
id="sticky-header-and-multiple-columns-demo-primary-nav"
|
|
2663
|
+
aria-label="Global"
|
|
2664
|
+
>
|
|
2665
|
+
<ul class="pf-c-nav__list">
|
|
2666
|
+
<li class="pf-c-nav__item pf-m-expandable pf-m-expanded pf-m-current">
|
|
2667
|
+
<button class="pf-c-nav__link" aria-expanded="true">
|
|
2668
|
+
Components
|
|
2669
|
+
<span class="pf-c-nav__toggle">
|
|
2670
|
+
<span class="pf-c-nav__toggle-icon">
|
|
2671
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
2672
|
+
</span>
|
|
2673
|
+
</span>
|
|
2674
|
+
</button>
|
|
2675
|
+
<section
|
|
2676
|
+
class="pf-c-nav__subnav"
|
|
2677
|
+
aria-labelledby="sticky-header-and-multiple-columns-demo-subnav-title1"
|
|
2678
|
+
>
|
|
2679
|
+
<h2
|
|
2680
|
+
class="pf-c-nav__subnav-title pf-screen-reader"
|
|
2681
|
+
id="sticky-header-and-multiple-columns-demo-subnav-title1"
|
|
2682
|
+
>First nav item</h2>
|
|
2683
|
+
<ul class="pf-c-nav__list">
|
|
2684
|
+
<li class="pf-c-nav__item">
|
|
2685
|
+
<a href="#" class="pf-c-nav__link">Forms</a>
|
|
2686
|
+
</li>
|
|
2687
|
+
<li class="pf-c-nav__item">
|
|
2688
|
+
<a href="#" class="pf-c-nav__link">Table</a>
|
|
2689
|
+
</li>
|
|
2690
|
+
<li class="pf-c-nav__item">
|
|
2691
|
+
<a
|
|
2692
|
+
href="#"
|
|
2693
|
+
class="pf-c-nav__link pf-m-current"
|
|
2694
|
+
aria-current="page"
|
|
2695
|
+
>Data list</a>
|
|
2696
|
+
</li>
|
|
2697
|
+
<li class="pf-c-nav__item">
|
|
2698
|
+
<a href="#" class="pf-c-nav__link">Icons</a>
|
|
2699
|
+
</li>
|
|
2700
|
+
<li class="pf-c-nav__item">
|
|
2701
|
+
<a href="#" class="pf-c-nav__link">Layouts</a>
|
|
2702
|
+
</li>
|
|
2703
|
+
<li class="pf-c-nav__item">
|
|
2704
|
+
<a href="#" class="pf-c-nav__link">List</a>
|
|
2705
|
+
</li>
|
|
2706
|
+
</ul>
|
|
2707
|
+
</section>
|
|
2708
|
+
</li>
|
|
2709
|
+
<li class="pf-c-nav__item pf-m-expandable">
|
|
2710
|
+
<button class="pf-c-nav__link" aria-expanded="false">
|
|
2711
|
+
Patterns
|
|
2712
|
+
<span class="pf-c-nav__toggle">
|
|
2713
|
+
<span class="pf-c-nav__toggle-icon">
|
|
2714
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
2715
|
+
</span>
|
|
2716
|
+
</span>
|
|
2717
|
+
</button>
|
|
2718
|
+
<section
|
|
2719
|
+
class="pf-c-nav__subnav"
|
|
2720
|
+
aria-labelledby="sticky-header-and-multiple-columns-demo-subnav-title2"
|
|
2721
|
+
hidden
|
|
2722
|
+
>
|
|
2723
|
+
<h2
|
|
2724
|
+
class="pf-c-nav__subnav-title pf-screen-reader"
|
|
2725
|
+
id="sticky-header-and-multiple-columns-demo-subnav-title2"
|
|
2726
|
+
>Second nav item</h2>
|
|
2727
|
+
<ul class="pf-c-nav__list"></ul>
|
|
2728
|
+
</section>
|
|
2729
|
+
</li>
|
|
2730
|
+
<li class="pf-c-nav__item pf-m-expandable">
|
|
2731
|
+
<button class="pf-c-nav__link" aria-expanded="false">
|
|
2732
|
+
Typography
|
|
2733
|
+
<span class="pf-c-nav__toggle">
|
|
2734
|
+
<span class="pf-c-nav__toggle-icon">
|
|
2735
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
2736
|
+
</span>
|
|
2737
|
+
</span>
|
|
2738
|
+
</button>
|
|
2739
|
+
<section
|
|
2740
|
+
class="pf-c-nav__subnav"
|
|
2741
|
+
aria-labelledby="sticky-header-and-multiple-columns-demo-subnav-title3"
|
|
2742
|
+
hidden
|
|
2743
|
+
>
|
|
2744
|
+
<h2
|
|
2745
|
+
class="pf-c-nav__subnav-title pf-screen-reader"
|
|
2746
|
+
id="sticky-header-and-multiple-columns-demo-subnav-title3"
|
|
2747
|
+
>Third nav item</h2>
|
|
2748
|
+
<ul class="pf-c-nav__list"></ul>
|
|
2749
|
+
</section>
|
|
2750
|
+
</li>
|
|
2751
|
+
<li class="pf-c-nav__item pf-m-expandable">
|
|
2752
|
+
<button class="pf-c-nav__link" aria-expanded="false">
|
|
2753
|
+
Icons
|
|
2754
|
+
<span class="pf-c-nav__toggle">
|
|
2755
|
+
<span class="pf-c-nav__toggle-icon">
|
|
2756
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
2757
|
+
</span>
|
|
2758
|
+
</span>
|
|
2759
|
+
</button>
|
|
2760
|
+
<section
|
|
2761
|
+
class="pf-c-nav__subnav"
|
|
2762
|
+
aria-labelledby="sticky-header-and-multiple-columns-demo-subnav-title4"
|
|
2763
|
+
hidden
|
|
2764
|
+
>
|
|
2765
|
+
<h2
|
|
2766
|
+
class="pf-c-nav__subnav-title pf-screen-reader"
|
|
2767
|
+
id="sticky-header-and-multiple-columns-demo-subnav-title4"
|
|
2768
|
+
>Second nav item</h2>
|
|
2769
|
+
<ul class="pf-c-nav__list"></ul>
|
|
2770
|
+
</section>
|
|
2771
|
+
</li>
|
|
2772
|
+
<li class="pf-c-nav__item pf-m-expandable">
|
|
2773
|
+
<button class="pf-c-nav__link" aria-expanded="false">
|
|
2774
|
+
Colors
|
|
2775
|
+
<span class="pf-c-nav__toggle">
|
|
2776
|
+
<span class="pf-c-nav__toggle-icon">
|
|
2777
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
2778
|
+
</span>
|
|
2779
|
+
</span>
|
|
2780
|
+
</button>
|
|
2781
|
+
<section
|
|
2782
|
+
class="pf-c-nav__subnav"
|
|
2783
|
+
aria-labelledby="sticky-header-and-multiple-columns-demo-subnav-title5"
|
|
2784
|
+
hidden
|
|
2785
|
+
>
|
|
2786
|
+
<h2
|
|
2787
|
+
class="pf-c-nav__subnav-title pf-screen-reader"
|
|
2788
|
+
id="sticky-header-and-multiple-columns-demo-subnav-title5"
|
|
2789
|
+
>Second nav item</h2>
|
|
2790
|
+
<ul class="pf-c-nav__list"></ul>
|
|
2791
|
+
</section>
|
|
2792
|
+
</li>
|
|
2793
|
+
</ul>
|
|
2794
|
+
</nav>
|
|
2795
|
+
</div>
|
|
2796
|
+
</div>
|
|
2797
|
+
<main
|
|
2798
|
+
class="pf-c-page__main"
|
|
2799
|
+
tabindex="-1"
|
|
2800
|
+
id="main-content-sticky-header-and-multiple-columns-demo"
|
|
2801
|
+
>
|
|
2802
|
+
<section class="pf-c-page__main-subnav pf-m-limit-width">
|
|
2803
|
+
<div class="pf-c-page__main-body">
|
|
2804
|
+
<nav class="pf-c-nav pf-m-horizontal-subnav" aria-label="Local">
|
|
2805
|
+
<ul class="pf-c-nav__list">
|
|
2806
|
+
<li class="pf-c-nav__item">
|
|
2807
|
+
<a
|
|
2808
|
+
href="#"
|
|
2809
|
+
class="pf-c-nav__link pf-m-current"
|
|
2810
|
+
aria-current="page"
|
|
2811
|
+
>Item 1</a>
|
|
2812
|
+
</li>
|
|
2813
|
+
<li class="pf-c-nav__item">
|
|
2814
|
+
<a href="#" class="pf-c-nav__link">Item 2</a>
|
|
2815
|
+
</li>
|
|
2816
|
+
<li class="pf-c-nav__item">
|
|
2817
|
+
<a href="#" class="pf-c-nav__link">Item 3</a>
|
|
2818
|
+
</li>
|
|
2819
|
+
</ul>
|
|
2820
|
+
</nav>
|
|
2821
|
+
</div>
|
|
2822
|
+
</section>
|
|
2823
|
+
<section class="pf-c-page__main-section pf-m-limit-width pf-m-light">
|
|
2824
|
+
<div class="pf-c-page__main-body">
|
|
2825
|
+
<div class="pf-c-content">
|
|
2826
|
+
<h1>Table demos</h1>
|
|
2827
|
+
<p>Below is an example of a Table.</p>
|
|
2828
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum suscipit venenatis enim, ut ultrices metus ornare at. Curabitur vel nibh id leo finibus suscipit. Curabitur eu tellus lectus. Vivamus lacus leo, lobortis ac convallis ac, dapibus vel ligula. Suspendisse vitae felis at augue blandit sollicitudin. Sed erat metus, pellentesque vel accumsan vitae, tincidunt id erat. Mauris et pharetra felis. Duis at nisi leo. Nam blandit dui dui, in euismod est dapibus sed. Vivamus sed dolor ullamcorper, euismod orci efficitur, ornare leo. Sed sit amet sollicitudin nulla. Nunc tristique sem ut est laoreet efficitur. Cras tristique finibus risus, eget fringilla tellus porta vitae. Duis id nunc ultricies, ultrices nibh vel, sollicitudin tellus.</p>
|
|
36
2829
|
</div>
|
|
37
|
-
{{> table-pagination-footer}}
|
|
38
2830
|
</div>
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
2831
|
+
</section>
|
|
2832
|
+
<section
|
|
2833
|
+
class="pf-c-page__main-section pf-m-no-padding pf-m-padding-on-xl pf-m-overflow-scroll"
|
|
2834
|
+
>
|
|
2835
|
+
<div class="pf-c-scroll-outer-wrapper">
|
|
2836
|
+
<div class="pf-c-toolbar">
|
|
2837
|
+
<div class="pf-c-toolbar__content">
|
|
2838
|
+
<div class="pf-c-toolbar__content-section pf-m-nowrap">
|
|
2839
|
+
<div
|
|
2840
|
+
class="pf-c-toolbar__group pf-m-toggle-group pf-m-show-on-xl"
|
|
2841
|
+
>
|
|
2842
|
+
<div class="pf-c-toolbar__toggle">
|
|
2843
|
+
<button
|
|
2844
|
+
class="pf-c-button pf-m-plain"
|
|
2845
|
+
type="button"
|
|
2846
|
+
aria-label="Show filters"
|
|
2847
|
+
aria-expanded="false"
|
|
2848
|
+
aria-controls="-expandable-content"
|
|
2849
|
+
>
|
|
2850
|
+
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
2851
|
+
</button>
|
|
2852
|
+
</div>
|
|
2853
|
+
|
|
2854
|
+
<div class="pf-c-toolbar__item pf-m-bulk-select">
|
|
2855
|
+
<div class="pf-c-dropdown">
|
|
2856
|
+
<div class="pf-c-dropdown__toggle pf-m-split-button">
|
|
2857
|
+
<label
|
|
2858
|
+
class="pf-c-dropdown__toggle-check"
|
|
2859
|
+
for="-bulk-select-toggle-check"
|
|
2860
|
+
>
|
|
2861
|
+
<input
|
|
2862
|
+
type="checkbox"
|
|
2863
|
+
id="-bulk-select-toggle-check"
|
|
2864
|
+
aria-label="Select all"
|
|
2865
|
+
/>
|
|
2866
|
+
</label>
|
|
2867
|
+
|
|
2868
|
+
<button
|
|
2869
|
+
class="pf-c-dropdown__toggle-button"
|
|
2870
|
+
type="button"
|
|
2871
|
+
aria-expanded="false"
|
|
2872
|
+
id="-bulk-select-toggle-button"
|
|
2873
|
+
aria-label="Dropdown toggle"
|
|
2874
|
+
>
|
|
2875
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
2876
|
+
</button>
|
|
2877
|
+
</div>
|
|
2878
|
+
<ul class="pf-c-dropdown__menu" hidden>
|
|
2879
|
+
<li>
|
|
2880
|
+
<button
|
|
2881
|
+
class="pf-c-dropdown__menu-item"
|
|
2882
|
+
type="button"
|
|
2883
|
+
>Select all</button>
|
|
2884
|
+
</li>
|
|
2885
|
+
<li>
|
|
2886
|
+
<button
|
|
2887
|
+
class="pf-c-dropdown__menu-item"
|
|
2888
|
+
type="button"
|
|
2889
|
+
>Select none</button>
|
|
2890
|
+
</li>
|
|
2891
|
+
<li>
|
|
2892
|
+
<button
|
|
2893
|
+
class="pf-c-dropdown__menu-item"
|
|
2894
|
+
type="button"
|
|
2895
|
+
>Other action</button>
|
|
2896
|
+
</li>
|
|
2897
|
+
</ul>
|
|
2898
|
+
</div>
|
|
2899
|
+
</div>
|
|
2900
|
+
|
|
2901
|
+
<div class="pf-c-toolbar__item pf-m-search-filter">
|
|
2902
|
+
<div
|
|
2903
|
+
class="pf-c-input-group"
|
|
2904
|
+
aria-label="search filter"
|
|
2905
|
+
role="group"
|
|
2906
|
+
>
|
|
2907
|
+
<div class="pf-c-dropdown">
|
|
2908
|
+
<button
|
|
2909
|
+
class="pf-c-dropdown__toggle"
|
|
2910
|
+
id="--button"
|
|
2911
|
+
aria-expanded="false"
|
|
2912
|
+
type="button"
|
|
2913
|
+
>
|
|
2914
|
+
<span class="pf-c-dropdown__toggle-text">Name</span>
|
|
2915
|
+
<span class="pf-c-dropdown__toggle-icon">
|
|
2916
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
2917
|
+
</span>
|
|
2918
|
+
</button>
|
|
2919
|
+
<ul
|
|
2920
|
+
class="pf-c-dropdown__menu"
|
|
2921
|
+
aria-labelledby="--button"
|
|
2922
|
+
hidden
|
|
2923
|
+
>
|
|
2924
|
+
<li>
|
|
2925
|
+
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
|
|
2926
|
+
</li>
|
|
2927
|
+
<li>
|
|
2928
|
+
<button
|
|
2929
|
+
class="pf-c-dropdown__menu-item"
|
|
2930
|
+
type="button"
|
|
2931
|
+
>Action</button>
|
|
2932
|
+
</li>
|
|
2933
|
+
<li>
|
|
2934
|
+
<a
|
|
2935
|
+
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
2936
|
+
href="#"
|
|
2937
|
+
aria-disabled="true"
|
|
2938
|
+
tabindex="-1"
|
|
2939
|
+
>Disabled link</a>
|
|
2940
|
+
</li>
|
|
2941
|
+
<li>
|
|
2942
|
+
<button
|
|
2943
|
+
class="pf-c-dropdown__menu-item"
|
|
2944
|
+
type="button"
|
|
2945
|
+
disabled
|
|
2946
|
+
>Disabled action</button>
|
|
2947
|
+
</li>
|
|
2948
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
2949
|
+
<li>
|
|
2950
|
+
<a
|
|
2951
|
+
class="pf-c-dropdown__menu-item"
|
|
2952
|
+
href="#"
|
|
2953
|
+
>Separated link</a>
|
|
2954
|
+
</li>
|
|
2955
|
+
</ul>
|
|
2956
|
+
</div>
|
|
2957
|
+
<input
|
|
2958
|
+
class="pf-c-form-control"
|
|
2959
|
+
type="search"
|
|
2960
|
+
id="--search-filter-input"
|
|
2961
|
+
name="-search-filter-input"
|
|
2962
|
+
aria-label="input with dropdown and button"
|
|
2963
|
+
aria-describedby="--button"
|
|
2964
|
+
/>
|
|
2965
|
+
</div>
|
|
2966
|
+
</div>
|
|
2967
|
+
</div>
|
|
43
2968
|
|
|
44
|
-
|
|
2969
|
+
<div class="pf-c-toolbar__item">
|
|
2970
|
+
<button
|
|
2971
|
+
class="pf-c-button pf-m-plain"
|
|
2972
|
+
type="button"
|
|
2973
|
+
aria-label="Sort"
|
|
2974
|
+
>
|
|
2975
|
+
<i class="fas fa-sort-amount-down" aria-hidden="true"></i>
|
|
2976
|
+
</button>
|
|
2977
|
+
</div>
|
|
45
2978
|
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
2979
|
+
<div class="pf-c-overflow-menu" id="-overflow-menu">
|
|
2980
|
+
<div
|
|
2981
|
+
class="pf-c-overflow-menu__content pf-u-display-none pf-u-display-flex-on-lg"
|
|
2982
|
+
>
|
|
2983
|
+
<div class="pf-c-overflow-menu__group pf-m-button-group">
|
|
2984
|
+
<div class="pf-c-overflow-menu__item">
|
|
2985
|
+
<button
|
|
2986
|
+
class="pf-c-button pf-m-primary"
|
|
2987
|
+
type="button"
|
|
2988
|
+
>Create instance</button>
|
|
2989
|
+
</div>
|
|
2990
|
+
</div>
|
|
2991
|
+
</div>
|
|
2992
|
+
<div class="pf-c-overflow-menu__control">
|
|
2993
|
+
<div class="pf-c-dropdown">
|
|
2994
|
+
<button
|
|
2995
|
+
class="pf-c-button pf-c-dropdown__toggle pf-m-plain"
|
|
2996
|
+
type="button"
|
|
2997
|
+
id="-overflow-menu-dropdown-toggle"
|
|
2998
|
+
aria-label="Dropdown with additional options"
|
|
2999
|
+
aria-expanded="false"
|
|
3000
|
+
>
|
|
3001
|
+
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
3002
|
+
</button>
|
|
3003
|
+
<ul
|
|
3004
|
+
class="pf-c-dropdown__menu"
|
|
3005
|
+
aria-labelledby="-overflow-menu-dropdown-toggle"
|
|
3006
|
+
hidden
|
|
3007
|
+
>
|
|
3008
|
+
<li>
|
|
3009
|
+
<button class="pf-c-dropdown__menu-item">Action 7</button>
|
|
3010
|
+
</li>
|
|
3011
|
+
</ul>
|
|
3012
|
+
</div>
|
|
3013
|
+
</div>
|
|
3014
|
+
</div>
|
|
80
3015
|
|
|
81
|
-
|
|
3016
|
+
<div class="pf-c-toolbar__item pf-m-pagination">
|
|
3017
|
+
<div class="pf-c-pagination pf-m-compact">
|
|
3018
|
+
<div class="pf-c-options-menu">
|
|
3019
|
+
<div class="pf-c-options-menu__toggle pf-m-text pf-m-plain">
|
|
3020
|
+
<span class="pf-c-options-menu__toggle-text">
|
|
3021
|
+
<b>1 - 10</b> of
|
|
3022
|
+
<b>36</b>
|
|
3023
|
+
</span>
|
|
3024
|
+
<button
|
|
3025
|
+
class="pf-c-options-menu__toggle-button"
|
|
3026
|
+
id="-top-pagination-toggle"
|
|
3027
|
+
aria-haspopup="listbox"
|
|
3028
|
+
aria-expanded="false"
|
|
3029
|
+
aria-label="Items per page"
|
|
3030
|
+
>
|
|
3031
|
+
<span class="pf-c-options-menu__toggle-button-icon">
|
|
3032
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
3033
|
+
</span>
|
|
3034
|
+
</button>
|
|
3035
|
+
</div>
|
|
3036
|
+
<ul
|
|
3037
|
+
class="pf-c-options-menu__menu"
|
|
3038
|
+
aria-labelledby="-top-pagination-toggle"
|
|
3039
|
+
hidden
|
|
3040
|
+
>
|
|
3041
|
+
<li>
|
|
3042
|
+
<button
|
|
3043
|
+
class="pf-c-options-menu__menu-item"
|
|
3044
|
+
type="button"
|
|
3045
|
+
>5 per page</button>
|
|
3046
|
+
</li>
|
|
3047
|
+
<li>
|
|
3048
|
+
<button
|
|
3049
|
+
class="pf-c-options-menu__menu-item"
|
|
3050
|
+
type="button"
|
|
3051
|
+
>
|
|
3052
|
+
10 per page
|
|
3053
|
+
<div class="pf-c-options-menu__menu-item-icon">
|
|
3054
|
+
<i class="fas fa-check" aria-hidden="true"></i>
|
|
3055
|
+
</div>
|
|
3056
|
+
</button>
|
|
3057
|
+
</li>
|
|
3058
|
+
<li>
|
|
3059
|
+
<button
|
|
3060
|
+
class="pf-c-options-menu__menu-item"
|
|
3061
|
+
type="button"
|
|
3062
|
+
>20 per page</button>
|
|
3063
|
+
</li>
|
|
3064
|
+
</ul>
|
|
3065
|
+
</div>
|
|
3066
|
+
<nav
|
|
3067
|
+
class="pf-c-pagination__nav"
|
|
3068
|
+
aria-label="Toolbar top pagination"
|
|
3069
|
+
>
|
|
3070
|
+
<div class="pf-c-pagination__nav-control pf-m-prev">
|
|
3071
|
+
<button
|
|
3072
|
+
class="pf-c-button pf-m-plain"
|
|
3073
|
+
type="button"
|
|
3074
|
+
disabled
|
|
3075
|
+
aria-label="Go to previous page"
|
|
3076
|
+
>
|
|
3077
|
+
<i class="fas fa-angle-left" aria-hidden="true"></i>
|
|
3078
|
+
</button>
|
|
3079
|
+
</div>
|
|
3080
|
+
<div class="pf-c-pagination__nav-control pf-m-next">
|
|
3081
|
+
<button
|
|
3082
|
+
class="pf-c-button pf-m-plain"
|
|
3083
|
+
type="button"
|
|
3084
|
+
aria-label="Go to next page"
|
|
3085
|
+
>
|
|
3086
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
3087
|
+
</button>
|
|
3088
|
+
</div>
|
|
3089
|
+
</nav>
|
|
3090
|
+
</div>
|
|
3091
|
+
</div>
|
|
3092
|
+
</div>
|
|
82
3093
|
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
{{/page-header}}
|
|
91
|
-
{{#> page-sidebar}}
|
|
92
|
-
{{> table-page-nav}}
|
|
93
|
-
{{/page-sidebar}}
|
|
94
|
-
{{#> page-main page-main--attribute=(concat 'id="main-content-' page--id '"')}}
|
|
95
|
-
{{#> page-main-subnav page-main-subnav--IsLimitWidth="true"}}
|
|
96
|
-
{{> table-main-section-nav}}
|
|
97
|
-
{{/page-main-subnav}}
|
|
98
|
-
{{#> page-main-section page-main-section--modifier="pf-m-light" page-main-section--IsLimitWidth="true"}}
|
|
99
|
-
{{#> content}}
|
|
100
|
-
<h1>Table demos</h1>
|
|
101
|
-
<p>Below is an example of a Table.</p>
|
|
102
|
-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum suscipit venenatis enim, ut ultrices metus ornare at. Curabitur vel nibh id leo finibus suscipit. Curabitur eu tellus lectus. Vivamus lacus leo, lobortis ac convallis ac, dapibus vel ligula. Suspendisse vitae felis at augue blandit sollicitudin. Sed erat metus, pellentesque vel accumsan vitae, tincidunt id erat. Mauris et pharetra felis. Duis at nisi leo. Nam blandit dui dui, in euismod est dapibus sed. Vivamus sed dolor ullamcorper, euismod orci efficitur, ornare leo. Sed sit amet sollicitudin nulla. Nunc tristique sem ut est laoreet efficitur. Cras tristique finibus risus, eget fringilla tellus porta vitae. Duis id nunc ultricies, ultrices nibh vel, sollicitudin tellus.</p>
|
|
103
|
-
{{/content}}
|
|
104
|
-
{{/page-main-section}}
|
|
105
|
-
{{#> page-main-section page-main-section--modifier="pf-m-no-padding pf-m-padding-on-xl pf-m-overflow-scroll" page-main-section--IsLimitWidthsss="true"}}
|
|
106
|
-
<div class="pf-c-scroll-outer-wrapper">
|
|
107
|
-
{{> toolbar--template toolbar--id=(concat page--id '-toolbar') toolbar--template--HasBulkSelect="true" toolbar--template--HasToggleGroup="true" toolbar--template--HasSearchFilter="true" toolbar--template--HasSortButton="true" toolbar--template--HasOverflowMenu="true"}}
|
|
3094
|
+
<div
|
|
3095
|
+
class="pf-c-toolbar__expandable-content pf-m-hidden"
|
|
3096
|
+
id="-expandable-content"
|
|
3097
|
+
hidden
|
|
3098
|
+
></div>
|
|
3099
|
+
</div>
|
|
3100
|
+
</div>
|
|
108
3101
|
<div class="pf-c-scroll-inner-wrapper">
|
|
109
|
-
|
|
3102
|
+
<table
|
|
3103
|
+
class="pf-c-table pf-m-sticky-header"
|
|
3104
|
+
role="grid"
|
|
3105
|
+
aria-label="This is a scrollable table"
|
|
3106
|
+
id="sticky-header-and-multiple-columns-demo-table"
|
|
3107
|
+
>
|
|
3108
|
+
<thead>
|
|
3109
|
+
<tr role="row">
|
|
3110
|
+
<th
|
|
3111
|
+
class="pf-m-truncate pf-c-table__sort pf-c-table__sticky-column"
|
|
3112
|
+
role="columnheader"
|
|
3113
|
+
aria-sort="none"
|
|
3114
|
+
data-label="Example th"
|
|
3115
|
+
scope="col"
|
|
3116
|
+
style="--pf-c-table__sticky-column--MinWidth: 100px;"
|
|
3117
|
+
>
|
|
3118
|
+
<button class="pf-c-table__button">
|
|
3119
|
+
<div class="pf-c-table__button-content">
|
|
3120
|
+
<span class="pf-c-table__text">Fact</span>
|
|
3121
|
+
<span class="pf-c-table__sort-indicator">
|
|
3122
|
+
<i class="fas fa-arrows-alt-v"></i>
|
|
3123
|
+
</span>
|
|
3124
|
+
</div>
|
|
3125
|
+
</button>
|
|
3126
|
+
</th>
|
|
3127
|
+
<th
|
|
3128
|
+
class="pf-m-border-right pf-m-truncate pf-c-table__sort pf-c-table__sticky-column"
|
|
3129
|
+
role="columnheader"
|
|
3130
|
+
aria-sort="none"
|
|
3131
|
+
data-label="Example th"
|
|
3132
|
+
scope="col"
|
|
3133
|
+
style="--pf-c-table__sticky-column--MinWidth: 120px; --pf-c-table__sticky-column--Left: 100px;"
|
|
3134
|
+
>
|
|
3135
|
+
<button class="pf-c-table__button">
|
|
3136
|
+
<div class="pf-c-table__button-content">
|
|
3137
|
+
<span class="pf-c-table__text">State</span>
|
|
3138
|
+
<span class="pf-c-table__sort-indicator">
|
|
3139
|
+
<i class="fas fa-arrows-alt-v"></i>
|
|
3140
|
+
</span>
|
|
3141
|
+
</div>
|
|
3142
|
+
</button>
|
|
3143
|
+
</th>
|
|
3144
|
+
<th
|
|
3145
|
+
class="pf-m-truncate"
|
|
3146
|
+
role="columnheader"
|
|
3147
|
+
data-label="Example th"
|
|
3148
|
+
scope="col"
|
|
3149
|
+
>Header 3</th>
|
|
3150
|
+
<th
|
|
3151
|
+
class="pf-m-truncate"
|
|
3152
|
+
role="columnheader"
|
|
3153
|
+
data-label="Example th"
|
|
3154
|
+
scope="col"
|
|
3155
|
+
>Header 4</th>
|
|
3156
|
+
<th
|
|
3157
|
+
class="pf-m-truncate"
|
|
3158
|
+
role="columnheader"
|
|
3159
|
+
data-label="Example th"
|
|
3160
|
+
scope="col"
|
|
3161
|
+
>Header 5</th>
|
|
3162
|
+
<th
|
|
3163
|
+
class="pf-m-truncate"
|
|
3164
|
+
role="columnheader"
|
|
3165
|
+
data-label="Example th"
|
|
3166
|
+
scope="col"
|
|
3167
|
+
>Header 6</th>
|
|
3168
|
+
<th
|
|
3169
|
+
class="pf-m-truncate"
|
|
3170
|
+
role="columnheader"
|
|
3171
|
+
data-label="Example th"
|
|
3172
|
+
scope="col"
|
|
3173
|
+
>Header 7</th>
|
|
3174
|
+
<th
|
|
3175
|
+
class="pf-m-truncate"
|
|
3176
|
+
role="columnheader"
|
|
3177
|
+
data-label="Example th"
|
|
3178
|
+
scope="col"
|
|
3179
|
+
>Header 8</th>
|
|
3180
|
+
<th
|
|
3181
|
+
class="pf-m-truncate"
|
|
3182
|
+
role="columnheader"
|
|
3183
|
+
data-label="Example th"
|
|
3184
|
+
scope="col"
|
|
3185
|
+
>Header 9</th>
|
|
3186
|
+
</tr>
|
|
3187
|
+
</thead>
|
|
3188
|
+
|
|
3189
|
+
<tbody role="rowgroup">
|
|
3190
|
+
<tr role="row">
|
|
3191
|
+
<th
|
|
3192
|
+
class="pf-m-truncate pf-c-table__sticky-column"
|
|
3193
|
+
role="columnheader"
|
|
3194
|
+
data-label="Example th"
|
|
3195
|
+
scope="col"
|
|
3196
|
+
style="--pf-c-table__sticky-column--MinWidth: 100px;"
|
|
3197
|
+
>Fact 1</th>
|
|
3198
|
+
<th
|
|
3199
|
+
class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
|
|
3200
|
+
role="columnheader"
|
|
3201
|
+
data-label="Example th"
|
|
3202
|
+
scope="col"
|
|
3203
|
+
style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
|
|
3204
|
+
>State 1</th>
|
|
3205
|
+
<td
|
|
3206
|
+
class="pf-m-nowrap"
|
|
3207
|
+
role="cell"
|
|
3208
|
+
data-label="Example td"
|
|
3209
|
+
>Test cell 1-3</td>
|
|
3210
|
+
<td
|
|
3211
|
+
class="pf-m-nowrap"
|
|
3212
|
+
role="cell"
|
|
3213
|
+
data-label="Example td"
|
|
3214
|
+
>Test cell 1-4</td>
|
|
3215
|
+
<td
|
|
3216
|
+
class="pf-m-nowrap"
|
|
3217
|
+
role="cell"
|
|
3218
|
+
data-label="Example td"
|
|
3219
|
+
>Test cell 1-5</td>
|
|
3220
|
+
<td
|
|
3221
|
+
class="pf-m-nowrap"
|
|
3222
|
+
role="cell"
|
|
3223
|
+
data-label="Example td"
|
|
3224
|
+
>Test cell 1-6</td>
|
|
3225
|
+
<td
|
|
3226
|
+
class="pf-m-nowrap"
|
|
3227
|
+
role="cell"
|
|
3228
|
+
data-label="Example td"
|
|
3229
|
+
>Test cell 1-7</td>
|
|
3230
|
+
<td
|
|
3231
|
+
class="pf-m-nowrap"
|
|
3232
|
+
role="cell"
|
|
3233
|
+
data-label="Example td"
|
|
3234
|
+
>Test cell 1-8</td>
|
|
3235
|
+
<td
|
|
3236
|
+
class="pf-m-nowrap"
|
|
3237
|
+
role="cell"
|
|
3238
|
+
data-label="Example td"
|
|
3239
|
+
>Test cell 1-9</td>
|
|
3240
|
+
</tr>
|
|
3241
|
+
<tr role="row">
|
|
3242
|
+
<th
|
|
3243
|
+
class="pf-m-truncate pf-c-table__sticky-column"
|
|
3244
|
+
role="columnheader"
|
|
3245
|
+
data-label="Example th"
|
|
3246
|
+
scope="col"
|
|
3247
|
+
style="--pf-c-table__sticky-column--MinWidth: 100px;"
|
|
3248
|
+
>Fact 2</th>
|
|
3249
|
+
<th
|
|
3250
|
+
class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
|
|
3251
|
+
role="columnheader"
|
|
3252
|
+
data-label="Example th"
|
|
3253
|
+
scope="col"
|
|
3254
|
+
style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
|
|
3255
|
+
>State 2</th>
|
|
3256
|
+
<td
|
|
3257
|
+
class="pf-m-nowrap"
|
|
3258
|
+
role="cell"
|
|
3259
|
+
data-label="Example td"
|
|
3260
|
+
>Test cell 2-3</td>
|
|
3261
|
+
<td
|
|
3262
|
+
class="pf-m-nowrap"
|
|
3263
|
+
role="cell"
|
|
3264
|
+
data-label="Example td"
|
|
3265
|
+
>Test cell 2-4</td>
|
|
3266
|
+
<td
|
|
3267
|
+
class="pf-m-nowrap"
|
|
3268
|
+
role="cell"
|
|
3269
|
+
data-label="Example td"
|
|
3270
|
+
>Test cell 2-5</td>
|
|
3271
|
+
<td
|
|
3272
|
+
class="pf-m-nowrap"
|
|
3273
|
+
role="cell"
|
|
3274
|
+
data-label="Example td"
|
|
3275
|
+
>Test cell 2-6</td>
|
|
3276
|
+
<td
|
|
3277
|
+
class="pf-m-nowrap"
|
|
3278
|
+
role="cell"
|
|
3279
|
+
data-label="Example td"
|
|
3280
|
+
>Test cell 2-7</td>
|
|
3281
|
+
<td
|
|
3282
|
+
class="pf-m-nowrap"
|
|
3283
|
+
role="cell"
|
|
3284
|
+
data-label="Example td"
|
|
3285
|
+
>Test cell 2-8</td>
|
|
3286
|
+
<td
|
|
3287
|
+
class="pf-m-nowrap"
|
|
3288
|
+
role="cell"
|
|
3289
|
+
data-label="Example td"
|
|
3290
|
+
>Test cell 2-9</td>
|
|
3291
|
+
</tr>
|
|
3292
|
+
<tr role="row">
|
|
3293
|
+
<th
|
|
3294
|
+
class="pf-m-truncate pf-c-table__sticky-column"
|
|
3295
|
+
role="columnheader"
|
|
3296
|
+
data-label="Example th"
|
|
3297
|
+
scope="col"
|
|
3298
|
+
style="--pf-c-table__sticky-column--MinWidth: 100px;"
|
|
3299
|
+
>Fact 3</th>
|
|
3300
|
+
<th
|
|
3301
|
+
class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
|
|
3302
|
+
role="columnheader"
|
|
3303
|
+
data-label="Example th"
|
|
3304
|
+
scope="col"
|
|
3305
|
+
style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
|
|
3306
|
+
>State 3</th>
|
|
3307
|
+
<td
|
|
3308
|
+
class="pf-m-nowrap"
|
|
3309
|
+
role="cell"
|
|
3310
|
+
data-label="Example td"
|
|
3311
|
+
>Test cell 3-3</td>
|
|
3312
|
+
<td
|
|
3313
|
+
class="pf-m-nowrap"
|
|
3314
|
+
role="cell"
|
|
3315
|
+
data-label="Example td"
|
|
3316
|
+
>Test cell 3-4</td>
|
|
3317
|
+
<td
|
|
3318
|
+
class="pf-m-nowrap"
|
|
3319
|
+
role="cell"
|
|
3320
|
+
data-label="Example td"
|
|
3321
|
+
>Test cell 3-5</td>
|
|
3322
|
+
<td
|
|
3323
|
+
class="pf-m-nowrap"
|
|
3324
|
+
role="cell"
|
|
3325
|
+
data-label="Example td"
|
|
3326
|
+
>Test cell 3-6</td>
|
|
3327
|
+
<td
|
|
3328
|
+
class="pf-m-nowrap"
|
|
3329
|
+
role="cell"
|
|
3330
|
+
data-label="Example td"
|
|
3331
|
+
>Test cell 3-7</td>
|
|
3332
|
+
<td
|
|
3333
|
+
class="pf-m-nowrap"
|
|
3334
|
+
role="cell"
|
|
3335
|
+
data-label="Example td"
|
|
3336
|
+
>Test cell 3-8</td>
|
|
3337
|
+
<td
|
|
3338
|
+
class="pf-m-nowrap"
|
|
3339
|
+
role="cell"
|
|
3340
|
+
data-label="Example td"
|
|
3341
|
+
>Test cell 3-9</td>
|
|
3342
|
+
</tr>
|
|
3343
|
+
<tr role="row">
|
|
3344
|
+
<th
|
|
3345
|
+
class="pf-m-truncate pf-c-table__sticky-column"
|
|
3346
|
+
role="columnheader"
|
|
3347
|
+
data-label="Example th"
|
|
3348
|
+
scope="col"
|
|
3349
|
+
style="--pf-c-table__sticky-column--MinWidth: 100px;"
|
|
3350
|
+
>Fact 4</th>
|
|
3351
|
+
<th
|
|
3352
|
+
class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
|
|
3353
|
+
role="columnheader"
|
|
3354
|
+
data-label="Example th"
|
|
3355
|
+
scope="col"
|
|
3356
|
+
style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
|
|
3357
|
+
>State 4</th>
|
|
3358
|
+
<td
|
|
3359
|
+
class="pf-m-nowrap"
|
|
3360
|
+
role="cell"
|
|
3361
|
+
data-label="Example td"
|
|
3362
|
+
>Test cell 4-3</td>
|
|
3363
|
+
<td
|
|
3364
|
+
class="pf-m-nowrap"
|
|
3365
|
+
role="cell"
|
|
3366
|
+
data-label="Example td"
|
|
3367
|
+
>Test cell 4-4</td>
|
|
3368
|
+
<td
|
|
3369
|
+
class="pf-m-nowrap"
|
|
3370
|
+
role="cell"
|
|
3371
|
+
data-label="Example td"
|
|
3372
|
+
>Test cell 4-5</td>
|
|
3373
|
+
<td
|
|
3374
|
+
class="pf-m-nowrap"
|
|
3375
|
+
role="cell"
|
|
3376
|
+
data-label="Example td"
|
|
3377
|
+
>Test cell 4-6</td>
|
|
3378
|
+
<td
|
|
3379
|
+
class="pf-m-nowrap"
|
|
3380
|
+
role="cell"
|
|
3381
|
+
data-label="Example td"
|
|
3382
|
+
>Test cell 4-7</td>
|
|
3383
|
+
<td
|
|
3384
|
+
class="pf-m-nowrap"
|
|
3385
|
+
role="cell"
|
|
3386
|
+
data-label="Example td"
|
|
3387
|
+
>Test cell 4-8</td>
|
|
3388
|
+
<td
|
|
3389
|
+
class="pf-m-nowrap"
|
|
3390
|
+
role="cell"
|
|
3391
|
+
data-label="Example td"
|
|
3392
|
+
>Test cell 4-9</td>
|
|
3393
|
+
</tr>
|
|
3394
|
+
<tr role="row">
|
|
3395
|
+
<th
|
|
3396
|
+
class="pf-m-truncate pf-c-table__sticky-column"
|
|
3397
|
+
role="columnheader"
|
|
3398
|
+
data-label="Example th"
|
|
3399
|
+
scope="col"
|
|
3400
|
+
style="--pf-c-table__sticky-column--MinWidth: 100px;"
|
|
3401
|
+
>Fact 5</th>
|
|
3402
|
+
<th
|
|
3403
|
+
class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
|
|
3404
|
+
role="columnheader"
|
|
3405
|
+
data-label="Example th"
|
|
3406
|
+
scope="col"
|
|
3407
|
+
style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
|
|
3408
|
+
>State 5</th>
|
|
3409
|
+
<td
|
|
3410
|
+
class="pf-m-nowrap"
|
|
3411
|
+
role="cell"
|
|
3412
|
+
data-label="Example td"
|
|
3413
|
+
>Test cell 5-3</td>
|
|
3414
|
+
<td
|
|
3415
|
+
class="pf-m-nowrap"
|
|
3416
|
+
role="cell"
|
|
3417
|
+
data-label="Example td"
|
|
3418
|
+
>Test cell 5-4</td>
|
|
3419
|
+
<td
|
|
3420
|
+
class="pf-m-nowrap"
|
|
3421
|
+
role="cell"
|
|
3422
|
+
data-label="Example td"
|
|
3423
|
+
>Test cell 5-5</td>
|
|
3424
|
+
<td
|
|
3425
|
+
class="pf-m-nowrap"
|
|
3426
|
+
role="cell"
|
|
3427
|
+
data-label="Example td"
|
|
3428
|
+
>Test cell 5-6</td>
|
|
3429
|
+
<td
|
|
3430
|
+
class="pf-m-nowrap"
|
|
3431
|
+
role="cell"
|
|
3432
|
+
data-label="Example td"
|
|
3433
|
+
>Test cell 5-7</td>
|
|
3434
|
+
<td
|
|
3435
|
+
class="pf-m-nowrap"
|
|
3436
|
+
role="cell"
|
|
3437
|
+
data-label="Example td"
|
|
3438
|
+
>Test cell 5-8</td>
|
|
3439
|
+
<td
|
|
3440
|
+
class="pf-m-nowrap"
|
|
3441
|
+
role="cell"
|
|
3442
|
+
data-label="Example td"
|
|
3443
|
+
>Test cell 5-9</td>
|
|
3444
|
+
</tr>
|
|
3445
|
+
<tr role="row">
|
|
3446
|
+
<th
|
|
3447
|
+
class="pf-m-truncate pf-c-table__sticky-column"
|
|
3448
|
+
role="columnheader"
|
|
3449
|
+
data-label="Example th"
|
|
3450
|
+
scope="col"
|
|
3451
|
+
style="--pf-c-table__sticky-column--MinWidth: 100px;"
|
|
3452
|
+
>Fact 6</th>
|
|
3453
|
+
<th
|
|
3454
|
+
class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
|
|
3455
|
+
role="columnheader"
|
|
3456
|
+
data-label="Example th"
|
|
3457
|
+
scope="col"
|
|
3458
|
+
style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
|
|
3459
|
+
>State 6</th>
|
|
3460
|
+
<td
|
|
3461
|
+
class="pf-m-nowrap"
|
|
3462
|
+
role="cell"
|
|
3463
|
+
data-label="Example td"
|
|
3464
|
+
>Test cell 6-3</td>
|
|
3465
|
+
<td
|
|
3466
|
+
class="pf-m-nowrap"
|
|
3467
|
+
role="cell"
|
|
3468
|
+
data-label="Example td"
|
|
3469
|
+
>Test cell 6-4</td>
|
|
3470
|
+
<td
|
|
3471
|
+
class="pf-m-nowrap"
|
|
3472
|
+
role="cell"
|
|
3473
|
+
data-label="Example td"
|
|
3474
|
+
>Test cell 6-5</td>
|
|
3475
|
+
<td
|
|
3476
|
+
class="pf-m-nowrap"
|
|
3477
|
+
role="cell"
|
|
3478
|
+
data-label="Example td"
|
|
3479
|
+
>Test cell 6-6</td>
|
|
3480
|
+
<td
|
|
3481
|
+
class="pf-m-nowrap"
|
|
3482
|
+
role="cell"
|
|
3483
|
+
data-label="Example td"
|
|
3484
|
+
>Test cell 6-7</td>
|
|
3485
|
+
<td
|
|
3486
|
+
class="pf-m-nowrap"
|
|
3487
|
+
role="cell"
|
|
3488
|
+
data-label="Example td"
|
|
3489
|
+
>Test cell 6-8</td>
|
|
3490
|
+
<td
|
|
3491
|
+
class="pf-m-nowrap"
|
|
3492
|
+
role="cell"
|
|
3493
|
+
data-label="Example td"
|
|
3494
|
+
>Test cell 6-9</td>
|
|
3495
|
+
</tr>
|
|
3496
|
+
<tr role="row">
|
|
3497
|
+
<th
|
|
3498
|
+
class="pf-m-truncate pf-c-table__sticky-column"
|
|
3499
|
+
role="columnheader"
|
|
3500
|
+
data-label="Example th"
|
|
3501
|
+
scope="col"
|
|
3502
|
+
style="--pf-c-table__sticky-column--MinWidth: 100px;"
|
|
3503
|
+
>Fact 7</th>
|
|
3504
|
+
<th
|
|
3505
|
+
class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
|
|
3506
|
+
role="columnheader"
|
|
3507
|
+
data-label="Example th"
|
|
3508
|
+
scope="col"
|
|
3509
|
+
style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
|
|
3510
|
+
>State 7</th>
|
|
3511
|
+
<td
|
|
3512
|
+
class="pf-m-nowrap"
|
|
3513
|
+
role="cell"
|
|
3514
|
+
data-label="Example td"
|
|
3515
|
+
>Test cell 7-3</td>
|
|
3516
|
+
<td
|
|
3517
|
+
class="pf-m-nowrap"
|
|
3518
|
+
role="cell"
|
|
3519
|
+
data-label="Example td"
|
|
3520
|
+
>Test cell 7-4</td>
|
|
3521
|
+
<td
|
|
3522
|
+
class="pf-m-nowrap"
|
|
3523
|
+
role="cell"
|
|
3524
|
+
data-label="Example td"
|
|
3525
|
+
>Test cell 7-5</td>
|
|
3526
|
+
<td
|
|
3527
|
+
class="pf-m-nowrap"
|
|
3528
|
+
role="cell"
|
|
3529
|
+
data-label="Example td"
|
|
3530
|
+
>Test cell 7-6</td>
|
|
3531
|
+
<td
|
|
3532
|
+
class="pf-m-nowrap"
|
|
3533
|
+
role="cell"
|
|
3534
|
+
data-label="Example td"
|
|
3535
|
+
>Test cell 7-7</td>
|
|
3536
|
+
<td
|
|
3537
|
+
class="pf-m-nowrap"
|
|
3538
|
+
role="cell"
|
|
3539
|
+
data-label="Example td"
|
|
3540
|
+
>Test cell 7-8</td>
|
|
3541
|
+
<td
|
|
3542
|
+
class="pf-m-nowrap"
|
|
3543
|
+
role="cell"
|
|
3544
|
+
data-label="Example td"
|
|
3545
|
+
>Test cell 7-9</td>
|
|
3546
|
+
</tr>
|
|
3547
|
+
<tr role="row">
|
|
3548
|
+
<th
|
|
3549
|
+
class="pf-m-truncate pf-c-table__sticky-column"
|
|
3550
|
+
role="columnheader"
|
|
3551
|
+
data-label="Example th"
|
|
3552
|
+
scope="col"
|
|
3553
|
+
style="--pf-c-table__sticky-column--MinWidth: 100px;"
|
|
3554
|
+
>Fact 8</th>
|
|
3555
|
+
<th
|
|
3556
|
+
class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
|
|
3557
|
+
role="columnheader"
|
|
3558
|
+
data-label="Example th"
|
|
3559
|
+
scope="col"
|
|
3560
|
+
style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
|
|
3561
|
+
>State 8</th>
|
|
3562
|
+
<td
|
|
3563
|
+
class="pf-m-nowrap"
|
|
3564
|
+
role="cell"
|
|
3565
|
+
data-label="Example td"
|
|
3566
|
+
>Test cell 8-3</td>
|
|
3567
|
+
<td
|
|
3568
|
+
class="pf-m-nowrap"
|
|
3569
|
+
role="cell"
|
|
3570
|
+
data-label="Example td"
|
|
3571
|
+
>Test cell 8-4</td>
|
|
3572
|
+
<td
|
|
3573
|
+
class="pf-m-nowrap"
|
|
3574
|
+
role="cell"
|
|
3575
|
+
data-label="Example td"
|
|
3576
|
+
>Test cell 8-5</td>
|
|
3577
|
+
<td
|
|
3578
|
+
class="pf-m-nowrap"
|
|
3579
|
+
role="cell"
|
|
3580
|
+
data-label="Example td"
|
|
3581
|
+
>Test cell 8-6</td>
|
|
3582
|
+
<td
|
|
3583
|
+
class="pf-m-nowrap"
|
|
3584
|
+
role="cell"
|
|
3585
|
+
data-label="Example td"
|
|
3586
|
+
>Test cell 8-7</td>
|
|
3587
|
+
<td
|
|
3588
|
+
class="pf-m-nowrap"
|
|
3589
|
+
role="cell"
|
|
3590
|
+
data-label="Example td"
|
|
3591
|
+
>Test cell 8-8</td>
|
|
3592
|
+
<td
|
|
3593
|
+
class="pf-m-nowrap"
|
|
3594
|
+
role="cell"
|
|
3595
|
+
data-label="Example td"
|
|
3596
|
+
>Test cell 8-9</td>
|
|
3597
|
+
</tr>
|
|
3598
|
+
<tr role="row">
|
|
3599
|
+
<th
|
|
3600
|
+
class="pf-m-truncate pf-c-table__sticky-column"
|
|
3601
|
+
role="columnheader"
|
|
3602
|
+
data-label="Example th"
|
|
3603
|
+
scope="col"
|
|
3604
|
+
style="--pf-c-table__sticky-column--MinWidth: 100px;"
|
|
3605
|
+
>Fact 9</th>
|
|
3606
|
+
<th
|
|
3607
|
+
class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
|
|
3608
|
+
role="columnheader"
|
|
3609
|
+
data-label="Example th"
|
|
3610
|
+
scope="col"
|
|
3611
|
+
style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
|
|
3612
|
+
>State 9</th>
|
|
3613
|
+
<td
|
|
3614
|
+
class="pf-m-nowrap"
|
|
3615
|
+
role="cell"
|
|
3616
|
+
data-label="Example td"
|
|
3617
|
+
>Test cell 9-3</td>
|
|
3618
|
+
<td
|
|
3619
|
+
class="pf-m-nowrap"
|
|
3620
|
+
role="cell"
|
|
3621
|
+
data-label="Example td"
|
|
3622
|
+
>Test cell 9-4</td>
|
|
3623
|
+
<td
|
|
3624
|
+
class="pf-m-nowrap"
|
|
3625
|
+
role="cell"
|
|
3626
|
+
data-label="Example td"
|
|
3627
|
+
>Test cell 9-5</td>
|
|
3628
|
+
<td
|
|
3629
|
+
class="pf-m-nowrap"
|
|
3630
|
+
role="cell"
|
|
3631
|
+
data-label="Example td"
|
|
3632
|
+
>Test cell 9-6</td>
|
|
3633
|
+
<td
|
|
3634
|
+
class="pf-m-nowrap"
|
|
3635
|
+
role="cell"
|
|
3636
|
+
data-label="Example td"
|
|
3637
|
+
>Test cell 9-7</td>
|
|
3638
|
+
<td
|
|
3639
|
+
class="pf-m-nowrap"
|
|
3640
|
+
role="cell"
|
|
3641
|
+
data-label="Example td"
|
|
3642
|
+
>Test cell 9-8</td>
|
|
3643
|
+
<td
|
|
3644
|
+
class="pf-m-nowrap"
|
|
3645
|
+
role="cell"
|
|
3646
|
+
data-label="Example td"
|
|
3647
|
+
>Test cell 9-9</td>
|
|
3648
|
+
</tr>
|
|
3649
|
+
</tbody>
|
|
3650
|
+
</table>
|
|
3651
|
+
</div>
|
|
3652
|
+
<div class="pf-c-pagination pf-m-bottom">
|
|
3653
|
+
<div class="pf-c-options-menu pf-m-top">
|
|
3654
|
+
<div class="pf-c-options-menu__toggle pf-m-text pf-m-plain">
|
|
3655
|
+
<span class="pf-c-options-menu__toggle-text">
|
|
3656
|
+
<b>1 - 10</b> of
|
|
3657
|
+
<b>36</b>
|
|
3658
|
+
</span>
|
|
3659
|
+
<button
|
|
3660
|
+
class="pf-c-options-menu__toggle-button"
|
|
3661
|
+
id="{{page--id}}-pagination-options-menu-bottom-example-toggle"
|
|
3662
|
+
aria-haspopup="listbox"
|
|
3663
|
+
aria-expanded="false"
|
|
3664
|
+
aria-label="Items per page"
|
|
3665
|
+
>
|
|
3666
|
+
<span class="pf-c-options-menu__toggle-button-icon">
|
|
3667
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
3668
|
+
</span>
|
|
3669
|
+
</button>
|
|
3670
|
+
</div>
|
|
3671
|
+
<ul
|
|
3672
|
+
class="pf-c-options-menu__menu pf-m-top"
|
|
3673
|
+
aria-labelledby="{{page--id}}-pagination-options-menu-bottom-example-toggle"
|
|
3674
|
+
hidden
|
|
3675
|
+
>
|
|
3676
|
+
<li>
|
|
3677
|
+
<button
|
|
3678
|
+
class="pf-c-options-menu__menu-item"
|
|
3679
|
+
type="button"
|
|
3680
|
+
>5 per page</button>
|
|
3681
|
+
</li>
|
|
3682
|
+
<li>
|
|
3683
|
+
<button class="pf-c-options-menu__menu-item" type="button">
|
|
3684
|
+
10 per page
|
|
3685
|
+
<div class="pf-c-options-menu__menu-item-icon">
|
|
3686
|
+
<i class="fas fa-check" aria-hidden="true"></i>
|
|
3687
|
+
</div>
|
|
3688
|
+
</button>
|
|
3689
|
+
</li>
|
|
3690
|
+
<li>
|
|
3691
|
+
<button
|
|
3692
|
+
class="pf-c-options-menu__menu-item"
|
|
3693
|
+
type="button"
|
|
3694
|
+
>20 per page</button>
|
|
3695
|
+
</li>
|
|
3696
|
+
</ul>
|
|
3697
|
+
</div>
|
|
3698
|
+
<nav class="pf-c-pagination__nav" aria-label="Pagination">
|
|
3699
|
+
<div class="pf-c-pagination__nav-control pf-m-first">
|
|
3700
|
+
<button
|
|
3701
|
+
class="pf-c-button pf-m-plain"
|
|
3702
|
+
type="button"
|
|
3703
|
+
disabled
|
|
3704
|
+
aria-label="Go to first page"
|
|
3705
|
+
>
|
|
3706
|
+
<i class="fas fa-angle-double-left" aria-hidden="true"></i>
|
|
3707
|
+
</button>
|
|
3708
|
+
</div>
|
|
3709
|
+
<div class="pf-c-pagination__nav-control pf-m-prev">
|
|
3710
|
+
<button
|
|
3711
|
+
class="pf-c-button pf-m-plain"
|
|
3712
|
+
type="button"
|
|
3713
|
+
disabled
|
|
3714
|
+
aria-label="Go to previous page"
|
|
3715
|
+
>
|
|
3716
|
+
<i class="fas fa-angle-left" aria-hidden="true"></i>
|
|
3717
|
+
</button>
|
|
3718
|
+
</div>
|
|
3719
|
+
<div class="pf-c-pagination__nav-page-select">
|
|
3720
|
+
<input
|
|
3721
|
+
class="pf-c-form-control"
|
|
3722
|
+
aria-label="Current page"
|
|
3723
|
+
type="number"
|
|
3724
|
+
min="1"
|
|
3725
|
+
max="4"
|
|
3726
|
+
value="1"
|
|
3727
|
+
/>
|
|
3728
|
+
<span aria-hidden="true">of 4</span>
|
|
3729
|
+
</div>
|
|
3730
|
+
<div class="pf-c-pagination__nav-control pf-m-next">
|
|
3731
|
+
<button
|
|
3732
|
+
class="pf-c-button pf-m-plain"
|
|
3733
|
+
type="button"
|
|
3734
|
+
aria-label="Go to next page"
|
|
3735
|
+
>
|
|
3736
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
3737
|
+
</button>
|
|
3738
|
+
</div>
|
|
3739
|
+
<div class="pf-c-pagination__nav-control pf-m-last">
|
|
3740
|
+
<button
|
|
3741
|
+
class="pf-c-button pf-m-plain"
|
|
3742
|
+
type="button"
|
|
3743
|
+
aria-label="Go to last page"
|
|
3744
|
+
>
|
|
3745
|
+
<i class="fas fa-angle-double-right" aria-hidden="true"></i>
|
|
3746
|
+
</button>
|
|
3747
|
+
</div>
|
|
3748
|
+
</nav>
|
|
110
3749
|
</div>
|
|
111
|
-
{{> table-pagination-footer}}
|
|
112
3750
|
</div>
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
3751
|
+
</section>
|
|
3752
|
+
</main>
|
|
3753
|
+
</div>
|
|
3754
|
+
|
|
116
3755
|
```
|
|
117
3756
|
|
|
118
3757
|
### Basic
|