@patternfly/patternfly 5.0.0-alpha.27 → 5.0.0-alpha.29
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/components/Popover/popover.css +2 -0
- package/components/Popover/popover.scss +2 -0
- package/components/Table/table-scrollable.css +31 -26
- package/components/Table/table-scrollable.scss +33 -28
- package/components/Table/table.css +2 -1
- package/components/Table/table.scss +4 -1
- package/docs/components/Popover/examples/Popover.md +6 -19
- package/docs/components/Table/examples/Table.css +4 -0
- package/docs/components/Table/examples/Table.md +657 -147
- package/docs/demos/Table/examples/Table.md +1943 -100
- package/package.json +1 -1
- package/patternfly-no-reset.css +36 -28
- package/patternfly.css +36 -28
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -21242,12 +21242,12 @@ wrapperTag: div
|
|
|
21242
21242
|
<thead>
|
|
21243
21243
|
<tr role="row">
|
|
21244
21244
|
<th
|
|
21245
|
-
class="pf-m-border-right pf-c-table__sort pf-c-table__sticky-
|
|
21245
|
+
class="pf-m-border-right pf-c-table__sort pf-c-table__sticky-cell pf-m-left"
|
|
21246
21246
|
role="columnheader"
|
|
21247
21247
|
aria-sort="none"
|
|
21248
21248
|
data-label="Example th"
|
|
21249
21249
|
scope="col"
|
|
21250
|
-
style="--pf-c-table__sticky-
|
|
21250
|
+
style="--pf-c-table__sticky-cell--MinWidth: 100px;"
|
|
21251
21251
|
>
|
|
21252
21252
|
<button class="pf-c-table__button">
|
|
21253
21253
|
<div class="pf-c-table__button-content">
|
|
@@ -21310,6 +21310,7 @@ wrapperTag: div
|
|
|
21310
21310
|
data-label="Example th"
|
|
21311
21311
|
scope="col"
|
|
21312
21312
|
>Header 8</th>
|
|
21313
|
+
|
|
21313
21314
|
<th
|
|
21314
21315
|
class
|
|
21315
21316
|
role="columnheader"
|
|
@@ -21322,11 +21323,11 @@ wrapperTag: div
|
|
|
21322
21323
|
<tbody role="rowgroup">
|
|
21323
21324
|
<tr role="row">
|
|
21324
21325
|
<th
|
|
21325
|
-
class="pf-m-border-right pf-c-table__sticky-
|
|
21326
|
+
class="pf-m-border-right pf-c-table__sticky-cell pf-m-left"
|
|
21326
21327
|
role="columnheader"
|
|
21327
21328
|
data-label="Example th"
|
|
21328
21329
|
scope="col"
|
|
21329
|
-
style="--pf-c-table__sticky-
|
|
21330
|
+
style="--pf-c-table__sticky-cell--MinWidth: 100px;"
|
|
21330
21331
|
>Fact 1</th>
|
|
21331
21332
|
<td
|
|
21332
21333
|
class="pf-m-nowrap"
|
|
@@ -21363,6 +21364,7 @@ wrapperTag: div
|
|
|
21363
21364
|
role="cell"
|
|
21364
21365
|
data-label="Example td"
|
|
21365
21366
|
>Test cell 1-8</td>
|
|
21367
|
+
|
|
21366
21368
|
<td
|
|
21367
21369
|
class="pf-m-nowrap"
|
|
21368
21370
|
role="cell"
|
|
@@ -21371,11 +21373,11 @@ wrapperTag: div
|
|
|
21371
21373
|
</tr>
|
|
21372
21374
|
<tr role="row">
|
|
21373
21375
|
<th
|
|
21374
|
-
class="pf-m-border-right pf-c-table__sticky-
|
|
21376
|
+
class="pf-m-border-right pf-c-table__sticky-cell pf-m-left"
|
|
21375
21377
|
role="columnheader"
|
|
21376
21378
|
data-label="Example th"
|
|
21377
21379
|
scope="col"
|
|
21378
|
-
style="--pf-c-table__sticky-
|
|
21380
|
+
style="--pf-c-table__sticky-cell--MinWidth: 100px;"
|
|
21379
21381
|
>Fact 2</th>
|
|
21380
21382
|
<td
|
|
21381
21383
|
class="pf-m-nowrap"
|
|
@@ -21412,6 +21414,7 @@ wrapperTag: div
|
|
|
21412
21414
|
role="cell"
|
|
21413
21415
|
data-label="Example td"
|
|
21414
21416
|
>Test cell 2-8</td>
|
|
21417
|
+
|
|
21415
21418
|
<td
|
|
21416
21419
|
class="pf-m-nowrap"
|
|
21417
21420
|
role="cell"
|
|
@@ -21420,11 +21423,11 @@ wrapperTag: div
|
|
|
21420
21423
|
</tr>
|
|
21421
21424
|
<tr role="row">
|
|
21422
21425
|
<th
|
|
21423
|
-
class="pf-m-border-right pf-c-table__sticky-
|
|
21426
|
+
class="pf-m-border-right pf-c-table__sticky-cell pf-m-left"
|
|
21424
21427
|
role="columnheader"
|
|
21425
21428
|
data-label="Example th"
|
|
21426
21429
|
scope="col"
|
|
21427
|
-
style="--pf-c-table__sticky-
|
|
21430
|
+
style="--pf-c-table__sticky-cell--MinWidth: 100px;"
|
|
21428
21431
|
>Fact 3</th>
|
|
21429
21432
|
<td
|
|
21430
21433
|
class="pf-m-nowrap"
|
|
@@ -21461,6 +21464,7 @@ wrapperTag: div
|
|
|
21461
21464
|
role="cell"
|
|
21462
21465
|
data-label="Example td"
|
|
21463
21466
|
>Test cell 3-8</td>
|
|
21467
|
+
|
|
21464
21468
|
<td
|
|
21465
21469
|
class="pf-m-nowrap"
|
|
21466
21470
|
role="cell"
|
|
@@ -21469,11 +21473,11 @@ wrapperTag: div
|
|
|
21469
21473
|
</tr>
|
|
21470
21474
|
<tr role="row">
|
|
21471
21475
|
<th
|
|
21472
|
-
class="pf-m-border-right pf-c-table__sticky-
|
|
21476
|
+
class="pf-m-border-right pf-c-table__sticky-cell pf-m-left"
|
|
21473
21477
|
role="columnheader"
|
|
21474
21478
|
data-label="Example th"
|
|
21475
21479
|
scope="col"
|
|
21476
|
-
style="--pf-c-table__sticky-
|
|
21480
|
+
style="--pf-c-table__sticky-cell--MinWidth: 100px;"
|
|
21477
21481
|
>Fact 4</th>
|
|
21478
21482
|
<td
|
|
21479
21483
|
class="pf-m-nowrap"
|
|
@@ -21510,6 +21514,7 @@ wrapperTag: div
|
|
|
21510
21514
|
role="cell"
|
|
21511
21515
|
data-label="Example td"
|
|
21512
21516
|
>Test cell 4-8</td>
|
|
21517
|
+
|
|
21513
21518
|
<td
|
|
21514
21519
|
class="pf-m-nowrap"
|
|
21515
21520
|
role="cell"
|
|
@@ -21518,11 +21523,11 @@ wrapperTag: div
|
|
|
21518
21523
|
</tr>
|
|
21519
21524
|
<tr role="row">
|
|
21520
21525
|
<th
|
|
21521
|
-
class="pf-m-border-right pf-c-table__sticky-
|
|
21526
|
+
class="pf-m-border-right pf-c-table__sticky-cell pf-m-left"
|
|
21522
21527
|
role="columnheader"
|
|
21523
21528
|
data-label="Example th"
|
|
21524
21529
|
scope="col"
|
|
21525
|
-
style="--pf-c-table__sticky-
|
|
21530
|
+
style="--pf-c-table__sticky-cell--MinWidth: 100px;"
|
|
21526
21531
|
>Fact 5</th>
|
|
21527
21532
|
<td
|
|
21528
21533
|
class="pf-m-nowrap"
|
|
@@ -21559,6 +21564,7 @@ wrapperTag: div
|
|
|
21559
21564
|
role="cell"
|
|
21560
21565
|
data-label="Example td"
|
|
21561
21566
|
>Test cell 5-8</td>
|
|
21567
|
+
|
|
21562
21568
|
<td
|
|
21563
21569
|
class="pf-m-nowrap"
|
|
21564
21570
|
role="cell"
|
|
@@ -21567,11 +21573,11 @@ wrapperTag: div
|
|
|
21567
21573
|
</tr>
|
|
21568
21574
|
<tr role="row">
|
|
21569
21575
|
<th
|
|
21570
|
-
class="pf-m-border-right pf-c-table__sticky-
|
|
21576
|
+
class="pf-m-border-right pf-c-table__sticky-cell pf-m-left"
|
|
21571
21577
|
role="columnheader"
|
|
21572
21578
|
data-label="Example th"
|
|
21573
21579
|
scope="col"
|
|
21574
|
-
style="--pf-c-table__sticky-
|
|
21580
|
+
style="--pf-c-table__sticky-cell--MinWidth: 100px;"
|
|
21575
21581
|
>Fact 6</th>
|
|
21576
21582
|
<td
|
|
21577
21583
|
class="pf-m-nowrap"
|
|
@@ -21608,6 +21614,7 @@ wrapperTag: div
|
|
|
21608
21614
|
role="cell"
|
|
21609
21615
|
data-label="Example td"
|
|
21610
21616
|
>Test cell 6-8</td>
|
|
21617
|
+
|
|
21611
21618
|
<td
|
|
21612
21619
|
class="pf-m-nowrap"
|
|
21613
21620
|
role="cell"
|
|
@@ -21616,11 +21623,11 @@ wrapperTag: div
|
|
|
21616
21623
|
</tr>
|
|
21617
21624
|
<tr role="row">
|
|
21618
21625
|
<th
|
|
21619
|
-
class="pf-m-border-right pf-c-table__sticky-
|
|
21626
|
+
class="pf-m-border-right pf-c-table__sticky-cell pf-m-left"
|
|
21620
21627
|
role="columnheader"
|
|
21621
21628
|
data-label="Example th"
|
|
21622
21629
|
scope="col"
|
|
21623
|
-
style="--pf-c-table__sticky-
|
|
21630
|
+
style="--pf-c-table__sticky-cell--MinWidth: 100px;"
|
|
21624
21631
|
>Fact 7</th>
|
|
21625
21632
|
<td
|
|
21626
21633
|
class="pf-m-nowrap"
|
|
@@ -21657,6 +21664,7 @@ wrapperTag: div
|
|
|
21657
21664
|
role="cell"
|
|
21658
21665
|
data-label="Example td"
|
|
21659
21666
|
>Test cell 7-8</td>
|
|
21667
|
+
|
|
21660
21668
|
<td
|
|
21661
21669
|
class="pf-m-nowrap"
|
|
21662
21670
|
role="cell"
|
|
@@ -21665,11 +21673,11 @@ wrapperTag: div
|
|
|
21665
21673
|
</tr>
|
|
21666
21674
|
<tr role="row">
|
|
21667
21675
|
<th
|
|
21668
|
-
class="pf-m-border-right pf-c-table__sticky-
|
|
21676
|
+
class="pf-m-border-right pf-c-table__sticky-cell pf-m-left"
|
|
21669
21677
|
role="columnheader"
|
|
21670
21678
|
data-label="Example th"
|
|
21671
21679
|
scope="col"
|
|
21672
|
-
style="--pf-c-table__sticky-
|
|
21680
|
+
style="--pf-c-table__sticky-cell--MinWidth: 100px;"
|
|
21673
21681
|
>Fact 8</th>
|
|
21674
21682
|
<td
|
|
21675
21683
|
class="pf-m-nowrap"
|
|
@@ -21706,6 +21714,7 @@ wrapperTag: div
|
|
|
21706
21714
|
role="cell"
|
|
21707
21715
|
data-label="Example td"
|
|
21708
21716
|
>Test cell 8-8</td>
|
|
21717
|
+
|
|
21709
21718
|
<td
|
|
21710
21719
|
class="pf-m-nowrap"
|
|
21711
21720
|
role="cell"
|
|
@@ -21714,11 +21723,11 @@ wrapperTag: div
|
|
|
21714
21723
|
</tr>
|
|
21715
21724
|
<tr role="row">
|
|
21716
21725
|
<th
|
|
21717
|
-
class="pf-m-border-right pf-c-table__sticky-
|
|
21726
|
+
class="pf-m-border-right pf-c-table__sticky-cell pf-m-left"
|
|
21718
21727
|
role="columnheader"
|
|
21719
21728
|
data-label="Example th"
|
|
21720
21729
|
scope="col"
|
|
21721
|
-
style="--pf-c-table__sticky-
|
|
21730
|
+
style="--pf-c-table__sticky-cell--MinWidth: 100px;"
|
|
21722
21731
|
>Fact 9</th>
|
|
21723
21732
|
<td
|
|
21724
21733
|
class="pf-m-nowrap"
|
|
@@ -21755,6 +21764,7 @@ wrapperTag: div
|
|
|
21755
21764
|
role="cell"
|
|
21756
21765
|
data-label="Example td"
|
|
21757
21766
|
>Test cell 9-8</td>
|
|
21767
|
+
|
|
21758
21768
|
<td
|
|
21759
21769
|
class="pf-m-nowrap"
|
|
21760
21770
|
role="cell"
|
|
@@ -23044,12 +23054,12 @@ wrapperTag: div
|
|
|
23044
23054
|
<thead>
|
|
23045
23055
|
<tr role="row">
|
|
23046
23056
|
<th
|
|
23047
|
-
class="pf-c-table__sort pf-c-table__sticky-
|
|
23057
|
+
class="pf-c-table__sort pf-c-table__sticky-cell pf-m-left"
|
|
23048
23058
|
role="columnheader"
|
|
23049
23059
|
aria-sort="none"
|
|
23050
23060
|
data-label="Example th"
|
|
23051
23061
|
scope="col"
|
|
23052
|
-
style="--pf-c-table__sticky-
|
|
23062
|
+
style="--pf-c-table__sticky-cell--MinWidth: 100px;"
|
|
23053
23063
|
>
|
|
23054
23064
|
<button class="pf-c-table__button">
|
|
23055
23065
|
<div class="pf-c-table__button-content">
|
|
@@ -23061,12 +23071,12 @@ wrapperTag: div
|
|
|
23061
23071
|
</button>
|
|
23062
23072
|
</th>
|
|
23063
23073
|
<th
|
|
23064
|
-
class="pf-m-border-right pf-c-table__sort pf-c-table__sticky-
|
|
23074
|
+
class="pf-m-border-right pf-c-table__sort pf-c-table__sticky-cell pf-m-left"
|
|
23065
23075
|
role="columnheader"
|
|
23066
23076
|
aria-sort="none"
|
|
23067
23077
|
data-label="Example th"
|
|
23068
23078
|
scope="col"
|
|
23069
|
-
style="--pf-c-table__sticky-
|
|
23079
|
+
style="--pf-c-table__sticky-cell--MinWidth: 120px; --pf-c-table__sticky-cell--Left: 100px;"
|
|
23070
23080
|
>
|
|
23071
23081
|
<button class="pf-c-table__button">
|
|
23072
23082
|
<div class="pf-c-table__button-content">
|
|
@@ -23113,6 +23123,7 @@ wrapperTag: div
|
|
|
23113
23123
|
data-label="Example th"
|
|
23114
23124
|
scope="col"
|
|
23115
23125
|
>Header 8</th>
|
|
23126
|
+
|
|
23116
23127
|
<th
|
|
23117
23128
|
class
|
|
23118
23129
|
role="columnheader"
|
|
@@ -23125,18 +23136,18 @@ wrapperTag: div
|
|
|
23125
23136
|
<tbody role="rowgroup">
|
|
23126
23137
|
<tr role="row">
|
|
23127
23138
|
<th
|
|
23128
|
-
class="pf-c-table__sticky-
|
|
23139
|
+
class="pf-c-table__sticky-cell pf-m-left"
|
|
23129
23140
|
role="columnheader"
|
|
23130
23141
|
data-label="Example th"
|
|
23131
23142
|
scope="col"
|
|
23132
|
-
style="--pf-c-table__sticky-
|
|
23143
|
+
style="--pf-c-table__sticky-cell--MinWidth: 100px;"
|
|
23133
23144
|
>Fact 1</th>
|
|
23134
23145
|
<th
|
|
23135
|
-
class="pf-m-border-right pf-c-table__sticky-
|
|
23146
|
+
class="pf-m-border-right pf-c-table__sticky-cell pf-m-left"
|
|
23136
23147
|
role="columnheader"
|
|
23137
23148
|
data-label="Example th"
|
|
23138
23149
|
scope="col"
|
|
23139
|
-
style="--pf-c-table__sticky-
|
|
23150
|
+
style="--pf-c-table__sticky-cell--MinWidth: 80px; --pf-c-table__sticky-cell--Left: 100px;"
|
|
23140
23151
|
>State 1</th>
|
|
23141
23152
|
<td
|
|
23142
23153
|
class="pf-m-nowrap"
|
|
@@ -23168,6 +23179,7 @@ wrapperTag: div
|
|
|
23168
23179
|
role="cell"
|
|
23169
23180
|
data-label="Example td"
|
|
23170
23181
|
>Test cell 1-8</td>
|
|
23182
|
+
|
|
23171
23183
|
<td
|
|
23172
23184
|
class="pf-m-nowrap"
|
|
23173
23185
|
role="cell"
|
|
@@ -23176,18 +23188,18 @@ wrapperTag: div
|
|
|
23176
23188
|
</tr>
|
|
23177
23189
|
<tr role="row">
|
|
23178
23190
|
<th
|
|
23179
|
-
class="pf-c-table__sticky-
|
|
23191
|
+
class="pf-c-table__sticky-cell pf-m-left"
|
|
23180
23192
|
role="columnheader"
|
|
23181
23193
|
data-label="Example th"
|
|
23182
23194
|
scope="col"
|
|
23183
|
-
style="--pf-c-table__sticky-
|
|
23195
|
+
style="--pf-c-table__sticky-cell--MinWidth: 100px;"
|
|
23184
23196
|
>Fact 2</th>
|
|
23185
23197
|
<th
|
|
23186
|
-
class="pf-m-border-right pf-c-table__sticky-
|
|
23198
|
+
class="pf-m-border-right pf-c-table__sticky-cell pf-m-left"
|
|
23187
23199
|
role="columnheader"
|
|
23188
23200
|
data-label="Example th"
|
|
23189
23201
|
scope="col"
|
|
23190
|
-
style="--pf-c-table__sticky-
|
|
23202
|
+
style="--pf-c-table__sticky-cell--MinWidth: 80px; --pf-c-table__sticky-cell--Left: 100px;"
|
|
23191
23203
|
>State 2</th>
|
|
23192
23204
|
<td
|
|
23193
23205
|
class="pf-m-nowrap"
|
|
@@ -23219,6 +23231,7 @@ wrapperTag: div
|
|
|
23219
23231
|
role="cell"
|
|
23220
23232
|
data-label="Example td"
|
|
23221
23233
|
>Test cell 2-8</td>
|
|
23234
|
+
|
|
23222
23235
|
<td
|
|
23223
23236
|
class="pf-m-nowrap"
|
|
23224
23237
|
role="cell"
|
|
@@ -23227,18 +23240,18 @@ wrapperTag: div
|
|
|
23227
23240
|
</tr>
|
|
23228
23241
|
<tr role="row">
|
|
23229
23242
|
<th
|
|
23230
|
-
class="pf-c-table__sticky-
|
|
23243
|
+
class="pf-c-table__sticky-cell pf-m-left"
|
|
23231
23244
|
role="columnheader"
|
|
23232
23245
|
data-label="Example th"
|
|
23233
23246
|
scope="col"
|
|
23234
|
-
style="--pf-c-table__sticky-
|
|
23247
|
+
style="--pf-c-table__sticky-cell--MinWidth: 100px;"
|
|
23235
23248
|
>Fact 3</th>
|
|
23236
23249
|
<th
|
|
23237
|
-
class="pf-m-border-right pf-c-table__sticky-
|
|
23250
|
+
class="pf-m-border-right pf-c-table__sticky-cell pf-m-left"
|
|
23238
23251
|
role="columnheader"
|
|
23239
23252
|
data-label="Example th"
|
|
23240
23253
|
scope="col"
|
|
23241
|
-
style="--pf-c-table__sticky-
|
|
23254
|
+
style="--pf-c-table__sticky-cell--MinWidth: 80px; --pf-c-table__sticky-cell--Left: 100px;"
|
|
23242
23255
|
>State 3</th>
|
|
23243
23256
|
<td
|
|
23244
23257
|
class="pf-m-nowrap"
|
|
@@ -23270,6 +23283,7 @@ wrapperTag: div
|
|
|
23270
23283
|
role="cell"
|
|
23271
23284
|
data-label="Example td"
|
|
23272
23285
|
>Test cell 3-8</td>
|
|
23286
|
+
|
|
23273
23287
|
<td
|
|
23274
23288
|
class="pf-m-nowrap"
|
|
23275
23289
|
role="cell"
|
|
@@ -23278,18 +23292,18 @@ wrapperTag: div
|
|
|
23278
23292
|
</tr>
|
|
23279
23293
|
<tr role="row">
|
|
23280
23294
|
<th
|
|
23281
|
-
class="pf-c-table__sticky-
|
|
23295
|
+
class="pf-c-table__sticky-cell pf-m-left"
|
|
23282
23296
|
role="columnheader"
|
|
23283
23297
|
data-label="Example th"
|
|
23284
23298
|
scope="col"
|
|
23285
|
-
style="--pf-c-table__sticky-
|
|
23299
|
+
style="--pf-c-table__sticky-cell--MinWidth: 100px;"
|
|
23286
23300
|
>Fact 4</th>
|
|
23287
23301
|
<th
|
|
23288
|
-
class="pf-m-border-right pf-c-table__sticky-
|
|
23302
|
+
class="pf-m-border-right pf-c-table__sticky-cell pf-m-left"
|
|
23289
23303
|
role="columnheader"
|
|
23290
23304
|
data-label="Example th"
|
|
23291
23305
|
scope="col"
|
|
23292
|
-
style="--pf-c-table__sticky-
|
|
23306
|
+
style="--pf-c-table__sticky-cell--MinWidth: 80px; --pf-c-table__sticky-cell--Left: 100px;"
|
|
23293
23307
|
>State 4</th>
|
|
23294
23308
|
<td
|
|
23295
23309
|
class="pf-m-nowrap"
|
|
@@ -23321,6 +23335,7 @@ wrapperTag: div
|
|
|
23321
23335
|
role="cell"
|
|
23322
23336
|
data-label="Example td"
|
|
23323
23337
|
>Test cell 4-8</td>
|
|
23338
|
+
|
|
23324
23339
|
<td
|
|
23325
23340
|
class="pf-m-nowrap"
|
|
23326
23341
|
role="cell"
|
|
@@ -23329,18 +23344,18 @@ wrapperTag: div
|
|
|
23329
23344
|
</tr>
|
|
23330
23345
|
<tr role="row">
|
|
23331
23346
|
<th
|
|
23332
|
-
class="pf-c-table__sticky-
|
|
23347
|
+
class="pf-c-table__sticky-cell pf-m-left"
|
|
23333
23348
|
role="columnheader"
|
|
23334
23349
|
data-label="Example th"
|
|
23335
23350
|
scope="col"
|
|
23336
|
-
style="--pf-c-table__sticky-
|
|
23351
|
+
style="--pf-c-table__sticky-cell--MinWidth: 100px;"
|
|
23337
23352
|
>Fact 5</th>
|
|
23338
23353
|
<th
|
|
23339
|
-
class="pf-m-border-right pf-c-table__sticky-
|
|
23354
|
+
class="pf-m-border-right pf-c-table__sticky-cell pf-m-left"
|
|
23340
23355
|
role="columnheader"
|
|
23341
23356
|
data-label="Example th"
|
|
23342
23357
|
scope="col"
|
|
23343
|
-
style="--pf-c-table__sticky-
|
|
23358
|
+
style="--pf-c-table__sticky-cell--MinWidth: 80px; --pf-c-table__sticky-cell--Left: 100px;"
|
|
23344
23359
|
>State 5</th>
|
|
23345
23360
|
<td
|
|
23346
23361
|
class="pf-m-nowrap"
|
|
@@ -23372,6 +23387,7 @@ wrapperTag: div
|
|
|
23372
23387
|
role="cell"
|
|
23373
23388
|
data-label="Example td"
|
|
23374
23389
|
>Test cell 5-8</td>
|
|
23390
|
+
|
|
23375
23391
|
<td
|
|
23376
23392
|
class="pf-m-nowrap"
|
|
23377
23393
|
role="cell"
|
|
@@ -23380,18 +23396,18 @@ wrapperTag: div
|
|
|
23380
23396
|
</tr>
|
|
23381
23397
|
<tr role="row">
|
|
23382
23398
|
<th
|
|
23383
|
-
class="pf-c-table__sticky-
|
|
23399
|
+
class="pf-c-table__sticky-cell pf-m-left"
|
|
23384
23400
|
role="columnheader"
|
|
23385
23401
|
data-label="Example th"
|
|
23386
23402
|
scope="col"
|
|
23387
|
-
style="--pf-c-table__sticky-
|
|
23403
|
+
style="--pf-c-table__sticky-cell--MinWidth: 100px;"
|
|
23388
23404
|
>Fact 6</th>
|
|
23389
23405
|
<th
|
|
23390
|
-
class="pf-m-border-right pf-c-table__sticky-
|
|
23406
|
+
class="pf-m-border-right pf-c-table__sticky-cell pf-m-left"
|
|
23391
23407
|
role="columnheader"
|
|
23392
23408
|
data-label="Example th"
|
|
23393
23409
|
scope="col"
|
|
23394
|
-
style="--pf-c-table__sticky-
|
|
23410
|
+
style="--pf-c-table__sticky-cell--MinWidth: 80px; --pf-c-table__sticky-cell--Left: 100px;"
|
|
23395
23411
|
>State 6</th>
|
|
23396
23412
|
<td
|
|
23397
23413
|
class="pf-m-nowrap"
|
|
@@ -23423,6 +23439,7 @@ wrapperTag: div
|
|
|
23423
23439
|
role="cell"
|
|
23424
23440
|
data-label="Example td"
|
|
23425
23441
|
>Test cell 6-8</td>
|
|
23442
|
+
|
|
23426
23443
|
<td
|
|
23427
23444
|
class="pf-m-nowrap"
|
|
23428
23445
|
role="cell"
|
|
@@ -23431,18 +23448,18 @@ wrapperTag: div
|
|
|
23431
23448
|
</tr>
|
|
23432
23449
|
<tr role="row">
|
|
23433
23450
|
<th
|
|
23434
|
-
class="pf-c-table__sticky-
|
|
23451
|
+
class="pf-c-table__sticky-cell pf-m-left"
|
|
23435
23452
|
role="columnheader"
|
|
23436
23453
|
data-label="Example th"
|
|
23437
23454
|
scope="col"
|
|
23438
|
-
style="--pf-c-table__sticky-
|
|
23455
|
+
style="--pf-c-table__sticky-cell--MinWidth: 100px;"
|
|
23439
23456
|
>Fact 7</th>
|
|
23440
23457
|
<th
|
|
23441
|
-
class="pf-m-border-right pf-c-table__sticky-
|
|
23458
|
+
class="pf-m-border-right pf-c-table__sticky-cell pf-m-left"
|
|
23442
23459
|
role="columnheader"
|
|
23443
23460
|
data-label="Example th"
|
|
23444
23461
|
scope="col"
|
|
23445
|
-
style="--pf-c-table__sticky-
|
|
23462
|
+
style="--pf-c-table__sticky-cell--MinWidth: 80px; --pf-c-table__sticky-cell--Left: 100px;"
|
|
23446
23463
|
>State 7</th>
|
|
23447
23464
|
<td
|
|
23448
23465
|
class="pf-m-nowrap"
|
|
@@ -23474,6 +23491,7 @@ wrapperTag: div
|
|
|
23474
23491
|
role="cell"
|
|
23475
23492
|
data-label="Example td"
|
|
23476
23493
|
>Test cell 7-8</td>
|
|
23494
|
+
|
|
23477
23495
|
<td
|
|
23478
23496
|
class="pf-m-nowrap"
|
|
23479
23497
|
role="cell"
|
|
@@ -23482,18 +23500,18 @@ wrapperTag: div
|
|
|
23482
23500
|
</tr>
|
|
23483
23501
|
<tr role="row">
|
|
23484
23502
|
<th
|
|
23485
|
-
class="pf-c-table__sticky-
|
|
23503
|
+
class="pf-c-table__sticky-cell pf-m-left"
|
|
23486
23504
|
role="columnheader"
|
|
23487
23505
|
data-label="Example th"
|
|
23488
23506
|
scope="col"
|
|
23489
|
-
style="--pf-c-table__sticky-
|
|
23507
|
+
style="--pf-c-table__sticky-cell--MinWidth: 100px;"
|
|
23490
23508
|
>Fact 8</th>
|
|
23491
23509
|
<th
|
|
23492
|
-
class="pf-m-border-right pf-c-table__sticky-
|
|
23510
|
+
class="pf-m-border-right pf-c-table__sticky-cell pf-m-left"
|
|
23493
23511
|
role="columnheader"
|
|
23494
23512
|
data-label="Example th"
|
|
23495
23513
|
scope="col"
|
|
23496
|
-
style="--pf-c-table__sticky-
|
|
23514
|
+
style="--pf-c-table__sticky-cell--MinWidth: 80px; --pf-c-table__sticky-cell--Left: 100px;"
|
|
23497
23515
|
>State 8</th>
|
|
23498
23516
|
<td
|
|
23499
23517
|
class="pf-m-nowrap"
|
|
@@ -23525,6 +23543,7 @@ wrapperTag: div
|
|
|
23525
23543
|
role="cell"
|
|
23526
23544
|
data-label="Example td"
|
|
23527
23545
|
>Test cell 8-8</td>
|
|
23546
|
+
|
|
23528
23547
|
<td
|
|
23529
23548
|
class="pf-m-nowrap"
|
|
23530
23549
|
role="cell"
|
|
@@ -23533,18 +23552,18 @@ wrapperTag: div
|
|
|
23533
23552
|
</tr>
|
|
23534
23553
|
<tr role="row">
|
|
23535
23554
|
<th
|
|
23536
|
-
class="pf-c-table__sticky-
|
|
23555
|
+
class="pf-c-table__sticky-cell pf-m-left"
|
|
23537
23556
|
role="columnheader"
|
|
23538
23557
|
data-label="Example th"
|
|
23539
23558
|
scope="col"
|
|
23540
|
-
style="--pf-c-table__sticky-
|
|
23559
|
+
style="--pf-c-table__sticky-cell--MinWidth: 100px;"
|
|
23541
23560
|
>Fact 9</th>
|
|
23542
23561
|
<th
|
|
23543
|
-
class="pf-m-border-right pf-c-table__sticky-
|
|
23562
|
+
class="pf-m-border-right pf-c-table__sticky-cell pf-m-left"
|
|
23544
23563
|
role="columnheader"
|
|
23545
23564
|
data-label="Example th"
|
|
23546
23565
|
scope="col"
|
|
23547
|
-
style="--pf-c-table__sticky-
|
|
23566
|
+
style="--pf-c-table__sticky-cell--MinWidth: 80px; --pf-c-table__sticky-cell--Left: 100px;"
|
|
23548
23567
|
>State 9</th>
|
|
23549
23568
|
<td
|
|
23550
23569
|
class="pf-m-nowrap"
|
|
@@ -23576,6 +23595,7 @@ wrapperTag: div
|
|
|
23576
23595
|
role="cell"
|
|
23577
23596
|
data-label="Example td"
|
|
23578
23597
|
>Test cell 9-8</td>
|
|
23598
|
+
|
|
23579
23599
|
<td
|
|
23580
23600
|
class="pf-m-nowrap"
|
|
23581
23601
|
role="cell"
|
|
@@ -24867,12 +24887,12 @@ wrapperTag: div
|
|
|
24867
24887
|
<thead>
|
|
24868
24888
|
<tr role="row">
|
|
24869
24889
|
<th
|
|
24870
|
-
class="pf-c-table__sort pf-c-table__sticky-
|
|
24890
|
+
class="pf-c-table__sort pf-c-table__sticky-cell pf-m-left"
|
|
24871
24891
|
role="columnheader"
|
|
24872
24892
|
aria-sort="none"
|
|
24873
24893
|
data-label="Example th"
|
|
24874
24894
|
scope="col"
|
|
24875
|
-
style="--pf-c-table__sticky-
|
|
24895
|
+
style="--pf-c-table__sticky-cell--MinWidth: 100px;"
|
|
24876
24896
|
>
|
|
24877
24897
|
<button class="pf-c-table__button">
|
|
24878
24898
|
<div class="pf-c-table__button-content">
|
|
@@ -24884,12 +24904,12 @@ wrapperTag: div
|
|
|
24884
24904
|
</button>
|
|
24885
24905
|
</th>
|
|
24886
24906
|
<th
|
|
24887
|
-
class="pf-m-border-right pf-c-table__sort pf-c-table__sticky-
|
|
24907
|
+
class="pf-m-border-right pf-c-table__sort pf-c-table__sticky-cell pf-m-left"
|
|
24888
24908
|
role="columnheader"
|
|
24889
24909
|
aria-sort="none"
|
|
24890
24910
|
data-label="Example th"
|
|
24891
24911
|
scope="col"
|
|
24892
|
-
style="--pf-c-table__sticky-
|
|
24912
|
+
style="--pf-c-table__sticky-cell--MinWidth: 120px; --pf-c-table__sticky-cell--Left: 100px;"
|
|
24893
24913
|
>
|
|
24894
24914
|
<button class="pf-c-table__button">
|
|
24895
24915
|
<div class="pf-c-table__button-content">
|
|
@@ -24936,6 +24956,7 @@ wrapperTag: div
|
|
|
24936
24956
|
data-label="Example th"
|
|
24937
24957
|
scope="col"
|
|
24938
24958
|
>Header 8</th>
|
|
24959
|
+
|
|
24939
24960
|
<th
|
|
24940
24961
|
class
|
|
24941
24962
|
role="columnheader"
|
|
@@ -24948,18 +24969,18 @@ wrapperTag: div
|
|
|
24948
24969
|
<tbody role="rowgroup">
|
|
24949
24970
|
<tr role="row">
|
|
24950
24971
|
<th
|
|
24951
|
-
class="pf-c-table__sticky-
|
|
24972
|
+
class="pf-c-table__sticky-cell pf-m-left"
|
|
24952
24973
|
role="columnheader"
|
|
24953
24974
|
data-label="Example th"
|
|
24954
24975
|
scope="col"
|
|
24955
|
-
style="--pf-c-table__sticky-
|
|
24976
|
+
style="--pf-c-table__sticky-cell--MinWidth: 100px;"
|
|
24956
24977
|
>Fact 1</th>
|
|
24957
24978
|
<th
|
|
24958
|
-
class="pf-m-border-right pf-c-table__sticky-
|
|
24979
|
+
class="pf-m-border-right pf-c-table__sticky-cell pf-m-left"
|
|
24959
24980
|
role="columnheader"
|
|
24960
24981
|
data-label="Example th"
|
|
24961
24982
|
scope="col"
|
|
24962
|
-
style="--pf-c-table__sticky-
|
|
24983
|
+
style="--pf-c-table__sticky-cell--MinWidth: 80px; --pf-c-table__sticky-cell--Left: 100px;"
|
|
24963
24984
|
>State 1</th>
|
|
24964
24985
|
<td
|
|
24965
24986
|
class="pf-m-nowrap"
|
|
@@ -24991,6 +25012,7 @@ wrapperTag: div
|
|
|
24991
25012
|
role="cell"
|
|
24992
25013
|
data-label="Example td"
|
|
24993
25014
|
>Test cell 1-8</td>
|
|
25015
|
+
|
|
24994
25016
|
<td
|
|
24995
25017
|
class="pf-m-nowrap"
|
|
24996
25018
|
role="cell"
|
|
@@ -24999,18 +25021,18 @@ wrapperTag: div
|
|
|
24999
25021
|
</tr>
|
|
25000
25022
|
<tr role="row">
|
|
25001
25023
|
<th
|
|
25002
|
-
class="pf-c-table__sticky-
|
|
25024
|
+
class="pf-c-table__sticky-cell pf-m-left"
|
|
25003
25025
|
role="columnheader"
|
|
25004
25026
|
data-label="Example th"
|
|
25005
25027
|
scope="col"
|
|
25006
|
-
style="--pf-c-table__sticky-
|
|
25028
|
+
style="--pf-c-table__sticky-cell--MinWidth: 100px;"
|
|
25007
25029
|
>Fact 2</th>
|
|
25008
25030
|
<th
|
|
25009
|
-
class="pf-m-border-right pf-c-table__sticky-
|
|
25031
|
+
class="pf-m-border-right pf-c-table__sticky-cell pf-m-left"
|
|
25010
25032
|
role="columnheader"
|
|
25011
25033
|
data-label="Example th"
|
|
25012
25034
|
scope="col"
|
|
25013
|
-
style="--pf-c-table__sticky-
|
|
25035
|
+
style="--pf-c-table__sticky-cell--MinWidth: 80px; --pf-c-table__sticky-cell--Left: 100px;"
|
|
25014
25036
|
>State 2</th>
|
|
25015
25037
|
<td
|
|
25016
25038
|
class="pf-m-nowrap"
|
|
@@ -25042,6 +25064,7 @@ wrapperTag: div
|
|
|
25042
25064
|
role="cell"
|
|
25043
25065
|
data-label="Example td"
|
|
25044
25066
|
>Test cell 2-8</td>
|
|
25067
|
+
|
|
25045
25068
|
<td
|
|
25046
25069
|
class="pf-m-nowrap"
|
|
25047
25070
|
role="cell"
|
|
@@ -25050,18 +25073,18 @@ wrapperTag: div
|
|
|
25050
25073
|
</tr>
|
|
25051
25074
|
<tr role="row">
|
|
25052
25075
|
<th
|
|
25053
|
-
class="pf-c-table__sticky-
|
|
25076
|
+
class="pf-c-table__sticky-cell pf-m-left"
|
|
25054
25077
|
role="columnheader"
|
|
25055
25078
|
data-label="Example th"
|
|
25056
25079
|
scope="col"
|
|
25057
|
-
style="--pf-c-table__sticky-
|
|
25080
|
+
style="--pf-c-table__sticky-cell--MinWidth: 100px;"
|
|
25058
25081
|
>Fact 3</th>
|
|
25059
25082
|
<th
|
|
25060
|
-
class="pf-m-border-right pf-c-table__sticky-
|
|
25083
|
+
class="pf-m-border-right pf-c-table__sticky-cell pf-m-left"
|
|
25061
25084
|
role="columnheader"
|
|
25062
25085
|
data-label="Example th"
|
|
25063
25086
|
scope="col"
|
|
25064
|
-
style="--pf-c-table__sticky-
|
|
25087
|
+
style="--pf-c-table__sticky-cell--MinWidth: 80px; --pf-c-table__sticky-cell--Left: 100px;"
|
|
25065
25088
|
>State 3</th>
|
|
25066
25089
|
<td
|
|
25067
25090
|
class="pf-m-nowrap"
|
|
@@ -25093,6 +25116,7 @@ wrapperTag: div
|
|
|
25093
25116
|
role="cell"
|
|
25094
25117
|
data-label="Example td"
|
|
25095
25118
|
>Test cell 3-8</td>
|
|
25119
|
+
|
|
25096
25120
|
<td
|
|
25097
25121
|
class="pf-m-nowrap"
|
|
25098
25122
|
role="cell"
|
|
@@ -25101,18 +25125,18 @@ wrapperTag: div
|
|
|
25101
25125
|
</tr>
|
|
25102
25126
|
<tr role="row">
|
|
25103
25127
|
<th
|
|
25104
|
-
class="pf-c-table__sticky-
|
|
25128
|
+
class="pf-c-table__sticky-cell pf-m-left"
|
|
25105
25129
|
role="columnheader"
|
|
25106
25130
|
data-label="Example th"
|
|
25107
25131
|
scope="col"
|
|
25108
|
-
style="--pf-c-table__sticky-
|
|
25132
|
+
style="--pf-c-table__sticky-cell--MinWidth: 100px;"
|
|
25109
25133
|
>Fact 4</th>
|
|
25110
25134
|
<th
|
|
25111
|
-
class="pf-m-border-right pf-c-table__sticky-
|
|
25135
|
+
class="pf-m-border-right pf-c-table__sticky-cell pf-m-left"
|
|
25112
25136
|
role="columnheader"
|
|
25113
25137
|
data-label="Example th"
|
|
25114
25138
|
scope="col"
|
|
25115
|
-
style="--pf-c-table__sticky-
|
|
25139
|
+
style="--pf-c-table__sticky-cell--MinWidth: 80px; --pf-c-table__sticky-cell--Left: 100px;"
|
|
25116
25140
|
>State 4</th>
|
|
25117
25141
|
<td
|
|
25118
25142
|
class="pf-m-nowrap"
|
|
@@ -25144,6 +25168,7 @@ wrapperTag: div
|
|
|
25144
25168
|
role="cell"
|
|
25145
25169
|
data-label="Example td"
|
|
25146
25170
|
>Test cell 4-8</td>
|
|
25171
|
+
|
|
25147
25172
|
<td
|
|
25148
25173
|
class="pf-m-nowrap"
|
|
25149
25174
|
role="cell"
|
|
@@ -25152,18 +25177,18 @@ wrapperTag: div
|
|
|
25152
25177
|
</tr>
|
|
25153
25178
|
<tr role="row">
|
|
25154
25179
|
<th
|
|
25155
|
-
class="pf-c-table__sticky-
|
|
25180
|
+
class="pf-c-table__sticky-cell pf-m-left"
|
|
25156
25181
|
role="columnheader"
|
|
25157
25182
|
data-label="Example th"
|
|
25158
25183
|
scope="col"
|
|
25159
|
-
style="--pf-c-table__sticky-
|
|
25184
|
+
style="--pf-c-table__sticky-cell--MinWidth: 100px;"
|
|
25160
25185
|
>Fact 5</th>
|
|
25161
25186
|
<th
|
|
25162
|
-
class="pf-m-border-right pf-c-table__sticky-
|
|
25187
|
+
class="pf-m-border-right pf-c-table__sticky-cell pf-m-left"
|
|
25163
25188
|
role="columnheader"
|
|
25164
25189
|
data-label="Example th"
|
|
25165
25190
|
scope="col"
|
|
25166
|
-
style="--pf-c-table__sticky-
|
|
25191
|
+
style="--pf-c-table__sticky-cell--MinWidth: 80px; --pf-c-table__sticky-cell--Left: 100px;"
|
|
25167
25192
|
>State 5</th>
|
|
25168
25193
|
<td
|
|
25169
25194
|
class="pf-m-nowrap"
|
|
@@ -25195,6 +25220,7 @@ wrapperTag: div
|
|
|
25195
25220
|
role="cell"
|
|
25196
25221
|
data-label="Example td"
|
|
25197
25222
|
>Test cell 5-8</td>
|
|
25223
|
+
|
|
25198
25224
|
<td
|
|
25199
25225
|
class="pf-m-nowrap"
|
|
25200
25226
|
role="cell"
|
|
@@ -25203,18 +25229,18 @@ wrapperTag: div
|
|
|
25203
25229
|
</tr>
|
|
25204
25230
|
<tr role="row">
|
|
25205
25231
|
<th
|
|
25206
|
-
class="pf-c-table__sticky-
|
|
25232
|
+
class="pf-c-table__sticky-cell pf-m-left"
|
|
25207
25233
|
role="columnheader"
|
|
25208
25234
|
data-label="Example th"
|
|
25209
25235
|
scope="col"
|
|
25210
|
-
style="--pf-c-table__sticky-
|
|
25236
|
+
style="--pf-c-table__sticky-cell--MinWidth: 100px;"
|
|
25211
25237
|
>Fact 6</th>
|
|
25212
25238
|
<th
|
|
25213
|
-
class="pf-m-border-right pf-c-table__sticky-
|
|
25239
|
+
class="pf-m-border-right pf-c-table__sticky-cell pf-m-left"
|
|
25214
25240
|
role="columnheader"
|
|
25215
25241
|
data-label="Example th"
|
|
25216
25242
|
scope="col"
|
|
25217
|
-
style="--pf-c-table__sticky-
|
|
25243
|
+
style="--pf-c-table__sticky-cell--MinWidth: 80px; --pf-c-table__sticky-cell--Left: 100px;"
|
|
25218
25244
|
>State 6</th>
|
|
25219
25245
|
<td
|
|
25220
25246
|
class="pf-m-nowrap"
|
|
@@ -25246,6 +25272,7 @@ wrapperTag: div
|
|
|
25246
25272
|
role="cell"
|
|
25247
25273
|
data-label="Example td"
|
|
25248
25274
|
>Test cell 6-8</td>
|
|
25275
|
+
|
|
25249
25276
|
<td
|
|
25250
25277
|
class="pf-m-nowrap"
|
|
25251
25278
|
role="cell"
|
|
@@ -25254,18 +25281,18 @@ wrapperTag: div
|
|
|
25254
25281
|
</tr>
|
|
25255
25282
|
<tr role="row">
|
|
25256
25283
|
<th
|
|
25257
|
-
class="pf-c-table__sticky-
|
|
25284
|
+
class="pf-c-table__sticky-cell pf-m-left"
|
|
25258
25285
|
role="columnheader"
|
|
25259
25286
|
data-label="Example th"
|
|
25260
25287
|
scope="col"
|
|
25261
|
-
style="--pf-c-table__sticky-
|
|
25288
|
+
style="--pf-c-table__sticky-cell--MinWidth: 100px;"
|
|
25262
25289
|
>Fact 7</th>
|
|
25263
25290
|
<th
|
|
25264
|
-
class="pf-m-border-right pf-c-table__sticky-
|
|
25291
|
+
class="pf-m-border-right pf-c-table__sticky-cell pf-m-left"
|
|
25265
25292
|
role="columnheader"
|
|
25266
25293
|
data-label="Example th"
|
|
25267
25294
|
scope="col"
|
|
25268
|
-
style="--pf-c-table__sticky-
|
|
25295
|
+
style="--pf-c-table__sticky-cell--MinWidth: 80px; --pf-c-table__sticky-cell--Left: 100px;"
|
|
25269
25296
|
>State 7</th>
|
|
25270
25297
|
<td
|
|
25271
25298
|
class="pf-m-nowrap"
|
|
@@ -25297,6 +25324,7 @@ wrapperTag: div
|
|
|
25297
25324
|
role="cell"
|
|
25298
25325
|
data-label="Example td"
|
|
25299
25326
|
>Test cell 7-8</td>
|
|
25327
|
+
|
|
25300
25328
|
<td
|
|
25301
25329
|
class="pf-m-nowrap"
|
|
25302
25330
|
role="cell"
|
|
@@ -25305,18 +25333,18 @@ wrapperTag: div
|
|
|
25305
25333
|
</tr>
|
|
25306
25334
|
<tr role="row">
|
|
25307
25335
|
<th
|
|
25308
|
-
class="pf-c-table__sticky-
|
|
25336
|
+
class="pf-c-table__sticky-cell pf-m-left"
|
|
25309
25337
|
role="columnheader"
|
|
25310
25338
|
data-label="Example th"
|
|
25311
25339
|
scope="col"
|
|
25312
|
-
style="--pf-c-table__sticky-
|
|
25340
|
+
style="--pf-c-table__sticky-cell--MinWidth: 100px;"
|
|
25313
25341
|
>Fact 8</th>
|
|
25314
25342
|
<th
|
|
25315
|
-
class="pf-m-border-right pf-c-table__sticky-
|
|
25343
|
+
class="pf-m-border-right pf-c-table__sticky-cell pf-m-left"
|
|
25316
25344
|
role="columnheader"
|
|
25317
25345
|
data-label="Example th"
|
|
25318
25346
|
scope="col"
|
|
25319
|
-
style="--pf-c-table__sticky-
|
|
25347
|
+
style="--pf-c-table__sticky-cell--MinWidth: 80px; --pf-c-table__sticky-cell--Left: 100px;"
|
|
25320
25348
|
>State 8</th>
|
|
25321
25349
|
<td
|
|
25322
25350
|
class="pf-m-nowrap"
|
|
@@ -25348,6 +25376,7 @@ wrapperTag: div
|
|
|
25348
25376
|
role="cell"
|
|
25349
25377
|
data-label="Example td"
|
|
25350
25378
|
>Test cell 8-8</td>
|
|
25379
|
+
|
|
25351
25380
|
<td
|
|
25352
25381
|
class="pf-m-nowrap"
|
|
25353
25382
|
role="cell"
|
|
@@ -25356,18 +25385,18 @@ wrapperTag: div
|
|
|
25356
25385
|
</tr>
|
|
25357
25386
|
<tr role="row">
|
|
25358
25387
|
<th
|
|
25359
|
-
class="pf-c-table__sticky-
|
|
25388
|
+
class="pf-c-table__sticky-cell pf-m-left"
|
|
25360
25389
|
role="columnheader"
|
|
25361
25390
|
data-label="Example th"
|
|
25362
25391
|
scope="col"
|
|
25363
|
-
style="--pf-c-table__sticky-
|
|
25392
|
+
style="--pf-c-table__sticky-cell--MinWidth: 100px;"
|
|
25364
25393
|
>Fact 9</th>
|
|
25365
25394
|
<th
|
|
25366
|
-
class="pf-m-border-right pf-c-table__sticky-
|
|
25395
|
+
class="pf-m-border-right pf-c-table__sticky-cell pf-m-left"
|
|
25367
25396
|
role="columnheader"
|
|
25368
25397
|
data-label="Example th"
|
|
25369
25398
|
scope="col"
|
|
25370
|
-
style="--pf-c-table__sticky-
|
|
25399
|
+
style="--pf-c-table__sticky-cell--MinWidth: 80px; --pf-c-table__sticky-cell--Left: 100px;"
|
|
25371
25400
|
>State 9</th>
|
|
25372
25401
|
<td
|
|
25373
25402
|
class="pf-m-nowrap"
|
|
@@ -25399,6 +25428,7 @@ wrapperTag: div
|
|
|
25399
25428
|
role="cell"
|
|
25400
25429
|
data-label="Example td"
|
|
25401
25430
|
>Test cell 9-8</td>
|
|
25431
|
+
|
|
25402
25432
|
<td
|
|
25403
25433
|
class="pf-m-nowrap"
|
|
25404
25434
|
role="cell"
|
|
@@ -25511,6 +25541,1819 @@ wrapperTag: div
|
|
|
25511
25541
|
|
|
25512
25542
|
```
|
|
25513
25543
|
|
|
25544
|
+
### Sticky header and last column
|
|
25545
|
+
|
|
25546
|
+
```html isFullscreen
|
|
25547
|
+
<div class="pf-c-page" id="sticky-header-and-multiple columns-demo">
|
|
25548
|
+
<div class="pf-c-skip-to-content">
|
|
25549
|
+
<a
|
|
25550
|
+
class="pf-c-button pf-m-primary"
|
|
25551
|
+
href="#main-content-sticky-header-and-multiple columns-demo"
|
|
25552
|
+
>Skip to content</a>
|
|
25553
|
+
</div>
|
|
25554
|
+
<header
|
|
25555
|
+
class="pf-c-masthead"
|
|
25556
|
+
id="sticky-header-and-multiple columns-demo-masthead"
|
|
25557
|
+
>
|
|
25558
|
+
<span class="pf-c-masthead__toggle">
|
|
25559
|
+
<button
|
|
25560
|
+
class="pf-c-button pf-m-plain"
|
|
25561
|
+
type="button"
|
|
25562
|
+
aria-label="Global navigation"
|
|
25563
|
+
>
|
|
25564
|
+
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
25565
|
+
</button>
|
|
25566
|
+
</span>
|
|
25567
|
+
<div class="pf-c-masthead__main">
|
|
25568
|
+
<a class="pf-c-masthead__brand" href="#">
|
|
25569
|
+
<picture
|
|
25570
|
+
class="pf-c-brand pf-m-picture"
|
|
25571
|
+
style="--pf-c-brand--Width: 180px; --pf-c-brand--Width-on-md: 180px; --pf-c-brand--Width-on-2xl: 220px;"
|
|
25572
|
+
>
|
|
25573
|
+
<source
|
|
25574
|
+
media="(min-width: 768px)"
|
|
25575
|
+
srcset="/assets/images/logo__pf--reverse-on-md.svg"
|
|
25576
|
+
/>
|
|
25577
|
+
<source srcset="/assets/images/logo__pf--reverse--base.svg" />
|
|
25578
|
+
<img
|
|
25579
|
+
src="/assets/images/logo__pf--reverse--base.png"
|
|
25580
|
+
alt="Fallback patternFly default logo"
|
|
25581
|
+
/>
|
|
25582
|
+
</picture>
|
|
25583
|
+
</a>
|
|
25584
|
+
</div>
|
|
25585
|
+
<div class="pf-c-masthead__content">
|
|
25586
|
+
<div
|
|
25587
|
+
class="pf-c-toolbar pf-m-full-height pf-m-static"
|
|
25588
|
+
id="sticky-header-and-multiple columns-demo-masthead-toolbar"
|
|
25589
|
+
>
|
|
25590
|
+
<div class="pf-c-toolbar__content">
|
|
25591
|
+
<div class="pf-c-toolbar__content-section">
|
|
25592
|
+
<div
|
|
25593
|
+
class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
|
|
25594
|
+
>
|
|
25595
|
+
<div
|
|
25596
|
+
class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
|
|
25597
|
+
>
|
|
25598
|
+
<div class="pf-c-toolbar__item">
|
|
25599
|
+
<nav
|
|
25600
|
+
class="pf-c-app-launcher"
|
|
25601
|
+
aria-label="Application launcher"
|
|
25602
|
+
id="sticky-header-and-multiple columns-demo-masthead-application-launcher"
|
|
25603
|
+
>
|
|
25604
|
+
<button
|
|
25605
|
+
class="pf-c-app-launcher__toggle"
|
|
25606
|
+
type="button"
|
|
25607
|
+
id="sticky-header-and-multiple columns-demo-masthead-application-launcher-button"
|
|
25608
|
+
aria-expanded="false"
|
|
25609
|
+
aria-label="Application launcher"
|
|
25610
|
+
>
|
|
25611
|
+
<i class="fas fa-th" aria-hidden="true"></i>
|
|
25612
|
+
</button>
|
|
25613
|
+
<div
|
|
25614
|
+
class="pf-c-app-launcher__menu pf-m-align-right"
|
|
25615
|
+
hidden
|
|
25616
|
+
>
|
|
25617
|
+
<div class="pf-c-app-launcher__menu-search">
|
|
25618
|
+
<div class="pf-c-search-input">
|
|
25619
|
+
<div class="pf-c-search-input__bar">
|
|
25620
|
+
<span class="pf-c-search-input__text">
|
|
25621
|
+
<span class="pf-c-search-input__icon">
|
|
25622
|
+
<i
|
|
25623
|
+
class="fas fa-search fa-fw"
|
|
25624
|
+
aria-hidden="true"
|
|
25625
|
+
></i>
|
|
25626
|
+
</span>
|
|
25627
|
+
<input
|
|
25628
|
+
class="pf-c-search-input__text-input"
|
|
25629
|
+
type="text"
|
|
25630
|
+
placeholder="Filter by name"
|
|
25631
|
+
aria-label="Filter by name"
|
|
25632
|
+
/>
|
|
25633
|
+
</span>
|
|
25634
|
+
</div>
|
|
25635
|
+
</div>
|
|
25636
|
+
</div>
|
|
25637
|
+
<section class="pf-c-app-launcher__group">
|
|
25638
|
+
<h1 class="pf-c-app-launcher__group-title">Favorites</h1>
|
|
25639
|
+
<ul role="list">
|
|
25640
|
+
<li
|
|
25641
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
|
|
25642
|
+
>
|
|
25643
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
25644
|
+
Link 1
|
|
25645
|
+
<span
|
|
25646
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
25647
|
+
>
|
|
25648
|
+
<i
|
|
25649
|
+
class="fas fa-external-link-alt"
|
|
25650
|
+
aria-hidden="true"
|
|
25651
|
+
></i>
|
|
25652
|
+
</span>
|
|
25653
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
25654
|
+
</a>
|
|
25655
|
+
<button
|
|
25656
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
25657
|
+
type="button"
|
|
25658
|
+
aria-label="Favorite"
|
|
25659
|
+
>
|
|
25660
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
25661
|
+
</button>
|
|
25662
|
+
</li>
|
|
25663
|
+
<li
|
|
25664
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external"
|
|
25665
|
+
>
|
|
25666
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
25667
|
+
Link 2
|
|
25668
|
+
<span
|
|
25669
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
25670
|
+
>
|
|
25671
|
+
<i
|
|
25672
|
+
class="fas fa-external-link-alt"
|
|
25673
|
+
aria-hidden="true"
|
|
25674
|
+
></i>
|
|
25675
|
+
</span>
|
|
25676
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
25677
|
+
</a>
|
|
25678
|
+
<button
|
|
25679
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
25680
|
+
type="button"
|
|
25681
|
+
aria-label="Favorite"
|
|
25682
|
+
>
|
|
25683
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
25684
|
+
</button>
|
|
25685
|
+
</li>
|
|
25686
|
+
</ul>
|
|
25687
|
+
</section>
|
|
25688
|
+
<hr class="pf-c-divider" />
|
|
25689
|
+
<section class="pf-c-app-launcher__group">
|
|
25690
|
+
<h1 class="pf-c-app-launcher__group-title">Group 1</h1>
|
|
25691
|
+
<ul role="list">
|
|
25692
|
+
<li
|
|
25693
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external"
|
|
25694
|
+
>
|
|
25695
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
25696
|
+
Link 1
|
|
25697
|
+
<span
|
|
25698
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
25699
|
+
>
|
|
25700
|
+
<i
|
|
25701
|
+
class="fas fa-external-link-alt"
|
|
25702
|
+
aria-hidden="true"
|
|
25703
|
+
></i>
|
|
25704
|
+
</span>
|
|
25705
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
25706
|
+
</a>
|
|
25707
|
+
<button
|
|
25708
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
25709
|
+
type="button"
|
|
25710
|
+
aria-label="Favorite"
|
|
25711
|
+
>
|
|
25712
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
25713
|
+
</button>
|
|
25714
|
+
</li>
|
|
25715
|
+
<li
|
|
25716
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
|
|
25717
|
+
>
|
|
25718
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
25719
|
+
Link 2
|
|
25720
|
+
<span
|
|
25721
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
25722
|
+
>
|
|
25723
|
+
<i
|
|
25724
|
+
class="fas fa-external-link-alt"
|
|
25725
|
+
aria-hidden="true"
|
|
25726
|
+
></i>
|
|
25727
|
+
</span>
|
|
25728
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
25729
|
+
</a>
|
|
25730
|
+
<button
|
|
25731
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
25732
|
+
type="button"
|
|
25733
|
+
aria-label="Favorite"
|
|
25734
|
+
>
|
|
25735
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
25736
|
+
</button>
|
|
25737
|
+
</li>
|
|
25738
|
+
</ul>
|
|
25739
|
+
</section>
|
|
25740
|
+
</div>
|
|
25741
|
+
</nav>
|
|
25742
|
+
</div>
|
|
25743
|
+
<div class="pf-c-toolbar__item">
|
|
25744
|
+
<div class="pf-c-dropdown">
|
|
25745
|
+
<button
|
|
25746
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
25747
|
+
id="sticky-header-and-multiple columns-demo-masthead-settings-button"
|
|
25748
|
+
aria-expanded="false"
|
|
25749
|
+
type="button"
|
|
25750
|
+
aria-label="Settings"
|
|
25751
|
+
>
|
|
25752
|
+
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
25753
|
+
</button>
|
|
25754
|
+
<ul
|
|
25755
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
25756
|
+
aria-labelledby="sticky-header-and-multiple columns-demo-masthead-settings-button"
|
|
25757
|
+
hidden
|
|
25758
|
+
>
|
|
25759
|
+
<li>
|
|
25760
|
+
<button
|
|
25761
|
+
class="pf-c-dropdown__menu-item"
|
|
25762
|
+
type="button"
|
|
25763
|
+
>Settings</button>
|
|
25764
|
+
</li>
|
|
25765
|
+
<li>
|
|
25766
|
+
<button
|
|
25767
|
+
class="pf-c-dropdown__menu-item"
|
|
25768
|
+
type="button"
|
|
25769
|
+
>Use the beta release</button>
|
|
25770
|
+
</li>
|
|
25771
|
+
</ul>
|
|
25772
|
+
</div>
|
|
25773
|
+
</div>
|
|
25774
|
+
<div class="pf-c-toolbar__item">
|
|
25775
|
+
<div class="pf-c-dropdown">
|
|
25776
|
+
<button
|
|
25777
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
25778
|
+
id="sticky-header-and-multiple columns-demo-masthead-help-button"
|
|
25779
|
+
aria-expanded="false"
|
|
25780
|
+
type="button"
|
|
25781
|
+
aria-label="Help"
|
|
25782
|
+
>
|
|
25783
|
+
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
25784
|
+
</button>
|
|
25785
|
+
<ul
|
|
25786
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
25787
|
+
aria-labelledby="sticky-header-and-multiple columns-demo-masthead-help-button"
|
|
25788
|
+
hidden
|
|
25789
|
+
>
|
|
25790
|
+
<li>
|
|
25791
|
+
<button
|
|
25792
|
+
class="pf-c-dropdown__menu-item"
|
|
25793
|
+
type="button"
|
|
25794
|
+
>Support options</button>
|
|
25795
|
+
</li>
|
|
25796
|
+
<li>
|
|
25797
|
+
<button
|
|
25798
|
+
class="pf-c-dropdown__menu-item"
|
|
25799
|
+
type="button"
|
|
25800
|
+
>Open support case</button>
|
|
25801
|
+
</li>
|
|
25802
|
+
<li>
|
|
25803
|
+
<button
|
|
25804
|
+
class="pf-c-dropdown__menu-item"
|
|
25805
|
+
type="button"
|
|
25806
|
+
>API documentation</button>
|
|
25807
|
+
</li>
|
|
25808
|
+
</ul>
|
|
25809
|
+
</div>
|
|
25810
|
+
</div>
|
|
25811
|
+
</div>
|
|
25812
|
+
<div class="pf-c-toolbar__item pf-m-hidden-on-lg">
|
|
25813
|
+
<div class="pf-c-dropdown">
|
|
25814
|
+
<button
|
|
25815
|
+
class="pf-c-menu-toggle pf-m-plain"
|
|
25816
|
+
type="button"
|
|
25817
|
+
aria-expanded="false"
|
|
25818
|
+
aria-label="Actions"
|
|
25819
|
+
>
|
|
25820
|
+
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
25821
|
+
</button>
|
|
25822
|
+
<div class="pf-c-menu pf-m-drilldown pf-m-align-right" hidden>
|
|
25823
|
+
<div class="pf-c-menu__content">
|
|
25824
|
+
<section class="pf-c-menu__group pf-m-hidden-on-sm">
|
|
25825
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
25826
|
+
<li
|
|
25827
|
+
class="pf-c-menu__list-item pf-m-disabled"
|
|
25828
|
+
role="none"
|
|
25829
|
+
>
|
|
25830
|
+
<button
|
|
25831
|
+
class="pf-c-menu__item"
|
|
25832
|
+
type="button"
|
|
25833
|
+
disabled
|
|
25834
|
+
role="menuitem"
|
|
25835
|
+
>
|
|
25836
|
+
<span class="pf-c-menu__item-description">
|
|
25837
|
+
<div class="pf-u-font-size-sm">Username:</div>
|
|
25838
|
+
<div class="pf-u-font-size-md">ned_username</div>
|
|
25839
|
+
</span>
|
|
25840
|
+
</button>
|
|
25841
|
+
</li>
|
|
25842
|
+
<li
|
|
25843
|
+
class="pf-c-menu__list-item pf-m-disabled"
|
|
25844
|
+
role="none"
|
|
25845
|
+
>
|
|
25846
|
+
<button
|
|
25847
|
+
class="pf-c-menu__item"
|
|
25848
|
+
type="button"
|
|
25849
|
+
disabled
|
|
25850
|
+
role="menuitem"
|
|
25851
|
+
>
|
|
25852
|
+
<span class="pf-c-menu__item-description">
|
|
25853
|
+
<div class="pf-u-font-size-sm">Account number:</div>
|
|
25854
|
+
<div class="pf-u-font-size-md">123456789</div>
|
|
25855
|
+
</span>
|
|
25856
|
+
</button>
|
|
25857
|
+
</li>
|
|
25858
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
25859
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
25860
|
+
<button
|
|
25861
|
+
class="pf-c-menu__item"
|
|
25862
|
+
type="button"
|
|
25863
|
+
role="menuitem"
|
|
25864
|
+
>
|
|
25865
|
+
<span class="pf-c-menu__item-main">
|
|
25866
|
+
<span class="pf-c-menu__item-text">My profile</span>
|
|
25867
|
+
</span>
|
|
25868
|
+
</button>
|
|
25869
|
+
</li>
|
|
25870
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
25871
|
+
<button
|
|
25872
|
+
class="pf-c-menu__item"
|
|
25873
|
+
type="button"
|
|
25874
|
+
role="menuitem"
|
|
25875
|
+
>
|
|
25876
|
+
<span class="pf-c-menu__item-main">
|
|
25877
|
+
<span
|
|
25878
|
+
class="pf-c-menu__item-text"
|
|
25879
|
+
>User management</span>
|
|
25880
|
+
</span>
|
|
25881
|
+
</button>
|
|
25882
|
+
</li>
|
|
25883
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
25884
|
+
<button
|
|
25885
|
+
class="pf-c-menu__item"
|
|
25886
|
+
type="button"
|
|
25887
|
+
role="menuitem"
|
|
25888
|
+
>
|
|
25889
|
+
<span class="pf-c-menu__item-main">
|
|
25890
|
+
<span class="pf-c-menu__item-text">Logout</span>
|
|
25891
|
+
</span>
|
|
25892
|
+
</button>
|
|
25893
|
+
</li>
|
|
25894
|
+
</ul>
|
|
25895
|
+
</section>
|
|
25896
|
+
<hr class="pf-c-divider pf-m-hidden-on-sm" />
|
|
25897
|
+
<section class="pf-c-menu__group">
|
|
25898
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
25899
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
25900
|
+
<button
|
|
25901
|
+
class="pf-c-menu__item"
|
|
25902
|
+
type="button"
|
|
25903
|
+
role="menuitem"
|
|
25904
|
+
aria-expanded="false"
|
|
25905
|
+
>
|
|
25906
|
+
<span class="pf-c-menu__item-main">
|
|
25907
|
+
<span class="pf-c-menu__item-icon">
|
|
25908
|
+
<i
|
|
25909
|
+
class="fas fa-fw fa-cog"
|
|
25910
|
+
aria-hidden="true"
|
|
25911
|
+
></i>
|
|
25912
|
+
</span>
|
|
25913
|
+
<span class="pf-c-menu__item-text">Settings</span>
|
|
25914
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
25915
|
+
<i class="fas fa-angle-right"></i>
|
|
25916
|
+
</span>
|
|
25917
|
+
</span>
|
|
25918
|
+
</button>
|
|
25919
|
+
<div class="pf-c-menu" hidden>
|
|
25920
|
+
<div class="pf-c-menu__content">
|
|
25921
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
25922
|
+
<li
|
|
25923
|
+
class="pf-c-menu__list-item pf-m-drill-up"
|
|
25924
|
+
role="none"
|
|
25925
|
+
>
|
|
25926
|
+
<button
|
|
25927
|
+
class="pf-c-menu__item"
|
|
25928
|
+
type="button"
|
|
25929
|
+
role="menuitem"
|
|
25930
|
+
>
|
|
25931
|
+
<span class="pf-c-menu__item-main">
|
|
25932
|
+
<span
|
|
25933
|
+
class="pf-c-menu__item-toggle-icon"
|
|
25934
|
+
>
|
|
25935
|
+
<i class="fas fa-angle-left"></i>
|
|
25936
|
+
</span>
|
|
25937
|
+
<span class="pf-c-menu__item-icon">
|
|
25938
|
+
<i
|
|
25939
|
+
class="fas fa-fw fa-cog"
|
|
25940
|
+
aria-hidden="true"
|
|
25941
|
+
></i>
|
|
25942
|
+
</span>
|
|
25943
|
+
<span
|
|
25944
|
+
class="pf-c-menu__item-text"
|
|
25945
|
+
>Settings</span>
|
|
25946
|
+
</span>
|
|
25947
|
+
</button>
|
|
25948
|
+
</li>
|
|
25949
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
25950
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
25951
|
+
<a
|
|
25952
|
+
class="pf-c-menu__item"
|
|
25953
|
+
href="#"
|
|
25954
|
+
role="menuitem"
|
|
25955
|
+
>
|
|
25956
|
+
<span class="pf-c-menu__item-main">
|
|
25957
|
+
<span
|
|
25958
|
+
class="pf-c-menu__item-text"
|
|
25959
|
+
>Customer support</span>
|
|
25960
|
+
</span>
|
|
25961
|
+
</a>
|
|
25962
|
+
</li>
|
|
25963
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
25964
|
+
<a
|
|
25965
|
+
class="pf-c-menu__item"
|
|
25966
|
+
href="#"
|
|
25967
|
+
role="menuitem"
|
|
25968
|
+
>
|
|
25969
|
+
<span class="pf-c-menu__item-main">
|
|
25970
|
+
<span class="pf-c-menu__item-text">About</span>
|
|
25971
|
+
</span>
|
|
25972
|
+
</a>
|
|
25973
|
+
</li>
|
|
25974
|
+
</ul>
|
|
25975
|
+
</div>
|
|
25976
|
+
</div>
|
|
25977
|
+
</li>
|
|
25978
|
+
|
|
25979
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
25980
|
+
<button
|
|
25981
|
+
class="pf-c-menu__item"
|
|
25982
|
+
type="button"
|
|
25983
|
+
role="menuitem"
|
|
25984
|
+
aria-expanded="false"
|
|
25985
|
+
>
|
|
25986
|
+
<span class="pf-c-menu__item-main">
|
|
25987
|
+
<span class="pf-c-menu__item-icon">
|
|
25988
|
+
<i
|
|
25989
|
+
class="fas fa-fw fa-pf-icon pf-icon-help"
|
|
25990
|
+
aria-hidden="true"
|
|
25991
|
+
></i>
|
|
25992
|
+
</span>
|
|
25993
|
+
<span class="pf-c-menu__item-text">Help</span>
|
|
25994
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
25995
|
+
<i class="fas fa-angle-right"></i>
|
|
25996
|
+
</span>
|
|
25997
|
+
</span>
|
|
25998
|
+
</button>
|
|
25999
|
+
<div class="pf-c-menu" hidden>
|
|
26000
|
+
<div class="pf-c-menu__content">
|
|
26001
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
26002
|
+
<li
|
|
26003
|
+
class="pf-c-menu__list-item pf-m-drill-up"
|
|
26004
|
+
role="none"
|
|
26005
|
+
>
|
|
26006
|
+
<button
|
|
26007
|
+
class="pf-c-menu__item"
|
|
26008
|
+
type="button"
|
|
26009
|
+
role="menuitem"
|
|
26010
|
+
>
|
|
26011
|
+
<span class="pf-c-menu__item-main">
|
|
26012
|
+
<span
|
|
26013
|
+
class="pf-c-menu__item-toggle-icon"
|
|
26014
|
+
>
|
|
26015
|
+
<i class="fas fa-angle-left"></i>
|
|
26016
|
+
</span>
|
|
26017
|
+
<span class="pf-c-menu__item-icon">
|
|
26018
|
+
<i
|
|
26019
|
+
class="fas fa-fw fa-pf-icon pf-icon-help"
|
|
26020
|
+
aria-hidden="true"
|
|
26021
|
+
></i>
|
|
26022
|
+
</span>
|
|
26023
|
+
<span class="pf-c-menu__item-text">Help</span>
|
|
26024
|
+
</span>
|
|
26025
|
+
</button>
|
|
26026
|
+
</li>
|
|
26027
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
26028
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
26029
|
+
<a
|
|
26030
|
+
class="pf-c-menu__item"
|
|
26031
|
+
href="#"
|
|
26032
|
+
role="menuitem"
|
|
26033
|
+
>
|
|
26034
|
+
<span class="pf-c-menu__item-main">
|
|
26035
|
+
<span
|
|
26036
|
+
class="pf-c-menu__item-text"
|
|
26037
|
+
>Support options</span>
|
|
26038
|
+
</span>
|
|
26039
|
+
</a>
|
|
26040
|
+
</li>
|
|
26041
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
26042
|
+
<a
|
|
26043
|
+
class="pf-c-menu__item"
|
|
26044
|
+
href="#"
|
|
26045
|
+
role="menuitem"
|
|
26046
|
+
>
|
|
26047
|
+
<span class="pf-c-menu__item-main">
|
|
26048
|
+
<span
|
|
26049
|
+
class="pf-c-menu__item-text"
|
|
26050
|
+
>Open support case</span>
|
|
26051
|
+
</span>
|
|
26052
|
+
</a>
|
|
26053
|
+
</li>
|
|
26054
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
26055
|
+
<a
|
|
26056
|
+
class="pf-c-menu__item"
|
|
26057
|
+
href="#"
|
|
26058
|
+
role="menuitem"
|
|
26059
|
+
>
|
|
26060
|
+
<span class="pf-c-menu__item-main">
|
|
26061
|
+
<span
|
|
26062
|
+
class="pf-c-menu__item-text"
|
|
26063
|
+
>API documentation</span>
|
|
26064
|
+
</span>
|
|
26065
|
+
</a>
|
|
26066
|
+
</li>
|
|
26067
|
+
</ul>
|
|
26068
|
+
</div>
|
|
26069
|
+
</div>
|
|
26070
|
+
</li>
|
|
26071
|
+
|
|
26072
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
26073
|
+
<button
|
|
26074
|
+
class="pf-c-menu__item"
|
|
26075
|
+
type="button"
|
|
26076
|
+
role="menuitem"
|
|
26077
|
+
>
|
|
26078
|
+
<span class="pf-c-menu__item-main">
|
|
26079
|
+
<span class="pf-c-menu__item-icon">
|
|
26080
|
+
<i class="fas fa-fw fa-th" aria-hidden="true"></i>
|
|
26081
|
+
</span>
|
|
26082
|
+
<span
|
|
26083
|
+
class="pf-c-menu__item-text"
|
|
26084
|
+
>Application launcher</span>
|
|
26085
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
26086
|
+
<i class="fas fa-angle-right"></i>
|
|
26087
|
+
</span>
|
|
26088
|
+
</span>
|
|
26089
|
+
</button>
|
|
26090
|
+
<div class="pf-c-menu" hidden>
|
|
26091
|
+
<div class="pf-c-menu__header">
|
|
26092
|
+
<button
|
|
26093
|
+
class="pf-c-menu__item"
|
|
26094
|
+
type="button"
|
|
26095
|
+
role="menuitem"
|
|
26096
|
+
>
|
|
26097
|
+
<span class="pf-c-menu__item-main">
|
|
26098
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
26099
|
+
<i class="fas fa-angle-left"></i>
|
|
26100
|
+
</span>
|
|
26101
|
+
<span class="pf-c-menu__item-icon">
|
|
26102
|
+
<i
|
|
26103
|
+
class="fas fa-fw fa-th"
|
|
26104
|
+
aria-hidden="true"
|
|
26105
|
+
></i>
|
|
26106
|
+
</span>
|
|
26107
|
+
<span
|
|
26108
|
+
class="pf-c-menu__item-text"
|
|
26109
|
+
>Application launcher</span>
|
|
26110
|
+
</span>
|
|
26111
|
+
</button>
|
|
26112
|
+
</div>
|
|
26113
|
+
<div class="pf-c-menu__search">
|
|
26114
|
+
<div class="pf-c-menu__search-input">
|
|
26115
|
+
<div class="pf-c-search-input">
|
|
26116
|
+
<div class="pf-c-search-input__bar">
|
|
26117
|
+
<span class="pf-c-search-input__text">
|
|
26118
|
+
<span class="pf-c-search-input__icon">
|
|
26119
|
+
<i
|
|
26120
|
+
class="fas fa-search fa-fw"
|
|
26121
|
+
aria-hidden="true"
|
|
26122
|
+
></i>
|
|
26123
|
+
</span>
|
|
26124
|
+
<input
|
|
26125
|
+
class="pf-c-search-input__text-input"
|
|
26126
|
+
type="text"
|
|
26127
|
+
placeholder="Search"
|
|
26128
|
+
aria-label="Search"
|
|
26129
|
+
/>
|
|
26130
|
+
</span>
|
|
26131
|
+
</div>
|
|
26132
|
+
</div>
|
|
26133
|
+
</div>
|
|
26134
|
+
</div>
|
|
26135
|
+
<hr class="pf-c-divider" />
|
|
26136
|
+
<section class="pf-c-menu__group">
|
|
26137
|
+
<h1 class="pf-c-menu__group-title">Favorites</h1>
|
|
26138
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
26139
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
26140
|
+
<a
|
|
26141
|
+
class="pf-c-menu__item"
|
|
26142
|
+
href="#"
|
|
26143
|
+
role="menuitem"
|
|
26144
|
+
>
|
|
26145
|
+
<span class="pf-c-menu__item-main">
|
|
26146
|
+
<span
|
|
26147
|
+
class="pf-c-menu__item-text"
|
|
26148
|
+
>Link 1</span>
|
|
26149
|
+
</span>
|
|
26150
|
+
</a>
|
|
26151
|
+
<button
|
|
26152
|
+
class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
|
|
26153
|
+
type="button"
|
|
26154
|
+
aria-label="Starred"
|
|
26155
|
+
>
|
|
26156
|
+
<span class="pf-c-menu__item-action-icon">
|
|
26157
|
+
<i
|
|
26158
|
+
class="fas fa-star"
|
|
26159
|
+
aria-hidden="true"
|
|
26160
|
+
></i>
|
|
26161
|
+
</span>
|
|
26162
|
+
</button>
|
|
26163
|
+
</li>
|
|
26164
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
26165
|
+
<a
|
|
26166
|
+
class="pf-c-menu__item"
|
|
26167
|
+
href="#"
|
|
26168
|
+
role="menuitem"
|
|
26169
|
+
target="_blank"
|
|
26170
|
+
>
|
|
26171
|
+
<span class="pf-c-menu__item-main">
|
|
26172
|
+
<span
|
|
26173
|
+
class="pf-c-menu__item-text"
|
|
26174
|
+
>Link 2</span>
|
|
26175
|
+
<span
|
|
26176
|
+
class="pf-c-menu__item-external-icon"
|
|
26177
|
+
>
|
|
26178
|
+
<i
|
|
26179
|
+
class="fas fa-external-link-alt"
|
|
26180
|
+
aria-hidden="true"
|
|
26181
|
+
></i>
|
|
26182
|
+
</span>
|
|
26183
|
+
<span
|
|
26184
|
+
class="pf-screen-reader"
|
|
26185
|
+
>(opens new window)</span>
|
|
26186
|
+
</span>
|
|
26187
|
+
</a>
|
|
26188
|
+
<button
|
|
26189
|
+
class="pf-c-menu__item-action pf-m-favorite"
|
|
26190
|
+
type="button"
|
|
26191
|
+
aria-label="Not starred"
|
|
26192
|
+
>
|
|
26193
|
+
<span class="pf-c-menu__item-action-icon">
|
|
26194
|
+
<i
|
|
26195
|
+
class="fas fa-star"
|
|
26196
|
+
aria-hidden="true"
|
|
26197
|
+
></i>
|
|
26198
|
+
</span>
|
|
26199
|
+
</button>
|
|
26200
|
+
</li>
|
|
26201
|
+
</ul>
|
|
26202
|
+
</section>
|
|
26203
|
+
<hr class="pf-c-divider" />
|
|
26204
|
+
<section class="pf-c-menu__group">
|
|
26205
|
+
<h1 class="pf-c-menu__group-title">Group 1</h1>
|
|
26206
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
26207
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
26208
|
+
<a
|
|
26209
|
+
class="pf-c-menu__item"
|
|
26210
|
+
href="#"
|
|
26211
|
+
role="menuitem"
|
|
26212
|
+
>
|
|
26213
|
+
<span class="pf-c-menu__item-main">
|
|
26214
|
+
<span
|
|
26215
|
+
class="pf-c-menu__item-text"
|
|
26216
|
+
>Link 1</span>
|
|
26217
|
+
</span>
|
|
26218
|
+
</a>
|
|
26219
|
+
<button
|
|
26220
|
+
class="pf-c-menu__item-action pf-m-favorite"
|
|
26221
|
+
type="button"
|
|
26222
|
+
aria-label="Not starred"
|
|
26223
|
+
>
|
|
26224
|
+
<span class="pf-c-menu__item-action-icon">
|
|
26225
|
+
<i
|
|
26226
|
+
class="fas fa-star"
|
|
26227
|
+
aria-hidden="true"
|
|
26228
|
+
></i>
|
|
26229
|
+
</span>
|
|
26230
|
+
</button>
|
|
26231
|
+
</li>
|
|
26232
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
26233
|
+
<a
|
|
26234
|
+
class="pf-c-menu__item"
|
|
26235
|
+
href="#"
|
|
26236
|
+
role="menuitem"
|
|
26237
|
+
target="_blank"
|
|
26238
|
+
>
|
|
26239
|
+
<span class="pf-c-menu__item-main">
|
|
26240
|
+
<span
|
|
26241
|
+
class="pf-c-menu__item-text"
|
|
26242
|
+
>Link 2</span>
|
|
26243
|
+
<span
|
|
26244
|
+
class="pf-c-menu__item-external-icon"
|
|
26245
|
+
>
|
|
26246
|
+
<i
|
|
26247
|
+
class="fas fa-external-link-alt"
|
|
26248
|
+
aria-hidden="true"
|
|
26249
|
+
></i>
|
|
26250
|
+
</span>
|
|
26251
|
+
<span
|
|
26252
|
+
class="pf-screen-reader"
|
|
26253
|
+
>(opens new window)</span>
|
|
26254
|
+
</span>
|
|
26255
|
+
</a>
|
|
26256
|
+
<button
|
|
26257
|
+
class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
|
|
26258
|
+
type="button"
|
|
26259
|
+
aria-label="Starred"
|
|
26260
|
+
>
|
|
26261
|
+
<span class="pf-c-menu__item-action-icon">
|
|
26262
|
+
<i
|
|
26263
|
+
class="fas fa-star"
|
|
26264
|
+
aria-hidden="true"
|
|
26265
|
+
></i>
|
|
26266
|
+
</span>
|
|
26267
|
+
</button>
|
|
26268
|
+
</li>
|
|
26269
|
+
</ul>
|
|
26270
|
+
</section>
|
|
26271
|
+
</div>
|
|
26272
|
+
</li>
|
|
26273
|
+
</ul>
|
|
26274
|
+
</section>
|
|
26275
|
+
</div>
|
|
26276
|
+
</div>
|
|
26277
|
+
</div>
|
|
26278
|
+
</div>
|
|
26279
|
+
</div>
|
|
26280
|
+
<div class="pf-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
|
|
26281
|
+
<div
|
|
26282
|
+
class="pf-c-dropdown pf-m-full-height"
|
|
26283
|
+
style="--pf-c-dropdown--MaxWidth: 20ch;"
|
|
26284
|
+
>
|
|
26285
|
+
<button
|
|
26286
|
+
class="pf-c-dropdown__toggle"
|
|
26287
|
+
id="sticky-header-and-multiple columns-demo-masthead-profile-button"
|
|
26288
|
+
aria-expanded="false"
|
|
26289
|
+
type="button"
|
|
26290
|
+
>
|
|
26291
|
+
<span class="pf-c-dropdown__toggle-image">
|
|
26292
|
+
<img
|
|
26293
|
+
class="pf-c-avatar"
|
|
26294
|
+
alt="Avatar image"
|
|
26295
|
+
src="/assets/images/img_avatar-light.svg"
|
|
26296
|
+
/>
|
|
26297
|
+
</span>
|
|
26298
|
+
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
26299
|
+
<span class="pf-c-dropdown__toggle-icon">
|
|
26300
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
26301
|
+
</span>
|
|
26302
|
+
</button>
|
|
26303
|
+
<div class="pf-c-dropdown__menu" hidden>
|
|
26304
|
+
<section class="pf-c-dropdown__group">
|
|
26305
|
+
<div class="pf-c-dropdown__menu-item pf-m-text">
|
|
26306
|
+
<div class="pf-u-font-size-sm">Account number:</div>
|
|
26307
|
+
<div>123456789</div>
|
|
26308
|
+
</div>
|
|
26309
|
+
<div class="pf-c-dropdown__menu-item pf-m-text">
|
|
26310
|
+
<div class="pf-u-font-size-sm">Username:</div>
|
|
26311
|
+
<div>mshaksho@redhat.com</div>
|
|
26312
|
+
</div>
|
|
26313
|
+
</section>
|
|
26314
|
+
<hr class="pf-c-divider" />
|
|
26315
|
+
<section class="pf-c-dropdown__group">
|
|
26316
|
+
<ul>
|
|
26317
|
+
<li>
|
|
26318
|
+
<a class="pf-c-dropdown__menu-item" href="#">My profile</a>
|
|
26319
|
+
</li>
|
|
26320
|
+
<li>
|
|
26321
|
+
<a
|
|
26322
|
+
class="pf-c-dropdown__menu-item"
|
|
26323
|
+
href="#"
|
|
26324
|
+
>User management</a>
|
|
26325
|
+
</li>
|
|
26326
|
+
<li>
|
|
26327
|
+
<a class="pf-c-dropdown__menu-item" href="#">Logout</a>
|
|
26328
|
+
</li>
|
|
26329
|
+
</ul>
|
|
26330
|
+
</section>
|
|
26331
|
+
</div>
|
|
26332
|
+
</div>
|
|
26333
|
+
</div>
|
|
26334
|
+
</div>
|
|
26335
|
+
</div>
|
|
26336
|
+
</div>
|
|
26337
|
+
</div>
|
|
26338
|
+
</header>
|
|
26339
|
+
<div class="pf-c-page__sidebar">
|
|
26340
|
+
<div class="pf-c-page__sidebar-body">
|
|
26341
|
+
<nav
|
|
26342
|
+
class="pf-c-nav"
|
|
26343
|
+
id="sticky-header-and-multiple columns-demo-primary-nav"
|
|
26344
|
+
aria-label="Global"
|
|
26345
|
+
>
|
|
26346
|
+
<ul class="pf-c-nav__list" role="list">
|
|
26347
|
+
<li class="pf-c-nav__item">
|
|
26348
|
+
<a href="#" class="pf-c-nav__link">System panel</a>
|
|
26349
|
+
</li>
|
|
26350
|
+
<li class="pf-c-nav__item">
|
|
26351
|
+
<a
|
|
26352
|
+
href="#"
|
|
26353
|
+
class="pf-c-nav__link pf-m-current"
|
|
26354
|
+
aria-current="page"
|
|
26355
|
+
>Policy</a>
|
|
26356
|
+
</li>
|
|
26357
|
+
<li class="pf-c-nav__item">
|
|
26358
|
+
<a href="#" class="pf-c-nav__link">Authentication</a>
|
|
26359
|
+
</li>
|
|
26360
|
+
<li class="pf-c-nav__item">
|
|
26361
|
+
<a href="#" class="pf-c-nav__link">Network services</a>
|
|
26362
|
+
</li>
|
|
26363
|
+
<li class="pf-c-nav__item">
|
|
26364
|
+
<a href="#" class="pf-c-nav__link">Server</a>
|
|
26365
|
+
</li>
|
|
26366
|
+
</ul>
|
|
26367
|
+
</nav>
|
|
26368
|
+
</div>
|
|
26369
|
+
</div>
|
|
26370
|
+
<main
|
|
26371
|
+
class="pf-c-page__main"
|
|
26372
|
+
tabindex="-1"
|
|
26373
|
+
id="main-content-sticky-header-and-multiple columns-demo"
|
|
26374
|
+
>
|
|
26375
|
+
<section class="pf-c-page__main-breadcrumb pf-m-limit-width">
|
|
26376
|
+
<div class="pf-c-page__main-body">
|
|
26377
|
+
<nav class="pf-c-breadcrumb" aria-label="breadcrumb">
|
|
26378
|
+
<ol class="pf-c-breadcrumb__list" role="list">
|
|
26379
|
+
<li class="pf-c-breadcrumb__item">
|
|
26380
|
+
<a href="#" class="pf-c-breadcrumb__link">Section home</a>
|
|
26381
|
+
</li>
|
|
26382
|
+
<li class="pf-c-breadcrumb__item">
|
|
26383
|
+
<span class="pf-c-breadcrumb__item-divider">
|
|
26384
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
26385
|
+
</span>
|
|
26386
|
+
|
|
26387
|
+
<a href="#" class="pf-c-breadcrumb__link">Section title</a>
|
|
26388
|
+
</li>
|
|
26389
|
+
<li class="pf-c-breadcrumb__item">
|
|
26390
|
+
<span class="pf-c-breadcrumb__item-divider">
|
|
26391
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
26392
|
+
</span>
|
|
26393
|
+
|
|
26394
|
+
<a href="#" class="pf-c-breadcrumb__link">Section title</a>
|
|
26395
|
+
</li>
|
|
26396
|
+
<li class="pf-c-breadcrumb__item">
|
|
26397
|
+
<span class="pf-c-breadcrumb__item-divider">
|
|
26398
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
26399
|
+
</span>
|
|
26400
|
+
|
|
26401
|
+
<a
|
|
26402
|
+
href="#"
|
|
26403
|
+
class="pf-c-breadcrumb__link pf-m-current"
|
|
26404
|
+
aria-current="page"
|
|
26405
|
+
>Section landing</a>
|
|
26406
|
+
</li>
|
|
26407
|
+
</ol>
|
|
26408
|
+
</nav>
|
|
26409
|
+
</div>
|
|
26410
|
+
</section>
|
|
26411
|
+
<section class="pf-c-page__main-section pf-m-limit-width pf-m-light">
|
|
26412
|
+
<div class="pf-c-page__main-body">
|
|
26413
|
+
<div class="pf-c-content">
|
|
26414
|
+
<h1>Main title</h1>
|
|
26415
|
+
<p>This is a full page demo.</p>
|
|
26416
|
+
</div>
|
|
26417
|
+
</div>
|
|
26418
|
+
</section>
|
|
26419
|
+
<section
|
|
26420
|
+
class="pf-c-page__main-section pf-m-no-padding pf-m-padding-on-xl pf-m-overflow-scroll"
|
|
26421
|
+
>
|
|
26422
|
+
<div class="pf-c-scroll-outer-wrapper">
|
|
26423
|
+
<div class="pf-c-toolbar">
|
|
26424
|
+
<div class="pf-c-toolbar__content">
|
|
26425
|
+
<div class="pf-c-toolbar__content-section pf-m-nowrap">
|
|
26426
|
+
<div
|
|
26427
|
+
class="pf-c-toolbar__group pf-m-toggle-group pf-m-show-on-xl"
|
|
26428
|
+
>
|
|
26429
|
+
<div class="pf-c-toolbar__toggle">
|
|
26430
|
+
<button
|
|
26431
|
+
class="pf-c-button pf-m-plain"
|
|
26432
|
+
type="button"
|
|
26433
|
+
aria-label="Show filters"
|
|
26434
|
+
aria-expanded="false"
|
|
26435
|
+
aria-controls="-expandable-content"
|
|
26436
|
+
>
|
|
26437
|
+
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
26438
|
+
</button>
|
|
26439
|
+
</div>
|
|
26440
|
+
<div class="pf-c-toolbar__item pf-m-bulk-select">
|
|
26441
|
+
<div class="pf-c-dropdown">
|
|
26442
|
+
<div class="pf-c-dropdown__toggle pf-m-split-button">
|
|
26443
|
+
<label
|
|
26444
|
+
class="pf-c-dropdown__toggle-check"
|
|
26445
|
+
for="-bulk-select-toggle-check"
|
|
26446
|
+
>
|
|
26447
|
+
<div class="pf-c-check pf-m-standalone">
|
|
26448
|
+
<input
|
|
26449
|
+
class="pf-c-check__input"
|
|
26450
|
+
type="checkbox"
|
|
26451
|
+
id="-bulk-select-toggle-check"
|
|
26452
|
+
aria-label="Select all"
|
|
26453
|
+
/>
|
|
26454
|
+
</div>
|
|
26455
|
+
</label>
|
|
26456
|
+
|
|
26457
|
+
<button
|
|
26458
|
+
class="pf-c-dropdown__toggle-button"
|
|
26459
|
+
type="button"
|
|
26460
|
+
aria-expanded="false"
|
|
26461
|
+
id="-bulk-select-toggle-button"
|
|
26462
|
+
aria-label="Dropdown toggle"
|
|
26463
|
+
>
|
|
26464
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
26465
|
+
</button>
|
|
26466
|
+
</div>
|
|
26467
|
+
<ul class="pf-c-dropdown__menu" hidden>
|
|
26468
|
+
<li>
|
|
26469
|
+
<button
|
|
26470
|
+
class="pf-c-dropdown__menu-item"
|
|
26471
|
+
type="button"
|
|
26472
|
+
>Select all</button>
|
|
26473
|
+
</li>
|
|
26474
|
+
<li>
|
|
26475
|
+
<button
|
|
26476
|
+
class="pf-c-dropdown__menu-item"
|
|
26477
|
+
type="button"
|
|
26478
|
+
>Select none</button>
|
|
26479
|
+
</li>
|
|
26480
|
+
<li>
|
|
26481
|
+
<button
|
|
26482
|
+
class="pf-c-dropdown__menu-item"
|
|
26483
|
+
type="button"
|
|
26484
|
+
>Other action</button>
|
|
26485
|
+
</li>
|
|
26486
|
+
</ul>
|
|
26487
|
+
</div>
|
|
26488
|
+
</div>
|
|
26489
|
+
|
|
26490
|
+
<div class="pf-c-toolbar__item pf-m-search-filter">
|
|
26491
|
+
<div
|
|
26492
|
+
class="pf-c-input-group"
|
|
26493
|
+
aria-label="search filter"
|
|
26494
|
+
role="group"
|
|
26495
|
+
>
|
|
26496
|
+
<div class="pf-c-select" style="width: 175px">
|
|
26497
|
+
<span id="-select-name-label" hidden>Choose one</span>
|
|
26498
|
+
|
|
26499
|
+
<button
|
|
26500
|
+
class="pf-c-select__toggle"
|
|
26501
|
+
type="button"
|
|
26502
|
+
id="-select-name-toggle"
|
|
26503
|
+
aria-haspopup="true"
|
|
26504
|
+
aria-expanded="false"
|
|
26505
|
+
aria-labelledby="-select-name-label -select-name-toggle"
|
|
26506
|
+
>
|
|
26507
|
+
<div class="pf-c-select__toggle-wrapper">
|
|
26508
|
+
<span class="pf-c-select__toggle-icon">
|
|
26509
|
+
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
26510
|
+
</span>
|
|
26511
|
+
<span class="pf-c-select__toggle-text">Name</span>
|
|
26512
|
+
</div>
|
|
26513
|
+
<span class="pf-c-select__toggle-arrow">
|
|
26514
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
26515
|
+
</span>
|
|
26516
|
+
</button>
|
|
26517
|
+
|
|
26518
|
+
<ul
|
|
26519
|
+
class="pf-c-select__menu"
|
|
26520
|
+
role="listbox"
|
|
26521
|
+
aria-labelledby="-select-name-label"
|
|
26522
|
+
hidden
|
|
26523
|
+
>
|
|
26524
|
+
<li role="presentation">
|
|
26525
|
+
<button
|
|
26526
|
+
class="pf-c-select__menu-item"
|
|
26527
|
+
role="option"
|
|
26528
|
+
>Running</button>
|
|
26529
|
+
</li>
|
|
26530
|
+
<li role="presentation">
|
|
26531
|
+
<button
|
|
26532
|
+
class="pf-c-select__menu-item pf-m-selected"
|
|
26533
|
+
role="option"
|
|
26534
|
+
aria-selected="true"
|
|
26535
|
+
>
|
|
26536
|
+
Stopped
|
|
26537
|
+
<span class="pf-c-select__menu-item-icon">
|
|
26538
|
+
<i class="fas fa-check" aria-hidden="true"></i>
|
|
26539
|
+
</span>
|
|
26540
|
+
</button>
|
|
26541
|
+
</li>
|
|
26542
|
+
<li role="presentation">
|
|
26543
|
+
<button
|
|
26544
|
+
class="pf-c-select__menu-item"
|
|
26545
|
+
role="option"
|
|
26546
|
+
>Down</button>
|
|
26547
|
+
</li>
|
|
26548
|
+
<li role="presentation">
|
|
26549
|
+
<button
|
|
26550
|
+
class="pf-c-select__menu-item"
|
|
26551
|
+
role="option"
|
|
26552
|
+
>Degraded</button>
|
|
26553
|
+
</li>
|
|
26554
|
+
<li role="presentation">
|
|
26555
|
+
<button
|
|
26556
|
+
class="pf-c-select__menu-item"
|
|
26557
|
+
role="option"
|
|
26558
|
+
>Needs maintenance</button>
|
|
26559
|
+
</li>
|
|
26560
|
+
</ul>
|
|
26561
|
+
</div>
|
|
26562
|
+
<div class="pf-c-text-input-group" style="width: auto">
|
|
26563
|
+
<div class="pf-c-text-input-group__main pf-m-icon">
|
|
26564
|
+
<span class="pf-c-text-input-group__text">
|
|
26565
|
+
<span class="pf-c-text-input-group__icon">
|
|
26566
|
+
<i class="fas fa-fw fa-search"></i>
|
|
26567
|
+
</span>
|
|
26568
|
+
<input
|
|
26569
|
+
class="pf-c-text-input-group__text-input"
|
|
26570
|
+
type="search"
|
|
26571
|
+
placeholder="Filter by name"
|
|
26572
|
+
value
|
|
26573
|
+
aria-label="Type to filter"
|
|
26574
|
+
/>
|
|
26575
|
+
</span>
|
|
26576
|
+
</div>
|
|
26577
|
+
</div>
|
|
26578
|
+
</div>
|
|
26579
|
+
</div>
|
|
26580
|
+
</div>
|
|
26581
|
+
|
|
26582
|
+
<div class="pf-c-toolbar__item">
|
|
26583
|
+
<button
|
|
26584
|
+
class="pf-c-button pf-m-plain"
|
|
26585
|
+
type="button"
|
|
26586
|
+
aria-label="Sort"
|
|
26587
|
+
>
|
|
26588
|
+
<i class="fas fa-sort-amount-down" aria-hidden="true"></i>
|
|
26589
|
+
</button>
|
|
26590
|
+
</div>
|
|
26591
|
+
|
|
26592
|
+
<div class="pf-c-overflow-menu" id="-overflow-menu">
|
|
26593
|
+
<div
|
|
26594
|
+
class="pf-c-overflow-menu__content pf-u-display-none pf-u-display-flex-on-lg"
|
|
26595
|
+
>
|
|
26596
|
+
<div class="pf-c-overflow-menu__group pf-m-button-group">
|
|
26597
|
+
<div class="pf-c-overflow-menu__item">
|
|
26598
|
+
<button
|
|
26599
|
+
class="pf-c-button pf-m-primary"
|
|
26600
|
+
type="button"
|
|
26601
|
+
>Create instance</button>
|
|
26602
|
+
</div>
|
|
26603
|
+
</div>
|
|
26604
|
+
</div>
|
|
26605
|
+
<div class="pf-c-overflow-menu__control">
|
|
26606
|
+
<div class="pf-c-dropdown">
|
|
26607
|
+
<button
|
|
26608
|
+
class="pf-c-button pf-c-dropdown__toggle pf-m-plain"
|
|
26609
|
+
type="button"
|
|
26610
|
+
id="-overflow-menu-dropdown-toggle"
|
|
26611
|
+
aria-label="Dropdown with additional options"
|
|
26612
|
+
aria-expanded="false"
|
|
26613
|
+
>
|
|
26614
|
+
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
26615
|
+
</button>
|
|
26616
|
+
<ul
|
|
26617
|
+
class="pf-c-dropdown__menu"
|
|
26618
|
+
aria-labelledby="-overflow-menu-dropdown-toggle"
|
|
26619
|
+
hidden
|
|
26620
|
+
>
|
|
26621
|
+
<li>
|
|
26622
|
+
<button class="pf-c-dropdown__menu-item">Action 7</button>
|
|
26623
|
+
</li>
|
|
26624
|
+
</ul>
|
|
26625
|
+
</div>
|
|
26626
|
+
</div>
|
|
26627
|
+
</div>
|
|
26628
|
+
|
|
26629
|
+
<div class="pf-c-toolbar__item pf-m-pagination">
|
|
26630
|
+
<div class="pf-c-pagination pf-m-compact">
|
|
26631
|
+
<div class="pf-c-options-menu">
|
|
26632
|
+
<button
|
|
26633
|
+
class="pf-c-options-menu__toggle pf-m-text pf-m-plain"
|
|
26634
|
+
type="button"
|
|
26635
|
+
id="-top-pagination-toggle"
|
|
26636
|
+
aria-haspopup="listbox"
|
|
26637
|
+
aria-expanded="false"
|
|
26638
|
+
>
|
|
26639
|
+
<span class="pf-c-options-menu__toggle-text">
|
|
26640
|
+
<b>1 - 10</b> of
|
|
26641
|
+
<b>36</b>
|
|
26642
|
+
</span>
|
|
26643
|
+
<div class="pf-c-options-menu__toggle-icon">
|
|
26644
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
26645
|
+
</div>
|
|
26646
|
+
</button>
|
|
26647
|
+
<ul
|
|
26648
|
+
class="pf-c-options-menu__menu"
|
|
26649
|
+
aria-labelledby="-top-pagination-toggle"
|
|
26650
|
+
hidden
|
|
26651
|
+
>
|
|
26652
|
+
<li>
|
|
26653
|
+
<button
|
|
26654
|
+
class="pf-c-options-menu__menu-item"
|
|
26655
|
+
type="button"
|
|
26656
|
+
>5 per page</button>
|
|
26657
|
+
</li>
|
|
26658
|
+
<li>
|
|
26659
|
+
<button
|
|
26660
|
+
class="pf-c-options-menu__menu-item"
|
|
26661
|
+
type="button"
|
|
26662
|
+
>
|
|
26663
|
+
10 per page
|
|
26664
|
+
<div class="pf-c-options-menu__menu-item-icon">
|
|
26665
|
+
<i class="fas fa-check" aria-hidden="true"></i>
|
|
26666
|
+
</div>
|
|
26667
|
+
</button>
|
|
26668
|
+
</li>
|
|
26669
|
+
<li>
|
|
26670
|
+
<button
|
|
26671
|
+
class="pf-c-options-menu__menu-item"
|
|
26672
|
+
type="button"
|
|
26673
|
+
>20 per page</button>
|
|
26674
|
+
</li>
|
|
26675
|
+
</ul>
|
|
26676
|
+
</div>
|
|
26677
|
+
<nav
|
|
26678
|
+
class="pf-c-pagination__nav"
|
|
26679
|
+
aria-label="Toolbar top pagination"
|
|
26680
|
+
>
|
|
26681
|
+
<div class="pf-c-pagination__nav-control pf-m-prev">
|
|
26682
|
+
<button
|
|
26683
|
+
class="pf-c-button pf-m-plain"
|
|
26684
|
+
type="button"
|
|
26685
|
+
disabled
|
|
26686
|
+
aria-label="Go to previous page"
|
|
26687
|
+
>
|
|
26688
|
+
<i class="fas fa-angle-left" aria-hidden="true"></i>
|
|
26689
|
+
</button>
|
|
26690
|
+
</div>
|
|
26691
|
+
<div class="pf-c-pagination__nav-control pf-m-next">
|
|
26692
|
+
<button
|
|
26693
|
+
class="pf-c-button pf-m-plain"
|
|
26694
|
+
type="button"
|
|
26695
|
+
aria-label="Go to next page"
|
|
26696
|
+
>
|
|
26697
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
26698
|
+
</button>
|
|
26699
|
+
</div>
|
|
26700
|
+
</nav>
|
|
26701
|
+
</div>
|
|
26702
|
+
</div>
|
|
26703
|
+
</div>
|
|
26704
|
+
|
|
26705
|
+
<div
|
|
26706
|
+
class="pf-c-toolbar__expandable-content pf-m-hidden"
|
|
26707
|
+
id="-expandable-content"
|
|
26708
|
+
hidden
|
|
26709
|
+
></div>
|
|
26710
|
+
</div>
|
|
26711
|
+
</div>
|
|
26712
|
+
<div class="pf-c-scroll-inner-wrapper">
|
|
26713
|
+
<table
|
|
26714
|
+
class="pf-c-table"
|
|
26715
|
+
role="grid"
|
|
26716
|
+
aria-label="This is a scrollable table"
|
|
26717
|
+
id="sticky-right-column-example"
|
|
26718
|
+
>
|
|
26719
|
+
<thead>
|
|
26720
|
+
<tr role="row">
|
|
26721
|
+
<th
|
|
26722
|
+
class="pf-c-table__sort"
|
|
26723
|
+
role="columnheader"
|
|
26724
|
+
aria-sort="none"
|
|
26725
|
+
data-label="Example th"
|
|
26726
|
+
scope="col"
|
|
26727
|
+
>
|
|
26728
|
+
<button class="pf-c-table__button">
|
|
26729
|
+
<div class="pf-c-table__button-content">
|
|
26730
|
+
<span class="pf-c-table__text">Fact</span>
|
|
26731
|
+
<span class="pf-c-table__sort-indicator">
|
|
26732
|
+
<i class="fas fa-arrows-alt-v"></i>
|
|
26733
|
+
</span>
|
|
26734
|
+
</div>
|
|
26735
|
+
</button>
|
|
26736
|
+
</th>
|
|
26737
|
+
<th
|
|
26738
|
+
class="pf-c-table__sort"
|
|
26739
|
+
role="columnheader"
|
|
26740
|
+
aria-sort="none"
|
|
26741
|
+
data-label="Example th"
|
|
26742
|
+
scope="col"
|
|
26743
|
+
>
|
|
26744
|
+
<button class="pf-c-table__button">
|
|
26745
|
+
<div class="pf-c-table__button-content">
|
|
26746
|
+
<span class="pf-c-table__text">State</span>
|
|
26747
|
+
<span class="pf-c-table__sort-indicator">
|
|
26748
|
+
<i class="fas fa-arrows-alt-v"></i>
|
|
26749
|
+
</span>
|
|
26750
|
+
</div>
|
|
26751
|
+
</button>
|
|
26752
|
+
</th>
|
|
26753
|
+
<th
|
|
26754
|
+
class
|
|
26755
|
+
role="columnheader"
|
|
26756
|
+
data-label="Example th"
|
|
26757
|
+
scope="col"
|
|
26758
|
+
>Header 3</th>
|
|
26759
|
+
<th
|
|
26760
|
+
class
|
|
26761
|
+
role="columnheader"
|
|
26762
|
+
data-label="Example th"
|
|
26763
|
+
scope="col"
|
|
26764
|
+
>Header 4</th>
|
|
26765
|
+
<th
|
|
26766
|
+
class
|
|
26767
|
+
role="columnheader"
|
|
26768
|
+
data-label="Example th"
|
|
26769
|
+
scope="col"
|
|
26770
|
+
>Header 5</th>
|
|
26771
|
+
<th
|
|
26772
|
+
class
|
|
26773
|
+
role="columnheader"
|
|
26774
|
+
data-label="Example th"
|
|
26775
|
+
scope="col"
|
|
26776
|
+
>Header 6</th>
|
|
26777
|
+
<th
|
|
26778
|
+
class
|
|
26779
|
+
role="columnheader"
|
|
26780
|
+
data-label="Example th"
|
|
26781
|
+
scope="col"
|
|
26782
|
+
>Header 7</th>
|
|
26783
|
+
<th
|
|
26784
|
+
class
|
|
26785
|
+
role="columnheader"
|
|
26786
|
+
data-label="Example th"
|
|
26787
|
+
scope="col"
|
|
26788
|
+
>Header 8</th>
|
|
26789
|
+
|
|
26790
|
+
<th
|
|
26791
|
+
class="pf-m-truncate pf-m-border-left pf-c-table__sticky-cell pf-m-right"
|
|
26792
|
+
role="columnheader"
|
|
26793
|
+
data-label="Example th"
|
|
26794
|
+
scope="col"
|
|
26795
|
+
style="--pf-c-table__sticky-cell--MinWidth: 150px;"
|
|
26796
|
+
>Header 9</th>
|
|
26797
|
+
</tr>
|
|
26798
|
+
</thead>
|
|
26799
|
+
|
|
26800
|
+
<tbody role="rowgroup">
|
|
26801
|
+
<tr role="row">
|
|
26802
|
+
<td
|
|
26803
|
+
class="pf-m-nowrap"
|
|
26804
|
+
role="cell"
|
|
26805
|
+
data-label="Example td"
|
|
26806
|
+
>Fact 1</td>
|
|
26807
|
+
<td
|
|
26808
|
+
class="pf-m-nowrap"
|
|
26809
|
+
role="cell"
|
|
26810
|
+
data-label="Example td"
|
|
26811
|
+
>State 1</td>
|
|
26812
|
+
<td
|
|
26813
|
+
class="pf-m-nowrap"
|
|
26814
|
+
role="cell"
|
|
26815
|
+
data-label="Example td"
|
|
26816
|
+
>Test cell 1-3</td>
|
|
26817
|
+
<td
|
|
26818
|
+
class="pf-m-nowrap"
|
|
26819
|
+
role="cell"
|
|
26820
|
+
data-label="Example td"
|
|
26821
|
+
>Test cell 1-4</td>
|
|
26822
|
+
<td
|
|
26823
|
+
class="pf-m-nowrap"
|
|
26824
|
+
role="cell"
|
|
26825
|
+
data-label="Example td"
|
|
26826
|
+
>Test cell 1-5</td>
|
|
26827
|
+
<td
|
|
26828
|
+
class="pf-m-nowrap"
|
|
26829
|
+
role="cell"
|
|
26830
|
+
data-label="Example td"
|
|
26831
|
+
>Test cell 1-6</td>
|
|
26832
|
+
<td
|
|
26833
|
+
class="pf-m-nowrap"
|
|
26834
|
+
role="cell"
|
|
26835
|
+
data-label="Example td"
|
|
26836
|
+
>Test cell 1-7</td>
|
|
26837
|
+
<td
|
|
26838
|
+
class="pf-m-nowrap"
|
|
26839
|
+
role="cell"
|
|
26840
|
+
data-label="Example td"
|
|
26841
|
+
>Test cell 1-8</td>
|
|
26842
|
+
|
|
26843
|
+
<th
|
|
26844
|
+
class="pf-m-truncate pf-m-border-left pf-c-table__sticky-cell pf-m-right"
|
|
26845
|
+
role="columnheader"
|
|
26846
|
+
data-label="Example th"
|
|
26847
|
+
scope="col"
|
|
26848
|
+
style="--pf-c-table__sticky-cell--MinWidth: 150px;"
|
|
26849
|
+
>Test cell 1-9</th>
|
|
26850
|
+
</tr>
|
|
26851
|
+
<tr role="row">
|
|
26852
|
+
<td
|
|
26853
|
+
class="pf-m-nowrap"
|
|
26854
|
+
role="cell"
|
|
26855
|
+
data-label="Example td"
|
|
26856
|
+
>Fact 2</td>
|
|
26857
|
+
<td
|
|
26858
|
+
class="pf-m-nowrap"
|
|
26859
|
+
role="cell"
|
|
26860
|
+
data-label="Example td"
|
|
26861
|
+
>State 2</td>
|
|
26862
|
+
<td
|
|
26863
|
+
class="pf-m-nowrap"
|
|
26864
|
+
role="cell"
|
|
26865
|
+
data-label="Example td"
|
|
26866
|
+
>Test cell 2-3</td>
|
|
26867
|
+
<td
|
|
26868
|
+
class="pf-m-nowrap"
|
|
26869
|
+
role="cell"
|
|
26870
|
+
data-label="Example td"
|
|
26871
|
+
>Test cell 2-4</td>
|
|
26872
|
+
<td
|
|
26873
|
+
class="pf-m-nowrap"
|
|
26874
|
+
role="cell"
|
|
26875
|
+
data-label="Example td"
|
|
26876
|
+
>Test cell 2-5</td>
|
|
26877
|
+
<td
|
|
26878
|
+
class="pf-m-nowrap"
|
|
26879
|
+
role="cell"
|
|
26880
|
+
data-label="Example td"
|
|
26881
|
+
>Test cell 2-6</td>
|
|
26882
|
+
<td
|
|
26883
|
+
class="pf-m-nowrap"
|
|
26884
|
+
role="cell"
|
|
26885
|
+
data-label="Example td"
|
|
26886
|
+
>Test cell 2-7</td>
|
|
26887
|
+
<td
|
|
26888
|
+
class="pf-m-nowrap"
|
|
26889
|
+
role="cell"
|
|
26890
|
+
data-label="Example td"
|
|
26891
|
+
>Test cell 2-8</td>
|
|
26892
|
+
|
|
26893
|
+
<th
|
|
26894
|
+
class="pf-m-truncate pf-m-border-left pf-c-table__sticky-cell pf-m-right"
|
|
26895
|
+
role="columnheader"
|
|
26896
|
+
data-label="Example th"
|
|
26897
|
+
scope="col"
|
|
26898
|
+
style="--pf-c-table__sticky-cell--MinWidth: 150px;"
|
|
26899
|
+
>Test cell 2-9</th>
|
|
26900
|
+
</tr>
|
|
26901
|
+
<tr role="row">
|
|
26902
|
+
<td
|
|
26903
|
+
class="pf-m-nowrap"
|
|
26904
|
+
role="cell"
|
|
26905
|
+
data-label="Example td"
|
|
26906
|
+
>Fact 3</td>
|
|
26907
|
+
<td
|
|
26908
|
+
class="pf-m-nowrap"
|
|
26909
|
+
role="cell"
|
|
26910
|
+
data-label="Example td"
|
|
26911
|
+
>State 3</td>
|
|
26912
|
+
<td
|
|
26913
|
+
class="pf-m-nowrap"
|
|
26914
|
+
role="cell"
|
|
26915
|
+
data-label="Example td"
|
|
26916
|
+
>Test cell 3-3</td>
|
|
26917
|
+
<td
|
|
26918
|
+
class="pf-m-nowrap"
|
|
26919
|
+
role="cell"
|
|
26920
|
+
data-label="Example td"
|
|
26921
|
+
>Test cell 3-4</td>
|
|
26922
|
+
<td
|
|
26923
|
+
class="pf-m-nowrap"
|
|
26924
|
+
role="cell"
|
|
26925
|
+
data-label="Example td"
|
|
26926
|
+
>Test cell 3-5</td>
|
|
26927
|
+
<td
|
|
26928
|
+
class="pf-m-nowrap"
|
|
26929
|
+
role="cell"
|
|
26930
|
+
data-label="Example td"
|
|
26931
|
+
>Test cell 3-6</td>
|
|
26932
|
+
<td
|
|
26933
|
+
class="pf-m-nowrap"
|
|
26934
|
+
role="cell"
|
|
26935
|
+
data-label="Example td"
|
|
26936
|
+
>Test cell 3-7</td>
|
|
26937
|
+
<td
|
|
26938
|
+
class="pf-m-nowrap"
|
|
26939
|
+
role="cell"
|
|
26940
|
+
data-label="Example td"
|
|
26941
|
+
>Test cell 3-8</td>
|
|
26942
|
+
|
|
26943
|
+
<th
|
|
26944
|
+
class="pf-m-truncate pf-m-border-left pf-c-table__sticky-cell pf-m-right"
|
|
26945
|
+
role="columnheader"
|
|
26946
|
+
data-label="Example th"
|
|
26947
|
+
scope="col"
|
|
26948
|
+
style="--pf-c-table__sticky-cell--MinWidth: 150px;"
|
|
26949
|
+
>Test cell 3-9</th>
|
|
26950
|
+
</tr>
|
|
26951
|
+
<tr role="row">
|
|
26952
|
+
<td
|
|
26953
|
+
class="pf-m-nowrap"
|
|
26954
|
+
role="cell"
|
|
26955
|
+
data-label="Example td"
|
|
26956
|
+
>Fact 4</td>
|
|
26957
|
+
<td
|
|
26958
|
+
class="pf-m-nowrap"
|
|
26959
|
+
role="cell"
|
|
26960
|
+
data-label="Example td"
|
|
26961
|
+
>State 4</td>
|
|
26962
|
+
<td
|
|
26963
|
+
class="pf-m-nowrap"
|
|
26964
|
+
role="cell"
|
|
26965
|
+
data-label="Example td"
|
|
26966
|
+
>Test cell 4-3</td>
|
|
26967
|
+
<td
|
|
26968
|
+
class="pf-m-nowrap"
|
|
26969
|
+
role="cell"
|
|
26970
|
+
data-label="Example td"
|
|
26971
|
+
>Test cell 4-4</td>
|
|
26972
|
+
<td
|
|
26973
|
+
class="pf-m-nowrap"
|
|
26974
|
+
role="cell"
|
|
26975
|
+
data-label="Example td"
|
|
26976
|
+
>Test cell 4-5</td>
|
|
26977
|
+
<td
|
|
26978
|
+
class="pf-m-nowrap"
|
|
26979
|
+
role="cell"
|
|
26980
|
+
data-label="Example td"
|
|
26981
|
+
>Test cell 4-6</td>
|
|
26982
|
+
<td
|
|
26983
|
+
class="pf-m-nowrap"
|
|
26984
|
+
role="cell"
|
|
26985
|
+
data-label="Example td"
|
|
26986
|
+
>Test cell 4-7</td>
|
|
26987
|
+
<td
|
|
26988
|
+
class="pf-m-nowrap"
|
|
26989
|
+
role="cell"
|
|
26990
|
+
data-label="Example td"
|
|
26991
|
+
>Test cell 4-8</td>
|
|
26992
|
+
|
|
26993
|
+
<th
|
|
26994
|
+
class="pf-m-truncate pf-m-border-left pf-c-table__sticky-cell pf-m-right"
|
|
26995
|
+
role="columnheader"
|
|
26996
|
+
data-label="Example th"
|
|
26997
|
+
scope="col"
|
|
26998
|
+
style="--pf-c-table__sticky-cell--MinWidth: 150px;"
|
|
26999
|
+
>Test cell 4-9</th>
|
|
27000
|
+
</tr>
|
|
27001
|
+
<tr role="row">
|
|
27002
|
+
<td
|
|
27003
|
+
class="pf-m-nowrap"
|
|
27004
|
+
role="cell"
|
|
27005
|
+
data-label="Example td"
|
|
27006
|
+
>Fact 5</td>
|
|
27007
|
+
<td
|
|
27008
|
+
class="pf-m-nowrap"
|
|
27009
|
+
role="cell"
|
|
27010
|
+
data-label="Example td"
|
|
27011
|
+
>State 5</td>
|
|
27012
|
+
<td
|
|
27013
|
+
class="pf-m-nowrap"
|
|
27014
|
+
role="cell"
|
|
27015
|
+
data-label="Example td"
|
|
27016
|
+
>Test cell 5-3</td>
|
|
27017
|
+
<td
|
|
27018
|
+
class="pf-m-nowrap"
|
|
27019
|
+
role="cell"
|
|
27020
|
+
data-label="Example td"
|
|
27021
|
+
>Test cell 5-4</td>
|
|
27022
|
+
<td
|
|
27023
|
+
class="pf-m-nowrap"
|
|
27024
|
+
role="cell"
|
|
27025
|
+
data-label="Example td"
|
|
27026
|
+
>Test cell 5-5</td>
|
|
27027
|
+
<td
|
|
27028
|
+
class="pf-m-nowrap"
|
|
27029
|
+
role="cell"
|
|
27030
|
+
data-label="Example td"
|
|
27031
|
+
>Test cell 5-6</td>
|
|
27032
|
+
<td
|
|
27033
|
+
class="pf-m-nowrap"
|
|
27034
|
+
role="cell"
|
|
27035
|
+
data-label="Example td"
|
|
27036
|
+
>Test cell 5-7</td>
|
|
27037
|
+
<td
|
|
27038
|
+
class="pf-m-nowrap"
|
|
27039
|
+
role="cell"
|
|
27040
|
+
data-label="Example td"
|
|
27041
|
+
>Test cell 5-8</td>
|
|
27042
|
+
|
|
27043
|
+
<th
|
|
27044
|
+
class="pf-m-truncate pf-m-border-left pf-c-table__sticky-cell pf-m-right"
|
|
27045
|
+
role="columnheader"
|
|
27046
|
+
data-label="Example th"
|
|
27047
|
+
scope="col"
|
|
27048
|
+
style="--pf-c-table__sticky-cell--MinWidth: 150px;"
|
|
27049
|
+
>Test cell 5-9</th>
|
|
27050
|
+
</tr>
|
|
27051
|
+
<tr role="row">
|
|
27052
|
+
<td
|
|
27053
|
+
class="pf-m-nowrap"
|
|
27054
|
+
role="cell"
|
|
27055
|
+
data-label="Example td"
|
|
27056
|
+
>Fact 6</td>
|
|
27057
|
+
<td
|
|
27058
|
+
class="pf-m-nowrap"
|
|
27059
|
+
role="cell"
|
|
27060
|
+
data-label="Example td"
|
|
27061
|
+
>State 6</td>
|
|
27062
|
+
<td
|
|
27063
|
+
class="pf-m-nowrap"
|
|
27064
|
+
role="cell"
|
|
27065
|
+
data-label="Example td"
|
|
27066
|
+
>Test cell 6-3</td>
|
|
27067
|
+
<td
|
|
27068
|
+
class="pf-m-nowrap"
|
|
27069
|
+
role="cell"
|
|
27070
|
+
data-label="Example td"
|
|
27071
|
+
>Test cell 6-4</td>
|
|
27072
|
+
<td
|
|
27073
|
+
class="pf-m-nowrap"
|
|
27074
|
+
role="cell"
|
|
27075
|
+
data-label="Example td"
|
|
27076
|
+
>Test cell 6-5</td>
|
|
27077
|
+
<td
|
|
27078
|
+
class="pf-m-nowrap"
|
|
27079
|
+
role="cell"
|
|
27080
|
+
data-label="Example td"
|
|
27081
|
+
>Test cell 6-6</td>
|
|
27082
|
+
<td
|
|
27083
|
+
class="pf-m-nowrap"
|
|
27084
|
+
role="cell"
|
|
27085
|
+
data-label="Example td"
|
|
27086
|
+
>Test cell 6-7</td>
|
|
27087
|
+
<td
|
|
27088
|
+
class="pf-m-nowrap"
|
|
27089
|
+
role="cell"
|
|
27090
|
+
data-label="Example td"
|
|
27091
|
+
>Test cell 6-8</td>
|
|
27092
|
+
|
|
27093
|
+
<th
|
|
27094
|
+
class="pf-m-truncate pf-m-border-left pf-c-table__sticky-cell pf-m-right"
|
|
27095
|
+
role="columnheader"
|
|
27096
|
+
data-label="Example th"
|
|
27097
|
+
scope="col"
|
|
27098
|
+
style="--pf-c-table__sticky-cell--MinWidth: 150px;"
|
|
27099
|
+
>Test cell 6-9</th>
|
|
27100
|
+
</tr>
|
|
27101
|
+
<tr role="row">
|
|
27102
|
+
<td
|
|
27103
|
+
class="pf-m-nowrap"
|
|
27104
|
+
role="cell"
|
|
27105
|
+
data-label="Example td"
|
|
27106
|
+
>Fact 7</td>
|
|
27107
|
+
<td
|
|
27108
|
+
class="pf-m-nowrap"
|
|
27109
|
+
role="cell"
|
|
27110
|
+
data-label="Example td"
|
|
27111
|
+
>State 7</td>
|
|
27112
|
+
<td
|
|
27113
|
+
class="pf-m-nowrap"
|
|
27114
|
+
role="cell"
|
|
27115
|
+
data-label="Example td"
|
|
27116
|
+
>Test cell 7-3</td>
|
|
27117
|
+
<td
|
|
27118
|
+
class="pf-m-nowrap"
|
|
27119
|
+
role="cell"
|
|
27120
|
+
data-label="Example td"
|
|
27121
|
+
>Test cell 7-4</td>
|
|
27122
|
+
<td
|
|
27123
|
+
class="pf-m-nowrap"
|
|
27124
|
+
role="cell"
|
|
27125
|
+
data-label="Example td"
|
|
27126
|
+
>Test cell 7-5</td>
|
|
27127
|
+
<td
|
|
27128
|
+
class="pf-m-nowrap"
|
|
27129
|
+
role="cell"
|
|
27130
|
+
data-label="Example td"
|
|
27131
|
+
>Test cell 7-6</td>
|
|
27132
|
+
<td
|
|
27133
|
+
class="pf-m-nowrap"
|
|
27134
|
+
role="cell"
|
|
27135
|
+
data-label="Example td"
|
|
27136
|
+
>Test cell 7-7</td>
|
|
27137
|
+
<td
|
|
27138
|
+
class="pf-m-nowrap"
|
|
27139
|
+
role="cell"
|
|
27140
|
+
data-label="Example td"
|
|
27141
|
+
>Test cell 7-8</td>
|
|
27142
|
+
|
|
27143
|
+
<th
|
|
27144
|
+
class="pf-m-truncate pf-m-border-left pf-c-table__sticky-cell pf-m-right"
|
|
27145
|
+
role="columnheader"
|
|
27146
|
+
data-label="Example th"
|
|
27147
|
+
scope="col"
|
|
27148
|
+
style="--pf-c-table__sticky-cell--MinWidth: 150px;"
|
|
27149
|
+
>Test cell 7-9</th>
|
|
27150
|
+
</tr>
|
|
27151
|
+
<tr role="row">
|
|
27152
|
+
<td
|
|
27153
|
+
class="pf-m-nowrap"
|
|
27154
|
+
role="cell"
|
|
27155
|
+
data-label="Example td"
|
|
27156
|
+
>Fact 8</td>
|
|
27157
|
+
<td
|
|
27158
|
+
class="pf-m-nowrap"
|
|
27159
|
+
role="cell"
|
|
27160
|
+
data-label="Example td"
|
|
27161
|
+
>State 8</td>
|
|
27162
|
+
<td
|
|
27163
|
+
class="pf-m-nowrap"
|
|
27164
|
+
role="cell"
|
|
27165
|
+
data-label="Example td"
|
|
27166
|
+
>Test cell 8-3</td>
|
|
27167
|
+
<td
|
|
27168
|
+
class="pf-m-nowrap"
|
|
27169
|
+
role="cell"
|
|
27170
|
+
data-label="Example td"
|
|
27171
|
+
>Test cell 8-4</td>
|
|
27172
|
+
<td
|
|
27173
|
+
class="pf-m-nowrap"
|
|
27174
|
+
role="cell"
|
|
27175
|
+
data-label="Example td"
|
|
27176
|
+
>Test cell 8-5</td>
|
|
27177
|
+
<td
|
|
27178
|
+
class="pf-m-nowrap"
|
|
27179
|
+
role="cell"
|
|
27180
|
+
data-label="Example td"
|
|
27181
|
+
>Test cell 8-6</td>
|
|
27182
|
+
<td
|
|
27183
|
+
class="pf-m-nowrap"
|
|
27184
|
+
role="cell"
|
|
27185
|
+
data-label="Example td"
|
|
27186
|
+
>Test cell 8-7</td>
|
|
27187
|
+
<td
|
|
27188
|
+
class="pf-m-nowrap"
|
|
27189
|
+
role="cell"
|
|
27190
|
+
data-label="Example td"
|
|
27191
|
+
>Test cell 8-8</td>
|
|
27192
|
+
|
|
27193
|
+
<th
|
|
27194
|
+
class="pf-m-truncate pf-m-border-left pf-c-table__sticky-cell pf-m-right"
|
|
27195
|
+
role="columnheader"
|
|
27196
|
+
data-label="Example th"
|
|
27197
|
+
scope="col"
|
|
27198
|
+
style="--pf-c-table__sticky-cell--MinWidth: 150px;"
|
|
27199
|
+
>Test cell 8-9</th>
|
|
27200
|
+
</tr>
|
|
27201
|
+
<tr role="row">
|
|
27202
|
+
<td
|
|
27203
|
+
class="pf-m-nowrap"
|
|
27204
|
+
role="cell"
|
|
27205
|
+
data-label="Example td"
|
|
27206
|
+
>Fact 9</td>
|
|
27207
|
+
<td
|
|
27208
|
+
class="pf-m-nowrap"
|
|
27209
|
+
role="cell"
|
|
27210
|
+
data-label="Example td"
|
|
27211
|
+
>State 9</td>
|
|
27212
|
+
<td
|
|
27213
|
+
class="pf-m-nowrap"
|
|
27214
|
+
role="cell"
|
|
27215
|
+
data-label="Example td"
|
|
27216
|
+
>Test cell 9-3</td>
|
|
27217
|
+
<td
|
|
27218
|
+
class="pf-m-nowrap"
|
|
27219
|
+
role="cell"
|
|
27220
|
+
data-label="Example td"
|
|
27221
|
+
>Test cell 9-4</td>
|
|
27222
|
+
<td
|
|
27223
|
+
class="pf-m-nowrap"
|
|
27224
|
+
role="cell"
|
|
27225
|
+
data-label="Example td"
|
|
27226
|
+
>Test cell 9-5</td>
|
|
27227
|
+
<td
|
|
27228
|
+
class="pf-m-nowrap"
|
|
27229
|
+
role="cell"
|
|
27230
|
+
data-label="Example td"
|
|
27231
|
+
>Test cell 9-6</td>
|
|
27232
|
+
<td
|
|
27233
|
+
class="pf-m-nowrap"
|
|
27234
|
+
role="cell"
|
|
27235
|
+
data-label="Example td"
|
|
27236
|
+
>Test cell 9-7</td>
|
|
27237
|
+
<td
|
|
27238
|
+
class="pf-m-nowrap"
|
|
27239
|
+
role="cell"
|
|
27240
|
+
data-label="Example td"
|
|
27241
|
+
>Test cell 9-8</td>
|
|
27242
|
+
|
|
27243
|
+
<th
|
|
27244
|
+
class="pf-m-truncate pf-m-border-left pf-c-table__sticky-cell pf-m-right"
|
|
27245
|
+
role="columnheader"
|
|
27246
|
+
data-label="Example th"
|
|
27247
|
+
scope="col"
|
|
27248
|
+
style="--pf-c-table__sticky-cell--MinWidth: 150px;"
|
|
27249
|
+
>Test cell 9-9</th>
|
|
27250
|
+
</tr>
|
|
27251
|
+
</tbody>
|
|
27252
|
+
</table>
|
|
27253
|
+
</div>
|
|
27254
|
+
<div class="pf-c-pagination pf-m-bottom">
|
|
27255
|
+
<div class="pf-c-options-menu pf-m-top">
|
|
27256
|
+
<button
|
|
27257
|
+
class="pf-c-options-menu__toggle pf-m-text pf-m-plain"
|
|
27258
|
+
type="button"
|
|
27259
|
+
id="{{page--id}}-pagination-options-menu-bottom-example-toggle"
|
|
27260
|
+
aria-haspopup="listbox"
|
|
27261
|
+
aria-expanded="false"
|
|
27262
|
+
>
|
|
27263
|
+
<span class="pf-c-options-menu__toggle-text">
|
|
27264
|
+
<b>1 - 10</b> of
|
|
27265
|
+
<b>36</b>
|
|
27266
|
+
</span>
|
|
27267
|
+
<div class="pf-c-options-menu__toggle-icon">
|
|
27268
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
27269
|
+
</div>
|
|
27270
|
+
</button>
|
|
27271
|
+
<ul
|
|
27272
|
+
class="pf-c-options-menu__menu pf-m-top"
|
|
27273
|
+
aria-labelledby="{{page--id}}-pagination-options-menu-bottom-example-toggle"
|
|
27274
|
+
hidden
|
|
27275
|
+
>
|
|
27276
|
+
<li>
|
|
27277
|
+
<button
|
|
27278
|
+
class="pf-c-options-menu__menu-item"
|
|
27279
|
+
type="button"
|
|
27280
|
+
>5 per page</button>
|
|
27281
|
+
</li>
|
|
27282
|
+
<li>
|
|
27283
|
+
<button class="pf-c-options-menu__menu-item" type="button">
|
|
27284
|
+
10 per page
|
|
27285
|
+
<div class="pf-c-options-menu__menu-item-icon">
|
|
27286
|
+
<i class="fas fa-check" aria-hidden="true"></i>
|
|
27287
|
+
</div>
|
|
27288
|
+
</button>
|
|
27289
|
+
</li>
|
|
27290
|
+
<li>
|
|
27291
|
+
<button
|
|
27292
|
+
class="pf-c-options-menu__menu-item"
|
|
27293
|
+
type="button"
|
|
27294
|
+
>20 per page</button>
|
|
27295
|
+
</li>
|
|
27296
|
+
</ul>
|
|
27297
|
+
</div>
|
|
27298
|
+
<nav class="pf-c-pagination__nav" aria-label="Pagination">
|
|
27299
|
+
<div class="pf-c-pagination__nav-control pf-m-first">
|
|
27300
|
+
<button
|
|
27301
|
+
class="pf-c-button pf-m-plain"
|
|
27302
|
+
type="button"
|
|
27303
|
+
disabled
|
|
27304
|
+
aria-label="Go to first page"
|
|
27305
|
+
>
|
|
27306
|
+
<i class="fas fa-angle-double-left" aria-hidden="true"></i>
|
|
27307
|
+
</button>
|
|
27308
|
+
</div>
|
|
27309
|
+
<div class="pf-c-pagination__nav-control pf-m-prev">
|
|
27310
|
+
<button
|
|
27311
|
+
class="pf-c-button pf-m-plain"
|
|
27312
|
+
type="button"
|
|
27313
|
+
disabled
|
|
27314
|
+
aria-label="Go to previous page"
|
|
27315
|
+
>
|
|
27316
|
+
<i class="fas fa-angle-left" aria-hidden="true"></i>
|
|
27317
|
+
</button>
|
|
27318
|
+
</div>
|
|
27319
|
+
<div class="pf-c-pagination__nav-page-select">
|
|
27320
|
+
<input
|
|
27321
|
+
class="pf-c-form-control"
|
|
27322
|
+
aria-label="Current page"
|
|
27323
|
+
type="number"
|
|
27324
|
+
min="1"
|
|
27325
|
+
max="4"
|
|
27326
|
+
value="1"
|
|
27327
|
+
/>
|
|
27328
|
+
<span aria-hidden="true">of 4</span>
|
|
27329
|
+
</div>
|
|
27330
|
+
<div class="pf-c-pagination__nav-control pf-m-next">
|
|
27331
|
+
<button
|
|
27332
|
+
class="pf-c-button pf-m-plain"
|
|
27333
|
+
type="button"
|
|
27334
|
+
aria-label="Go to next page"
|
|
27335
|
+
>
|
|
27336
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
27337
|
+
</button>
|
|
27338
|
+
</div>
|
|
27339
|
+
<div class="pf-c-pagination__nav-control pf-m-last">
|
|
27340
|
+
<button
|
|
27341
|
+
class="pf-c-button pf-m-plain"
|
|
27342
|
+
type="button"
|
|
27343
|
+
aria-label="Go to last page"
|
|
27344
|
+
>
|
|
27345
|
+
<i class="fas fa-angle-double-right" aria-hidden="true"></i>
|
|
27346
|
+
</button>
|
|
27347
|
+
</div>
|
|
27348
|
+
</nav>
|
|
27349
|
+
</div>
|
|
27350
|
+
</div>
|
|
27351
|
+
</section>
|
|
27352
|
+
</main>
|
|
27353
|
+
</div>
|
|
27354
|
+
|
|
27355
|
+
```
|
|
27356
|
+
|
|
25514
27357
|
### Cell with image alignment
|
|
25515
27358
|
|
|
25516
27359
|
By default, table cell alignment is set to baseline. This retains vertical alignment with varying text size, but can cause visual inconsistencies with images. The vertical alignment of images within table cells may need to be specified to provide proper alignment.
|