@patternfly/patternfly 4.142.0 → 4.144.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/RELEASE-NOTES.md +40 -0
- package/components/DescriptionList/description-list.css +2 -6
- package/components/DescriptionList/description-list.scss +2 -5
- package/components/Masthead/masthead.css +8 -8
- package/components/Masthead/masthead.scss +2 -2
- package/components/Table/table-scrollable.css +53 -0
- package/components/Table/table-scrollable.scss +60 -0
- package/components/TextInputGroup/text-input-group.css +124 -0
- package/components/TextInputGroup/text-input-group.scss +157 -0
- package/components/_all.scss +2 -0
- package/docs/components/Table/examples/Table.css +4 -0
- package/docs/components/Table/examples/Table.md +1344 -0
- package/docs/components/TextInputGroup/examples/TextInputGroup.md +473 -0
- package/docs/demos/Table/examples/Table.md +3546 -0
- package/package.json +1 -1
- package/patternfly-no-reset.css +189 -14
- package/patternfly.css +189 -14
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -19114,6 +19114,1350 @@ Long strings in table cells will push content. Add a width modifier to `thead th
|
|
|
19114
19114
|
|
|
19115
19115
|
```
|
|
19116
19116
|
|
|
19117
|
+
### Sticky column
|
|
19118
|
+
|
|
19119
|
+
```html
|
|
19120
|
+
<div class="pf-c-scroll-inner-wrapper">
|
|
19121
|
+
<table
|
|
19122
|
+
class="pf-c-table"
|
|
19123
|
+
role="grid"
|
|
19124
|
+
aria-label="This is a scrollable table"
|
|
19125
|
+
id="-table"
|
|
19126
|
+
>
|
|
19127
|
+
<thead>
|
|
19128
|
+
<tr role="row">
|
|
19129
|
+
<th
|
|
19130
|
+
class="pf-m-nowrap pf-m-border-right pf-c-table__sort pf-c-table__sticky-column"
|
|
19131
|
+
role="columnheader"
|
|
19132
|
+
aria-sort="none"
|
|
19133
|
+
data-label="Example th"
|
|
19134
|
+
scope="col"
|
|
19135
|
+
style="--pf-c-table__sticky-column--MinWidth: 100px;"
|
|
19136
|
+
>
|
|
19137
|
+
<button class="pf-c-table__button">
|
|
19138
|
+
<div class="pf-c-table__button-content">
|
|
19139
|
+
<span class="pf-c-table__text">
|
|
19140
|
+
<span class="pf-c-table__text">
|
|
19141
|
+
<div class="pf-l-flex pf-m-nowrap">
|
|
19142
|
+
<span>Fact</span>
|
|
19143
|
+
</div>
|
|
19144
|
+
</span>
|
|
19145
|
+
</span>
|
|
19146
|
+
<span class="pf-c-table__sort-indicator">
|
|
19147
|
+
<i class="fas fa-arrows-alt-v"></i>
|
|
19148
|
+
</span>
|
|
19149
|
+
</div>
|
|
19150
|
+
</button>
|
|
19151
|
+
</th>
|
|
19152
|
+
<th
|
|
19153
|
+
class="pf-m-nowrap pf-c-table__sort"
|
|
19154
|
+
role="columnheader"
|
|
19155
|
+
aria-sort="none"
|
|
19156
|
+
data-label="Example th"
|
|
19157
|
+
scope="col"
|
|
19158
|
+
>
|
|
19159
|
+
<button class="pf-c-table__button">
|
|
19160
|
+
<div class="pf-c-table__button-content">
|
|
19161
|
+
<span class="pf-c-table__text">
|
|
19162
|
+
<span class="pf-c-table__text">
|
|
19163
|
+
<div class="pf-l-flex pf-m-nowrap">
|
|
19164
|
+
<span>State</span>
|
|
19165
|
+
</div>
|
|
19166
|
+
</span>
|
|
19167
|
+
</span>
|
|
19168
|
+
<span class="pf-c-table__sort-indicator">
|
|
19169
|
+
<i class="fas fa-arrows-alt-v"></i>
|
|
19170
|
+
</span>
|
|
19171
|
+
</div>
|
|
19172
|
+
</button>
|
|
19173
|
+
</th>
|
|
19174
|
+
<th
|
|
19175
|
+
class="pf-m-nowrap"
|
|
19176
|
+
role="columnheader"
|
|
19177
|
+
data-label="Example th"
|
|
19178
|
+
scope="col"
|
|
19179
|
+
>
|
|
19180
|
+
<span class="pf-c-table__text">
|
|
19181
|
+
<div class="pf-l-flex pf-m-nowrap">
|
|
19182
|
+
<i class="pficon fas pf-icon-blueprint" aria-hidden="true"></i>
|
|
19183
|
+
<span>Header 3</span>
|
|
19184
|
+
</div>
|
|
19185
|
+
</span>
|
|
19186
|
+
</th>
|
|
19187
|
+
<th
|
|
19188
|
+
class="pf-m-nowrap"
|
|
19189
|
+
role="columnheader"
|
|
19190
|
+
data-label="Example th"
|
|
19191
|
+
scope="col"
|
|
19192
|
+
>
|
|
19193
|
+
<span class="pf-c-table__text">
|
|
19194
|
+
<div class="pf-l-flex pf-m-nowrap">
|
|
19195
|
+
<i class="pficon fas pf-icon-blueprint" aria-hidden="true"></i>
|
|
19196
|
+
<span>Header 4</span>
|
|
19197
|
+
</div>
|
|
19198
|
+
</span>
|
|
19199
|
+
</th>
|
|
19200
|
+
<th
|
|
19201
|
+
class="pf-m-nowrap"
|
|
19202
|
+
role="columnheader"
|
|
19203
|
+
data-label="Example th"
|
|
19204
|
+
scope="col"
|
|
19205
|
+
>
|
|
19206
|
+
<span class="pf-c-table__text">
|
|
19207
|
+
<div class="pf-l-flex pf-m-nowrap">
|
|
19208
|
+
<i class="pficon fas pf-icon-blueprint" aria-hidden="true"></i>
|
|
19209
|
+
<span>Header 5</span>
|
|
19210
|
+
</div>
|
|
19211
|
+
</span>
|
|
19212
|
+
</th>
|
|
19213
|
+
<th
|
|
19214
|
+
class="pf-m-nowrap"
|
|
19215
|
+
role="columnheader"
|
|
19216
|
+
data-label="Example th"
|
|
19217
|
+
scope="col"
|
|
19218
|
+
>
|
|
19219
|
+
<span class="pf-c-table__text">
|
|
19220
|
+
<div class="pf-l-flex pf-m-nowrap">
|
|
19221
|
+
<i class="pficon fas pf-icon-blueprint" aria-hidden="true"></i>
|
|
19222
|
+
<span>Header 6</span>
|
|
19223
|
+
</div>
|
|
19224
|
+
</span>
|
|
19225
|
+
</th>
|
|
19226
|
+
<th
|
|
19227
|
+
class="pf-m-nowrap"
|
|
19228
|
+
role="columnheader"
|
|
19229
|
+
data-label="Example th"
|
|
19230
|
+
scope="col"
|
|
19231
|
+
>
|
|
19232
|
+
<span class="pf-c-table__text">
|
|
19233
|
+
<div class="pf-l-flex pf-m-nowrap">
|
|
19234
|
+
<i class="pficon fas pf-icon-blueprint" aria-hidden="true"></i>
|
|
19235
|
+
<span>Header 7</span>
|
|
19236
|
+
</div>
|
|
19237
|
+
</span>
|
|
19238
|
+
</th>
|
|
19239
|
+
<th
|
|
19240
|
+
class="pf-m-nowrap"
|
|
19241
|
+
role="columnheader"
|
|
19242
|
+
data-label="Example th"
|
|
19243
|
+
scope="col"
|
|
19244
|
+
>
|
|
19245
|
+
<span class="pf-c-table__text">
|
|
19246
|
+
<div class="pf-l-flex pf-m-nowrap">
|
|
19247
|
+
<i class="pficon fas pf-icon-blueprint" aria-hidden="true"></i>
|
|
19248
|
+
<span>Header 8</span>
|
|
19249
|
+
</div>
|
|
19250
|
+
</span>
|
|
19251
|
+
</th>
|
|
19252
|
+
<th
|
|
19253
|
+
class="pf-m-nowrap"
|
|
19254
|
+
role="columnheader"
|
|
19255
|
+
data-label="Example th"
|
|
19256
|
+
scope="col"
|
|
19257
|
+
>
|
|
19258
|
+
<span class="pf-c-table__text">
|
|
19259
|
+
<div class="pf-l-flex pf-m-nowrap">
|
|
19260
|
+
<i class="pficon fas pf-icon-blueprint" aria-hidden="true"></i>
|
|
19261
|
+
<span>Header 9</span>
|
|
19262
|
+
</div>
|
|
19263
|
+
</span>
|
|
19264
|
+
</th>
|
|
19265
|
+
</tr>
|
|
19266
|
+
</thead>
|
|
19267
|
+
|
|
19268
|
+
<tbody role="rowgroup">
|
|
19269
|
+
<tr role="row">
|
|
19270
|
+
<th
|
|
19271
|
+
class="pf-m-nowrap pf-m-border-right pf-c-table__sticky-column"
|
|
19272
|
+
role="columnheader"
|
|
19273
|
+
data-label="Example th"
|
|
19274
|
+
scope="col"
|
|
19275
|
+
style="--pf-c-table__sticky-column--MinWidth: 100px;"
|
|
19276
|
+
>
|
|
19277
|
+
<span class="pf-c-table__text">
|
|
19278
|
+
<div class="pf-l-flex pf-m-nowrap">
|
|
19279
|
+
<span>Fact 1</span>
|
|
19280
|
+
</div>
|
|
19281
|
+
</span>
|
|
19282
|
+
</th>
|
|
19283
|
+
<td role="cell" data-label="Example td">State 1</td>
|
|
19284
|
+
<td role="cell" data-label="Example td">Test cell 1-3</td>
|
|
19285
|
+
<td role="cell" data-label="Example td">Test cell 1-4</td>
|
|
19286
|
+
<td role="cell" data-label="Example td">Test cell 1-5</td>
|
|
19287
|
+
<td role="cell" data-label="Example td">Test cell 1-6</td>
|
|
19288
|
+
<td role="cell" data-label="Example td">Test cell 1-7</td>
|
|
19289
|
+
<td role="cell" data-label="Example td">Test cell 1-8</td>
|
|
19290
|
+
<td role="cell" data-label="Example td">Test cell 1-9</td>
|
|
19291
|
+
</tr>
|
|
19292
|
+
<tr role="row">
|
|
19293
|
+
<th
|
|
19294
|
+
class="pf-m-nowrap pf-m-border-right pf-c-table__sticky-column"
|
|
19295
|
+
role="columnheader"
|
|
19296
|
+
data-label="Example th"
|
|
19297
|
+
scope="col"
|
|
19298
|
+
style="--pf-c-table__sticky-column--MinWidth: 100px;"
|
|
19299
|
+
>
|
|
19300
|
+
<span class="pf-c-table__text">
|
|
19301
|
+
<div class="pf-l-flex pf-m-nowrap">
|
|
19302
|
+
<span>Fact 2</span>
|
|
19303
|
+
</div>
|
|
19304
|
+
</span>
|
|
19305
|
+
</th>
|
|
19306
|
+
<td role="cell" data-label="Example td">State 2</td>
|
|
19307
|
+
<td role="cell" data-label="Example td">Test cell 2-3</td>
|
|
19308
|
+
<td role="cell" data-label="Example td">Test cell 2-4</td>
|
|
19309
|
+
<td role="cell" data-label="Example td">Test cell 2-5</td>
|
|
19310
|
+
<td role="cell" data-label="Example td">Test cell 2-6</td>
|
|
19311
|
+
<td role="cell" data-label="Example td">Test cell 2-7</td>
|
|
19312
|
+
<td role="cell" data-label="Example td">Test cell 2-8</td>
|
|
19313
|
+
<td role="cell" data-label="Example td">Test cell 2-9</td>
|
|
19314
|
+
</tr>
|
|
19315
|
+
<tr role="row">
|
|
19316
|
+
<th
|
|
19317
|
+
class="pf-m-nowrap pf-m-border-right pf-c-table__sticky-column"
|
|
19318
|
+
role="columnheader"
|
|
19319
|
+
data-label="Example th"
|
|
19320
|
+
scope="col"
|
|
19321
|
+
style="--pf-c-table__sticky-column--MinWidth: 100px;"
|
|
19322
|
+
>
|
|
19323
|
+
<span class="pf-c-table__text">
|
|
19324
|
+
<div class="pf-l-flex pf-m-nowrap">
|
|
19325
|
+
<span>Fact 3</span>
|
|
19326
|
+
</div>
|
|
19327
|
+
</span>
|
|
19328
|
+
</th>
|
|
19329
|
+
<td role="cell" data-label="Example td">State 3</td>
|
|
19330
|
+
<td role="cell" data-label="Example td">Test cell 3-3</td>
|
|
19331
|
+
<td role="cell" data-label="Example td">Test cell 3-4</td>
|
|
19332
|
+
<td role="cell" data-label="Example td">Test cell 3-5</td>
|
|
19333
|
+
<td role="cell" data-label="Example td">Test cell 3-6</td>
|
|
19334
|
+
<td role="cell" data-label="Example td">Test cell 3-7</td>
|
|
19335
|
+
<td role="cell" data-label="Example td">Test cell 3-8</td>
|
|
19336
|
+
<td role="cell" data-label="Example td">Test cell 3-9</td>
|
|
19337
|
+
</tr>
|
|
19338
|
+
<tr role="row">
|
|
19339
|
+
<th
|
|
19340
|
+
class="pf-m-nowrap pf-m-border-right pf-c-table__sticky-column"
|
|
19341
|
+
role="columnheader"
|
|
19342
|
+
data-label="Example th"
|
|
19343
|
+
scope="col"
|
|
19344
|
+
style="--pf-c-table__sticky-column--MinWidth: 100px;"
|
|
19345
|
+
>
|
|
19346
|
+
<span class="pf-c-table__text">
|
|
19347
|
+
<div class="pf-l-flex pf-m-nowrap">
|
|
19348
|
+
<span>Fact 4</span>
|
|
19349
|
+
</div>
|
|
19350
|
+
</span>
|
|
19351
|
+
</th>
|
|
19352
|
+
<td role="cell" data-label="Example td">State 4</td>
|
|
19353
|
+
<td role="cell" data-label="Example td">Test cell 4-3</td>
|
|
19354
|
+
<td role="cell" data-label="Example td">Test cell 4-4</td>
|
|
19355
|
+
<td role="cell" data-label="Example td">Test cell 4-5</td>
|
|
19356
|
+
<td role="cell" data-label="Example td">Test cell 4-6</td>
|
|
19357
|
+
<td role="cell" data-label="Example td">Test cell 4-7</td>
|
|
19358
|
+
<td role="cell" data-label="Example td">Test cell 4-8</td>
|
|
19359
|
+
<td role="cell" data-label="Example td">Test cell 4-9</td>
|
|
19360
|
+
</tr>
|
|
19361
|
+
<tr role="row">
|
|
19362
|
+
<th
|
|
19363
|
+
class="pf-m-nowrap pf-m-border-right pf-c-table__sticky-column"
|
|
19364
|
+
role="columnheader"
|
|
19365
|
+
data-label="Example th"
|
|
19366
|
+
scope="col"
|
|
19367
|
+
style="--pf-c-table__sticky-column--MinWidth: 100px;"
|
|
19368
|
+
>
|
|
19369
|
+
<span class="pf-c-table__text">
|
|
19370
|
+
<div class="pf-l-flex pf-m-nowrap">
|
|
19371
|
+
<span>Fact 5</span>
|
|
19372
|
+
</div>
|
|
19373
|
+
</span>
|
|
19374
|
+
</th>
|
|
19375
|
+
<td role="cell" data-label="Example td">State 5</td>
|
|
19376
|
+
<td role="cell" data-label="Example td">Test cell 5-3</td>
|
|
19377
|
+
<td role="cell" data-label="Example td">Test cell 5-4</td>
|
|
19378
|
+
<td role="cell" data-label="Example td">Test cell 5-5</td>
|
|
19379
|
+
<td role="cell" data-label="Example td">Test cell 5-6</td>
|
|
19380
|
+
<td role="cell" data-label="Example td">Test cell 5-7</td>
|
|
19381
|
+
<td role="cell" data-label="Example td">Test cell 5-8</td>
|
|
19382
|
+
<td role="cell" data-label="Example td">Test cell 5-9</td>
|
|
19383
|
+
</tr>
|
|
19384
|
+
<tr role="row">
|
|
19385
|
+
<th
|
|
19386
|
+
class="pf-m-nowrap pf-m-border-right pf-c-table__sticky-column"
|
|
19387
|
+
role="columnheader"
|
|
19388
|
+
data-label="Example th"
|
|
19389
|
+
scope="col"
|
|
19390
|
+
style="--pf-c-table__sticky-column--MinWidth: 100px;"
|
|
19391
|
+
>
|
|
19392
|
+
<span class="pf-c-table__text">
|
|
19393
|
+
<div class="pf-l-flex pf-m-nowrap">
|
|
19394
|
+
<span>Fact 6</span>
|
|
19395
|
+
</div>
|
|
19396
|
+
</span>
|
|
19397
|
+
</th>
|
|
19398
|
+
<td role="cell" data-label="Example td">State 6</td>
|
|
19399
|
+
<td role="cell" data-label="Example td">Test cell 6-3</td>
|
|
19400
|
+
<td role="cell" data-label="Example td">Test cell 6-4</td>
|
|
19401
|
+
<td role="cell" data-label="Example td">Test cell 6-5</td>
|
|
19402
|
+
<td role="cell" data-label="Example td">Test cell 6-6</td>
|
|
19403
|
+
<td role="cell" data-label="Example td">Test cell 6-7</td>
|
|
19404
|
+
<td role="cell" data-label="Example td">Test cell 6-8</td>
|
|
19405
|
+
<td role="cell" data-label="Example td">Test cell 6-9</td>
|
|
19406
|
+
</tr>
|
|
19407
|
+
<tr role="row">
|
|
19408
|
+
<th
|
|
19409
|
+
class="pf-m-nowrap pf-m-border-right pf-c-table__sticky-column"
|
|
19410
|
+
role="columnheader"
|
|
19411
|
+
data-label="Example th"
|
|
19412
|
+
scope="col"
|
|
19413
|
+
style="--pf-c-table__sticky-column--MinWidth: 100px;"
|
|
19414
|
+
>
|
|
19415
|
+
<span class="pf-c-table__text">
|
|
19416
|
+
<div class="pf-l-flex pf-m-nowrap">
|
|
19417
|
+
<span>Fact 7</span>
|
|
19418
|
+
</div>
|
|
19419
|
+
</span>
|
|
19420
|
+
</th>
|
|
19421
|
+
<td role="cell" data-label="Example td">State 7</td>
|
|
19422
|
+
<td role="cell" data-label="Example td">Test cell 7-3</td>
|
|
19423
|
+
<td role="cell" data-label="Example td">Test cell 7-4</td>
|
|
19424
|
+
<td role="cell" data-label="Example td">Test cell 7-5</td>
|
|
19425
|
+
<td role="cell" data-label="Example td">Test cell 7-6</td>
|
|
19426
|
+
<td role="cell" data-label="Example td">Test cell 7-7</td>
|
|
19427
|
+
<td role="cell" data-label="Example td">Test cell 7-8</td>
|
|
19428
|
+
<td role="cell" data-label="Example td">Test cell 7-9</td>
|
|
19429
|
+
</tr>
|
|
19430
|
+
<tr role="row">
|
|
19431
|
+
<th
|
|
19432
|
+
class="pf-m-nowrap pf-m-border-right pf-c-table__sticky-column"
|
|
19433
|
+
role="columnheader"
|
|
19434
|
+
data-label="Example th"
|
|
19435
|
+
scope="col"
|
|
19436
|
+
style="--pf-c-table__sticky-column--MinWidth: 100px;"
|
|
19437
|
+
>
|
|
19438
|
+
<span class="pf-c-table__text">
|
|
19439
|
+
<div class="pf-l-flex pf-m-nowrap">
|
|
19440
|
+
<span>Fact 8</span>
|
|
19441
|
+
</div>
|
|
19442
|
+
</span>
|
|
19443
|
+
</th>
|
|
19444
|
+
<td role="cell" data-label="Example td">State 8</td>
|
|
19445
|
+
<td role="cell" data-label="Example td">Test cell 8-3</td>
|
|
19446
|
+
<td role="cell" data-label="Example td">Test cell 8-4</td>
|
|
19447
|
+
<td role="cell" data-label="Example td">Test cell 8-5</td>
|
|
19448
|
+
<td role="cell" data-label="Example td">Test cell 8-6</td>
|
|
19449
|
+
<td role="cell" data-label="Example td">Test cell 8-7</td>
|
|
19450
|
+
<td role="cell" data-label="Example td">Test cell 8-8</td>
|
|
19451
|
+
<td role="cell" data-label="Example td">Test cell 8-9</td>
|
|
19452
|
+
</tr>
|
|
19453
|
+
<tr role="row">
|
|
19454
|
+
<th
|
|
19455
|
+
class="pf-m-nowrap pf-m-border-right pf-c-table__sticky-column"
|
|
19456
|
+
role="columnheader"
|
|
19457
|
+
data-label="Example th"
|
|
19458
|
+
scope="col"
|
|
19459
|
+
style="--pf-c-table__sticky-column--MinWidth: 100px;"
|
|
19460
|
+
>
|
|
19461
|
+
<span class="pf-c-table__text">
|
|
19462
|
+
<div class="pf-l-flex pf-m-nowrap">
|
|
19463
|
+
<span>Fact 9</span>
|
|
19464
|
+
</div>
|
|
19465
|
+
</span>
|
|
19466
|
+
</th>
|
|
19467
|
+
<td role="cell" data-label="Example td">State 9</td>
|
|
19468
|
+
<td role="cell" data-label="Example td">Test cell 9-3</td>
|
|
19469
|
+
<td role="cell" data-label="Example td">Test cell 9-4</td>
|
|
19470
|
+
<td role="cell" data-label="Example td">Test cell 9-5</td>
|
|
19471
|
+
<td role="cell" data-label="Example td">Test cell 9-6</td>
|
|
19472
|
+
<td role="cell" data-label="Example td">Test cell 9-7</td>
|
|
19473
|
+
<td role="cell" data-label="Example td">Test cell 9-8</td>
|
|
19474
|
+
<td role="cell" data-label="Example td">Test cell 9-9</td>
|
|
19475
|
+
</tr>
|
|
19476
|
+
</tbody>
|
|
19477
|
+
</table>
|
|
19478
|
+
</div>
|
|
19479
|
+
|
|
19480
|
+
```
|
|
19481
|
+
|
|
19482
|
+
### Multiple sticky columns
|
|
19483
|
+
|
|
19484
|
+
```html
|
|
19485
|
+
<div class="pf-c-scroll-inner-wrapper">
|
|
19486
|
+
<table
|
|
19487
|
+
class="pf-c-table"
|
|
19488
|
+
role="grid"
|
|
19489
|
+
aria-label="This is a scrollable table"
|
|
19490
|
+
id="-table"
|
|
19491
|
+
>
|
|
19492
|
+
<thead>
|
|
19493
|
+
<tr role="row">
|
|
19494
|
+
<th
|
|
19495
|
+
class="pf-m-nowrap pf-c-table__sort pf-c-table__sticky-column"
|
|
19496
|
+
role="columnheader"
|
|
19497
|
+
aria-sort="none"
|
|
19498
|
+
data-label="Example th"
|
|
19499
|
+
scope="col"
|
|
19500
|
+
style="--pf-c-table__sticky-column--MinWidth: 100px;"
|
|
19501
|
+
>
|
|
19502
|
+
<button class="pf-c-table__button">
|
|
19503
|
+
<div class="pf-c-table__button-content">
|
|
19504
|
+
<span class="pf-c-table__text">
|
|
19505
|
+
<span class="pf-c-table__text">
|
|
19506
|
+
<div class="pf-l-flex pf-m-nowrap">
|
|
19507
|
+
<span>Fact</span>
|
|
19508
|
+
</div>
|
|
19509
|
+
</span>
|
|
19510
|
+
</span>
|
|
19511
|
+
<span class="pf-c-table__sort-indicator">
|
|
19512
|
+
<i class="fas fa-arrows-alt-v"></i>
|
|
19513
|
+
</span>
|
|
19514
|
+
</div>
|
|
19515
|
+
</button>
|
|
19516
|
+
</th>
|
|
19517
|
+
<th
|
|
19518
|
+
class="pf-m-nowrap pf-m-border-right pf-c-table__sort pf-c-table__sticky-column"
|
|
19519
|
+
role="columnheader"
|
|
19520
|
+
aria-sort="none"
|
|
19521
|
+
data-label="Example th"
|
|
19522
|
+
scope="col"
|
|
19523
|
+
style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
|
|
19524
|
+
>
|
|
19525
|
+
<button class="pf-c-table__button">
|
|
19526
|
+
<div class="pf-c-table__button-content">
|
|
19527
|
+
<span class="pf-c-table__text">
|
|
19528
|
+
<span class="pf-c-table__text">
|
|
19529
|
+
<div class="pf-l-flex pf-m-nowrap">
|
|
19530
|
+
<span>State</span>
|
|
19531
|
+
</div>
|
|
19532
|
+
</span>
|
|
19533
|
+
</span>
|
|
19534
|
+
<span class="pf-c-table__sort-indicator">
|
|
19535
|
+
<i class="fas fa-arrows-alt-v"></i>
|
|
19536
|
+
</span>
|
|
19537
|
+
</div>
|
|
19538
|
+
</button>
|
|
19539
|
+
</th>
|
|
19540
|
+
<th
|
|
19541
|
+
class="pf-m-nowrap"
|
|
19542
|
+
role="columnheader"
|
|
19543
|
+
data-label="Example th"
|
|
19544
|
+
scope="col"
|
|
19545
|
+
>
|
|
19546
|
+
<span class="pf-c-table__text">
|
|
19547
|
+
<div class="pf-l-flex pf-m-nowrap">
|
|
19548
|
+
<i class="pficon fas pf-icon-blueprint" aria-hidden="true"></i>
|
|
19549
|
+
<span>Header 3</span>
|
|
19550
|
+
</div>
|
|
19551
|
+
</span>
|
|
19552
|
+
</th>
|
|
19553
|
+
<th
|
|
19554
|
+
class="pf-m-nowrap"
|
|
19555
|
+
role="columnheader"
|
|
19556
|
+
data-label="Example th"
|
|
19557
|
+
scope="col"
|
|
19558
|
+
>
|
|
19559
|
+
<span class="pf-c-table__text">
|
|
19560
|
+
<div class="pf-l-flex pf-m-nowrap">
|
|
19561
|
+
<i class="pficon fas pf-icon-blueprint" aria-hidden="true"></i>
|
|
19562
|
+
<span>Header 4</span>
|
|
19563
|
+
</div>
|
|
19564
|
+
</span>
|
|
19565
|
+
</th>
|
|
19566
|
+
<th
|
|
19567
|
+
class="pf-m-nowrap"
|
|
19568
|
+
role="columnheader"
|
|
19569
|
+
data-label="Example th"
|
|
19570
|
+
scope="col"
|
|
19571
|
+
>
|
|
19572
|
+
<span class="pf-c-table__text">
|
|
19573
|
+
<div class="pf-l-flex pf-m-nowrap">
|
|
19574
|
+
<i class="pficon fas pf-icon-blueprint" aria-hidden="true"></i>
|
|
19575
|
+
<span>Header 5</span>
|
|
19576
|
+
</div>
|
|
19577
|
+
</span>
|
|
19578
|
+
</th>
|
|
19579
|
+
<th
|
|
19580
|
+
class="pf-m-nowrap"
|
|
19581
|
+
role="columnheader"
|
|
19582
|
+
data-label="Example th"
|
|
19583
|
+
scope="col"
|
|
19584
|
+
>
|
|
19585
|
+
<span class="pf-c-table__text">
|
|
19586
|
+
<div class="pf-l-flex pf-m-nowrap">
|
|
19587
|
+
<i class="pficon fas pf-icon-blueprint" aria-hidden="true"></i>
|
|
19588
|
+
<span>Header 6</span>
|
|
19589
|
+
</div>
|
|
19590
|
+
</span>
|
|
19591
|
+
</th>
|
|
19592
|
+
<th
|
|
19593
|
+
class="pf-m-nowrap"
|
|
19594
|
+
role="columnheader"
|
|
19595
|
+
data-label="Example th"
|
|
19596
|
+
scope="col"
|
|
19597
|
+
>
|
|
19598
|
+
<span class="pf-c-table__text">
|
|
19599
|
+
<div class="pf-l-flex pf-m-nowrap">
|
|
19600
|
+
<i class="pficon fas pf-icon-blueprint" aria-hidden="true"></i>
|
|
19601
|
+
<span>Header 7</span>
|
|
19602
|
+
</div>
|
|
19603
|
+
</span>
|
|
19604
|
+
</th>
|
|
19605
|
+
<th
|
|
19606
|
+
class="pf-m-nowrap"
|
|
19607
|
+
role="columnheader"
|
|
19608
|
+
data-label="Example th"
|
|
19609
|
+
scope="col"
|
|
19610
|
+
>
|
|
19611
|
+
<span class="pf-c-table__text">
|
|
19612
|
+
<div class="pf-l-flex pf-m-nowrap">
|
|
19613
|
+
<i class="pficon fas pf-icon-blueprint" aria-hidden="true"></i>
|
|
19614
|
+
<span>Header 8</span>
|
|
19615
|
+
</div>
|
|
19616
|
+
</span>
|
|
19617
|
+
</th>
|
|
19618
|
+
<th
|
|
19619
|
+
class="pf-m-nowrap"
|
|
19620
|
+
role="columnheader"
|
|
19621
|
+
data-label="Example th"
|
|
19622
|
+
scope="col"
|
|
19623
|
+
>
|
|
19624
|
+
<span class="pf-c-table__text">
|
|
19625
|
+
<div class="pf-l-flex pf-m-nowrap">
|
|
19626
|
+
<i class="pficon fas pf-icon-blueprint" aria-hidden="true"></i>
|
|
19627
|
+
<span>Header 9</span>
|
|
19628
|
+
</div>
|
|
19629
|
+
</span>
|
|
19630
|
+
</th>
|
|
19631
|
+
</tr>
|
|
19632
|
+
</thead>
|
|
19633
|
+
|
|
19634
|
+
<tbody role="rowgroup">
|
|
19635
|
+
<tr role="row">
|
|
19636
|
+
<th
|
|
19637
|
+
class="pf-m-nowrap pf-c-table__sticky-column"
|
|
19638
|
+
role="columnheader"
|
|
19639
|
+
data-label="Example th"
|
|
19640
|
+
scope="col"
|
|
19641
|
+
style="--pf-c-table__sticky-column--MinWidth: 100px;"
|
|
19642
|
+
>
|
|
19643
|
+
<span class="pf-c-table__text">
|
|
19644
|
+
<div class="pf-l-flex pf-m-nowrap">
|
|
19645
|
+
<span>Fact 1</span>
|
|
19646
|
+
</div>
|
|
19647
|
+
</span>
|
|
19648
|
+
</th>
|
|
19649
|
+
<th
|
|
19650
|
+
class="pf-m-nowrap pf-m-border-right pf-c-table__sticky-column"
|
|
19651
|
+
role="columnheader"
|
|
19652
|
+
data-label="Example th"
|
|
19653
|
+
scope="col"
|
|
19654
|
+
style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
|
|
19655
|
+
>
|
|
19656
|
+
<span class="pf-c-table__text">
|
|
19657
|
+
<div class="pf-l-flex pf-m-nowrap">
|
|
19658
|
+
<i class="pficon fas pf-icon-blueprint" aria-hidden="true"></i>
|
|
19659
|
+
<span>State 1</span>
|
|
19660
|
+
</div>
|
|
19661
|
+
</span>
|
|
19662
|
+
</th>
|
|
19663
|
+
<td role="cell" data-label="Example td">Test cell 1-3</td>
|
|
19664
|
+
<td role="cell" data-label="Example td">Test cell 1-4</td>
|
|
19665
|
+
<td role="cell" data-label="Example td">Test cell 1-5</td>
|
|
19666
|
+
<td role="cell" data-label="Example td">Test cell 1-6</td>
|
|
19667
|
+
<td role="cell" data-label="Example td">Test cell 1-7</td>
|
|
19668
|
+
<td role="cell" data-label="Example td">Test cell 1-8</td>
|
|
19669
|
+
<td role="cell" data-label="Example td">Test cell 1-9</td>
|
|
19670
|
+
</tr>
|
|
19671
|
+
<tr role="row">
|
|
19672
|
+
<th
|
|
19673
|
+
class="pf-m-nowrap pf-c-table__sticky-column"
|
|
19674
|
+
role="columnheader"
|
|
19675
|
+
data-label="Example th"
|
|
19676
|
+
scope="col"
|
|
19677
|
+
style="--pf-c-table__sticky-column--MinWidth: 100px;"
|
|
19678
|
+
>
|
|
19679
|
+
<span class="pf-c-table__text">
|
|
19680
|
+
<div class="pf-l-flex pf-m-nowrap">
|
|
19681
|
+
<span>Fact 2</span>
|
|
19682
|
+
</div>
|
|
19683
|
+
</span>
|
|
19684
|
+
</th>
|
|
19685
|
+
<th
|
|
19686
|
+
class="pf-m-nowrap pf-m-border-right pf-c-table__sticky-column"
|
|
19687
|
+
role="columnheader"
|
|
19688
|
+
data-label="Example th"
|
|
19689
|
+
scope="col"
|
|
19690
|
+
style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
|
|
19691
|
+
>
|
|
19692
|
+
<span class="pf-c-table__text">
|
|
19693
|
+
<div class="pf-l-flex pf-m-nowrap">
|
|
19694
|
+
<i class="pficon fas pf-icon-blueprint" aria-hidden="true"></i>
|
|
19695
|
+
<span>State 2</span>
|
|
19696
|
+
</div>
|
|
19697
|
+
</span>
|
|
19698
|
+
</th>
|
|
19699
|
+
<td role="cell" data-label="Example td">Test cell 2-3</td>
|
|
19700
|
+
<td role="cell" data-label="Example td">Test cell 2-4</td>
|
|
19701
|
+
<td role="cell" data-label="Example td">Test cell 2-5</td>
|
|
19702
|
+
<td role="cell" data-label="Example td">Test cell 2-6</td>
|
|
19703
|
+
<td role="cell" data-label="Example td">Test cell 2-7</td>
|
|
19704
|
+
<td role="cell" data-label="Example td">Test cell 2-8</td>
|
|
19705
|
+
<td role="cell" data-label="Example td">Test cell 2-9</td>
|
|
19706
|
+
</tr>
|
|
19707
|
+
<tr role="row">
|
|
19708
|
+
<th
|
|
19709
|
+
class="pf-m-nowrap pf-c-table__sticky-column"
|
|
19710
|
+
role="columnheader"
|
|
19711
|
+
data-label="Example th"
|
|
19712
|
+
scope="col"
|
|
19713
|
+
style="--pf-c-table__sticky-column--MinWidth: 100px;"
|
|
19714
|
+
>
|
|
19715
|
+
<span class="pf-c-table__text">
|
|
19716
|
+
<div class="pf-l-flex pf-m-nowrap">
|
|
19717
|
+
<span>Fact 3</span>
|
|
19718
|
+
</div>
|
|
19719
|
+
</span>
|
|
19720
|
+
</th>
|
|
19721
|
+
<th
|
|
19722
|
+
class="pf-m-nowrap pf-m-border-right pf-c-table__sticky-column"
|
|
19723
|
+
role="columnheader"
|
|
19724
|
+
data-label="Example th"
|
|
19725
|
+
scope="col"
|
|
19726
|
+
style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
|
|
19727
|
+
>
|
|
19728
|
+
<span class="pf-c-table__text">
|
|
19729
|
+
<div class="pf-l-flex pf-m-nowrap">
|
|
19730
|
+
<i class="pficon fas pf-icon-blueprint" aria-hidden="true"></i>
|
|
19731
|
+
<span>State 3</span>
|
|
19732
|
+
</div>
|
|
19733
|
+
</span>
|
|
19734
|
+
</th>
|
|
19735
|
+
<td role="cell" data-label="Example td">Test cell 3-3</td>
|
|
19736
|
+
<td role="cell" data-label="Example td">Test cell 3-4</td>
|
|
19737
|
+
<td role="cell" data-label="Example td">Test cell 3-5</td>
|
|
19738
|
+
<td role="cell" data-label="Example td">Test cell 3-6</td>
|
|
19739
|
+
<td role="cell" data-label="Example td">Test cell 3-7</td>
|
|
19740
|
+
<td role="cell" data-label="Example td">Test cell 3-8</td>
|
|
19741
|
+
<td role="cell" data-label="Example td">Test cell 3-9</td>
|
|
19742
|
+
</tr>
|
|
19743
|
+
<tr role="row">
|
|
19744
|
+
<th
|
|
19745
|
+
class="pf-m-nowrap pf-c-table__sticky-column"
|
|
19746
|
+
role="columnheader"
|
|
19747
|
+
data-label="Example th"
|
|
19748
|
+
scope="col"
|
|
19749
|
+
style="--pf-c-table__sticky-column--MinWidth: 100px;"
|
|
19750
|
+
>
|
|
19751
|
+
<span class="pf-c-table__text">
|
|
19752
|
+
<div class="pf-l-flex pf-m-nowrap">
|
|
19753
|
+
<span>Fact 4</span>
|
|
19754
|
+
</div>
|
|
19755
|
+
</span>
|
|
19756
|
+
</th>
|
|
19757
|
+
<th
|
|
19758
|
+
class="pf-m-nowrap pf-m-border-right pf-c-table__sticky-column"
|
|
19759
|
+
role="columnheader"
|
|
19760
|
+
data-label="Example th"
|
|
19761
|
+
scope="col"
|
|
19762
|
+
style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
|
|
19763
|
+
>
|
|
19764
|
+
<span class="pf-c-table__text">
|
|
19765
|
+
<div class="pf-l-flex pf-m-nowrap">
|
|
19766
|
+
<i class="pficon fas pf-icon-blueprint" aria-hidden="true"></i>
|
|
19767
|
+
<span>State 4</span>
|
|
19768
|
+
</div>
|
|
19769
|
+
</span>
|
|
19770
|
+
</th>
|
|
19771
|
+
<td role="cell" data-label="Example td">Test cell 4-3</td>
|
|
19772
|
+
<td role="cell" data-label="Example td">Test cell 4-4</td>
|
|
19773
|
+
<td role="cell" data-label="Example td">Test cell 4-5</td>
|
|
19774
|
+
<td role="cell" data-label="Example td">Test cell 4-6</td>
|
|
19775
|
+
<td role="cell" data-label="Example td">Test cell 4-7</td>
|
|
19776
|
+
<td role="cell" data-label="Example td">Test cell 4-8</td>
|
|
19777
|
+
<td role="cell" data-label="Example td">Test cell 4-9</td>
|
|
19778
|
+
</tr>
|
|
19779
|
+
<tr role="row">
|
|
19780
|
+
<th
|
|
19781
|
+
class="pf-m-nowrap pf-c-table__sticky-column"
|
|
19782
|
+
role="columnheader"
|
|
19783
|
+
data-label="Example th"
|
|
19784
|
+
scope="col"
|
|
19785
|
+
style="--pf-c-table__sticky-column--MinWidth: 100px;"
|
|
19786
|
+
>
|
|
19787
|
+
<span class="pf-c-table__text">
|
|
19788
|
+
<div class="pf-l-flex pf-m-nowrap">
|
|
19789
|
+
<span>Fact 5</span>
|
|
19790
|
+
</div>
|
|
19791
|
+
</span>
|
|
19792
|
+
</th>
|
|
19793
|
+
<th
|
|
19794
|
+
class="pf-m-nowrap pf-m-border-right pf-c-table__sticky-column"
|
|
19795
|
+
role="columnheader"
|
|
19796
|
+
data-label="Example th"
|
|
19797
|
+
scope="col"
|
|
19798
|
+
style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
|
|
19799
|
+
>
|
|
19800
|
+
<span class="pf-c-table__text">
|
|
19801
|
+
<div class="pf-l-flex pf-m-nowrap">
|
|
19802
|
+
<i class="pficon fas pf-icon-blueprint" aria-hidden="true"></i>
|
|
19803
|
+
<span>State 5</span>
|
|
19804
|
+
</div>
|
|
19805
|
+
</span>
|
|
19806
|
+
</th>
|
|
19807
|
+
<td role="cell" data-label="Example td">Test cell 5-3</td>
|
|
19808
|
+
<td role="cell" data-label="Example td">Test cell 5-4</td>
|
|
19809
|
+
<td role="cell" data-label="Example td">Test cell 5-5</td>
|
|
19810
|
+
<td role="cell" data-label="Example td">Test cell 5-6</td>
|
|
19811
|
+
<td role="cell" data-label="Example td">Test cell 5-7</td>
|
|
19812
|
+
<td role="cell" data-label="Example td">Test cell 5-8</td>
|
|
19813
|
+
<td role="cell" data-label="Example td">Test cell 5-9</td>
|
|
19814
|
+
</tr>
|
|
19815
|
+
<tr role="row">
|
|
19816
|
+
<th
|
|
19817
|
+
class="pf-m-nowrap pf-c-table__sticky-column"
|
|
19818
|
+
role="columnheader"
|
|
19819
|
+
data-label="Example th"
|
|
19820
|
+
scope="col"
|
|
19821
|
+
style="--pf-c-table__sticky-column--MinWidth: 100px;"
|
|
19822
|
+
>
|
|
19823
|
+
<span class="pf-c-table__text">
|
|
19824
|
+
<div class="pf-l-flex pf-m-nowrap">
|
|
19825
|
+
<span>Fact 6</span>
|
|
19826
|
+
</div>
|
|
19827
|
+
</span>
|
|
19828
|
+
</th>
|
|
19829
|
+
<th
|
|
19830
|
+
class="pf-m-nowrap pf-m-border-right pf-c-table__sticky-column"
|
|
19831
|
+
role="columnheader"
|
|
19832
|
+
data-label="Example th"
|
|
19833
|
+
scope="col"
|
|
19834
|
+
style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
|
|
19835
|
+
>
|
|
19836
|
+
<span class="pf-c-table__text">
|
|
19837
|
+
<div class="pf-l-flex pf-m-nowrap">
|
|
19838
|
+
<i class="pficon fas pf-icon-blueprint" aria-hidden="true"></i>
|
|
19839
|
+
<span>State 6</span>
|
|
19840
|
+
</div>
|
|
19841
|
+
</span>
|
|
19842
|
+
</th>
|
|
19843
|
+
<td role="cell" data-label="Example td">Test cell 6-3</td>
|
|
19844
|
+
<td role="cell" data-label="Example td">Test cell 6-4</td>
|
|
19845
|
+
<td role="cell" data-label="Example td">Test cell 6-5</td>
|
|
19846
|
+
<td role="cell" data-label="Example td">Test cell 6-6</td>
|
|
19847
|
+
<td role="cell" data-label="Example td">Test cell 6-7</td>
|
|
19848
|
+
<td role="cell" data-label="Example td">Test cell 6-8</td>
|
|
19849
|
+
<td role="cell" data-label="Example td">Test cell 6-9</td>
|
|
19850
|
+
</tr>
|
|
19851
|
+
<tr role="row">
|
|
19852
|
+
<th
|
|
19853
|
+
class="pf-m-nowrap pf-c-table__sticky-column"
|
|
19854
|
+
role="columnheader"
|
|
19855
|
+
data-label="Example th"
|
|
19856
|
+
scope="col"
|
|
19857
|
+
style="--pf-c-table__sticky-column--MinWidth: 100px;"
|
|
19858
|
+
>
|
|
19859
|
+
<span class="pf-c-table__text">
|
|
19860
|
+
<div class="pf-l-flex pf-m-nowrap">
|
|
19861
|
+
<span>Fact 7</span>
|
|
19862
|
+
</div>
|
|
19863
|
+
</span>
|
|
19864
|
+
</th>
|
|
19865
|
+
<th
|
|
19866
|
+
class="pf-m-nowrap pf-m-border-right pf-c-table__sticky-column"
|
|
19867
|
+
role="columnheader"
|
|
19868
|
+
data-label="Example th"
|
|
19869
|
+
scope="col"
|
|
19870
|
+
style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
|
|
19871
|
+
>
|
|
19872
|
+
<span class="pf-c-table__text">
|
|
19873
|
+
<div class="pf-l-flex pf-m-nowrap">
|
|
19874
|
+
<i class="pficon fas pf-icon-blueprint" aria-hidden="true"></i>
|
|
19875
|
+
<span>State 7</span>
|
|
19876
|
+
</div>
|
|
19877
|
+
</span>
|
|
19878
|
+
</th>
|
|
19879
|
+
<td role="cell" data-label="Example td">Test cell 7-3</td>
|
|
19880
|
+
<td role="cell" data-label="Example td">Test cell 7-4</td>
|
|
19881
|
+
<td role="cell" data-label="Example td">Test cell 7-5</td>
|
|
19882
|
+
<td role="cell" data-label="Example td">Test cell 7-6</td>
|
|
19883
|
+
<td role="cell" data-label="Example td">Test cell 7-7</td>
|
|
19884
|
+
<td role="cell" data-label="Example td">Test cell 7-8</td>
|
|
19885
|
+
<td role="cell" data-label="Example td">Test cell 7-9</td>
|
|
19886
|
+
</tr>
|
|
19887
|
+
<tr role="row">
|
|
19888
|
+
<th
|
|
19889
|
+
class="pf-m-nowrap pf-c-table__sticky-column"
|
|
19890
|
+
role="columnheader"
|
|
19891
|
+
data-label="Example th"
|
|
19892
|
+
scope="col"
|
|
19893
|
+
style="--pf-c-table__sticky-column--MinWidth: 100px;"
|
|
19894
|
+
>
|
|
19895
|
+
<span class="pf-c-table__text">
|
|
19896
|
+
<div class="pf-l-flex pf-m-nowrap">
|
|
19897
|
+
<span>Fact 8</span>
|
|
19898
|
+
</div>
|
|
19899
|
+
</span>
|
|
19900
|
+
</th>
|
|
19901
|
+
<th
|
|
19902
|
+
class="pf-m-nowrap pf-m-border-right pf-c-table__sticky-column"
|
|
19903
|
+
role="columnheader"
|
|
19904
|
+
data-label="Example th"
|
|
19905
|
+
scope="col"
|
|
19906
|
+
style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
|
|
19907
|
+
>
|
|
19908
|
+
<span class="pf-c-table__text">
|
|
19909
|
+
<div class="pf-l-flex pf-m-nowrap">
|
|
19910
|
+
<i class="pficon fas pf-icon-blueprint" aria-hidden="true"></i>
|
|
19911
|
+
<span>State 8</span>
|
|
19912
|
+
</div>
|
|
19913
|
+
</span>
|
|
19914
|
+
</th>
|
|
19915
|
+
<td role="cell" data-label="Example td">Test cell 8-3</td>
|
|
19916
|
+
<td role="cell" data-label="Example td">Test cell 8-4</td>
|
|
19917
|
+
<td role="cell" data-label="Example td">Test cell 8-5</td>
|
|
19918
|
+
<td role="cell" data-label="Example td">Test cell 8-6</td>
|
|
19919
|
+
<td role="cell" data-label="Example td">Test cell 8-7</td>
|
|
19920
|
+
<td role="cell" data-label="Example td">Test cell 8-8</td>
|
|
19921
|
+
<td role="cell" data-label="Example td">Test cell 8-9</td>
|
|
19922
|
+
</tr>
|
|
19923
|
+
<tr role="row">
|
|
19924
|
+
<th
|
|
19925
|
+
class="pf-m-nowrap pf-c-table__sticky-column"
|
|
19926
|
+
role="columnheader"
|
|
19927
|
+
data-label="Example th"
|
|
19928
|
+
scope="col"
|
|
19929
|
+
style="--pf-c-table__sticky-column--MinWidth: 100px;"
|
|
19930
|
+
>
|
|
19931
|
+
<span class="pf-c-table__text">
|
|
19932
|
+
<div class="pf-l-flex pf-m-nowrap">
|
|
19933
|
+
<span>Fact 9</span>
|
|
19934
|
+
</div>
|
|
19935
|
+
</span>
|
|
19936
|
+
</th>
|
|
19937
|
+
<th
|
|
19938
|
+
class="pf-m-nowrap pf-m-border-right pf-c-table__sticky-column"
|
|
19939
|
+
role="columnheader"
|
|
19940
|
+
data-label="Example th"
|
|
19941
|
+
scope="col"
|
|
19942
|
+
style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
|
|
19943
|
+
>
|
|
19944
|
+
<span class="pf-c-table__text">
|
|
19945
|
+
<div class="pf-l-flex pf-m-nowrap">
|
|
19946
|
+
<i class="pficon fas pf-icon-blueprint" aria-hidden="true"></i>
|
|
19947
|
+
<span>State 9</span>
|
|
19948
|
+
</div>
|
|
19949
|
+
</span>
|
|
19950
|
+
</th>
|
|
19951
|
+
<td role="cell" data-label="Example td">Test cell 9-3</td>
|
|
19952
|
+
<td role="cell" data-label="Example td">Test cell 9-4</td>
|
|
19953
|
+
<td role="cell" data-label="Example td">Test cell 9-5</td>
|
|
19954
|
+
<td role="cell" data-label="Example td">Test cell 9-6</td>
|
|
19955
|
+
<td role="cell" data-label="Example td">Test cell 9-7</td>
|
|
19956
|
+
<td role="cell" data-label="Example td">Test cell 9-8</td>
|
|
19957
|
+
<td role="cell" data-label="Example td">Test cell 9-9</td>
|
|
19958
|
+
</tr>
|
|
19959
|
+
</tbody>
|
|
19960
|
+
</table>
|
|
19961
|
+
</div>
|
|
19962
|
+
|
|
19963
|
+
```
|
|
19964
|
+
|
|
19965
|
+
### Sticky columns and header
|
|
19966
|
+
|
|
19967
|
+
```html
|
|
19968
|
+
<div class="pf-c-scroll-outer-wrapper">
|
|
19969
|
+
<div class="pf-c-scroll-inner-wrapper">
|
|
19970
|
+
<table
|
|
19971
|
+
class="pf-c-table pf-m-sticky-header"
|
|
19972
|
+
role="grid"
|
|
19973
|
+
aria-label="This is a scrollable table"
|
|
19974
|
+
id="-table"
|
|
19975
|
+
>
|
|
19976
|
+
<thead>
|
|
19977
|
+
<tr role="row">
|
|
19978
|
+
<th
|
|
19979
|
+
class="pf-m-nowrap pf-c-table__sort pf-c-table__sticky-column"
|
|
19980
|
+
role="columnheader"
|
|
19981
|
+
aria-sort="none"
|
|
19982
|
+
data-label="Example th"
|
|
19983
|
+
scope="col"
|
|
19984
|
+
style="--pf-c-table__sticky-column--MinWidth: 100px;"
|
|
19985
|
+
>
|
|
19986
|
+
<button class="pf-c-table__button">
|
|
19987
|
+
<div class="pf-c-table__button-content">
|
|
19988
|
+
<span class="pf-c-table__text">
|
|
19989
|
+
<span class="pf-c-table__text">
|
|
19990
|
+
<div class="pf-l-flex pf-m-nowrap">
|
|
19991
|
+
<span>Fact</span>
|
|
19992
|
+
</div>
|
|
19993
|
+
</span>
|
|
19994
|
+
</span>
|
|
19995
|
+
<span class="pf-c-table__sort-indicator">
|
|
19996
|
+
<i class="fas fa-arrows-alt-v"></i>
|
|
19997
|
+
</span>
|
|
19998
|
+
</div>
|
|
19999
|
+
</button>
|
|
20000
|
+
</th>
|
|
20001
|
+
<th
|
|
20002
|
+
class="pf-m-nowrap pf-m-border-right pf-c-table__sort pf-c-table__sticky-column"
|
|
20003
|
+
role="columnheader"
|
|
20004
|
+
aria-sort="none"
|
|
20005
|
+
data-label="Example th"
|
|
20006
|
+
scope="col"
|
|
20007
|
+
style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
|
|
20008
|
+
>
|
|
20009
|
+
<button class="pf-c-table__button">
|
|
20010
|
+
<div class="pf-c-table__button-content">
|
|
20011
|
+
<span class="pf-c-table__text">
|
|
20012
|
+
<span class="pf-c-table__text">
|
|
20013
|
+
<div class="pf-l-flex pf-m-nowrap">
|
|
20014
|
+
<span>State</span>
|
|
20015
|
+
</div>
|
|
20016
|
+
</span>
|
|
20017
|
+
</span>
|
|
20018
|
+
<span class="pf-c-table__sort-indicator">
|
|
20019
|
+
<i class="fas fa-arrows-alt-v"></i>
|
|
20020
|
+
</span>
|
|
20021
|
+
</div>
|
|
20022
|
+
</button>
|
|
20023
|
+
</th>
|
|
20024
|
+
<th
|
|
20025
|
+
class="pf-m-nowrap"
|
|
20026
|
+
role="columnheader"
|
|
20027
|
+
data-label="Example th"
|
|
20028
|
+
scope="col"
|
|
20029
|
+
>
|
|
20030
|
+
<span class="pf-c-table__text">
|
|
20031
|
+
<div class="pf-l-flex pf-m-nowrap">
|
|
20032
|
+
<i class="pficon fas pf-icon-blueprint" aria-hidden="true"></i>
|
|
20033
|
+
<span>Header 3</span>
|
|
20034
|
+
</div>
|
|
20035
|
+
</span>
|
|
20036
|
+
</th>
|
|
20037
|
+
<th
|
|
20038
|
+
class="pf-m-nowrap"
|
|
20039
|
+
role="columnheader"
|
|
20040
|
+
data-label="Example th"
|
|
20041
|
+
scope="col"
|
|
20042
|
+
>
|
|
20043
|
+
<span class="pf-c-table__text">
|
|
20044
|
+
<div class="pf-l-flex pf-m-nowrap">
|
|
20045
|
+
<i class="pficon fas pf-icon-blueprint" aria-hidden="true"></i>
|
|
20046
|
+
<span>Header 4</span>
|
|
20047
|
+
</div>
|
|
20048
|
+
</span>
|
|
20049
|
+
</th>
|
|
20050
|
+
<th
|
|
20051
|
+
class="pf-m-nowrap"
|
|
20052
|
+
role="columnheader"
|
|
20053
|
+
data-label="Example th"
|
|
20054
|
+
scope="col"
|
|
20055
|
+
>
|
|
20056
|
+
<span class="pf-c-table__text">
|
|
20057
|
+
<div class="pf-l-flex pf-m-nowrap">
|
|
20058
|
+
<i class="pficon fas pf-icon-blueprint" aria-hidden="true"></i>
|
|
20059
|
+
<span>Header 5</span>
|
|
20060
|
+
</div>
|
|
20061
|
+
</span>
|
|
20062
|
+
</th>
|
|
20063
|
+
<th
|
|
20064
|
+
class="pf-m-nowrap"
|
|
20065
|
+
role="columnheader"
|
|
20066
|
+
data-label="Example th"
|
|
20067
|
+
scope="col"
|
|
20068
|
+
>
|
|
20069
|
+
<span class="pf-c-table__text">
|
|
20070
|
+
<div class="pf-l-flex pf-m-nowrap">
|
|
20071
|
+
<i class="pficon fas pf-icon-blueprint" aria-hidden="true"></i>
|
|
20072
|
+
<span>Header 6</span>
|
|
20073
|
+
</div>
|
|
20074
|
+
</span>
|
|
20075
|
+
</th>
|
|
20076
|
+
<th
|
|
20077
|
+
class="pf-m-nowrap"
|
|
20078
|
+
role="columnheader"
|
|
20079
|
+
data-label="Example th"
|
|
20080
|
+
scope="col"
|
|
20081
|
+
>
|
|
20082
|
+
<span class="pf-c-table__text">
|
|
20083
|
+
<div class="pf-l-flex pf-m-nowrap">
|
|
20084
|
+
<i class="pficon fas pf-icon-blueprint" aria-hidden="true"></i>
|
|
20085
|
+
<span>Header 7</span>
|
|
20086
|
+
</div>
|
|
20087
|
+
</span>
|
|
20088
|
+
</th>
|
|
20089
|
+
<th
|
|
20090
|
+
class="pf-m-nowrap"
|
|
20091
|
+
role="columnheader"
|
|
20092
|
+
data-label="Example th"
|
|
20093
|
+
scope="col"
|
|
20094
|
+
>
|
|
20095
|
+
<span class="pf-c-table__text">
|
|
20096
|
+
<div class="pf-l-flex pf-m-nowrap">
|
|
20097
|
+
<i class="pficon fas pf-icon-blueprint" aria-hidden="true"></i>
|
|
20098
|
+
<span>Header 8</span>
|
|
20099
|
+
</div>
|
|
20100
|
+
</span>
|
|
20101
|
+
</th>
|
|
20102
|
+
<th
|
|
20103
|
+
class="pf-m-nowrap"
|
|
20104
|
+
role="columnheader"
|
|
20105
|
+
data-label="Example th"
|
|
20106
|
+
scope="col"
|
|
20107
|
+
>
|
|
20108
|
+
<span class="pf-c-table__text">
|
|
20109
|
+
<div class="pf-l-flex pf-m-nowrap">
|
|
20110
|
+
<i class="pficon fas pf-icon-blueprint" aria-hidden="true"></i>
|
|
20111
|
+
<span>Header 9</span>
|
|
20112
|
+
</div>
|
|
20113
|
+
</span>
|
|
20114
|
+
</th>
|
|
20115
|
+
</tr>
|
|
20116
|
+
</thead>
|
|
20117
|
+
|
|
20118
|
+
<tbody role="rowgroup">
|
|
20119
|
+
<tr role="row">
|
|
20120
|
+
<th
|
|
20121
|
+
class="pf-m-nowrap pf-c-table__sticky-column"
|
|
20122
|
+
role="columnheader"
|
|
20123
|
+
data-label="Example th"
|
|
20124
|
+
scope="col"
|
|
20125
|
+
style="--pf-c-table__sticky-column--MinWidth: 100px;"
|
|
20126
|
+
>
|
|
20127
|
+
<span class="pf-c-table__text">
|
|
20128
|
+
<div class="pf-l-flex pf-m-nowrap">
|
|
20129
|
+
<span>Fact 1</span>
|
|
20130
|
+
</div>
|
|
20131
|
+
</span>
|
|
20132
|
+
</th>
|
|
20133
|
+
<th
|
|
20134
|
+
class="pf-m-nowrap pf-m-border-right pf-c-table__sticky-column"
|
|
20135
|
+
role="columnheader"
|
|
20136
|
+
data-label="Example th"
|
|
20137
|
+
scope="col"
|
|
20138
|
+
style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
|
|
20139
|
+
>
|
|
20140
|
+
<span class="pf-c-table__text">
|
|
20141
|
+
<div class="pf-l-flex pf-m-nowrap">
|
|
20142
|
+
<i class="pficon fas pf-icon-blueprint" aria-hidden="true"></i>
|
|
20143
|
+
<span>State 1</span>
|
|
20144
|
+
</div>
|
|
20145
|
+
</span>
|
|
20146
|
+
</th>
|
|
20147
|
+
<td role="cell" data-label="Example td">Test cell 1-3</td>
|
|
20148
|
+
<td role="cell" data-label="Example td">Test cell 1-4</td>
|
|
20149
|
+
<td role="cell" data-label="Example td">Test cell 1-5</td>
|
|
20150
|
+
<td role="cell" data-label="Example td">Test cell 1-6</td>
|
|
20151
|
+
<td role="cell" data-label="Example td">Test cell 1-7</td>
|
|
20152
|
+
<td role="cell" data-label="Example td">Test cell 1-8</td>
|
|
20153
|
+
<td role="cell" data-label="Example td">Test cell 1-9</td>
|
|
20154
|
+
</tr>
|
|
20155
|
+
<tr role="row">
|
|
20156
|
+
<th
|
|
20157
|
+
class="pf-m-nowrap pf-c-table__sticky-column"
|
|
20158
|
+
role="columnheader"
|
|
20159
|
+
data-label="Example th"
|
|
20160
|
+
scope="col"
|
|
20161
|
+
style="--pf-c-table__sticky-column--MinWidth: 100px;"
|
|
20162
|
+
>
|
|
20163
|
+
<span class="pf-c-table__text">
|
|
20164
|
+
<div class="pf-l-flex pf-m-nowrap">
|
|
20165
|
+
<span>Fact 2</span>
|
|
20166
|
+
</div>
|
|
20167
|
+
</span>
|
|
20168
|
+
</th>
|
|
20169
|
+
<th
|
|
20170
|
+
class="pf-m-nowrap pf-m-border-right pf-c-table__sticky-column"
|
|
20171
|
+
role="columnheader"
|
|
20172
|
+
data-label="Example th"
|
|
20173
|
+
scope="col"
|
|
20174
|
+
style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
|
|
20175
|
+
>
|
|
20176
|
+
<span class="pf-c-table__text">
|
|
20177
|
+
<div class="pf-l-flex pf-m-nowrap">
|
|
20178
|
+
<i class="pficon fas pf-icon-blueprint" aria-hidden="true"></i>
|
|
20179
|
+
<span>State 2</span>
|
|
20180
|
+
</div>
|
|
20181
|
+
</span>
|
|
20182
|
+
</th>
|
|
20183
|
+
<td role="cell" data-label="Example td">Test cell 2-3</td>
|
|
20184
|
+
<td role="cell" data-label="Example td">Test cell 2-4</td>
|
|
20185
|
+
<td role="cell" data-label="Example td">Test cell 2-5</td>
|
|
20186
|
+
<td role="cell" data-label="Example td">Test cell 2-6</td>
|
|
20187
|
+
<td role="cell" data-label="Example td">Test cell 2-7</td>
|
|
20188
|
+
<td role="cell" data-label="Example td">Test cell 2-8</td>
|
|
20189
|
+
<td role="cell" data-label="Example td">Test cell 2-9</td>
|
|
20190
|
+
</tr>
|
|
20191
|
+
<tr role="row">
|
|
20192
|
+
<th
|
|
20193
|
+
class="pf-m-nowrap pf-c-table__sticky-column"
|
|
20194
|
+
role="columnheader"
|
|
20195
|
+
data-label="Example th"
|
|
20196
|
+
scope="col"
|
|
20197
|
+
style="--pf-c-table__sticky-column--MinWidth: 100px;"
|
|
20198
|
+
>
|
|
20199
|
+
<span class="pf-c-table__text">
|
|
20200
|
+
<div class="pf-l-flex pf-m-nowrap">
|
|
20201
|
+
<span>Fact 3</span>
|
|
20202
|
+
</div>
|
|
20203
|
+
</span>
|
|
20204
|
+
</th>
|
|
20205
|
+
<th
|
|
20206
|
+
class="pf-m-nowrap pf-m-border-right pf-c-table__sticky-column"
|
|
20207
|
+
role="columnheader"
|
|
20208
|
+
data-label="Example th"
|
|
20209
|
+
scope="col"
|
|
20210
|
+
style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
|
|
20211
|
+
>
|
|
20212
|
+
<span class="pf-c-table__text">
|
|
20213
|
+
<div class="pf-l-flex pf-m-nowrap">
|
|
20214
|
+
<i class="pficon fas pf-icon-blueprint" aria-hidden="true"></i>
|
|
20215
|
+
<span>State 3</span>
|
|
20216
|
+
</div>
|
|
20217
|
+
</span>
|
|
20218
|
+
</th>
|
|
20219
|
+
<td role="cell" data-label="Example td">Test cell 3-3</td>
|
|
20220
|
+
<td role="cell" data-label="Example td">Test cell 3-4</td>
|
|
20221
|
+
<td role="cell" data-label="Example td">Test cell 3-5</td>
|
|
20222
|
+
<td role="cell" data-label="Example td">Test cell 3-6</td>
|
|
20223
|
+
<td role="cell" data-label="Example td">Test cell 3-7</td>
|
|
20224
|
+
<td role="cell" data-label="Example td">Test cell 3-8</td>
|
|
20225
|
+
<td role="cell" data-label="Example td">Test cell 3-9</td>
|
|
20226
|
+
</tr>
|
|
20227
|
+
<tr role="row">
|
|
20228
|
+
<th
|
|
20229
|
+
class="pf-m-nowrap pf-c-table__sticky-column"
|
|
20230
|
+
role="columnheader"
|
|
20231
|
+
data-label="Example th"
|
|
20232
|
+
scope="col"
|
|
20233
|
+
style="--pf-c-table__sticky-column--MinWidth: 100px;"
|
|
20234
|
+
>
|
|
20235
|
+
<span class="pf-c-table__text">
|
|
20236
|
+
<div class="pf-l-flex pf-m-nowrap">
|
|
20237
|
+
<span>Fact 4</span>
|
|
20238
|
+
</div>
|
|
20239
|
+
</span>
|
|
20240
|
+
</th>
|
|
20241
|
+
<th
|
|
20242
|
+
class="pf-m-nowrap pf-m-border-right pf-c-table__sticky-column"
|
|
20243
|
+
role="columnheader"
|
|
20244
|
+
data-label="Example th"
|
|
20245
|
+
scope="col"
|
|
20246
|
+
style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
|
|
20247
|
+
>
|
|
20248
|
+
<span class="pf-c-table__text">
|
|
20249
|
+
<div class="pf-l-flex pf-m-nowrap">
|
|
20250
|
+
<i class="pficon fas pf-icon-blueprint" aria-hidden="true"></i>
|
|
20251
|
+
<span>State 4</span>
|
|
20252
|
+
</div>
|
|
20253
|
+
</span>
|
|
20254
|
+
</th>
|
|
20255
|
+
<td role="cell" data-label="Example td">Test cell 4-3</td>
|
|
20256
|
+
<td role="cell" data-label="Example td">Test cell 4-4</td>
|
|
20257
|
+
<td role="cell" data-label="Example td">Test cell 4-5</td>
|
|
20258
|
+
<td role="cell" data-label="Example td">Test cell 4-6</td>
|
|
20259
|
+
<td role="cell" data-label="Example td">Test cell 4-7</td>
|
|
20260
|
+
<td role="cell" data-label="Example td">Test cell 4-8</td>
|
|
20261
|
+
<td role="cell" data-label="Example td">Test cell 4-9</td>
|
|
20262
|
+
</tr>
|
|
20263
|
+
<tr role="row">
|
|
20264
|
+
<th
|
|
20265
|
+
class="pf-m-nowrap pf-c-table__sticky-column"
|
|
20266
|
+
role="columnheader"
|
|
20267
|
+
data-label="Example th"
|
|
20268
|
+
scope="col"
|
|
20269
|
+
style="--pf-c-table__sticky-column--MinWidth: 100px;"
|
|
20270
|
+
>
|
|
20271
|
+
<span class="pf-c-table__text">
|
|
20272
|
+
<div class="pf-l-flex pf-m-nowrap">
|
|
20273
|
+
<span>Fact 5</span>
|
|
20274
|
+
</div>
|
|
20275
|
+
</span>
|
|
20276
|
+
</th>
|
|
20277
|
+
<th
|
|
20278
|
+
class="pf-m-nowrap pf-m-border-right pf-c-table__sticky-column"
|
|
20279
|
+
role="columnheader"
|
|
20280
|
+
data-label="Example th"
|
|
20281
|
+
scope="col"
|
|
20282
|
+
style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
|
|
20283
|
+
>
|
|
20284
|
+
<span class="pf-c-table__text">
|
|
20285
|
+
<div class="pf-l-flex pf-m-nowrap">
|
|
20286
|
+
<i class="pficon fas pf-icon-blueprint" aria-hidden="true"></i>
|
|
20287
|
+
<span>State 5</span>
|
|
20288
|
+
</div>
|
|
20289
|
+
</span>
|
|
20290
|
+
</th>
|
|
20291
|
+
<td role="cell" data-label="Example td">Test cell 5-3</td>
|
|
20292
|
+
<td role="cell" data-label="Example td">Test cell 5-4</td>
|
|
20293
|
+
<td role="cell" data-label="Example td">Test cell 5-5</td>
|
|
20294
|
+
<td role="cell" data-label="Example td">Test cell 5-6</td>
|
|
20295
|
+
<td role="cell" data-label="Example td">Test cell 5-7</td>
|
|
20296
|
+
<td role="cell" data-label="Example td">Test cell 5-8</td>
|
|
20297
|
+
<td role="cell" data-label="Example td">Test cell 5-9</td>
|
|
20298
|
+
</tr>
|
|
20299
|
+
<tr role="row">
|
|
20300
|
+
<th
|
|
20301
|
+
class="pf-m-nowrap pf-c-table__sticky-column"
|
|
20302
|
+
role="columnheader"
|
|
20303
|
+
data-label="Example th"
|
|
20304
|
+
scope="col"
|
|
20305
|
+
style="--pf-c-table__sticky-column--MinWidth: 100px;"
|
|
20306
|
+
>
|
|
20307
|
+
<span class="pf-c-table__text">
|
|
20308
|
+
<div class="pf-l-flex pf-m-nowrap">
|
|
20309
|
+
<span>Fact 6</span>
|
|
20310
|
+
</div>
|
|
20311
|
+
</span>
|
|
20312
|
+
</th>
|
|
20313
|
+
<th
|
|
20314
|
+
class="pf-m-nowrap pf-m-border-right pf-c-table__sticky-column"
|
|
20315
|
+
role="columnheader"
|
|
20316
|
+
data-label="Example th"
|
|
20317
|
+
scope="col"
|
|
20318
|
+
style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
|
|
20319
|
+
>
|
|
20320
|
+
<span class="pf-c-table__text">
|
|
20321
|
+
<div class="pf-l-flex pf-m-nowrap">
|
|
20322
|
+
<i class="pficon fas pf-icon-blueprint" aria-hidden="true"></i>
|
|
20323
|
+
<span>State 6</span>
|
|
20324
|
+
</div>
|
|
20325
|
+
</span>
|
|
20326
|
+
</th>
|
|
20327
|
+
<td role="cell" data-label="Example td">Test cell 6-3</td>
|
|
20328
|
+
<td role="cell" data-label="Example td">Test cell 6-4</td>
|
|
20329
|
+
<td role="cell" data-label="Example td">Test cell 6-5</td>
|
|
20330
|
+
<td role="cell" data-label="Example td">Test cell 6-6</td>
|
|
20331
|
+
<td role="cell" data-label="Example td">Test cell 6-7</td>
|
|
20332
|
+
<td role="cell" data-label="Example td">Test cell 6-8</td>
|
|
20333
|
+
<td role="cell" data-label="Example td">Test cell 6-9</td>
|
|
20334
|
+
</tr>
|
|
20335
|
+
<tr role="row">
|
|
20336
|
+
<th
|
|
20337
|
+
class="pf-m-nowrap pf-c-table__sticky-column"
|
|
20338
|
+
role="columnheader"
|
|
20339
|
+
data-label="Example th"
|
|
20340
|
+
scope="col"
|
|
20341
|
+
style="--pf-c-table__sticky-column--MinWidth: 100px;"
|
|
20342
|
+
>
|
|
20343
|
+
<span class="pf-c-table__text">
|
|
20344
|
+
<div class="pf-l-flex pf-m-nowrap">
|
|
20345
|
+
<span>Fact 7</span>
|
|
20346
|
+
</div>
|
|
20347
|
+
</span>
|
|
20348
|
+
</th>
|
|
20349
|
+
<th
|
|
20350
|
+
class="pf-m-nowrap pf-m-border-right pf-c-table__sticky-column"
|
|
20351
|
+
role="columnheader"
|
|
20352
|
+
data-label="Example th"
|
|
20353
|
+
scope="col"
|
|
20354
|
+
style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
|
|
20355
|
+
>
|
|
20356
|
+
<span class="pf-c-table__text">
|
|
20357
|
+
<div class="pf-l-flex pf-m-nowrap">
|
|
20358
|
+
<i class="pficon fas pf-icon-blueprint" aria-hidden="true"></i>
|
|
20359
|
+
<span>State 7</span>
|
|
20360
|
+
</div>
|
|
20361
|
+
</span>
|
|
20362
|
+
</th>
|
|
20363
|
+
<td role="cell" data-label="Example td">Test cell 7-3</td>
|
|
20364
|
+
<td role="cell" data-label="Example td">Test cell 7-4</td>
|
|
20365
|
+
<td role="cell" data-label="Example td">Test cell 7-5</td>
|
|
20366
|
+
<td role="cell" data-label="Example td">Test cell 7-6</td>
|
|
20367
|
+
<td role="cell" data-label="Example td">Test cell 7-7</td>
|
|
20368
|
+
<td role="cell" data-label="Example td">Test cell 7-8</td>
|
|
20369
|
+
<td role="cell" data-label="Example td">Test cell 7-9</td>
|
|
20370
|
+
</tr>
|
|
20371
|
+
<tr role="row">
|
|
20372
|
+
<th
|
|
20373
|
+
class="pf-m-nowrap pf-c-table__sticky-column"
|
|
20374
|
+
role="columnheader"
|
|
20375
|
+
data-label="Example th"
|
|
20376
|
+
scope="col"
|
|
20377
|
+
style="--pf-c-table__sticky-column--MinWidth: 100px;"
|
|
20378
|
+
>
|
|
20379
|
+
<span class="pf-c-table__text">
|
|
20380
|
+
<div class="pf-l-flex pf-m-nowrap">
|
|
20381
|
+
<span>Fact 8</span>
|
|
20382
|
+
</div>
|
|
20383
|
+
</span>
|
|
20384
|
+
</th>
|
|
20385
|
+
<th
|
|
20386
|
+
class="pf-m-nowrap pf-m-border-right pf-c-table__sticky-column"
|
|
20387
|
+
role="columnheader"
|
|
20388
|
+
data-label="Example th"
|
|
20389
|
+
scope="col"
|
|
20390
|
+
style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
|
|
20391
|
+
>
|
|
20392
|
+
<span class="pf-c-table__text">
|
|
20393
|
+
<div class="pf-l-flex pf-m-nowrap">
|
|
20394
|
+
<i class="pficon fas pf-icon-blueprint" aria-hidden="true"></i>
|
|
20395
|
+
<span>State 8</span>
|
|
20396
|
+
</div>
|
|
20397
|
+
</span>
|
|
20398
|
+
</th>
|
|
20399
|
+
<td role="cell" data-label="Example td">Test cell 8-3</td>
|
|
20400
|
+
<td role="cell" data-label="Example td">Test cell 8-4</td>
|
|
20401
|
+
<td role="cell" data-label="Example td">Test cell 8-5</td>
|
|
20402
|
+
<td role="cell" data-label="Example td">Test cell 8-6</td>
|
|
20403
|
+
<td role="cell" data-label="Example td">Test cell 8-7</td>
|
|
20404
|
+
<td role="cell" data-label="Example td">Test cell 8-8</td>
|
|
20405
|
+
<td role="cell" data-label="Example td">Test cell 8-9</td>
|
|
20406
|
+
</tr>
|
|
20407
|
+
<tr role="row">
|
|
20408
|
+
<th
|
|
20409
|
+
class="pf-m-nowrap pf-c-table__sticky-column"
|
|
20410
|
+
role="columnheader"
|
|
20411
|
+
data-label="Example th"
|
|
20412
|
+
scope="col"
|
|
20413
|
+
style="--pf-c-table__sticky-column--MinWidth: 100px;"
|
|
20414
|
+
>
|
|
20415
|
+
<span class="pf-c-table__text">
|
|
20416
|
+
<div class="pf-l-flex pf-m-nowrap">
|
|
20417
|
+
<span>Fact 9</span>
|
|
20418
|
+
</div>
|
|
20419
|
+
</span>
|
|
20420
|
+
</th>
|
|
20421
|
+
<th
|
|
20422
|
+
class="pf-m-nowrap pf-m-border-right pf-c-table__sticky-column"
|
|
20423
|
+
role="columnheader"
|
|
20424
|
+
data-label="Example th"
|
|
20425
|
+
scope="col"
|
|
20426
|
+
style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
|
|
20427
|
+
>
|
|
20428
|
+
<span class="pf-c-table__text">
|
|
20429
|
+
<div class="pf-l-flex pf-m-nowrap">
|
|
20430
|
+
<i class="pficon fas pf-icon-blueprint" aria-hidden="true"></i>
|
|
20431
|
+
<span>State 9</span>
|
|
20432
|
+
</div>
|
|
20433
|
+
</span>
|
|
20434
|
+
</th>
|
|
20435
|
+
<td role="cell" data-label="Example td">Test cell 9-3</td>
|
|
20436
|
+
<td role="cell" data-label="Example td">Test cell 9-4</td>
|
|
20437
|
+
<td role="cell" data-label="Example td">Test cell 9-5</td>
|
|
20438
|
+
<td role="cell" data-label="Example td">Test cell 9-6</td>
|
|
20439
|
+
<td role="cell" data-label="Example td">Test cell 9-7</td>
|
|
20440
|
+
<td role="cell" data-label="Example td">Test cell 9-8</td>
|
|
20441
|
+
<td role="cell" data-label="Example td">Test cell 9-9</td>
|
|
20442
|
+
</tr>
|
|
20443
|
+
</tbody>
|
|
20444
|
+
</table>
|
|
20445
|
+
</div>
|
|
20446
|
+
</div>
|
|
20447
|
+
|
|
20448
|
+
```
|
|
20449
|
+
|
|
20450
|
+
### Sticky column usage
|
|
20451
|
+
|
|
20452
|
+
For sticky columns to function correctly, the parent table's width must be controlled with `.pf-c-scroll-inner-wrapper`. For sticky columns and sticky headers to function correctly, the parent table needs an inner and outer wrapper (`.pf-c-scroll-outer-wrapper` and `.pf-c-scroll-inner-wrapper`)
|
|
20453
|
+
|
|
20454
|
+
| Class | Applied to | Outcome |
|
|
20455
|
+
| ---------------------------- | ---------------------------- | --------------------------------------------------------- |
|
|
20456
|
+
| `.pf-c-scroll-outer-wrapper` | `<div>` | Initiates a table container sticky columns outer wrapper. |
|
|
20457
|
+
| `.pf-c-scroll-inner-wrapper` | `<div>` | Initiates a table container sticky columns inner wrapper. |
|
|
20458
|
+
| `.pf-c-table__sticky-column` | `<th>`, `<td>` | Initiates a sticky table cell. |
|
|
20459
|
+
| `.pf-m-border-right` | `.pf-c-table__sticky-column` | Modifies the sticky column to show a right border. |
|
|
20460
|
+
|
|
19117
20461
|
## Favorites
|
|
19118
20462
|
|
|
19119
20463
|
### Favorites examples
|