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