@patternfly/patternfly 4.154.1 → 4.156.2

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