@patternfly/patternfly 5.0.0-alpha.28 → 5.0.0-alpha.29
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/Table/table-scrollable.css +31 -26
- package/components/Table/table-scrollable.scss +33 -28
- package/components/Table/table.css +2 -1
- package/components/Table/table.scss +4 -1
- package/docs/components/Table/examples/Table.css +4 -0
- package/docs/components/Table/examples/Table.md +657 -147
- package/docs/demos/Table/examples/Table.md +1943 -100
- package/package.json +1 -1
- package/patternfly-no-reset.css +34 -28
- package/patternfly.css +34 -28
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -21358,56 +21358,58 @@ There are a few ways this can be handled:
|
|
|
21358
21358
|
### Sticky header
|
|
21359
21359
|
|
|
21360
21360
|
```html
|
|
21361
|
-
<
|
|
21362
|
-
|
|
21363
|
-
|
|
21364
|
-
|
|
21365
|
-
|
|
21366
|
-
|
|
21367
|
-
|
|
21368
|
-
<
|
|
21369
|
-
<
|
|
21370
|
-
|
|
21371
|
-
|
|
21372
|
-
|
|
21373
|
-
|
|
21374
|
-
|
|
21375
|
-
|
|
21361
|
+
<div class="pf-c-scroll-inner-wrapper">
|
|
21362
|
+
<table
|
|
21363
|
+
class="pf-c-table pf-m-grid-md pf-m-sticky-header"
|
|
21364
|
+
role="grid"
|
|
21365
|
+
aria-label="This is a table with sticky header cells"
|
|
21366
|
+
id="table-sticky-header"
|
|
21367
|
+
>
|
|
21368
|
+
<thead>
|
|
21369
|
+
<tr role="row">
|
|
21370
|
+
<th role="columnheader" scope="col">Repositories</th>
|
|
21371
|
+
<th role="columnheader" scope="col">Branches</th>
|
|
21372
|
+
<th role="columnheader" scope="col">Pull requests</th>
|
|
21373
|
+
<th role="columnheader" scope="col">Workspaces</th>
|
|
21374
|
+
<th role="columnheader" scope="col">Last commit</th>
|
|
21375
|
+
</tr>
|
|
21376
|
+
</thead>
|
|
21376
21377
|
|
|
21377
|
-
|
|
21378
|
-
|
|
21379
|
-
|
|
21380
|
-
|
|
21381
|
-
|
|
21382
|
-
|
|
21383
|
-
|
|
21384
|
-
|
|
21378
|
+
<tbody role="rowgroup">
|
|
21379
|
+
<tr role="row">
|
|
21380
|
+
<td role="cell" data-label="Repository name">Repository 1</td>
|
|
21381
|
+
<td role="cell" data-label="Branches">10</td>
|
|
21382
|
+
<td role="cell" data-label="Pull requests">25</td>
|
|
21383
|
+
<td role="cell" data-label="Workspaces">5</td>
|
|
21384
|
+
<td role="cell" data-label="Last commit">2 days ago</td>
|
|
21385
|
+
</tr>
|
|
21385
21386
|
|
|
21386
|
-
|
|
21387
|
-
|
|
21388
|
-
|
|
21389
|
-
|
|
21390
|
-
|
|
21391
|
-
|
|
21392
|
-
|
|
21387
|
+
<tr role="row">
|
|
21388
|
+
<td role="cell" data-label="Repository name">Repository 2</td>
|
|
21389
|
+
<td role="cell" data-label="Branches">10</td>
|
|
21390
|
+
<td role="cell" data-label="Pull requests">25</td>
|
|
21391
|
+
<td role="cell" data-label="Workspaces">5</td>
|
|
21392
|
+
<td role="cell" data-label="Last commit">2 days ago</td>
|
|
21393
|
+
</tr>
|
|
21393
21394
|
|
|
21394
|
-
|
|
21395
|
-
|
|
21396
|
-
|
|
21397
|
-
|
|
21398
|
-
|
|
21399
|
-
|
|
21400
|
-
|
|
21395
|
+
<tr role="row">
|
|
21396
|
+
<td role="cell" data-label="Repository name">Repository 3</td>
|
|
21397
|
+
<td role="cell" data-label="Branches">10</td>
|
|
21398
|
+
<td role="cell" data-label="Pull requests">25</td>
|
|
21399
|
+
<td role="cell" data-label="Workspaces">5</td>
|
|
21400
|
+
<td role="cell" data-label="Last commit">2 days ago</td>
|
|
21401
|
+
</tr>
|
|
21401
21402
|
|
|
21402
|
-
|
|
21403
|
-
|
|
21404
|
-
|
|
21405
|
-
|
|
21406
|
-
|
|
21407
|
-
|
|
21408
|
-
|
|
21409
|
-
|
|
21410
|
-
</table>
|
|
21403
|
+
<tr role="row">
|
|
21404
|
+
<td role="cell" data-label="Repository name">Repository 4</td>
|
|
21405
|
+
<td role="cell" data-label="Branches">10</td>
|
|
21406
|
+
<td role="cell" data-label="Pull requests">25</td>
|
|
21407
|
+
<td role="cell" data-label="Workspaces">5</td>
|
|
21408
|
+
<td role="cell" data-label="Last commit">2 days ago</td>
|
|
21409
|
+
</tr>
|
|
21410
|
+
</tbody>
|
|
21411
|
+
</table>
|
|
21412
|
+
</div>
|
|
21411
21413
|
|
|
21412
21414
|
```
|
|
21413
21415
|
|
|
@@ -21424,12 +21426,12 @@ There are a few ways this can be handled:
|
|
|
21424
21426
|
<thead>
|
|
21425
21427
|
<tr role="row">
|
|
21426
21428
|
<th
|
|
21427
|
-
class="pf-m-truncate pf-m-border-right pf-c-table__sort pf-c-table__sticky-
|
|
21429
|
+
class="pf-m-truncate pf-m-border-right pf-c-table__sort pf-c-table__sticky-cell pf-m-left"
|
|
21428
21430
|
role="columnheader"
|
|
21429
21431
|
aria-sort="none"
|
|
21430
21432
|
data-label="Example th"
|
|
21431
21433
|
scope="col"
|
|
21432
|
-
style="--pf-c-table__sticky-
|
|
21434
|
+
style="--pf-c-table__sticky-cell--MinWidth: 100px;"
|
|
21433
21435
|
>
|
|
21434
21436
|
<button class="pf-c-table__button">
|
|
21435
21437
|
<div class="pf-c-table__button-content">
|
|
@@ -21492,6 +21494,7 @@ There are a few ways this can be handled:
|
|
|
21492
21494
|
data-label="Example th"
|
|
21493
21495
|
scope="col"
|
|
21494
21496
|
>Header 8</th>
|
|
21497
|
+
|
|
21495
21498
|
<th
|
|
21496
21499
|
class
|
|
21497
21500
|
role="columnheader"
|
|
@@ -21504,11 +21507,11 @@ There are a few ways this can be handled:
|
|
|
21504
21507
|
<tbody role="rowgroup">
|
|
21505
21508
|
<tr role="row">
|
|
21506
21509
|
<th
|
|
21507
|
-
class="pf-m-truncate pf-m-border-right pf-c-table__sticky-
|
|
21510
|
+
class="pf-m-truncate pf-m-border-right pf-c-table__sticky-cell pf-m-left"
|
|
21508
21511
|
role="columnheader"
|
|
21509
21512
|
data-label="Example th"
|
|
21510
21513
|
scope="col"
|
|
21511
|
-
style="--pf-c-table__sticky-
|
|
21514
|
+
style="--pf-c-table__sticky-cell--MinWidth: 100px;"
|
|
21512
21515
|
>Fact 1</th>
|
|
21513
21516
|
<td class="pf-m-nowrap" role="cell" data-label="Example td">State 1</td>
|
|
21514
21517
|
<td
|
|
@@ -21541,6 +21544,7 @@ There are a few ways this can be handled:
|
|
|
21541
21544
|
role="cell"
|
|
21542
21545
|
data-label="Example td"
|
|
21543
21546
|
>Test cell 1-8</td>
|
|
21547
|
+
|
|
21544
21548
|
<td
|
|
21545
21549
|
class="pf-m-nowrap"
|
|
21546
21550
|
role="cell"
|
|
@@ -21549,11 +21553,11 @@ There are a few ways this can be handled:
|
|
|
21549
21553
|
</tr>
|
|
21550
21554
|
<tr role="row">
|
|
21551
21555
|
<th
|
|
21552
|
-
class="pf-m-truncate pf-m-border-right pf-c-table__sticky-
|
|
21556
|
+
class="pf-m-truncate pf-m-border-right pf-c-table__sticky-cell pf-m-left"
|
|
21553
21557
|
role="columnheader"
|
|
21554
21558
|
data-label="Example th"
|
|
21555
21559
|
scope="col"
|
|
21556
|
-
style="--pf-c-table__sticky-
|
|
21560
|
+
style="--pf-c-table__sticky-cell--MinWidth: 100px;"
|
|
21557
21561
|
>Fact 2</th>
|
|
21558
21562
|
<td class="pf-m-nowrap" role="cell" data-label="Example td">State 2</td>
|
|
21559
21563
|
<td
|
|
@@ -21586,6 +21590,7 @@ There are a few ways this can be handled:
|
|
|
21586
21590
|
role="cell"
|
|
21587
21591
|
data-label="Example td"
|
|
21588
21592
|
>Test cell 2-8</td>
|
|
21593
|
+
|
|
21589
21594
|
<td
|
|
21590
21595
|
class="pf-m-nowrap"
|
|
21591
21596
|
role="cell"
|
|
@@ -21594,11 +21599,11 @@ There are a few ways this can be handled:
|
|
|
21594
21599
|
</tr>
|
|
21595
21600
|
<tr role="row">
|
|
21596
21601
|
<th
|
|
21597
|
-
class="pf-m-truncate pf-m-border-right pf-c-table__sticky-
|
|
21602
|
+
class="pf-m-truncate pf-m-border-right pf-c-table__sticky-cell pf-m-left"
|
|
21598
21603
|
role="columnheader"
|
|
21599
21604
|
data-label="Example th"
|
|
21600
21605
|
scope="col"
|
|
21601
|
-
style="--pf-c-table__sticky-
|
|
21606
|
+
style="--pf-c-table__sticky-cell--MinWidth: 100px;"
|
|
21602
21607
|
>Fact 3</th>
|
|
21603
21608
|
<td class="pf-m-nowrap" role="cell" data-label="Example td">State 3</td>
|
|
21604
21609
|
<td
|
|
@@ -21631,6 +21636,7 @@ There are a few ways this can be handled:
|
|
|
21631
21636
|
role="cell"
|
|
21632
21637
|
data-label="Example td"
|
|
21633
21638
|
>Test cell 3-8</td>
|
|
21639
|
+
|
|
21634
21640
|
<td
|
|
21635
21641
|
class="pf-m-nowrap"
|
|
21636
21642
|
role="cell"
|
|
@@ -21639,11 +21645,11 @@ There are a few ways this can be handled:
|
|
|
21639
21645
|
</tr>
|
|
21640
21646
|
<tr role="row">
|
|
21641
21647
|
<th
|
|
21642
|
-
class="pf-m-truncate pf-m-border-right pf-c-table__sticky-
|
|
21648
|
+
class="pf-m-truncate pf-m-border-right pf-c-table__sticky-cell pf-m-left"
|
|
21643
21649
|
role="columnheader"
|
|
21644
21650
|
data-label="Example th"
|
|
21645
21651
|
scope="col"
|
|
21646
|
-
style="--pf-c-table__sticky-
|
|
21652
|
+
style="--pf-c-table__sticky-cell--MinWidth: 100px;"
|
|
21647
21653
|
>Fact 4</th>
|
|
21648
21654
|
<td class="pf-m-nowrap" role="cell" data-label="Example td">State 4</td>
|
|
21649
21655
|
<td
|
|
@@ -21676,6 +21682,7 @@ There are a few ways this can be handled:
|
|
|
21676
21682
|
role="cell"
|
|
21677
21683
|
data-label="Example td"
|
|
21678
21684
|
>Test cell 4-8</td>
|
|
21685
|
+
|
|
21679
21686
|
<td
|
|
21680
21687
|
class="pf-m-nowrap"
|
|
21681
21688
|
role="cell"
|
|
@@ -21684,11 +21691,11 @@ There are a few ways this can be handled:
|
|
|
21684
21691
|
</tr>
|
|
21685
21692
|
<tr role="row">
|
|
21686
21693
|
<th
|
|
21687
|
-
class="pf-m-truncate pf-m-border-right pf-c-table__sticky-
|
|
21694
|
+
class="pf-m-truncate pf-m-border-right pf-c-table__sticky-cell pf-m-left"
|
|
21688
21695
|
role="columnheader"
|
|
21689
21696
|
data-label="Example th"
|
|
21690
21697
|
scope="col"
|
|
21691
|
-
style="--pf-c-table__sticky-
|
|
21698
|
+
style="--pf-c-table__sticky-cell--MinWidth: 100px;"
|
|
21692
21699
|
>Fact 5</th>
|
|
21693
21700
|
<td class="pf-m-nowrap" role="cell" data-label="Example td">State 5</td>
|
|
21694
21701
|
<td
|
|
@@ -21721,6 +21728,7 @@ There are a few ways this can be handled:
|
|
|
21721
21728
|
role="cell"
|
|
21722
21729
|
data-label="Example td"
|
|
21723
21730
|
>Test cell 5-8</td>
|
|
21731
|
+
|
|
21724
21732
|
<td
|
|
21725
21733
|
class="pf-m-nowrap"
|
|
21726
21734
|
role="cell"
|
|
@@ -21729,11 +21737,11 @@ There are a few ways this can be handled:
|
|
|
21729
21737
|
</tr>
|
|
21730
21738
|
<tr role="row">
|
|
21731
21739
|
<th
|
|
21732
|
-
class="pf-m-truncate pf-m-border-right pf-c-table__sticky-
|
|
21740
|
+
class="pf-m-truncate pf-m-border-right pf-c-table__sticky-cell pf-m-left"
|
|
21733
21741
|
role="columnheader"
|
|
21734
21742
|
data-label="Example th"
|
|
21735
21743
|
scope="col"
|
|
21736
|
-
style="--pf-c-table__sticky-
|
|
21744
|
+
style="--pf-c-table__sticky-cell--MinWidth: 100px;"
|
|
21737
21745
|
>Fact 6</th>
|
|
21738
21746
|
<td class="pf-m-nowrap" role="cell" data-label="Example td">State 6</td>
|
|
21739
21747
|
<td
|
|
@@ -21766,6 +21774,7 @@ There are a few ways this can be handled:
|
|
|
21766
21774
|
role="cell"
|
|
21767
21775
|
data-label="Example td"
|
|
21768
21776
|
>Test cell 6-8</td>
|
|
21777
|
+
|
|
21769
21778
|
<td
|
|
21770
21779
|
class="pf-m-nowrap"
|
|
21771
21780
|
role="cell"
|
|
@@ -21774,11 +21783,11 @@ There are a few ways this can be handled:
|
|
|
21774
21783
|
</tr>
|
|
21775
21784
|
<tr role="row">
|
|
21776
21785
|
<th
|
|
21777
|
-
class="pf-m-truncate pf-m-border-right pf-c-table__sticky-
|
|
21786
|
+
class="pf-m-truncate pf-m-border-right pf-c-table__sticky-cell pf-m-left"
|
|
21778
21787
|
role="columnheader"
|
|
21779
21788
|
data-label="Example th"
|
|
21780
21789
|
scope="col"
|
|
21781
|
-
style="--pf-c-table__sticky-
|
|
21790
|
+
style="--pf-c-table__sticky-cell--MinWidth: 100px;"
|
|
21782
21791
|
>Fact 7</th>
|
|
21783
21792
|
<td class="pf-m-nowrap" role="cell" data-label="Example td">State 7</td>
|
|
21784
21793
|
<td
|
|
@@ -21811,6 +21820,7 @@ There are a few ways this can be handled:
|
|
|
21811
21820
|
role="cell"
|
|
21812
21821
|
data-label="Example td"
|
|
21813
21822
|
>Test cell 7-8</td>
|
|
21823
|
+
|
|
21814
21824
|
<td
|
|
21815
21825
|
class="pf-m-nowrap"
|
|
21816
21826
|
role="cell"
|
|
@@ -21819,11 +21829,11 @@ There are a few ways this can be handled:
|
|
|
21819
21829
|
</tr>
|
|
21820
21830
|
<tr role="row">
|
|
21821
21831
|
<th
|
|
21822
|
-
class="pf-m-truncate pf-m-border-right pf-c-table__sticky-
|
|
21832
|
+
class="pf-m-truncate pf-m-border-right pf-c-table__sticky-cell pf-m-left"
|
|
21823
21833
|
role="columnheader"
|
|
21824
21834
|
data-label="Example th"
|
|
21825
21835
|
scope="col"
|
|
21826
|
-
style="--pf-c-table__sticky-
|
|
21836
|
+
style="--pf-c-table__sticky-cell--MinWidth: 100px;"
|
|
21827
21837
|
>Fact 8</th>
|
|
21828
21838
|
<td class="pf-m-nowrap" role="cell" data-label="Example td">State 8</td>
|
|
21829
21839
|
<td
|
|
@@ -21856,6 +21866,7 @@ There are a few ways this can be handled:
|
|
|
21856
21866
|
role="cell"
|
|
21857
21867
|
data-label="Example td"
|
|
21858
21868
|
>Test cell 8-8</td>
|
|
21869
|
+
|
|
21859
21870
|
<td
|
|
21860
21871
|
class="pf-m-nowrap"
|
|
21861
21872
|
role="cell"
|
|
@@ -21864,11 +21875,11 @@ There are a few ways this can be handled:
|
|
|
21864
21875
|
</tr>
|
|
21865
21876
|
<tr role="row">
|
|
21866
21877
|
<th
|
|
21867
|
-
class="pf-m-truncate pf-m-border-right pf-c-table__sticky-
|
|
21878
|
+
class="pf-m-truncate pf-m-border-right pf-c-table__sticky-cell pf-m-left"
|
|
21868
21879
|
role="columnheader"
|
|
21869
21880
|
data-label="Example th"
|
|
21870
21881
|
scope="col"
|
|
21871
|
-
style="--pf-c-table__sticky-
|
|
21882
|
+
style="--pf-c-table__sticky-cell--MinWidth: 100px;"
|
|
21872
21883
|
>Fact 9</th>
|
|
21873
21884
|
<td class="pf-m-nowrap" role="cell" data-label="Example td">State 9</td>
|
|
21874
21885
|
<td
|
|
@@ -21901,6 +21912,7 @@ There are a few ways this can be handled:
|
|
|
21901
21912
|
role="cell"
|
|
21902
21913
|
data-label="Example td"
|
|
21903
21914
|
>Test cell 9-8</td>
|
|
21915
|
+
|
|
21904
21916
|
<td
|
|
21905
21917
|
class="pf-m-nowrap"
|
|
21906
21918
|
role="cell"
|
|
@@ -21926,12 +21938,12 @@ There are a few ways this can be handled:
|
|
|
21926
21938
|
<thead>
|
|
21927
21939
|
<tr role="row">
|
|
21928
21940
|
<th
|
|
21929
|
-
class="pf-m-truncate pf-c-table__sort pf-c-table__sticky-
|
|
21941
|
+
class="pf-m-truncate pf-c-table__sort pf-c-table__sticky-cell pf-m-left"
|
|
21930
21942
|
role="columnheader"
|
|
21931
21943
|
aria-sort="none"
|
|
21932
21944
|
data-label="Example th"
|
|
21933
21945
|
scope="col"
|
|
21934
|
-
style="--pf-c-table__sticky-
|
|
21946
|
+
style="--pf-c-table__sticky-cell--MinWidth: 100px;"
|
|
21935
21947
|
>
|
|
21936
21948
|
<button class="pf-c-table__button">
|
|
21937
21949
|
<div class="pf-c-table__button-content">
|
|
@@ -21943,12 +21955,12 @@ There are a few ways this can be handled:
|
|
|
21943
21955
|
</button>
|
|
21944
21956
|
</th>
|
|
21945
21957
|
<th
|
|
21946
|
-
class="pf-m-truncate pf-m-border-right pf-c-table__sort pf-c-table__sticky-
|
|
21958
|
+
class="pf-m-truncate pf-m-border-right pf-c-table__sort pf-c-table__sticky-cell pf-m-left"
|
|
21947
21959
|
role="columnheader"
|
|
21948
21960
|
aria-sort="none"
|
|
21949
21961
|
data-label="Example th"
|
|
21950
21962
|
scope="col"
|
|
21951
|
-
style="--pf-c-table__sticky-
|
|
21963
|
+
style="--pf-c-table__sticky-cell--MinWidth: 120px; --pf-c-table__sticky-cell--Left: 100px;"
|
|
21952
21964
|
>
|
|
21953
21965
|
<button class="pf-c-table__button">
|
|
21954
21966
|
<div class="pf-c-table__button-content">
|
|
@@ -21995,6 +22007,7 @@ There are a few ways this can be handled:
|
|
|
21995
22007
|
data-label="Example th"
|
|
21996
22008
|
scope="col"
|
|
21997
22009
|
>Header 8</th>
|
|
22010
|
+
|
|
21998
22011
|
<th
|
|
21999
22012
|
class
|
|
22000
22013
|
role="columnheader"
|
|
@@ -22007,18 +22020,18 @@ There are a few ways this can be handled:
|
|
|
22007
22020
|
<tbody role="rowgroup">
|
|
22008
22021
|
<tr role="row">
|
|
22009
22022
|
<th
|
|
22010
|
-
class="pf-m-truncate pf-c-table__sticky-
|
|
22023
|
+
class="pf-m-truncate pf-c-table__sticky-cell pf-m-left"
|
|
22011
22024
|
role="columnheader"
|
|
22012
22025
|
data-label="Example th"
|
|
22013
22026
|
scope="col"
|
|
22014
|
-
style="--pf-c-table__sticky-
|
|
22027
|
+
style="--pf-c-table__sticky-cell--MinWidth: 100px;"
|
|
22015
22028
|
>Fact 1</th>
|
|
22016
22029
|
<th
|
|
22017
|
-
class="pf-m-truncate pf-m-border-right pf-c-table__sticky-
|
|
22030
|
+
class="pf-m-truncate pf-m-border-right pf-c-table__sticky-cell pf-m-left"
|
|
22018
22031
|
role="columnheader"
|
|
22019
22032
|
data-label="Example th"
|
|
22020
22033
|
scope="col"
|
|
22021
|
-
style="--pf-c-table__sticky-
|
|
22034
|
+
style="--pf-c-table__sticky-cell--MinWidth: 80px; --pf-c-table__sticky-cell--Left: 100px;"
|
|
22022
22035
|
>State 1</th>
|
|
22023
22036
|
<td
|
|
22024
22037
|
class="pf-m-nowrap"
|
|
@@ -22050,6 +22063,7 @@ There are a few ways this can be handled:
|
|
|
22050
22063
|
role="cell"
|
|
22051
22064
|
data-label="Example td"
|
|
22052
22065
|
>Test cell 1-8</td>
|
|
22066
|
+
|
|
22053
22067
|
<td
|
|
22054
22068
|
class="pf-m-nowrap"
|
|
22055
22069
|
role="cell"
|
|
@@ -22058,18 +22072,18 @@ There are a few ways this can be handled:
|
|
|
22058
22072
|
</tr>
|
|
22059
22073
|
<tr role="row">
|
|
22060
22074
|
<th
|
|
22061
|
-
class="pf-m-truncate pf-c-table__sticky-
|
|
22075
|
+
class="pf-m-truncate pf-c-table__sticky-cell pf-m-left"
|
|
22062
22076
|
role="columnheader"
|
|
22063
22077
|
data-label="Example th"
|
|
22064
22078
|
scope="col"
|
|
22065
|
-
style="--pf-c-table__sticky-
|
|
22079
|
+
style="--pf-c-table__sticky-cell--MinWidth: 100px;"
|
|
22066
22080
|
>Fact 2</th>
|
|
22067
22081
|
<th
|
|
22068
|
-
class="pf-m-truncate pf-m-border-right pf-c-table__sticky-
|
|
22082
|
+
class="pf-m-truncate pf-m-border-right pf-c-table__sticky-cell pf-m-left"
|
|
22069
22083
|
role="columnheader"
|
|
22070
22084
|
data-label="Example th"
|
|
22071
22085
|
scope="col"
|
|
22072
|
-
style="--pf-c-table__sticky-
|
|
22086
|
+
style="--pf-c-table__sticky-cell--MinWidth: 80px; --pf-c-table__sticky-cell--Left: 100px;"
|
|
22073
22087
|
>State 2</th>
|
|
22074
22088
|
<td
|
|
22075
22089
|
class="pf-m-nowrap"
|
|
@@ -22101,6 +22115,7 @@ There are a few ways this can be handled:
|
|
|
22101
22115
|
role="cell"
|
|
22102
22116
|
data-label="Example td"
|
|
22103
22117
|
>Test cell 2-8</td>
|
|
22118
|
+
|
|
22104
22119
|
<td
|
|
22105
22120
|
class="pf-m-nowrap"
|
|
22106
22121
|
role="cell"
|
|
@@ -22109,18 +22124,18 @@ There are a few ways this can be handled:
|
|
|
22109
22124
|
</tr>
|
|
22110
22125
|
<tr role="row">
|
|
22111
22126
|
<th
|
|
22112
|
-
class="pf-m-truncate pf-c-table__sticky-
|
|
22127
|
+
class="pf-m-truncate pf-c-table__sticky-cell pf-m-left"
|
|
22113
22128
|
role="columnheader"
|
|
22114
22129
|
data-label="Example th"
|
|
22115
22130
|
scope="col"
|
|
22116
|
-
style="--pf-c-table__sticky-
|
|
22131
|
+
style="--pf-c-table__sticky-cell--MinWidth: 100px;"
|
|
22117
22132
|
>Fact 3</th>
|
|
22118
22133
|
<th
|
|
22119
|
-
class="pf-m-truncate pf-m-border-right pf-c-table__sticky-
|
|
22134
|
+
class="pf-m-truncate pf-m-border-right pf-c-table__sticky-cell pf-m-left"
|
|
22120
22135
|
role="columnheader"
|
|
22121
22136
|
data-label="Example th"
|
|
22122
22137
|
scope="col"
|
|
22123
|
-
style="--pf-c-table__sticky-
|
|
22138
|
+
style="--pf-c-table__sticky-cell--MinWidth: 80px; --pf-c-table__sticky-cell--Left: 100px;"
|
|
22124
22139
|
>State 3</th>
|
|
22125
22140
|
<td
|
|
22126
22141
|
class="pf-m-nowrap"
|
|
@@ -22152,6 +22167,7 @@ There are a few ways this can be handled:
|
|
|
22152
22167
|
role="cell"
|
|
22153
22168
|
data-label="Example td"
|
|
22154
22169
|
>Test cell 3-8</td>
|
|
22170
|
+
|
|
22155
22171
|
<td
|
|
22156
22172
|
class="pf-m-nowrap"
|
|
22157
22173
|
role="cell"
|
|
@@ -22160,18 +22176,18 @@ There are a few ways this can be handled:
|
|
|
22160
22176
|
</tr>
|
|
22161
22177
|
<tr role="row">
|
|
22162
22178
|
<th
|
|
22163
|
-
class="pf-m-truncate pf-c-table__sticky-
|
|
22179
|
+
class="pf-m-truncate pf-c-table__sticky-cell pf-m-left"
|
|
22164
22180
|
role="columnheader"
|
|
22165
22181
|
data-label="Example th"
|
|
22166
22182
|
scope="col"
|
|
22167
|
-
style="--pf-c-table__sticky-
|
|
22183
|
+
style="--pf-c-table__sticky-cell--MinWidth: 100px;"
|
|
22168
22184
|
>Fact 4</th>
|
|
22169
22185
|
<th
|
|
22170
|
-
class="pf-m-truncate pf-m-border-right pf-c-table__sticky-
|
|
22186
|
+
class="pf-m-truncate pf-m-border-right pf-c-table__sticky-cell pf-m-left"
|
|
22171
22187
|
role="columnheader"
|
|
22172
22188
|
data-label="Example th"
|
|
22173
22189
|
scope="col"
|
|
22174
|
-
style="--pf-c-table__sticky-
|
|
22190
|
+
style="--pf-c-table__sticky-cell--MinWidth: 80px; --pf-c-table__sticky-cell--Left: 100px;"
|
|
22175
22191
|
>State 4</th>
|
|
22176
22192
|
<td
|
|
22177
22193
|
class="pf-m-nowrap"
|
|
@@ -22203,6 +22219,7 @@ There are a few ways this can be handled:
|
|
|
22203
22219
|
role="cell"
|
|
22204
22220
|
data-label="Example td"
|
|
22205
22221
|
>Test cell 4-8</td>
|
|
22222
|
+
|
|
22206
22223
|
<td
|
|
22207
22224
|
class="pf-m-nowrap"
|
|
22208
22225
|
role="cell"
|
|
@@ -22211,18 +22228,18 @@ There are a few ways this can be handled:
|
|
|
22211
22228
|
</tr>
|
|
22212
22229
|
<tr role="row">
|
|
22213
22230
|
<th
|
|
22214
|
-
class="pf-m-truncate pf-c-table__sticky-
|
|
22231
|
+
class="pf-m-truncate pf-c-table__sticky-cell pf-m-left"
|
|
22215
22232
|
role="columnheader"
|
|
22216
22233
|
data-label="Example th"
|
|
22217
22234
|
scope="col"
|
|
22218
|
-
style="--pf-c-table__sticky-
|
|
22235
|
+
style="--pf-c-table__sticky-cell--MinWidth: 100px;"
|
|
22219
22236
|
>Fact 5</th>
|
|
22220
22237
|
<th
|
|
22221
|
-
class="pf-m-truncate pf-m-border-right pf-c-table__sticky-
|
|
22238
|
+
class="pf-m-truncate pf-m-border-right pf-c-table__sticky-cell pf-m-left"
|
|
22222
22239
|
role="columnheader"
|
|
22223
22240
|
data-label="Example th"
|
|
22224
22241
|
scope="col"
|
|
22225
|
-
style="--pf-c-table__sticky-
|
|
22242
|
+
style="--pf-c-table__sticky-cell--MinWidth: 80px; --pf-c-table__sticky-cell--Left: 100px;"
|
|
22226
22243
|
>State 5</th>
|
|
22227
22244
|
<td
|
|
22228
22245
|
class="pf-m-nowrap"
|
|
@@ -22254,6 +22271,7 @@ There are a few ways this can be handled:
|
|
|
22254
22271
|
role="cell"
|
|
22255
22272
|
data-label="Example td"
|
|
22256
22273
|
>Test cell 5-8</td>
|
|
22274
|
+
|
|
22257
22275
|
<td
|
|
22258
22276
|
class="pf-m-nowrap"
|
|
22259
22277
|
role="cell"
|
|
@@ -22262,18 +22280,18 @@ There are a few ways this can be handled:
|
|
|
22262
22280
|
</tr>
|
|
22263
22281
|
<tr role="row">
|
|
22264
22282
|
<th
|
|
22265
|
-
class="pf-m-truncate pf-c-table__sticky-
|
|
22283
|
+
class="pf-m-truncate pf-c-table__sticky-cell pf-m-left"
|
|
22266
22284
|
role="columnheader"
|
|
22267
22285
|
data-label="Example th"
|
|
22268
22286
|
scope="col"
|
|
22269
|
-
style="--pf-c-table__sticky-
|
|
22287
|
+
style="--pf-c-table__sticky-cell--MinWidth: 100px;"
|
|
22270
22288
|
>Fact 6</th>
|
|
22271
22289
|
<th
|
|
22272
|
-
class="pf-m-truncate pf-m-border-right pf-c-table__sticky-
|
|
22290
|
+
class="pf-m-truncate pf-m-border-right pf-c-table__sticky-cell pf-m-left"
|
|
22273
22291
|
role="columnheader"
|
|
22274
22292
|
data-label="Example th"
|
|
22275
22293
|
scope="col"
|
|
22276
|
-
style="--pf-c-table__sticky-
|
|
22294
|
+
style="--pf-c-table__sticky-cell--MinWidth: 80px; --pf-c-table__sticky-cell--Left: 100px;"
|
|
22277
22295
|
>State 6</th>
|
|
22278
22296
|
<td
|
|
22279
22297
|
class="pf-m-nowrap"
|
|
@@ -22305,6 +22323,7 @@ There are a few ways this can be handled:
|
|
|
22305
22323
|
role="cell"
|
|
22306
22324
|
data-label="Example td"
|
|
22307
22325
|
>Test cell 6-8</td>
|
|
22326
|
+
|
|
22308
22327
|
<td
|
|
22309
22328
|
class="pf-m-nowrap"
|
|
22310
22329
|
role="cell"
|
|
@@ -22313,18 +22332,18 @@ There are a few ways this can be handled:
|
|
|
22313
22332
|
</tr>
|
|
22314
22333
|
<tr role="row">
|
|
22315
22334
|
<th
|
|
22316
|
-
class="pf-m-truncate pf-c-table__sticky-
|
|
22335
|
+
class="pf-m-truncate pf-c-table__sticky-cell pf-m-left"
|
|
22317
22336
|
role="columnheader"
|
|
22318
22337
|
data-label="Example th"
|
|
22319
22338
|
scope="col"
|
|
22320
|
-
style="--pf-c-table__sticky-
|
|
22339
|
+
style="--pf-c-table__sticky-cell--MinWidth: 100px;"
|
|
22321
22340
|
>Fact 7</th>
|
|
22322
22341
|
<th
|
|
22323
|
-
class="pf-m-truncate pf-m-border-right pf-c-table__sticky-
|
|
22342
|
+
class="pf-m-truncate pf-m-border-right pf-c-table__sticky-cell pf-m-left"
|
|
22324
22343
|
role="columnheader"
|
|
22325
22344
|
data-label="Example th"
|
|
22326
22345
|
scope="col"
|
|
22327
|
-
style="--pf-c-table__sticky-
|
|
22346
|
+
style="--pf-c-table__sticky-cell--MinWidth: 80px; --pf-c-table__sticky-cell--Left: 100px;"
|
|
22328
22347
|
>State 7</th>
|
|
22329
22348
|
<td
|
|
22330
22349
|
class="pf-m-nowrap"
|
|
@@ -22356,6 +22375,7 @@ There are a few ways this can be handled:
|
|
|
22356
22375
|
role="cell"
|
|
22357
22376
|
data-label="Example td"
|
|
22358
22377
|
>Test cell 7-8</td>
|
|
22378
|
+
|
|
22359
22379
|
<td
|
|
22360
22380
|
class="pf-m-nowrap"
|
|
22361
22381
|
role="cell"
|
|
@@ -22364,18 +22384,18 @@ There are a few ways this can be handled:
|
|
|
22364
22384
|
</tr>
|
|
22365
22385
|
<tr role="row">
|
|
22366
22386
|
<th
|
|
22367
|
-
class="pf-m-truncate pf-c-table__sticky-
|
|
22387
|
+
class="pf-m-truncate pf-c-table__sticky-cell pf-m-left"
|
|
22368
22388
|
role="columnheader"
|
|
22369
22389
|
data-label="Example th"
|
|
22370
22390
|
scope="col"
|
|
22371
|
-
style="--pf-c-table__sticky-
|
|
22391
|
+
style="--pf-c-table__sticky-cell--MinWidth: 100px;"
|
|
22372
22392
|
>Fact 8</th>
|
|
22373
22393
|
<th
|
|
22374
|
-
class="pf-m-truncate pf-m-border-right pf-c-table__sticky-
|
|
22394
|
+
class="pf-m-truncate pf-m-border-right pf-c-table__sticky-cell pf-m-left"
|
|
22375
22395
|
role="columnheader"
|
|
22376
22396
|
data-label="Example th"
|
|
22377
22397
|
scope="col"
|
|
22378
|
-
style="--pf-c-table__sticky-
|
|
22398
|
+
style="--pf-c-table__sticky-cell--MinWidth: 80px; --pf-c-table__sticky-cell--Left: 100px;"
|
|
22379
22399
|
>State 8</th>
|
|
22380
22400
|
<td
|
|
22381
22401
|
class="pf-m-nowrap"
|
|
@@ -22407,6 +22427,7 @@ There are a few ways this can be handled:
|
|
|
22407
22427
|
role="cell"
|
|
22408
22428
|
data-label="Example td"
|
|
22409
22429
|
>Test cell 8-8</td>
|
|
22430
|
+
|
|
22410
22431
|
<td
|
|
22411
22432
|
class="pf-m-nowrap"
|
|
22412
22433
|
role="cell"
|
|
@@ -22415,18 +22436,18 @@ There are a few ways this can be handled:
|
|
|
22415
22436
|
</tr>
|
|
22416
22437
|
<tr role="row">
|
|
22417
22438
|
<th
|
|
22418
|
-
class="pf-m-truncate pf-c-table__sticky-
|
|
22439
|
+
class="pf-m-truncate pf-c-table__sticky-cell pf-m-left"
|
|
22419
22440
|
role="columnheader"
|
|
22420
22441
|
data-label="Example th"
|
|
22421
22442
|
scope="col"
|
|
22422
|
-
style="--pf-c-table__sticky-
|
|
22443
|
+
style="--pf-c-table__sticky-cell--MinWidth: 100px;"
|
|
22423
22444
|
>Fact 9</th>
|
|
22424
22445
|
<th
|
|
22425
|
-
class="pf-m-truncate pf-m-border-right pf-c-table__sticky-
|
|
22446
|
+
class="pf-m-truncate pf-m-border-right pf-c-table__sticky-cell pf-m-left"
|
|
22426
22447
|
role="columnheader"
|
|
22427
22448
|
data-label="Example th"
|
|
22428
22449
|
scope="col"
|
|
22429
|
-
style="--pf-c-table__sticky-
|
|
22450
|
+
style="--pf-c-table__sticky-cell--MinWidth: 80px; --pf-c-table__sticky-cell--Left: 100px;"
|
|
22430
22451
|
>State 9</th>
|
|
22431
22452
|
<td
|
|
22432
22453
|
class="pf-m-nowrap"
|
|
@@ -22458,6 +22479,7 @@ There are a few ways this can be handled:
|
|
|
22458
22479
|
role="cell"
|
|
22459
22480
|
data-label="Example td"
|
|
22460
22481
|
>Test cell 9-8</td>
|
|
22482
|
+
|
|
22461
22483
|
<td
|
|
22462
22484
|
class="pf-m-nowrap"
|
|
22463
22485
|
role="cell"
|
|
@@ -22484,12 +22506,12 @@ There are a few ways this can be handled:
|
|
|
22484
22506
|
<thead>
|
|
22485
22507
|
<tr role="row">
|
|
22486
22508
|
<th
|
|
22487
|
-
class="pf-m-truncate pf-c-table__sort pf-c-table__sticky-
|
|
22509
|
+
class="pf-m-truncate pf-c-table__sort pf-c-table__sticky-cell pf-m-left"
|
|
22488
22510
|
role="columnheader"
|
|
22489
22511
|
aria-sort="none"
|
|
22490
22512
|
data-label="Example th"
|
|
22491
22513
|
scope="col"
|
|
22492
|
-
style="--pf-c-table__sticky-
|
|
22514
|
+
style="--pf-c-table__sticky-cell--MinWidth: 100px;"
|
|
22493
22515
|
>
|
|
22494
22516
|
<button class="pf-c-table__button">
|
|
22495
22517
|
<div class="pf-c-table__button-content">
|
|
@@ -22501,12 +22523,12 @@ There are a few ways this can be handled:
|
|
|
22501
22523
|
</button>
|
|
22502
22524
|
</th>
|
|
22503
22525
|
<th
|
|
22504
|
-
class="pf-m-truncate pf-m-border-right pf-c-table__sort pf-c-table__sticky-
|
|
22526
|
+
class="pf-m-truncate pf-m-border-right pf-c-table__sort pf-c-table__sticky-cell pf-m-left"
|
|
22505
22527
|
role="columnheader"
|
|
22506
22528
|
aria-sort="none"
|
|
22507
22529
|
data-label="Example th"
|
|
22508
22530
|
scope="col"
|
|
22509
|
-
style="--pf-c-table__sticky-
|
|
22531
|
+
style="--pf-c-table__sticky-cell--MinWidth: 120px; --pf-c-table__sticky-cell--Left: 100px;"
|
|
22510
22532
|
>
|
|
22511
22533
|
<button class="pf-c-table__button">
|
|
22512
22534
|
<div class="pf-c-table__button-content">
|
|
@@ -22553,6 +22575,7 @@ There are a few ways this can be handled:
|
|
|
22553
22575
|
data-label="Example th"
|
|
22554
22576
|
scope="col"
|
|
22555
22577
|
>Header 8</th>
|
|
22578
|
+
|
|
22556
22579
|
<th
|
|
22557
22580
|
class
|
|
22558
22581
|
role="columnheader"
|
|
@@ -22565,18 +22588,18 @@ There are a few ways this can be handled:
|
|
|
22565
22588
|
<tbody role="rowgroup">
|
|
22566
22589
|
<tr role="row">
|
|
22567
22590
|
<th
|
|
22568
|
-
class="pf-m-truncate pf-c-table__sticky-
|
|
22591
|
+
class="pf-m-truncate pf-c-table__sticky-cell pf-m-left"
|
|
22569
22592
|
role="columnheader"
|
|
22570
22593
|
data-label="Example th"
|
|
22571
22594
|
scope="col"
|
|
22572
|
-
style="--pf-c-table__sticky-
|
|
22595
|
+
style="--pf-c-table__sticky-cell--MinWidth: 100px;"
|
|
22573
22596
|
>Fact 1</th>
|
|
22574
22597
|
<th
|
|
22575
|
-
class="pf-m-truncate pf-m-border-right pf-c-table__sticky-
|
|
22598
|
+
class="pf-m-truncate pf-m-border-right pf-c-table__sticky-cell pf-m-left"
|
|
22576
22599
|
role="columnheader"
|
|
22577
22600
|
data-label="Example th"
|
|
22578
22601
|
scope="col"
|
|
22579
|
-
style="--pf-c-table__sticky-
|
|
22602
|
+
style="--pf-c-table__sticky-cell--MinWidth: 80px; --pf-c-table__sticky-cell--Left: 100px;"
|
|
22580
22603
|
>State 1</th>
|
|
22581
22604
|
<td
|
|
22582
22605
|
class="pf-m-nowrap"
|
|
@@ -22608,6 +22631,7 @@ There are a few ways this can be handled:
|
|
|
22608
22631
|
role="cell"
|
|
22609
22632
|
data-label="Example td"
|
|
22610
22633
|
>Test cell 1-8</td>
|
|
22634
|
+
|
|
22611
22635
|
<td
|
|
22612
22636
|
class="pf-m-nowrap"
|
|
22613
22637
|
role="cell"
|
|
@@ -22616,18 +22640,18 @@ There are a few ways this can be handled:
|
|
|
22616
22640
|
</tr>
|
|
22617
22641
|
<tr role="row">
|
|
22618
22642
|
<th
|
|
22619
|
-
class="pf-m-truncate pf-c-table__sticky-
|
|
22643
|
+
class="pf-m-truncate pf-c-table__sticky-cell pf-m-left"
|
|
22620
22644
|
role="columnheader"
|
|
22621
22645
|
data-label="Example th"
|
|
22622
22646
|
scope="col"
|
|
22623
|
-
style="--pf-c-table__sticky-
|
|
22647
|
+
style="--pf-c-table__sticky-cell--MinWidth: 100px;"
|
|
22624
22648
|
>Fact 2</th>
|
|
22625
22649
|
<th
|
|
22626
|
-
class="pf-m-truncate pf-m-border-right pf-c-table__sticky-
|
|
22650
|
+
class="pf-m-truncate pf-m-border-right pf-c-table__sticky-cell pf-m-left"
|
|
22627
22651
|
role="columnheader"
|
|
22628
22652
|
data-label="Example th"
|
|
22629
22653
|
scope="col"
|
|
22630
|
-
style="--pf-c-table__sticky-
|
|
22654
|
+
style="--pf-c-table__sticky-cell--MinWidth: 80px; --pf-c-table__sticky-cell--Left: 100px;"
|
|
22631
22655
|
>State 2</th>
|
|
22632
22656
|
<td
|
|
22633
22657
|
class="pf-m-nowrap"
|
|
@@ -22659,6 +22683,7 @@ There are a few ways this can be handled:
|
|
|
22659
22683
|
role="cell"
|
|
22660
22684
|
data-label="Example td"
|
|
22661
22685
|
>Test cell 2-8</td>
|
|
22686
|
+
|
|
22662
22687
|
<td
|
|
22663
22688
|
class="pf-m-nowrap"
|
|
22664
22689
|
role="cell"
|
|
@@ -22667,18 +22692,18 @@ There are a few ways this can be handled:
|
|
|
22667
22692
|
</tr>
|
|
22668
22693
|
<tr role="row">
|
|
22669
22694
|
<th
|
|
22670
|
-
class="pf-m-truncate pf-c-table__sticky-
|
|
22695
|
+
class="pf-m-truncate pf-c-table__sticky-cell pf-m-left"
|
|
22671
22696
|
role="columnheader"
|
|
22672
22697
|
data-label="Example th"
|
|
22673
22698
|
scope="col"
|
|
22674
|
-
style="--pf-c-table__sticky-
|
|
22699
|
+
style="--pf-c-table__sticky-cell--MinWidth: 100px;"
|
|
22675
22700
|
>Fact 3</th>
|
|
22676
22701
|
<th
|
|
22677
|
-
class="pf-m-truncate pf-m-border-right pf-c-table__sticky-
|
|
22702
|
+
class="pf-m-truncate pf-m-border-right pf-c-table__sticky-cell pf-m-left"
|
|
22678
22703
|
role="columnheader"
|
|
22679
22704
|
data-label="Example th"
|
|
22680
22705
|
scope="col"
|
|
22681
|
-
style="--pf-c-table__sticky-
|
|
22706
|
+
style="--pf-c-table__sticky-cell--MinWidth: 80px; --pf-c-table__sticky-cell--Left: 100px;"
|
|
22682
22707
|
>State 3</th>
|
|
22683
22708
|
<td
|
|
22684
22709
|
class="pf-m-nowrap"
|
|
@@ -22710,6 +22735,7 @@ There are a few ways this can be handled:
|
|
|
22710
22735
|
role="cell"
|
|
22711
22736
|
data-label="Example td"
|
|
22712
22737
|
>Test cell 3-8</td>
|
|
22738
|
+
|
|
22713
22739
|
<td
|
|
22714
22740
|
class="pf-m-nowrap"
|
|
22715
22741
|
role="cell"
|
|
@@ -22718,18 +22744,18 @@ There are a few ways this can be handled:
|
|
|
22718
22744
|
</tr>
|
|
22719
22745
|
<tr role="row">
|
|
22720
22746
|
<th
|
|
22721
|
-
class="pf-m-truncate pf-c-table__sticky-
|
|
22747
|
+
class="pf-m-truncate pf-c-table__sticky-cell pf-m-left"
|
|
22722
22748
|
role="columnheader"
|
|
22723
22749
|
data-label="Example th"
|
|
22724
22750
|
scope="col"
|
|
22725
|
-
style="--pf-c-table__sticky-
|
|
22751
|
+
style="--pf-c-table__sticky-cell--MinWidth: 100px;"
|
|
22726
22752
|
>Fact 4</th>
|
|
22727
22753
|
<th
|
|
22728
|
-
class="pf-m-truncate pf-m-border-right pf-c-table__sticky-
|
|
22754
|
+
class="pf-m-truncate pf-m-border-right pf-c-table__sticky-cell pf-m-left"
|
|
22729
22755
|
role="columnheader"
|
|
22730
22756
|
data-label="Example th"
|
|
22731
22757
|
scope="col"
|
|
22732
|
-
style="--pf-c-table__sticky-
|
|
22758
|
+
style="--pf-c-table__sticky-cell--MinWidth: 80px; --pf-c-table__sticky-cell--Left: 100px;"
|
|
22733
22759
|
>State 4</th>
|
|
22734
22760
|
<td
|
|
22735
22761
|
class="pf-m-nowrap"
|
|
@@ -22761,6 +22787,7 @@ There are a few ways this can be handled:
|
|
|
22761
22787
|
role="cell"
|
|
22762
22788
|
data-label="Example td"
|
|
22763
22789
|
>Test cell 4-8</td>
|
|
22790
|
+
|
|
22764
22791
|
<td
|
|
22765
22792
|
class="pf-m-nowrap"
|
|
22766
22793
|
role="cell"
|
|
@@ -22769,18 +22796,18 @@ There are a few ways this can be handled:
|
|
|
22769
22796
|
</tr>
|
|
22770
22797
|
<tr role="row">
|
|
22771
22798
|
<th
|
|
22772
|
-
class="pf-m-truncate pf-c-table__sticky-
|
|
22799
|
+
class="pf-m-truncate pf-c-table__sticky-cell pf-m-left"
|
|
22773
22800
|
role="columnheader"
|
|
22774
22801
|
data-label="Example th"
|
|
22775
22802
|
scope="col"
|
|
22776
|
-
style="--pf-c-table__sticky-
|
|
22803
|
+
style="--pf-c-table__sticky-cell--MinWidth: 100px;"
|
|
22777
22804
|
>Fact 5</th>
|
|
22778
22805
|
<th
|
|
22779
|
-
class="pf-m-truncate pf-m-border-right pf-c-table__sticky-
|
|
22806
|
+
class="pf-m-truncate pf-m-border-right pf-c-table__sticky-cell pf-m-left"
|
|
22780
22807
|
role="columnheader"
|
|
22781
22808
|
data-label="Example th"
|
|
22782
22809
|
scope="col"
|
|
22783
|
-
style="--pf-c-table__sticky-
|
|
22810
|
+
style="--pf-c-table__sticky-cell--MinWidth: 80px; --pf-c-table__sticky-cell--Left: 100px;"
|
|
22784
22811
|
>State 5</th>
|
|
22785
22812
|
<td
|
|
22786
22813
|
class="pf-m-nowrap"
|
|
@@ -22812,6 +22839,7 @@ There are a few ways this can be handled:
|
|
|
22812
22839
|
role="cell"
|
|
22813
22840
|
data-label="Example td"
|
|
22814
22841
|
>Test cell 5-8</td>
|
|
22842
|
+
|
|
22815
22843
|
<td
|
|
22816
22844
|
class="pf-m-nowrap"
|
|
22817
22845
|
role="cell"
|
|
@@ -22820,18 +22848,18 @@ There are a few ways this can be handled:
|
|
|
22820
22848
|
</tr>
|
|
22821
22849
|
<tr role="row">
|
|
22822
22850
|
<th
|
|
22823
|
-
class="pf-m-truncate pf-c-table__sticky-
|
|
22851
|
+
class="pf-m-truncate pf-c-table__sticky-cell pf-m-left"
|
|
22824
22852
|
role="columnheader"
|
|
22825
22853
|
data-label="Example th"
|
|
22826
22854
|
scope="col"
|
|
22827
|
-
style="--pf-c-table__sticky-
|
|
22855
|
+
style="--pf-c-table__sticky-cell--MinWidth: 100px;"
|
|
22828
22856
|
>Fact 6</th>
|
|
22829
22857
|
<th
|
|
22830
|
-
class="pf-m-truncate pf-m-border-right pf-c-table__sticky-
|
|
22858
|
+
class="pf-m-truncate pf-m-border-right pf-c-table__sticky-cell pf-m-left"
|
|
22831
22859
|
role="columnheader"
|
|
22832
22860
|
data-label="Example th"
|
|
22833
22861
|
scope="col"
|
|
22834
|
-
style="--pf-c-table__sticky-
|
|
22862
|
+
style="--pf-c-table__sticky-cell--MinWidth: 80px; --pf-c-table__sticky-cell--Left: 100px;"
|
|
22835
22863
|
>State 6</th>
|
|
22836
22864
|
<td
|
|
22837
22865
|
class="pf-m-nowrap"
|
|
@@ -22863,6 +22891,7 @@ There are a few ways this can be handled:
|
|
|
22863
22891
|
role="cell"
|
|
22864
22892
|
data-label="Example td"
|
|
22865
22893
|
>Test cell 6-8</td>
|
|
22894
|
+
|
|
22866
22895
|
<td
|
|
22867
22896
|
class="pf-m-nowrap"
|
|
22868
22897
|
role="cell"
|
|
@@ -22871,18 +22900,18 @@ There are a few ways this can be handled:
|
|
|
22871
22900
|
</tr>
|
|
22872
22901
|
<tr role="row">
|
|
22873
22902
|
<th
|
|
22874
|
-
class="pf-m-truncate pf-c-table__sticky-
|
|
22903
|
+
class="pf-m-truncate pf-c-table__sticky-cell pf-m-left"
|
|
22875
22904
|
role="columnheader"
|
|
22876
22905
|
data-label="Example th"
|
|
22877
22906
|
scope="col"
|
|
22878
|
-
style="--pf-c-table__sticky-
|
|
22907
|
+
style="--pf-c-table__sticky-cell--MinWidth: 100px;"
|
|
22879
22908
|
>Fact 7</th>
|
|
22880
22909
|
<th
|
|
22881
|
-
class="pf-m-truncate pf-m-border-right pf-c-table__sticky-
|
|
22910
|
+
class="pf-m-truncate pf-m-border-right pf-c-table__sticky-cell pf-m-left"
|
|
22882
22911
|
role="columnheader"
|
|
22883
22912
|
data-label="Example th"
|
|
22884
22913
|
scope="col"
|
|
22885
|
-
style="--pf-c-table__sticky-
|
|
22914
|
+
style="--pf-c-table__sticky-cell--MinWidth: 80px; --pf-c-table__sticky-cell--Left: 100px;"
|
|
22886
22915
|
>State 7</th>
|
|
22887
22916
|
<td
|
|
22888
22917
|
class="pf-m-nowrap"
|
|
@@ -22914,6 +22943,7 @@ There are a few ways this can be handled:
|
|
|
22914
22943
|
role="cell"
|
|
22915
22944
|
data-label="Example td"
|
|
22916
22945
|
>Test cell 7-8</td>
|
|
22946
|
+
|
|
22917
22947
|
<td
|
|
22918
22948
|
class="pf-m-nowrap"
|
|
22919
22949
|
role="cell"
|
|
@@ -22922,18 +22952,18 @@ There are a few ways this can be handled:
|
|
|
22922
22952
|
</tr>
|
|
22923
22953
|
<tr role="row">
|
|
22924
22954
|
<th
|
|
22925
|
-
class="pf-m-truncate pf-c-table__sticky-
|
|
22955
|
+
class="pf-m-truncate pf-c-table__sticky-cell pf-m-left"
|
|
22926
22956
|
role="columnheader"
|
|
22927
22957
|
data-label="Example th"
|
|
22928
22958
|
scope="col"
|
|
22929
|
-
style="--pf-c-table__sticky-
|
|
22959
|
+
style="--pf-c-table__sticky-cell--MinWidth: 100px;"
|
|
22930
22960
|
>Fact 8</th>
|
|
22931
22961
|
<th
|
|
22932
|
-
class="pf-m-truncate pf-m-border-right pf-c-table__sticky-
|
|
22962
|
+
class="pf-m-truncate pf-m-border-right pf-c-table__sticky-cell pf-m-left"
|
|
22933
22963
|
role="columnheader"
|
|
22934
22964
|
data-label="Example th"
|
|
22935
22965
|
scope="col"
|
|
22936
|
-
style="--pf-c-table__sticky-
|
|
22966
|
+
style="--pf-c-table__sticky-cell--MinWidth: 80px; --pf-c-table__sticky-cell--Left: 100px;"
|
|
22937
22967
|
>State 8</th>
|
|
22938
22968
|
<td
|
|
22939
22969
|
class="pf-m-nowrap"
|
|
@@ -22965,6 +22995,7 @@ There are a few ways this can be handled:
|
|
|
22965
22995
|
role="cell"
|
|
22966
22996
|
data-label="Example td"
|
|
22967
22997
|
>Test cell 8-8</td>
|
|
22998
|
+
|
|
22968
22999
|
<td
|
|
22969
23000
|
class="pf-m-nowrap"
|
|
22970
23001
|
role="cell"
|
|
@@ -22973,18 +23004,18 @@ There are a few ways this can be handled:
|
|
|
22973
23004
|
</tr>
|
|
22974
23005
|
<tr role="row">
|
|
22975
23006
|
<th
|
|
22976
|
-
class="pf-m-truncate pf-c-table__sticky-
|
|
23007
|
+
class="pf-m-truncate pf-c-table__sticky-cell pf-m-left"
|
|
22977
23008
|
role="columnheader"
|
|
22978
23009
|
data-label="Example th"
|
|
22979
23010
|
scope="col"
|
|
22980
|
-
style="--pf-c-table__sticky-
|
|
23011
|
+
style="--pf-c-table__sticky-cell--MinWidth: 100px;"
|
|
22981
23012
|
>Fact 9</th>
|
|
22982
23013
|
<th
|
|
22983
|
-
class="pf-m-truncate pf-m-border-right pf-c-table__sticky-
|
|
23014
|
+
class="pf-m-truncate pf-m-border-right pf-c-table__sticky-cell pf-m-left"
|
|
22984
23015
|
role="columnheader"
|
|
22985
23016
|
data-label="Example th"
|
|
22986
23017
|
scope="col"
|
|
22987
|
-
style="--pf-c-table__sticky-
|
|
23018
|
+
style="--pf-c-table__sticky-cell--MinWidth: 80px; --pf-c-table__sticky-cell--Left: 100px;"
|
|
22988
23019
|
>State 9</th>
|
|
22989
23020
|
<td
|
|
22990
23021
|
class="pf-m-nowrap"
|
|
@@ -23016,6 +23047,7 @@ There are a few ways this can be handled:
|
|
|
23016
23047
|
role="cell"
|
|
23017
23048
|
data-label="Example td"
|
|
23018
23049
|
>Test cell 9-8</td>
|
|
23050
|
+
|
|
23019
23051
|
<td
|
|
23020
23052
|
class="pf-m-nowrap"
|
|
23021
23053
|
role="cell"
|
|
@@ -23029,6 +23061,482 @@ There are a few ways this can be handled:
|
|
|
23029
23061
|
|
|
23030
23062
|
```
|
|
23031
23063
|
|
|
23064
|
+
### Sticky right column
|
|
23065
|
+
|
|
23066
|
+
```html
|
|
23067
|
+
<div class="pf-c-scroll-inner-wrapper">
|
|
23068
|
+
<table
|
|
23069
|
+
class="pf-c-table"
|
|
23070
|
+
role="grid"
|
|
23071
|
+
aria-label="This is a scrollable table"
|
|
23072
|
+
id="sticky-right-column-example"
|
|
23073
|
+
>
|
|
23074
|
+
<thead>
|
|
23075
|
+
<tr role="row">
|
|
23076
|
+
<th
|
|
23077
|
+
class="pf-c-table__sort"
|
|
23078
|
+
role="columnheader"
|
|
23079
|
+
aria-sort="none"
|
|
23080
|
+
data-label="Example th"
|
|
23081
|
+
scope="col"
|
|
23082
|
+
>
|
|
23083
|
+
<button class="pf-c-table__button">
|
|
23084
|
+
<div class="pf-c-table__button-content">
|
|
23085
|
+
<span class="pf-c-table__text">Fact</span>
|
|
23086
|
+
<span class="pf-c-table__sort-indicator">
|
|
23087
|
+
<i class="fas fa-arrows-alt-v"></i>
|
|
23088
|
+
</span>
|
|
23089
|
+
</div>
|
|
23090
|
+
</button>
|
|
23091
|
+
</th>
|
|
23092
|
+
<th
|
|
23093
|
+
class="pf-c-table__sort"
|
|
23094
|
+
role="columnheader"
|
|
23095
|
+
aria-sort="none"
|
|
23096
|
+
data-label="Example th"
|
|
23097
|
+
scope="col"
|
|
23098
|
+
>
|
|
23099
|
+
<button class="pf-c-table__button">
|
|
23100
|
+
<div class="pf-c-table__button-content">
|
|
23101
|
+
<span class="pf-c-table__text">State</span>
|
|
23102
|
+
<span class="pf-c-table__sort-indicator">
|
|
23103
|
+
<i class="fas fa-arrows-alt-v"></i>
|
|
23104
|
+
</span>
|
|
23105
|
+
</div>
|
|
23106
|
+
</button>
|
|
23107
|
+
</th>
|
|
23108
|
+
<th
|
|
23109
|
+
class
|
|
23110
|
+
role="columnheader"
|
|
23111
|
+
data-label="Example th"
|
|
23112
|
+
scope="col"
|
|
23113
|
+
>Header 3</th>
|
|
23114
|
+
<th
|
|
23115
|
+
class
|
|
23116
|
+
role="columnheader"
|
|
23117
|
+
data-label="Example th"
|
|
23118
|
+
scope="col"
|
|
23119
|
+
>Header 4</th>
|
|
23120
|
+
<th
|
|
23121
|
+
class
|
|
23122
|
+
role="columnheader"
|
|
23123
|
+
data-label="Example th"
|
|
23124
|
+
scope="col"
|
|
23125
|
+
>Header 5</th>
|
|
23126
|
+
<th
|
|
23127
|
+
class
|
|
23128
|
+
role="columnheader"
|
|
23129
|
+
data-label="Example th"
|
|
23130
|
+
scope="col"
|
|
23131
|
+
>Header 6</th>
|
|
23132
|
+
<th
|
|
23133
|
+
class
|
|
23134
|
+
role="columnheader"
|
|
23135
|
+
data-label="Example th"
|
|
23136
|
+
scope="col"
|
|
23137
|
+
>Header 7</th>
|
|
23138
|
+
<th
|
|
23139
|
+
class
|
|
23140
|
+
role="columnheader"
|
|
23141
|
+
data-label="Example th"
|
|
23142
|
+
scope="col"
|
|
23143
|
+
>Header 8</th>
|
|
23144
|
+
|
|
23145
|
+
<th
|
|
23146
|
+
class="pf-m-truncate pf-m-border-left pf-c-table__sticky-cell pf-m-right"
|
|
23147
|
+
role="columnheader"
|
|
23148
|
+
data-label="Example th"
|
|
23149
|
+
scope="col"
|
|
23150
|
+
style="--pf-c-table__sticky-cell--MinWidth: 150px;"
|
|
23151
|
+
>Header 9</th>
|
|
23152
|
+
</tr>
|
|
23153
|
+
</thead>
|
|
23154
|
+
|
|
23155
|
+
<tbody role="rowgroup">
|
|
23156
|
+
<tr role="row">
|
|
23157
|
+
<td class="pf-m-nowrap" role="cell" data-label="Example td">Fact 1</td>
|
|
23158
|
+
<td class="pf-m-nowrap" role="cell" data-label="Example td">State 1</td>
|
|
23159
|
+
<td
|
|
23160
|
+
class="pf-m-nowrap"
|
|
23161
|
+
role="cell"
|
|
23162
|
+
data-label="Example td"
|
|
23163
|
+
>Test cell 1-3</td>
|
|
23164
|
+
<td
|
|
23165
|
+
class="pf-m-nowrap"
|
|
23166
|
+
role="cell"
|
|
23167
|
+
data-label="Example td"
|
|
23168
|
+
>Test cell 1-4</td>
|
|
23169
|
+
<td
|
|
23170
|
+
class="pf-m-nowrap"
|
|
23171
|
+
role="cell"
|
|
23172
|
+
data-label="Example td"
|
|
23173
|
+
>Test cell 1-5</td>
|
|
23174
|
+
<td
|
|
23175
|
+
class="pf-m-nowrap"
|
|
23176
|
+
role="cell"
|
|
23177
|
+
data-label="Example td"
|
|
23178
|
+
>Test cell 1-6</td>
|
|
23179
|
+
<td
|
|
23180
|
+
class="pf-m-nowrap"
|
|
23181
|
+
role="cell"
|
|
23182
|
+
data-label="Example td"
|
|
23183
|
+
>Test cell 1-7</td>
|
|
23184
|
+
<td
|
|
23185
|
+
class="pf-m-nowrap"
|
|
23186
|
+
role="cell"
|
|
23187
|
+
data-label="Example td"
|
|
23188
|
+
>Test cell 1-8</td>
|
|
23189
|
+
|
|
23190
|
+
<th
|
|
23191
|
+
class="pf-m-truncate pf-m-border-left pf-c-table__sticky-cell pf-m-right"
|
|
23192
|
+
role="columnheader"
|
|
23193
|
+
data-label="Example th"
|
|
23194
|
+
scope="col"
|
|
23195
|
+
style="--pf-c-table__sticky-cell--MinWidth: 150px;"
|
|
23196
|
+
>Test cell 1-9</th>
|
|
23197
|
+
</tr>
|
|
23198
|
+
<tr role="row">
|
|
23199
|
+
<td class="pf-m-nowrap" role="cell" data-label="Example td">Fact 2</td>
|
|
23200
|
+
<td class="pf-m-nowrap" role="cell" data-label="Example td">State 2</td>
|
|
23201
|
+
<td
|
|
23202
|
+
class="pf-m-nowrap"
|
|
23203
|
+
role="cell"
|
|
23204
|
+
data-label="Example td"
|
|
23205
|
+
>Test cell 2-3</td>
|
|
23206
|
+
<td
|
|
23207
|
+
class="pf-m-nowrap"
|
|
23208
|
+
role="cell"
|
|
23209
|
+
data-label="Example td"
|
|
23210
|
+
>Test cell 2-4</td>
|
|
23211
|
+
<td
|
|
23212
|
+
class="pf-m-nowrap"
|
|
23213
|
+
role="cell"
|
|
23214
|
+
data-label="Example td"
|
|
23215
|
+
>Test cell 2-5</td>
|
|
23216
|
+
<td
|
|
23217
|
+
class="pf-m-nowrap"
|
|
23218
|
+
role="cell"
|
|
23219
|
+
data-label="Example td"
|
|
23220
|
+
>Test cell 2-6</td>
|
|
23221
|
+
<td
|
|
23222
|
+
class="pf-m-nowrap"
|
|
23223
|
+
role="cell"
|
|
23224
|
+
data-label="Example td"
|
|
23225
|
+
>Test cell 2-7</td>
|
|
23226
|
+
<td
|
|
23227
|
+
class="pf-m-nowrap"
|
|
23228
|
+
role="cell"
|
|
23229
|
+
data-label="Example td"
|
|
23230
|
+
>Test cell 2-8</td>
|
|
23231
|
+
|
|
23232
|
+
<th
|
|
23233
|
+
class="pf-m-truncate pf-m-border-left pf-c-table__sticky-cell pf-m-right"
|
|
23234
|
+
role="columnheader"
|
|
23235
|
+
data-label="Example th"
|
|
23236
|
+
scope="col"
|
|
23237
|
+
style="--pf-c-table__sticky-cell--MinWidth: 150px;"
|
|
23238
|
+
>Test cell 2-9</th>
|
|
23239
|
+
</tr>
|
|
23240
|
+
<tr role="row">
|
|
23241
|
+
<td class="pf-m-nowrap" role="cell" data-label="Example td">Fact 3</td>
|
|
23242
|
+
<td class="pf-m-nowrap" role="cell" data-label="Example td">State 3</td>
|
|
23243
|
+
<td
|
|
23244
|
+
class="pf-m-nowrap"
|
|
23245
|
+
role="cell"
|
|
23246
|
+
data-label="Example td"
|
|
23247
|
+
>Test cell 3-3</td>
|
|
23248
|
+
<td
|
|
23249
|
+
class="pf-m-nowrap"
|
|
23250
|
+
role="cell"
|
|
23251
|
+
data-label="Example td"
|
|
23252
|
+
>Test cell 3-4</td>
|
|
23253
|
+
<td
|
|
23254
|
+
class="pf-m-nowrap"
|
|
23255
|
+
role="cell"
|
|
23256
|
+
data-label="Example td"
|
|
23257
|
+
>Test cell 3-5</td>
|
|
23258
|
+
<td
|
|
23259
|
+
class="pf-m-nowrap"
|
|
23260
|
+
role="cell"
|
|
23261
|
+
data-label="Example td"
|
|
23262
|
+
>Test cell 3-6</td>
|
|
23263
|
+
<td
|
|
23264
|
+
class="pf-m-nowrap"
|
|
23265
|
+
role="cell"
|
|
23266
|
+
data-label="Example td"
|
|
23267
|
+
>Test cell 3-7</td>
|
|
23268
|
+
<td
|
|
23269
|
+
class="pf-m-nowrap"
|
|
23270
|
+
role="cell"
|
|
23271
|
+
data-label="Example td"
|
|
23272
|
+
>Test cell 3-8</td>
|
|
23273
|
+
|
|
23274
|
+
<th
|
|
23275
|
+
class="pf-m-truncate pf-m-border-left pf-c-table__sticky-cell pf-m-right"
|
|
23276
|
+
role="columnheader"
|
|
23277
|
+
data-label="Example th"
|
|
23278
|
+
scope="col"
|
|
23279
|
+
style="--pf-c-table__sticky-cell--MinWidth: 150px;"
|
|
23280
|
+
>Test cell 3-9</th>
|
|
23281
|
+
</tr>
|
|
23282
|
+
<tr role="row">
|
|
23283
|
+
<td class="pf-m-nowrap" role="cell" data-label="Example td">Fact 4</td>
|
|
23284
|
+
<td class="pf-m-nowrap" role="cell" data-label="Example td">State 4</td>
|
|
23285
|
+
<td
|
|
23286
|
+
class="pf-m-nowrap"
|
|
23287
|
+
role="cell"
|
|
23288
|
+
data-label="Example td"
|
|
23289
|
+
>Test cell 4-3</td>
|
|
23290
|
+
<td
|
|
23291
|
+
class="pf-m-nowrap"
|
|
23292
|
+
role="cell"
|
|
23293
|
+
data-label="Example td"
|
|
23294
|
+
>Test cell 4-4</td>
|
|
23295
|
+
<td
|
|
23296
|
+
class="pf-m-nowrap"
|
|
23297
|
+
role="cell"
|
|
23298
|
+
data-label="Example td"
|
|
23299
|
+
>Test cell 4-5</td>
|
|
23300
|
+
<td
|
|
23301
|
+
class="pf-m-nowrap"
|
|
23302
|
+
role="cell"
|
|
23303
|
+
data-label="Example td"
|
|
23304
|
+
>Test cell 4-6</td>
|
|
23305
|
+
<td
|
|
23306
|
+
class="pf-m-nowrap"
|
|
23307
|
+
role="cell"
|
|
23308
|
+
data-label="Example td"
|
|
23309
|
+
>Test cell 4-7</td>
|
|
23310
|
+
<td
|
|
23311
|
+
class="pf-m-nowrap"
|
|
23312
|
+
role="cell"
|
|
23313
|
+
data-label="Example td"
|
|
23314
|
+
>Test cell 4-8</td>
|
|
23315
|
+
|
|
23316
|
+
<th
|
|
23317
|
+
class="pf-m-truncate pf-m-border-left pf-c-table__sticky-cell pf-m-right"
|
|
23318
|
+
role="columnheader"
|
|
23319
|
+
data-label="Example th"
|
|
23320
|
+
scope="col"
|
|
23321
|
+
style="--pf-c-table__sticky-cell--MinWidth: 150px;"
|
|
23322
|
+
>Test cell 4-9</th>
|
|
23323
|
+
</tr>
|
|
23324
|
+
<tr role="row">
|
|
23325
|
+
<td class="pf-m-nowrap" role="cell" data-label="Example td">Fact 5</td>
|
|
23326
|
+
<td class="pf-m-nowrap" role="cell" data-label="Example td">State 5</td>
|
|
23327
|
+
<td
|
|
23328
|
+
class="pf-m-nowrap"
|
|
23329
|
+
role="cell"
|
|
23330
|
+
data-label="Example td"
|
|
23331
|
+
>Test cell 5-3</td>
|
|
23332
|
+
<td
|
|
23333
|
+
class="pf-m-nowrap"
|
|
23334
|
+
role="cell"
|
|
23335
|
+
data-label="Example td"
|
|
23336
|
+
>Test cell 5-4</td>
|
|
23337
|
+
<td
|
|
23338
|
+
class="pf-m-nowrap"
|
|
23339
|
+
role="cell"
|
|
23340
|
+
data-label="Example td"
|
|
23341
|
+
>Test cell 5-5</td>
|
|
23342
|
+
<td
|
|
23343
|
+
class="pf-m-nowrap"
|
|
23344
|
+
role="cell"
|
|
23345
|
+
data-label="Example td"
|
|
23346
|
+
>Test cell 5-6</td>
|
|
23347
|
+
<td
|
|
23348
|
+
class="pf-m-nowrap"
|
|
23349
|
+
role="cell"
|
|
23350
|
+
data-label="Example td"
|
|
23351
|
+
>Test cell 5-7</td>
|
|
23352
|
+
<td
|
|
23353
|
+
class="pf-m-nowrap"
|
|
23354
|
+
role="cell"
|
|
23355
|
+
data-label="Example td"
|
|
23356
|
+
>Test cell 5-8</td>
|
|
23357
|
+
|
|
23358
|
+
<th
|
|
23359
|
+
class="pf-m-truncate pf-m-border-left pf-c-table__sticky-cell pf-m-right"
|
|
23360
|
+
role="columnheader"
|
|
23361
|
+
data-label="Example th"
|
|
23362
|
+
scope="col"
|
|
23363
|
+
style="--pf-c-table__sticky-cell--MinWidth: 150px;"
|
|
23364
|
+
>Test cell 5-9</th>
|
|
23365
|
+
</tr>
|
|
23366
|
+
<tr role="row">
|
|
23367
|
+
<td class="pf-m-nowrap" role="cell" data-label="Example td">Fact 6</td>
|
|
23368
|
+
<td class="pf-m-nowrap" role="cell" data-label="Example td">State 6</td>
|
|
23369
|
+
<td
|
|
23370
|
+
class="pf-m-nowrap"
|
|
23371
|
+
role="cell"
|
|
23372
|
+
data-label="Example td"
|
|
23373
|
+
>Test cell 6-3</td>
|
|
23374
|
+
<td
|
|
23375
|
+
class="pf-m-nowrap"
|
|
23376
|
+
role="cell"
|
|
23377
|
+
data-label="Example td"
|
|
23378
|
+
>Test cell 6-4</td>
|
|
23379
|
+
<td
|
|
23380
|
+
class="pf-m-nowrap"
|
|
23381
|
+
role="cell"
|
|
23382
|
+
data-label="Example td"
|
|
23383
|
+
>Test cell 6-5</td>
|
|
23384
|
+
<td
|
|
23385
|
+
class="pf-m-nowrap"
|
|
23386
|
+
role="cell"
|
|
23387
|
+
data-label="Example td"
|
|
23388
|
+
>Test cell 6-6</td>
|
|
23389
|
+
<td
|
|
23390
|
+
class="pf-m-nowrap"
|
|
23391
|
+
role="cell"
|
|
23392
|
+
data-label="Example td"
|
|
23393
|
+
>Test cell 6-7</td>
|
|
23394
|
+
<td
|
|
23395
|
+
class="pf-m-nowrap"
|
|
23396
|
+
role="cell"
|
|
23397
|
+
data-label="Example td"
|
|
23398
|
+
>Test cell 6-8</td>
|
|
23399
|
+
|
|
23400
|
+
<th
|
|
23401
|
+
class="pf-m-truncate pf-m-border-left pf-c-table__sticky-cell pf-m-right"
|
|
23402
|
+
role="columnheader"
|
|
23403
|
+
data-label="Example th"
|
|
23404
|
+
scope="col"
|
|
23405
|
+
style="--pf-c-table__sticky-cell--MinWidth: 150px;"
|
|
23406
|
+
>Test cell 6-9</th>
|
|
23407
|
+
</tr>
|
|
23408
|
+
<tr role="row">
|
|
23409
|
+
<td class="pf-m-nowrap" role="cell" data-label="Example td">Fact 7</td>
|
|
23410
|
+
<td class="pf-m-nowrap" role="cell" data-label="Example td">State 7</td>
|
|
23411
|
+
<td
|
|
23412
|
+
class="pf-m-nowrap"
|
|
23413
|
+
role="cell"
|
|
23414
|
+
data-label="Example td"
|
|
23415
|
+
>Test cell 7-3</td>
|
|
23416
|
+
<td
|
|
23417
|
+
class="pf-m-nowrap"
|
|
23418
|
+
role="cell"
|
|
23419
|
+
data-label="Example td"
|
|
23420
|
+
>Test cell 7-4</td>
|
|
23421
|
+
<td
|
|
23422
|
+
class="pf-m-nowrap"
|
|
23423
|
+
role="cell"
|
|
23424
|
+
data-label="Example td"
|
|
23425
|
+
>Test cell 7-5</td>
|
|
23426
|
+
<td
|
|
23427
|
+
class="pf-m-nowrap"
|
|
23428
|
+
role="cell"
|
|
23429
|
+
data-label="Example td"
|
|
23430
|
+
>Test cell 7-6</td>
|
|
23431
|
+
<td
|
|
23432
|
+
class="pf-m-nowrap"
|
|
23433
|
+
role="cell"
|
|
23434
|
+
data-label="Example td"
|
|
23435
|
+
>Test cell 7-7</td>
|
|
23436
|
+
<td
|
|
23437
|
+
class="pf-m-nowrap"
|
|
23438
|
+
role="cell"
|
|
23439
|
+
data-label="Example td"
|
|
23440
|
+
>Test cell 7-8</td>
|
|
23441
|
+
|
|
23442
|
+
<th
|
|
23443
|
+
class="pf-m-truncate pf-m-border-left pf-c-table__sticky-cell pf-m-right"
|
|
23444
|
+
role="columnheader"
|
|
23445
|
+
data-label="Example th"
|
|
23446
|
+
scope="col"
|
|
23447
|
+
style="--pf-c-table__sticky-cell--MinWidth: 150px;"
|
|
23448
|
+
>Test cell 7-9</th>
|
|
23449
|
+
</tr>
|
|
23450
|
+
<tr role="row">
|
|
23451
|
+
<td class="pf-m-nowrap" role="cell" data-label="Example td">Fact 8</td>
|
|
23452
|
+
<td class="pf-m-nowrap" role="cell" data-label="Example td">State 8</td>
|
|
23453
|
+
<td
|
|
23454
|
+
class="pf-m-nowrap"
|
|
23455
|
+
role="cell"
|
|
23456
|
+
data-label="Example td"
|
|
23457
|
+
>Test cell 8-3</td>
|
|
23458
|
+
<td
|
|
23459
|
+
class="pf-m-nowrap"
|
|
23460
|
+
role="cell"
|
|
23461
|
+
data-label="Example td"
|
|
23462
|
+
>Test cell 8-4</td>
|
|
23463
|
+
<td
|
|
23464
|
+
class="pf-m-nowrap"
|
|
23465
|
+
role="cell"
|
|
23466
|
+
data-label="Example td"
|
|
23467
|
+
>Test cell 8-5</td>
|
|
23468
|
+
<td
|
|
23469
|
+
class="pf-m-nowrap"
|
|
23470
|
+
role="cell"
|
|
23471
|
+
data-label="Example td"
|
|
23472
|
+
>Test cell 8-6</td>
|
|
23473
|
+
<td
|
|
23474
|
+
class="pf-m-nowrap"
|
|
23475
|
+
role="cell"
|
|
23476
|
+
data-label="Example td"
|
|
23477
|
+
>Test cell 8-7</td>
|
|
23478
|
+
<td
|
|
23479
|
+
class="pf-m-nowrap"
|
|
23480
|
+
role="cell"
|
|
23481
|
+
data-label="Example td"
|
|
23482
|
+
>Test cell 8-8</td>
|
|
23483
|
+
|
|
23484
|
+
<th
|
|
23485
|
+
class="pf-m-truncate pf-m-border-left pf-c-table__sticky-cell pf-m-right"
|
|
23486
|
+
role="columnheader"
|
|
23487
|
+
data-label="Example th"
|
|
23488
|
+
scope="col"
|
|
23489
|
+
style="--pf-c-table__sticky-cell--MinWidth: 150px;"
|
|
23490
|
+
>Test cell 8-9</th>
|
|
23491
|
+
</tr>
|
|
23492
|
+
<tr role="row">
|
|
23493
|
+
<td class="pf-m-nowrap" role="cell" data-label="Example td">Fact 9</td>
|
|
23494
|
+
<td class="pf-m-nowrap" role="cell" data-label="Example td">State 9</td>
|
|
23495
|
+
<td
|
|
23496
|
+
class="pf-m-nowrap"
|
|
23497
|
+
role="cell"
|
|
23498
|
+
data-label="Example td"
|
|
23499
|
+
>Test cell 9-3</td>
|
|
23500
|
+
<td
|
|
23501
|
+
class="pf-m-nowrap"
|
|
23502
|
+
role="cell"
|
|
23503
|
+
data-label="Example td"
|
|
23504
|
+
>Test cell 9-4</td>
|
|
23505
|
+
<td
|
|
23506
|
+
class="pf-m-nowrap"
|
|
23507
|
+
role="cell"
|
|
23508
|
+
data-label="Example td"
|
|
23509
|
+
>Test cell 9-5</td>
|
|
23510
|
+
<td
|
|
23511
|
+
class="pf-m-nowrap"
|
|
23512
|
+
role="cell"
|
|
23513
|
+
data-label="Example td"
|
|
23514
|
+
>Test cell 9-6</td>
|
|
23515
|
+
<td
|
|
23516
|
+
class="pf-m-nowrap"
|
|
23517
|
+
role="cell"
|
|
23518
|
+
data-label="Example td"
|
|
23519
|
+
>Test cell 9-7</td>
|
|
23520
|
+
<td
|
|
23521
|
+
class="pf-m-nowrap"
|
|
23522
|
+
role="cell"
|
|
23523
|
+
data-label="Example td"
|
|
23524
|
+
>Test cell 9-8</td>
|
|
23525
|
+
|
|
23526
|
+
<th
|
|
23527
|
+
class="pf-m-truncate pf-m-border-left pf-c-table__sticky-cell pf-m-right"
|
|
23528
|
+
role="columnheader"
|
|
23529
|
+
data-label="Example th"
|
|
23530
|
+
scope="col"
|
|
23531
|
+
style="--pf-c-table__sticky-cell--MinWidth: 150px;"
|
|
23532
|
+
>Test cell 9-9</th>
|
|
23533
|
+
</tr>
|
|
23534
|
+
</tbody>
|
|
23535
|
+
</table>
|
|
23536
|
+
</div>
|
|
23537
|
+
|
|
23538
|
+
```
|
|
23539
|
+
|
|
23032
23540
|
### Sticky table usage
|
|
23033
23541
|
|
|
23034
23542
|
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`)
|
|
@@ -23038,7 +23546,9 @@ For sticky columns to function correctly, the parent table's width must be contr
|
|
|
23038
23546
|
| `.pf-m-sticky-header` | `.pf-c-table` | Makes the table cells in `<thead>` sticky to the top of the table on scroll. |
|
|
23039
23547
|
| `.pf-c-scroll-outer-wrapper` | `<div>` | Initiates a table container sticky columns outer wrapper. |
|
|
23040
23548
|
| `.pf-c-scroll-inner-wrapper` | `<div>` | Initiates a table container sticky columns inner wrapper. |
|
|
23041
|
-
| `.pf-c-table__sticky-
|
|
23549
|
+
| `.pf-c-table__sticky-cell` | `<th>`, `<td>` | Initiates a sticky table cell. |
|
|
23550
|
+
| `.pf-m-right` | `.pf-c-table__sticky-cell` | Initiates a sticky, right-hand table cell. |
|
|
23551
|
+
| `.pf-m-left` | `.pf-c-table__sticky-cell` | Initiates a sticky, left-hand table cell. |
|
|
23042
23552
|
|
|
23043
23553
|
## Nested column headers
|
|
23044
23554
|
|