@patternfly/patternfly 4.150.0 → 4.151.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/RELEASE-NOTES.md +2 -1
- package/assets/icons/{fa-unicodes.json → iconUnicodes.json} +123 -0
- package/assets/pficon/pficon.woff +0 -0
- package/assets/pficon/pficon.woff2 +0 -0
- package/components/Nav/nav.css +1 -1
- package/components/Nav/nav.scss +1 -1
- package/components/Table/table-scrollable.css +6 -8
- package/components/Table/table-scrollable.scss +7 -8
- package/components/Table/table.css +54 -4
- package/components/Table/table.scss +81 -4
- package/components/TextInputGroup/text-input-group.css +4 -4
- package/components/TextInputGroup/text-input-group.scss +6 -6
- package/components/Toolbar/toolbar.css +5 -5
- package/components/Toolbar/toolbar.scss +5 -5
- package/docs/components/Table/examples/Table.md +625 -14
- package/docs/components/TextInputGroup/examples/TextInputGroup.md +2 -2
- package/docs/components/Toolbar/examples/Toolbar.md +1 -1
- package/package.json +1 -1
- package/patternfly-no-reset.css +70 -22
- package/patternfly.css +70 -22
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -18934,14 +18934,16 @@ By default, truncation and wrapping settings do not affect the grid layout, but
|
|
|
18934
18934
|
|
|
18935
18935
|
### Controlling text modifiers usage
|
|
18936
18936
|
|
|
18937
|
-
| Class
|
|
18938
|
-
|
|
|
18939
|
-
| `.pf-c-table__text`
|
|
18940
|
-
| `.pf-m-truncate`
|
|
18941
|
-
| `.pf-m-nowrap`
|
|
18942
|
-
| `.pf-m-wrap`
|
|
18943
|
-
| `.pf-m-fit-content`
|
|
18944
|
-
| `.pf-m-break-word`
|
|
18937
|
+
| Class | Applied to | Outcome |
|
|
18938
|
+
| -------------------- | ------------------------------------------------------- | --------------------------------------------- |
|
|
18939
|
+
| `.pf-c-table__text` | `th > *`, `td > *` | Initiates a table text element. |
|
|
18940
|
+
| `.pf-m-truncate` | `thead`, `tbody`, `tr`, `th`, `td`, `.pf-c-table__text` | Modifies text to truncate. |
|
|
18941
|
+
| `.pf-m-nowrap` | `thead`, `tbody`, `tr`, `th`, `td`, `.pf-c-table__text` | Modifies text to not wrap. |
|
|
18942
|
+
| `.pf-m-wrap` | `thead`, `tbody`, `tr`, `th`, `td`, `.pf-c-table__text` | Modifies text to wrap. |
|
|
18943
|
+
| `.pf-m-fit-content` | `thead`, `tr`, `th`, `.pf-c-table__text` | Modifies `th` to fit its contents. |
|
|
18944
|
+
| `.pf-m-break-word` | `thead`, `tbody`, `tr`, `th`, `td`, `.pf-c-table__text` | Modifies text strings to break. |
|
|
18945
|
+
| `.pf-m-border-right` | `<th>`, `<td>` | Modifies a table cell to show a right border. |
|
|
18946
|
+
| `.pf-m-border-left` | `<th>`, `<td>` | Modifies a table cell to show a left border. |
|
|
18945
18947
|
|
|
18946
18948
|
## Table header modifiers
|
|
18947
18949
|
|
|
@@ -20451,12 +20453,621 @@ Long strings in table cells will push content. Add a width modifier to `thead th
|
|
|
20451
20453
|
|
|
20452
20454
|
For sticky columns to function correctly, the parent table's width must be controlled with `.pf-c-scroll-inner-wrapper`. For sticky columns and sticky headers to function correctly, the parent table needs an inner and outer wrapper (`.pf-c-scroll-outer-wrapper` and `.pf-c-scroll-inner-wrapper`)
|
|
20453
20455
|
|
|
20454
|
-
| Class | Applied to
|
|
20455
|
-
| ---------------------------- |
|
|
20456
|
-
| `.pf-c-scroll-outer-wrapper` | `<div>`
|
|
20457
|
-
| `.pf-c-scroll-inner-wrapper` | `<div>`
|
|
20458
|
-
| `.pf-c-table__sticky-column` | `<th>`, `<td>`
|
|
20459
|
-
|
|
20456
|
+
| Class | Applied to | Outcome |
|
|
20457
|
+
| ---------------------------- | -------------- | --------------------------------------------------------- |
|
|
20458
|
+
| `.pf-c-scroll-outer-wrapper` | `<div>` | Initiates a table container sticky columns outer wrapper. |
|
|
20459
|
+
| `.pf-c-scroll-inner-wrapper` | `<div>` | Initiates a table container sticky columns inner wrapper. |
|
|
20460
|
+
| `.pf-c-table__sticky-column` | `<th>`, `<td>` | Initiates a sticky table cell. |
|
|
20461
|
+
|
|
20462
|
+
### Nested column headers and expandable rows
|
|
20463
|
+
|
|
20464
|
+
```html
|
|
20465
|
+
<div class="pf-c-scroll-inner-wrapper">
|
|
20466
|
+
<table
|
|
20467
|
+
class="pf-c-table"
|
|
20468
|
+
role="grid"
|
|
20469
|
+
aria-label="This is a nested column header table example"
|
|
20470
|
+
id="nested-columns-expandable-example"
|
|
20471
|
+
>
|
|
20472
|
+
<col />
|
|
20473
|
+
<col />
|
|
20474
|
+
<col />
|
|
20475
|
+
<colgroup span="3"></colgroup>
|
|
20476
|
+
<col />
|
|
20477
|
+
<col />
|
|
20478
|
+
<thead class="pf-m-nested-column-header">
|
|
20479
|
+
<tr role="row">
|
|
20480
|
+
<td rowspan="2"></td>
|
|
20481
|
+
<td class="pf-c-table__check" role="cell" rowspan="2">
|
|
20482
|
+
<input
|
|
20483
|
+
type="checkbox"
|
|
20484
|
+
name="nested-columns-expandable-example-check-all"
|
|
20485
|
+
aria-label="Select all rows"
|
|
20486
|
+
/>
|
|
20487
|
+
</td>
|
|
20488
|
+
<th
|
|
20489
|
+
class="pf-m-border-right pf-c-table__sort"
|
|
20490
|
+
role="columnheader"
|
|
20491
|
+
aria-sort="none"
|
|
20492
|
+
scope="col"
|
|
20493
|
+
rowspan="2"
|
|
20494
|
+
>
|
|
20495
|
+
<button class="pf-c-table__button">
|
|
20496
|
+
<div class="pf-c-table__button-content">
|
|
20497
|
+
<span class="pf-c-table__text">Team</span>
|
|
20498
|
+
<span class="pf-c-table__sort-indicator">
|
|
20499
|
+
<i class="fas fa-arrows-alt-v"></i>
|
|
20500
|
+
</span>
|
|
20501
|
+
</div>
|
|
20502
|
+
</button>
|
|
20503
|
+
</th>
|
|
20504
|
+
<th
|
|
20505
|
+
class="pf-m-border-right"
|
|
20506
|
+
role="columnheader"
|
|
20507
|
+
scope="col"
|
|
20508
|
+
colspan="3"
|
|
20509
|
+
>Members</th>
|
|
20510
|
+
<th role="columnheader" scope="col" rowspan="2">Contact</th>
|
|
20511
|
+
<td rowspan="2"></td>
|
|
20512
|
+
</tr>
|
|
20513
|
+
|
|
20514
|
+
<tr class="pf-m-first-cell-offset-reset" role="row">
|
|
20515
|
+
<th
|
|
20516
|
+
class="pf-c-table__subhead"
|
|
20517
|
+
role="columnheader"
|
|
20518
|
+
scope="col"
|
|
20519
|
+
>Design lead</th>
|
|
20520
|
+
<th
|
|
20521
|
+
class="pf-c-table__subhead"
|
|
20522
|
+
role="columnheader"
|
|
20523
|
+
scope="col"
|
|
20524
|
+
>Interaction design</th>
|
|
20525
|
+
<th
|
|
20526
|
+
class="pf-c-table__subhead pf-m-border-right"
|
|
20527
|
+
role="columnheader"
|
|
20528
|
+
scope="col"
|
|
20529
|
+
>Visual designers</th>
|
|
20530
|
+
</tr>
|
|
20531
|
+
</thead>
|
|
20532
|
+
|
|
20533
|
+
<tbody class="pf-m-expanded" role="rowgroup">
|
|
20534
|
+
<tr role="row">
|
|
20535
|
+
<td class="pf-c-table__toggle" role="cell">
|
|
20536
|
+
<button
|
|
20537
|
+
class="pf-c-button pf-m-plain pf-m-expanded"
|
|
20538
|
+
aria-labelledby="nested-columns-expandable-example-node1 nested-columns-expandable-example-expandable-toggle1"
|
|
20539
|
+
id="nested-columns-expandable-example-expandable-toggle1"
|
|
20540
|
+
aria-label="Details"
|
|
20541
|
+
aria-controls="nested-columns-expandable-example-content1"
|
|
20542
|
+
aria-expanded="true"
|
|
20543
|
+
>
|
|
20544
|
+
<div class="pf-c-table__toggle-icon">
|
|
20545
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
20546
|
+
</div>
|
|
20547
|
+
</button>
|
|
20548
|
+
</td>
|
|
20549
|
+
|
|
20550
|
+
<td class="pf-c-table__check" role="cell">
|
|
20551
|
+
<input
|
|
20552
|
+
type="checkbox"
|
|
20553
|
+
name="nested-columns-expandable-example-checkrow1"
|
|
20554
|
+
aria-labelledby="nested-columns-expandable-example-node1"
|
|
20555
|
+
/>
|
|
20556
|
+
</td>
|
|
20557
|
+
<th
|
|
20558
|
+
class
|
|
20559
|
+
role="columnheader"
|
|
20560
|
+
data-label="Developer program"
|
|
20561
|
+
id="nested-columns-expandable-example-node1"
|
|
20562
|
+
>Developer program</th>
|
|
20563
|
+
<td role="cell" data-label="Branches">Stacey Logan</td>
|
|
20564
|
+
<td role="cell" data-label="Pull requests">Mark Shakshober</td>
|
|
20565
|
+
<td role="cell" data-label="Workspaces">Kaliq Ray</td>
|
|
20566
|
+
<td role="cell" data-label="Last commit">
|
|
20567
|
+
<button
|
|
20568
|
+
class="pf-c-button pf-m-inline pf-m-link"
|
|
20569
|
+
type="button"
|
|
20570
|
+
>Message us!</button>
|
|
20571
|
+
</td>
|
|
20572
|
+
<td class="pf-c-table__action" role="cell">
|
|
20573
|
+
<div class="pf-c-dropdown">
|
|
20574
|
+
<button
|
|
20575
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
20576
|
+
id="nested-columns-expandable-example-dropdown-kebab-1-button"
|
|
20577
|
+
aria-expanded="false"
|
|
20578
|
+
type="button"
|
|
20579
|
+
aria-label="Actions"
|
|
20580
|
+
>
|
|
20581
|
+
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
20582
|
+
</button>
|
|
20583
|
+
<ul
|
|
20584
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
20585
|
+
aria-labelledby="nested-columns-expandable-example-dropdown-kebab-1-button"
|
|
20586
|
+
hidden
|
|
20587
|
+
>
|
|
20588
|
+
<li>
|
|
20589
|
+
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
|
|
20590
|
+
</li>
|
|
20591
|
+
<li>
|
|
20592
|
+
<button class="pf-c-dropdown__menu-item" type="button">Action</button>
|
|
20593
|
+
</li>
|
|
20594
|
+
<li>
|
|
20595
|
+
<a
|
|
20596
|
+
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
20597
|
+
href="#"
|
|
20598
|
+
aria-disabled="true"
|
|
20599
|
+
tabindex="-1"
|
|
20600
|
+
>Disabled link</a>
|
|
20601
|
+
</li>
|
|
20602
|
+
<li>
|
|
20603
|
+
<button
|
|
20604
|
+
class="pf-c-dropdown__menu-item"
|
|
20605
|
+
type="button"
|
|
20606
|
+
disabled
|
|
20607
|
+
>Disabled action</button>
|
|
20608
|
+
</li>
|
|
20609
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
20610
|
+
<li>
|
|
20611
|
+
<a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
|
|
20612
|
+
</li>
|
|
20613
|
+
</ul>
|
|
20614
|
+
</div>
|
|
20615
|
+
</td>
|
|
20616
|
+
</tr>
|
|
20617
|
+
<tr class="pf-c-table__expandable-row pf-m-expanded" role="row">
|
|
20618
|
+
<td></td>
|
|
20619
|
+
<td></td>
|
|
20620
|
+
<td
|
|
20621
|
+
class
|
|
20622
|
+
role="cell"
|
|
20623
|
+
colspan="5"
|
|
20624
|
+
id="nested-columns-expandable-example-content1"
|
|
20625
|
+
>
|
|
20626
|
+
<div
|
|
20627
|
+
class="pf-c-table__expandable-row-content"
|
|
20628
|
+
>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
|
|
20629
|
+
</td>
|
|
20630
|
+
<td></td>
|
|
20631
|
+
</tr>
|
|
20632
|
+
</tbody>
|
|
20633
|
+
|
|
20634
|
+
<tbody role="rowgroup">
|
|
20635
|
+
<tr role="row">
|
|
20636
|
+
<td class="pf-c-table__toggle" role="cell">
|
|
20637
|
+
<button
|
|
20638
|
+
class="pf-c-button pf-m-plain"
|
|
20639
|
+
aria-labelledby="nested-columns-expandable-example-node2 nested-columns-expandable-example-expandable-toggle2"
|
|
20640
|
+
id="nested-columns-expandable-example-expandable-toggle2"
|
|
20641
|
+
aria-label="Details"
|
|
20642
|
+
aria-controls="nested-columns-expandable-example-content2"
|
|
20643
|
+
>
|
|
20644
|
+
<div class="pf-c-table__toggle-icon">
|
|
20645
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
20646
|
+
</div>
|
|
20647
|
+
</button>
|
|
20648
|
+
</td>
|
|
20649
|
+
|
|
20650
|
+
<td class="pf-c-table__check" role="cell">
|
|
20651
|
+
<input
|
|
20652
|
+
type="checkbox"
|
|
20653
|
+
name="nested-columns-expandable-example-checkrow2"
|
|
20654
|
+
aria-labelledby="nested-columns-expandable-example-node2"
|
|
20655
|
+
/>
|
|
20656
|
+
</td>
|
|
20657
|
+
<th
|
|
20658
|
+
class
|
|
20659
|
+
role="columnheader"
|
|
20660
|
+
data-label="Developer program"
|
|
20661
|
+
id="nested-columns-expandable-example-node2"
|
|
20662
|
+
>Developer program</th>
|
|
20663
|
+
<td role="cell" data-label="Branches">Stacey Logan</td>
|
|
20664
|
+
<td role="cell" data-label="Pull requests">Mark Shakshober</td>
|
|
20665
|
+
<td role="cell" data-label="Workspaces">Kaliq Ray</td>
|
|
20666
|
+
<td role="cell" data-label="Last commit">
|
|
20667
|
+
<button
|
|
20668
|
+
class="pf-c-button pf-m-inline pf-m-link"
|
|
20669
|
+
type="button"
|
|
20670
|
+
>Message us!</button>
|
|
20671
|
+
</td>
|
|
20672
|
+
<td class="pf-c-table__action" role="cell">
|
|
20673
|
+
<div class="pf-c-dropdown">
|
|
20674
|
+
<button
|
|
20675
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
20676
|
+
id="nested-columns-expandable-example-dropdown-kebab-2-button"
|
|
20677
|
+
aria-expanded="false"
|
|
20678
|
+
type="button"
|
|
20679
|
+
aria-label="Actions"
|
|
20680
|
+
>
|
|
20681
|
+
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
20682
|
+
</button>
|
|
20683
|
+
<ul
|
|
20684
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
20685
|
+
aria-labelledby="nested-columns-expandable-example-dropdown-kebab-2-button"
|
|
20686
|
+
hidden
|
|
20687
|
+
>
|
|
20688
|
+
<li>
|
|
20689
|
+
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
|
|
20690
|
+
</li>
|
|
20691
|
+
<li>
|
|
20692
|
+
<button class="pf-c-dropdown__menu-item" type="button">Action</button>
|
|
20693
|
+
</li>
|
|
20694
|
+
<li>
|
|
20695
|
+
<a
|
|
20696
|
+
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
20697
|
+
href="#"
|
|
20698
|
+
aria-disabled="true"
|
|
20699
|
+
tabindex="-1"
|
|
20700
|
+
>Disabled link</a>
|
|
20701
|
+
</li>
|
|
20702
|
+
<li>
|
|
20703
|
+
<button
|
|
20704
|
+
class="pf-c-dropdown__menu-item"
|
|
20705
|
+
type="button"
|
|
20706
|
+
disabled
|
|
20707
|
+
>Disabled action</button>
|
|
20708
|
+
</li>
|
|
20709
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
20710
|
+
<li>
|
|
20711
|
+
<a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
|
|
20712
|
+
</li>
|
|
20713
|
+
</ul>
|
|
20714
|
+
</div>
|
|
20715
|
+
</td>
|
|
20716
|
+
</tr>
|
|
20717
|
+
<tr class="pf-c-table__expandable-row" role="row">
|
|
20718
|
+
<td></td>
|
|
20719
|
+
<td></td>
|
|
20720
|
+
<td
|
|
20721
|
+
class
|
|
20722
|
+
role="cell"
|
|
20723
|
+
colspan="5"
|
|
20724
|
+
id="nested-columns-expandable-example-content2"
|
|
20725
|
+
>
|
|
20726
|
+
<div
|
|
20727
|
+
class="pf-c-table__expandable-row-content"
|
|
20728
|
+
>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
|
|
20729
|
+
</td>
|
|
20730
|
+
<td></td>
|
|
20731
|
+
</tr>
|
|
20732
|
+
</tbody>
|
|
20733
|
+
|
|
20734
|
+
<tbody role="rowgroup">
|
|
20735
|
+
<tr role="row">
|
|
20736
|
+
<td class="pf-c-table__toggle" role="cell">
|
|
20737
|
+
<button
|
|
20738
|
+
class="pf-c-button pf-m-plain"
|
|
20739
|
+
aria-labelledby="nested-columns-expandable-example-node3 nested-columns-expandable-example-expandable-toggle3"
|
|
20740
|
+
id="nested-columns-expandable-example-expandable-toggle3"
|
|
20741
|
+
aria-label="Details"
|
|
20742
|
+
aria-controls="nested-columns-expandable-example-content3"
|
|
20743
|
+
>
|
|
20744
|
+
<div class="pf-c-table__toggle-icon">
|
|
20745
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
20746
|
+
</div>
|
|
20747
|
+
</button>
|
|
20748
|
+
</td>
|
|
20749
|
+
|
|
20750
|
+
<td class="pf-c-table__check" role="cell">
|
|
20751
|
+
<input
|
|
20752
|
+
type="checkbox"
|
|
20753
|
+
name="nested-columns-expandable-example-checkrow3"
|
|
20754
|
+
aria-labelledby="nested-columns-expandable-example-node3"
|
|
20755
|
+
/>
|
|
20756
|
+
</td>
|
|
20757
|
+
<th
|
|
20758
|
+
class
|
|
20759
|
+
role="columnheader"
|
|
20760
|
+
data-label="Developer program"
|
|
20761
|
+
id="nested-columns-expandable-example-node3"
|
|
20762
|
+
>Developer program</th>
|
|
20763
|
+
<td role="cell" data-label="Branches">Stacey Logan</td>
|
|
20764
|
+
<td role="cell" data-label="Pull requests">Mark Shakshober</td>
|
|
20765
|
+
<td role="cell" data-label="Workspaces">Kaliq Ray</td>
|
|
20766
|
+
<td role="cell" data-label="Last commit">
|
|
20767
|
+
<button
|
|
20768
|
+
class="pf-c-button pf-m-inline pf-m-link"
|
|
20769
|
+
type="button"
|
|
20770
|
+
>Message us!</button>
|
|
20771
|
+
</td>
|
|
20772
|
+
<td class="pf-c-table__action" role="cell">
|
|
20773
|
+
<div class="pf-c-dropdown">
|
|
20774
|
+
<button
|
|
20775
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
20776
|
+
id="nested-columns-expandable-example-dropdown-kebab-3-button"
|
|
20777
|
+
aria-expanded="false"
|
|
20778
|
+
type="button"
|
|
20779
|
+
aria-label="Actions"
|
|
20780
|
+
>
|
|
20781
|
+
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
20782
|
+
</button>
|
|
20783
|
+
<ul
|
|
20784
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
20785
|
+
aria-labelledby="nested-columns-expandable-example-dropdown-kebab-3-button"
|
|
20786
|
+
hidden
|
|
20787
|
+
>
|
|
20788
|
+
<li>
|
|
20789
|
+
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
|
|
20790
|
+
</li>
|
|
20791
|
+
<li>
|
|
20792
|
+
<button class="pf-c-dropdown__menu-item" type="button">Action</button>
|
|
20793
|
+
</li>
|
|
20794
|
+
<li>
|
|
20795
|
+
<a
|
|
20796
|
+
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
20797
|
+
href="#"
|
|
20798
|
+
aria-disabled="true"
|
|
20799
|
+
tabindex="-1"
|
|
20800
|
+
>Disabled link</a>
|
|
20801
|
+
</li>
|
|
20802
|
+
<li>
|
|
20803
|
+
<button
|
|
20804
|
+
class="pf-c-dropdown__menu-item"
|
|
20805
|
+
type="button"
|
|
20806
|
+
disabled
|
|
20807
|
+
>Disabled action</button>
|
|
20808
|
+
</li>
|
|
20809
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
20810
|
+
<li>
|
|
20811
|
+
<a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
|
|
20812
|
+
</li>
|
|
20813
|
+
</ul>
|
|
20814
|
+
</div>
|
|
20815
|
+
</td>
|
|
20816
|
+
</tr>
|
|
20817
|
+
<tr class="pf-c-table__expandable-row" role="row">
|
|
20818
|
+
<td></td>
|
|
20819
|
+
<td></td>
|
|
20820
|
+
<td
|
|
20821
|
+
class
|
|
20822
|
+
role="cell"
|
|
20823
|
+
colspan="5"
|
|
20824
|
+
id="nested-columns-expandable-example-content3"
|
|
20825
|
+
>
|
|
20826
|
+
<div
|
|
20827
|
+
class="pf-c-table__expandable-row-content"
|
|
20828
|
+
>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
|
|
20829
|
+
</td>
|
|
20830
|
+
<td></td>
|
|
20831
|
+
</tr>
|
|
20832
|
+
</tbody>
|
|
20833
|
+
</table>
|
|
20834
|
+
</div>
|
|
20835
|
+
|
|
20836
|
+
```
|
|
20837
|
+
|
|
20838
|
+
### Nested column headers
|
|
20839
|
+
|
|
20840
|
+
```html
|
|
20841
|
+
<div class="pf-c-scroll-inner-wrapper">
|
|
20842
|
+
<table
|
|
20843
|
+
class="pf-c-table"
|
|
20844
|
+
role="grid"
|
|
20845
|
+
aria-label="This is a nested column header table example"
|
|
20846
|
+
id="table-nested-column-headers-example"
|
|
20847
|
+
>
|
|
20848
|
+
<colgroup span="3"></colgroup>
|
|
20849
|
+
<colgroup span="2"></colgroup>
|
|
20850
|
+
<col />
|
|
20851
|
+
<col />
|
|
20852
|
+
<col />
|
|
20853
|
+
<col />
|
|
20854
|
+
<thead class="pf-m-nested-column-header">
|
|
20855
|
+
<tr role="row">
|
|
20856
|
+
<th
|
|
20857
|
+
class="pf-m-border-right"
|
|
20858
|
+
role="columnheader"
|
|
20859
|
+
scope="col"
|
|
20860
|
+
colspan="3"
|
|
20861
|
+
>Pods</th>
|
|
20862
|
+
<th
|
|
20863
|
+
class="pf-m-border-right"
|
|
20864
|
+
role="columnheader"
|
|
20865
|
+
scope="col"
|
|
20866
|
+
colspan="2"
|
|
20867
|
+
>Ports</th>
|
|
20868
|
+
<th
|
|
20869
|
+
class="pf-m-border-right pf-m-fit-content pf-c-table__sort"
|
|
20870
|
+
role="columnheader"
|
|
20871
|
+
aria-sort="none"
|
|
20872
|
+
scope="col"
|
|
20873
|
+
rowspan="2"
|
|
20874
|
+
>
|
|
20875
|
+
<button class="pf-c-table__button">
|
|
20876
|
+
<div class="pf-c-table__button-content">
|
|
20877
|
+
<span class="pf-c-table__text">Protocol</span>
|
|
20878
|
+
<span class="pf-c-table__sort-indicator">
|
|
20879
|
+
<i class="fas fa-arrows-alt-v"></i>
|
|
20880
|
+
</span>
|
|
20881
|
+
</div>
|
|
20882
|
+
</button>
|
|
20883
|
+
</th>
|
|
20884
|
+
<th
|
|
20885
|
+
class="pf-m-border-right pf-m-fit-content pf-c-table__sort"
|
|
20886
|
+
role="columnheader"
|
|
20887
|
+
aria-sort="none"
|
|
20888
|
+
scope="col"
|
|
20889
|
+
rowspan="2"
|
|
20890
|
+
>
|
|
20891
|
+
<button class="pf-c-table__button">
|
|
20892
|
+
<div class="pf-c-table__button-content">
|
|
20893
|
+
<span class="pf-c-table__text">Flow rate</span>
|
|
20894
|
+
<span class="pf-c-table__sort-indicator">
|
|
20895
|
+
<i class="fas fa-arrows-alt-v"></i>
|
|
20896
|
+
</span>
|
|
20897
|
+
</div>
|
|
20898
|
+
</button>
|
|
20899
|
+
</th>
|
|
20900
|
+
<th
|
|
20901
|
+
class="pf-m-border-right pf-m-fit-content pf-c-table__sort"
|
|
20902
|
+
role="columnheader"
|
|
20903
|
+
aria-sort="none"
|
|
20904
|
+
scope="col"
|
|
20905
|
+
rowspan="2"
|
|
20906
|
+
>
|
|
20907
|
+
<button class="pf-c-table__button">
|
|
20908
|
+
<div class="pf-c-table__button-content">
|
|
20909
|
+
<span class="pf-c-table__text">Traffic</span>
|
|
20910
|
+
<span class="pf-c-table__sort-indicator">
|
|
20911
|
+
<i class="fas fa-arrows-alt-v"></i>
|
|
20912
|
+
</span>
|
|
20913
|
+
</div>
|
|
20914
|
+
</button>
|
|
20915
|
+
</th>
|
|
20916
|
+
<th
|
|
20917
|
+
class="pf-m-fit-content pf-c-table__sort"
|
|
20918
|
+
role="columnheader"
|
|
20919
|
+
aria-sort="none"
|
|
20920
|
+
scope="col"
|
|
20921
|
+
rowspan="2"
|
|
20922
|
+
>
|
|
20923
|
+
<button class="pf-c-table__button">
|
|
20924
|
+
<div class="pf-c-table__button-content">
|
|
20925
|
+
<span class="pf-c-table__text">Packets</span>
|
|
20926
|
+
<span class="pf-c-table__sort-indicator">
|
|
20927
|
+
<i class="fas fa-arrows-alt-v"></i>
|
|
20928
|
+
</span>
|
|
20929
|
+
</div>
|
|
20930
|
+
</button>
|
|
20931
|
+
</th>
|
|
20932
|
+
</tr>
|
|
20933
|
+
|
|
20934
|
+
<tr role="row">
|
|
20935
|
+
<th
|
|
20936
|
+
class="pf-c-table__subhead pf-c-table__sort"
|
|
20937
|
+
role="columnheader"
|
|
20938
|
+
aria-sort="none"
|
|
20939
|
+
scope="col"
|
|
20940
|
+
>
|
|
20941
|
+
<button class="pf-c-table__button">
|
|
20942
|
+
<div class="pf-c-table__button-content">
|
|
20943
|
+
<span class="pf-c-table__text">Source</span>
|
|
20944
|
+
<span class="pf-c-table__sort-indicator">
|
|
20945
|
+
<i class="fas fa-arrows-alt-v"></i>
|
|
20946
|
+
</span>
|
|
20947
|
+
</div>
|
|
20948
|
+
</button>
|
|
20949
|
+
</th>
|
|
20950
|
+
<th
|
|
20951
|
+
class="pf-c-table__subhead pf-c-table__sort"
|
|
20952
|
+
role="columnheader"
|
|
20953
|
+
aria-sort="none"
|
|
20954
|
+
scope="col"
|
|
20955
|
+
>
|
|
20956
|
+
<button class="pf-c-table__button">
|
|
20957
|
+
<div class="pf-c-table__button-content">
|
|
20958
|
+
<span class="pf-c-table__text">Destination</span>
|
|
20959
|
+
<span class="pf-c-table__sort-indicator">
|
|
20960
|
+
<i class="fas fa-arrows-alt-v"></i>
|
|
20961
|
+
</span>
|
|
20962
|
+
</div>
|
|
20963
|
+
</button>
|
|
20964
|
+
</th>
|
|
20965
|
+
<th
|
|
20966
|
+
class="pf-c-table__subhead pf-m-fit-content pf-m-border-right pf-c-table__sort"
|
|
20967
|
+
role="columnheader"
|
|
20968
|
+
aria-sort="none"
|
|
20969
|
+
scope="col"
|
|
20970
|
+
>
|
|
20971
|
+
<button class="pf-c-table__button">
|
|
20972
|
+
<div class="pf-c-table__button-content">
|
|
20973
|
+
<span class="pf-c-table__text">Date & Time</span>
|
|
20974
|
+
<span class="pf-c-table__sort-indicator">
|
|
20975
|
+
<i class="fas fa-arrows-alt-v"></i>
|
|
20976
|
+
</span>
|
|
20977
|
+
</div>
|
|
20978
|
+
</button>
|
|
20979
|
+
</th>
|
|
20980
|
+
<th
|
|
20981
|
+
class="pf-c-table__subhead pf-m-fit-content pf-c-table__sort"
|
|
20982
|
+
role="columnheader"
|
|
20983
|
+
aria-sort="none"
|
|
20984
|
+
scope="col"
|
|
20985
|
+
>
|
|
20986
|
+
<button class="pf-c-table__button">
|
|
20987
|
+
<div class="pf-c-table__button-content">
|
|
20988
|
+
<span class="pf-c-table__text">Source</span>
|
|
20989
|
+
<span class="pf-c-table__sort-indicator">
|
|
20990
|
+
<i class="fas fa-arrows-alt-v"></i>
|
|
20991
|
+
</span>
|
|
20992
|
+
</div>
|
|
20993
|
+
</button>
|
|
20994
|
+
</th>
|
|
20995
|
+
<th
|
|
20996
|
+
class="pf-c-table__subhead pf-m-fit-content pf-m-border-right pf-c-table__sort"
|
|
20997
|
+
role="columnheader"
|
|
20998
|
+
aria-sort="none"
|
|
20999
|
+
scope="col"
|
|
21000
|
+
>
|
|
21001
|
+
<button class="pf-c-table__button">
|
|
21002
|
+
<div class="pf-c-table__button-content">
|
|
21003
|
+
<span class="pf-c-table__text">Destination</span>
|
|
21004
|
+
<span class="pf-c-table__sort-indicator">
|
|
21005
|
+
<i class="fas fa-arrows-alt-v"></i>
|
|
21006
|
+
</span>
|
|
21007
|
+
</div>
|
|
21008
|
+
</button>
|
|
21009
|
+
</th>
|
|
21010
|
+
</tr>
|
|
21011
|
+
</thead>
|
|
21012
|
+
|
|
21013
|
+
<tbody role="rowgroup">
|
|
21014
|
+
<tr role="row">
|
|
21015
|
+
<td role="cell" data-label="Source">
|
|
21016
|
+
<div class="pf-l-flex pf-m-nowrap">
|
|
21017
|
+
<div class="pf-l-flex__item">
|
|
21018
|
+
<span class="pf-c-label pf-m-cyan">
|
|
21019
|
+
<span class="pf-c-label__content">P</span>
|
|
21020
|
+
</span>
|
|
21021
|
+
</div>
|
|
21022
|
+
<div class="pf-l-flex__item pf-m-flex-1">
|
|
21023
|
+
<span class="pf-c-table__text pf-m-truncate">
|
|
21024
|
+
<a href="#">api-pod-source-name</a>
|
|
21025
|
+
</span>
|
|
21026
|
+
</div>
|
|
21027
|
+
</div>
|
|
21028
|
+
</td>
|
|
21029
|
+
<td role="cell" data-label="Destination">
|
|
21030
|
+
<div class="pf-l-flex pf-m-nowrap">
|
|
21031
|
+
<div class="pf-l-flex__item">
|
|
21032
|
+
<span class="pf-c-label pf-m-cyan">
|
|
21033
|
+
<span class="pf-c-label__content">P</span>
|
|
21034
|
+
</span>
|
|
21035
|
+
</div>
|
|
21036
|
+
<div class="pf-l-flex__item pf-m-flex-1">
|
|
21037
|
+
<span class="pf-c-table__text pf-m-truncate">
|
|
21038
|
+
<a href="#">api-pod-destination-name</a>
|
|
21039
|
+
</span>
|
|
21040
|
+
</div>
|
|
21041
|
+
</div>
|
|
21042
|
+
</td>
|
|
21043
|
+
<td role="cell" data-label="Date & time">
|
|
21044
|
+
<div class="pf-l-stack">
|
|
21045
|
+
<span>June 22, 2021</span>
|
|
21046
|
+
<span class="pf-u-color-200">3:58:24 PM</span>
|
|
21047
|
+
</div>
|
|
21048
|
+
</td>
|
|
21049
|
+
<td role="cell" data-label="Source">
|
|
21050
|
+
<div class="pf-l-stack">
|
|
21051
|
+
<span>443</span>
|
|
21052
|
+
<span class="pf-u-color-200">(HTTPS)</span>
|
|
21053
|
+
</div>
|
|
21054
|
+
</td>
|
|
21055
|
+
<td role="cell" data-label="Destination">
|
|
21056
|
+
<div class="pf-l-stack">
|
|
21057
|
+
<span>24</span>
|
|
21058
|
+
<span class="pf-u-color-200">(smtp)</span>
|
|
21059
|
+
</div>
|
|
21060
|
+
</td>
|
|
21061
|
+
<td role="cell" data-label="Protocol">TCP</td>
|
|
21062
|
+
<td role="cell" data-label="Flow rate">1.9 Kbps</td>
|
|
21063
|
+
<td role="cell" data-label="Traffic">2.1 KB</td>
|
|
21064
|
+
<td role="cell" data-label="Packets">3</td>
|
|
21065
|
+
</tr>
|
|
21066
|
+
</tbody>
|
|
21067
|
+
</table>
|
|
21068
|
+
</div>
|
|
21069
|
+
|
|
21070
|
+
```
|
|
20460
21071
|
|
|
20461
21072
|
## Favorites
|
|
20462
21073
|
|
|
@@ -26,8 +26,8 @@ cssPrefix: pf-c-text-input-group
|
|
|
26
26
|
### Utilities and icon
|
|
27
27
|
|
|
28
28
|
```html
|
|
29
|
-
<div class="pf-c-text-input-group
|
|
30
|
-
<div class="pf-c-text-input-group__main">
|
|
29
|
+
<div class="pf-c-text-input-group">
|
|
30
|
+
<div class="pf-c-text-input-group__main pf-m-icon">
|
|
31
31
|
<span class="pf-c-text-input-group__text">
|
|
32
32
|
<span class="pf-c-text-input-group__icon">
|
|
33
33
|
<i class="fas fa-fw fa-search"></i>
|