npm - @patternfly/patternfly - Versions diffs - 4.197.1 → 4.198.2 - Mend

@patternfly/patternfly 4.197.1 → 4.198.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 (14) hide show

package/components/Card/card.css +12 -0
package/components/Card/card.scss +14 -0
package/components/ProgressStepper/progress-stepper.css +1 -0
package/components/ProgressStepper/progress-stepper.scss +1 -0
package/components/Table/table.css +25 -9
package/components/Table/table.scss +46 -11
package/docs/components/Card/examples/Card.md +22 -0
package/docs/components/ProgressStepper/examples/ProgressStepper.md +7 -13
package/docs/components/Table/examples/Table.md +1176 -5
package/package.json +1 -1
package/patternfly-no-reset.css +38 -9
package/patternfly.css +38 -9
package/patternfly.min.css +1 -1
package/patternfly.min.css.map +1 -1

package/docs/components/Table/examples/Table.md CHANGED Viewed

@@ -22288,6 +22288,9 @@ For sticky columns to function correctly, the parent table's width must be contr
           scope="col"
         >Visual designers</th>
       </tr>
+      <tr class="pf-m-border-row">
+        <td colspan="9" aria-hidden="true" tabindex="-1"></td>
+      </tr>
     </thead>
     <tbody class="pf-m-expanded" role="rowgroup">
@@ -22823,6 +22826,1173 @@ For sticky columns to function correctly, the parent table's width must be contr
         <td role="cell" data-label="Traffic">2.1 KB</td>
         <td role="cell" data-label="Packets">3</td>
       </tr>
+      <tr role="row">
+        <td role="cell" data-label="Source">
+          <div class="pf-l-flex pf-m-nowrap">
+            <div class="pf-l-flex__item">
+              <span class="pf-c-label pf-m-cyan">
+                <span class="pf-c-label__content">P</span>
+              </span>
+            </div>
+            <div class="pf-l-flex__item pf-m-flex-1">
+              <span class="pf-c-table__text pf-m-truncate">
+                <a href="#">api-pod-source-name</a>
+              </span>
+            </div>
+          </div>
+        </td>
+        <td role="cell" data-label="Destination">
+          <div class="pf-l-flex pf-m-nowrap">
+            <div class="pf-l-flex__item">
+              <span class="pf-c-label pf-m-cyan">
+                <span class="pf-c-label__content">P</span>
+              </span>
+            </div>
+            <div class="pf-l-flex__item pf-m-flex-1">
+              <span class="pf-c-table__text pf-m-truncate">
+                <a href="#">api-pod-destination-name</a>
+              </span>
+            </div>
+          </div>
+        </td>
+        <td role="cell" data-label="Date &amp; time">
+          <div class="pf-l-stack">
+            <span>June 22, 2021</span>
+            <span class="pf-u-color-200">3:58:24 PM</span>
+          </div>
+        </td>
+        <td role="cell" data-label="Source">
+          <div class="pf-l-stack">
+            <span>443</span>
+            <span class="pf-u-color-200">(HTTPS)</span>
+          </div>
+        </td>
+        <td role="cell" data-label="Destination">
+          <div class="pf-l-stack">
+            <span>24</span>
+            <span class="pf-u-color-200">(smtp)</span>
+          </div>
+        </td>
+        <td role="cell" data-label="Protocol">TCP</td>
+        <td role="cell" data-label="Flow rate">1.9 Kbps</td>
+        <td role="cell" data-label="Traffic">2.1 KB</td>
+        <td role="cell" data-label="Packets">3</td>
+      </tr>
+      <tr role="row">
+        <td role="cell" data-label="Source">
+          <div class="pf-l-flex pf-m-nowrap">
+            <div class="pf-l-flex__item">
+              <span class="pf-c-label pf-m-cyan">
+                <span class="pf-c-label__content">P</span>
+              </span>
+            </div>
+            <div class="pf-l-flex__item pf-m-flex-1">
+              <span class="pf-c-table__text pf-m-truncate">
+                <a href="#">api-pod-source-name</a>
+              </span>
+            </div>
+          </div>
+        </td>
+        <td role="cell" data-label="Destination">
+          <div class="pf-l-flex pf-m-nowrap">
+            <div class="pf-l-flex__item">
+              <span class="pf-c-label pf-m-cyan">
+                <span class="pf-c-label__content">P</span>
+              </span>
+            </div>
+            <div class="pf-l-flex__item pf-m-flex-1">
+              <span class="pf-c-table__text pf-m-truncate">
+                <a href="#">api-pod-destination-name</a>
+              </span>
+            </div>
+          </div>
+        </td>
+        <td role="cell" data-label="Date &amp; time">
+          <div class="pf-l-stack">
+            <span>June 22, 2021</span>
+            <span class="pf-u-color-200">3:58:24 PM</span>
+          </div>
+        </td>
+        <td role="cell" data-label="Source">
+          <div class="pf-l-stack">
+            <span>443</span>
+            <span class="pf-u-color-200">(HTTPS)</span>
+          </div>
+        </td>
+        <td role="cell" data-label="Destination">
+          <div class="pf-l-stack">
+            <span>24</span>
+            <span class="pf-u-color-200">(smtp)</span>
+          </div>
+        </td>
+        <td role="cell" data-label="Protocol">TCP</td>
+        <td role="cell" data-label="Flow rate">1.9 Kbps</td>
+        <td role="cell" data-label="Traffic">2.1 KB</td>
+        <td role="cell" data-label="Packets">3</td>
+      </tr>
+      <tr role="row">
+        <td role="cell" data-label="Source">
+          <div class="pf-l-flex pf-m-nowrap">
+            <div class="pf-l-flex__item">
+              <span class="pf-c-label pf-m-cyan">
+                <span class="pf-c-label__content">P</span>
+              </span>
+            </div>
+            <div class="pf-l-flex__item pf-m-flex-1">
+              <span class="pf-c-table__text pf-m-truncate">
+                <a href="#">api-pod-source-name</a>
+              </span>
+            </div>
+          </div>
+        </td>
+        <td role="cell" data-label="Destination">
+          <div class="pf-l-flex pf-m-nowrap">
+            <div class="pf-l-flex__item">
+              <span class="pf-c-label pf-m-cyan">
+                <span class="pf-c-label__content">P</span>
+              </span>
+            </div>
+            <div class="pf-l-flex__item pf-m-flex-1">
+              <span class="pf-c-table__text pf-m-truncate">
+                <a href="#">api-pod-destination-name</a>
+              </span>
+            </div>
+          </div>
+        </td>
+        <td role="cell" data-label="Date &amp; time">
+          <div class="pf-l-stack">
+            <span>June 22, 2021</span>
+            <span class="pf-u-color-200">3:58:24 PM</span>
+          </div>
+        </td>
+        <td role="cell" data-label="Source">
+          <div class="pf-l-stack">
+            <span>443</span>
+            <span class="pf-u-color-200">(HTTPS)</span>
+          </div>
+        </td>
+        <td role="cell" data-label="Destination">
+          <div class="pf-l-stack">
+            <span>24</span>
+            <span class="pf-u-color-200">(smtp)</span>
+          </div>
+        </td>
+        <td role="cell" data-label="Protocol">TCP</td>
+        <td role="cell" data-label="Flow rate">1.9 Kbps</td>
+        <td role="cell" data-label="Traffic">2.1 KB</td>
+        <td role="cell" data-label="Packets">3</td>
+      </tr>
+      <tr role="row">
+        <td role="cell" data-label="Source">
+          <div class="pf-l-flex pf-m-nowrap">
+            <div class="pf-l-flex__item">
+              <span class="pf-c-label pf-m-cyan">
+                <span class="pf-c-label__content">P</span>
+              </span>
+            </div>
+            <div class="pf-l-flex__item pf-m-flex-1">
+              <span class="pf-c-table__text pf-m-truncate">
+                <a href="#">api-pod-source-name</a>
+              </span>
+            </div>
+          </div>
+        </td>
+        <td role="cell" data-label="Destination">
+          <div class="pf-l-flex pf-m-nowrap">
+            <div class="pf-l-flex__item">
+              <span class="pf-c-label pf-m-cyan">
+                <span class="pf-c-label__content">P</span>
+              </span>
+            </div>
+            <div class="pf-l-flex__item pf-m-flex-1">
+              <span class="pf-c-table__text pf-m-truncate">
+                <a href="#">api-pod-destination-name</a>
+              </span>
+            </div>
+          </div>
+        </td>
+        <td role="cell" data-label="Date &amp; time">
+          <div class="pf-l-stack">
+            <span>June 22, 2021</span>
+            <span class="pf-u-color-200">3:58:24 PM</span>
+          </div>
+        </td>
+        <td role="cell" data-label="Source">
+          <div class="pf-l-stack">
+            <span>443</span>
+            <span class="pf-u-color-200">(HTTPS)</span>
+          </div>
+        </td>
+        <td role="cell" data-label="Destination">
+          <div class="pf-l-stack">
+            <span>24</span>
+            <span class="pf-u-color-200">(smtp)</span>
+          </div>
+        </td>
+        <td role="cell" data-label="Protocol">TCP</td>
+        <td role="cell" data-label="Flow rate">1.9 Kbps</td>
+        <td role="cell" data-label="Traffic">2.1 KB</td>
+        <td role="cell" data-label="Packets">3</td>
+      </tr>
+      <tr role="row">
+        <td role="cell" data-label="Source">
+          <div class="pf-l-flex pf-m-nowrap">
+            <div class="pf-l-flex__item">
+              <span class="pf-c-label pf-m-cyan">
+                <span class="pf-c-label__content">P</span>
+              </span>
+            </div>
+            <div class="pf-l-flex__item pf-m-flex-1">
+              <span class="pf-c-table__text pf-m-truncate">
+                <a href="#">api-pod-source-name</a>
+              </span>
+            </div>
+          </div>
+        </td>
+        <td role="cell" data-label="Destination">
+          <div class="pf-l-flex pf-m-nowrap">
+            <div class="pf-l-flex__item">
+              <span class="pf-c-label pf-m-cyan">
+                <span class="pf-c-label__content">P</span>
+              </span>
+            </div>
+            <div class="pf-l-flex__item pf-m-flex-1">
+              <span class="pf-c-table__text pf-m-truncate">
+                <a href="#">api-pod-destination-name</a>
+              </span>
+            </div>
+          </div>
+        </td>
+        <td role="cell" data-label="Date &amp; time">
+          <div class="pf-l-stack">
+            <span>June 22, 2021</span>
+            <span class="pf-u-color-200">3:58:24 PM</span>
+          </div>
+        </td>
+        <td role="cell" data-label="Source">
+          <div class="pf-l-stack">
+            <span>443</span>
+            <span class="pf-u-color-200">(HTTPS)</span>
+          </div>
+        </td>
+        <td role="cell" data-label="Destination">
+          <div class="pf-l-stack">
+            <span>24</span>
+            <span class="pf-u-color-200">(smtp)</span>
+          </div>
+        </td>
+        <td role="cell" data-label="Protocol">TCP</td>
+        <td role="cell" data-label="Flow rate">1.9 Kbps</td>
+        <td role="cell" data-label="Traffic">2.1 KB</td>
+        <td role="cell" data-label="Packets">3</td>
+      </tr>
+      <tr role="row">
+        <td role="cell" data-label="Source">
+          <div class="pf-l-flex pf-m-nowrap">
+            <div class="pf-l-flex__item">
+              <span class="pf-c-label pf-m-cyan">
+                <span class="pf-c-label__content">P</span>
+              </span>
+            </div>
+            <div class="pf-l-flex__item pf-m-flex-1">
+              <span class="pf-c-table__text pf-m-truncate">
+                <a href="#">api-pod-source-name</a>
+              </span>
+            </div>
+          </div>
+        </td>
+        <td role="cell" data-label="Destination">
+          <div class="pf-l-flex pf-m-nowrap">
+            <div class="pf-l-flex__item">
+              <span class="pf-c-label pf-m-cyan">
+                <span class="pf-c-label__content">P</span>
+              </span>
+            </div>
+            <div class="pf-l-flex__item pf-m-flex-1">
+              <span class="pf-c-table__text pf-m-truncate">
+                <a href="#">api-pod-destination-name</a>
+              </span>
+            </div>
+          </div>
+        </td>
+        <td role="cell" data-label="Date &amp; time">
+          <div class="pf-l-stack">
+            <span>June 22, 2021</span>
+            <span class="pf-u-color-200">3:58:24 PM</span>
+          </div>
+        </td>
+        <td role="cell" data-label="Source">
+          <div class="pf-l-stack">
+            <span>443</span>
+            <span class="pf-u-color-200">(HTTPS)</span>
+          </div>
+        </td>
+        <td role="cell" data-label="Destination">
+          <div class="pf-l-stack">
+            <span>24</span>
+            <span class="pf-u-color-200">(smtp)</span>
+          </div>
+        </td>
+        <td role="cell" data-label="Protocol">TCP</td>
+        <td role="cell" data-label="Flow rate">1.9 Kbps</td>
+        <td role="cell" data-label="Traffic">2.1 KB</td>
+        <td role="cell" data-label="Packets">3</td>
+      </tr>
+      <tr role="row">
+        <td role="cell" data-label="Source">
+          <div class="pf-l-flex pf-m-nowrap">
+            <div class="pf-l-flex__item">
+              <span class="pf-c-label pf-m-cyan">
+                <span class="pf-c-label__content">P</span>
+              </span>
+            </div>
+            <div class="pf-l-flex__item pf-m-flex-1">
+              <span class="pf-c-table__text pf-m-truncate">
+                <a href="#">api-pod-source-name</a>
+              </span>
+            </div>
+          </div>
+        </td>
+        <td role="cell" data-label="Destination">
+          <div class="pf-l-flex pf-m-nowrap">
+            <div class="pf-l-flex__item">
+              <span class="pf-c-label pf-m-cyan">
+                <span class="pf-c-label__content">P</span>
+              </span>
+            </div>
+            <div class="pf-l-flex__item pf-m-flex-1">
+              <span class="pf-c-table__text pf-m-truncate">
+                <a href="#">api-pod-destination-name</a>
+              </span>
+            </div>
+          </div>
+        </td>
+        <td role="cell" data-label="Date &amp; time">
+          <div class="pf-l-stack">
+            <span>June 22, 2021</span>
+            <span class="pf-u-color-200">3:58:24 PM</span>
+          </div>
+        </td>
+        <td role="cell" data-label="Source">
+          <div class="pf-l-stack">
+            <span>443</span>
+            <span class="pf-u-color-200">(HTTPS)</span>
+          </div>
+        </td>
+        <td role="cell" data-label="Destination">
+          <div class="pf-l-stack">
+            <span>24</span>
+            <span class="pf-u-color-200">(smtp)</span>
+          </div>
+        </td>
+        <td role="cell" data-label="Protocol">TCP</td>
+        <td role="cell" data-label="Flow rate">1.9 Kbps</td>
+        <td role="cell" data-label="Traffic">2.1 KB</td>
+        <td role="cell" data-label="Packets">3</td>
+      </tr>
+      <tr role="row">
+        <td role="cell" data-label="Source">
+          <div class="pf-l-flex pf-m-nowrap">
+            <div class="pf-l-flex__item">
+              <span class="pf-c-label pf-m-cyan">
+                <span class="pf-c-label__content">P</span>
+              </span>
+            </div>
+            <div class="pf-l-flex__item pf-m-flex-1">
+              <span class="pf-c-table__text pf-m-truncate">
+                <a href="#">api-pod-source-name</a>
+              </span>
+            </div>
+          </div>
+        </td>
+        <td role="cell" data-label="Destination">
+          <div class="pf-l-flex pf-m-nowrap">
+            <div class="pf-l-flex__item">
+              <span class="pf-c-label pf-m-cyan">
+                <span class="pf-c-label__content">P</span>
+              </span>
+            </div>
+            <div class="pf-l-flex__item pf-m-flex-1">
+              <span class="pf-c-table__text pf-m-truncate">
+                <a href="#">api-pod-destination-name</a>
+              </span>
+            </div>
+          </div>
+        </td>
+        <td role="cell" data-label="Date &amp; time">
+          <div class="pf-l-stack">
+            <span>June 22, 2021</span>
+            <span class="pf-u-color-200">3:58:24 PM</span>
+          </div>
+        </td>
+        <td role="cell" data-label="Source">
+          <div class="pf-l-stack">
+            <span>443</span>
+            <span class="pf-u-color-200">(HTTPS)</span>
+          </div>
+        </td>
+        <td role="cell" data-label="Destination">
+          <div class="pf-l-stack">
+            <span>24</span>
+            <span class="pf-u-color-200">(smtp)</span>
+          </div>
+        </td>
+        <td role="cell" data-label="Protocol">TCP</td>
+        <td role="cell" data-label="Flow rate">1.9 Kbps</td>
+        <td role="cell" data-label="Traffic">2.1 KB</td>
+        <td role="cell" data-label="Packets">3</td>
+      </tr>
+      <tr role="row">
+        <td role="cell" data-label="Source">
+          <div class="pf-l-flex pf-m-nowrap">
+            <div class="pf-l-flex__item">
+              <span class="pf-c-label pf-m-cyan">
+                <span class="pf-c-label__content">P</span>
+              </span>
+            </div>
+            <div class="pf-l-flex__item pf-m-flex-1">
+              <span class="pf-c-table__text pf-m-truncate">
+                <a href="#">api-pod-source-name</a>
+              </span>
+            </div>
+          </div>
+        </td>
+        <td role="cell" data-label="Destination">
+          <div class="pf-l-flex pf-m-nowrap">
+            <div class="pf-l-flex__item">
+              <span class="pf-c-label pf-m-cyan">
+                <span class="pf-c-label__content">P</span>
+              </span>
+            </div>
+            <div class="pf-l-flex__item pf-m-flex-1">
+              <span class="pf-c-table__text pf-m-truncate">
+                <a href="#">api-pod-destination-name</a>
+              </span>
+            </div>
+          </div>
+        </td>
+        <td role="cell" data-label="Date &amp; time">
+          <div class="pf-l-stack">
+            <span>June 22, 2021</span>
+            <span class="pf-u-color-200">3:58:24 PM</span>
+          </div>
+        </td>
+        <td role="cell" data-label="Source">
+          <div class="pf-l-stack">
+            <span>443</span>
+            <span class="pf-u-color-200">(HTTPS)</span>
+          </div>
+        </td>
+        <td role="cell" data-label="Destination">
+          <div class="pf-l-stack">
+            <span>24</span>
+            <span class="pf-u-color-200">(smtp)</span>
+          </div>
+        </td>
+        <td role="cell" data-label="Protocol">TCP</td>
+        <td role="cell" data-label="Flow rate">1.9 Kbps</td>
+        <td role="cell" data-label="Traffic">2.1 KB</td>
+        <td role="cell" data-label="Packets">3</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+```
+### Nested column headers, sticky header
+```html
+<div class="pf-c-scroll-inner-wrapper">
+  <table
+    class="pf-c-table pf-m-grid-md pf-m-sticky-header"
+    role="grid"
+    aria-label="This is a sticky nested column header table example"
+    id="table-nested-column-headers-sticky-header-example"
+  >
+    <thead class="pf-m-nested-column-header">
+      <tr role="row">
+        <th
+          class="pf-m-border-right"
+          role="columnheader"
+          scope="col"
+          colspan="3"
+        >Pods</th>
+        <th
+          class="pf-m-border-right"
+          role="columnheader"
+          scope="col"
+          colspan="2"
+        >Ports</th>
+        <th
+          class="pf-m-border-right pf-m-fit-content pf-c-table__sort"
+          role="columnheader"
+          aria-sort="none"
+          scope="col"
+          rowspan="2"
+        >
+          <button class="pf-c-table__button">
+            <div class="pf-c-table__button-content">
+              <span class="pf-c-table__text">Protocol</span>
+              <span class="pf-c-table__sort-indicator">
+                <i class="fas fa-arrows-alt-v"></i>
+              </span>
+            </div>
+          </button>
+        </th>
+        <th
+          class="pf-m-border-right pf-m-fit-content pf-c-table__sort"
+          role="columnheader"
+          aria-sort="none"
+          scope="col"
+          rowspan="2"
+        >
+          <button class="pf-c-table__button">
+            <div class="pf-c-table__button-content">
+              <span class="pf-c-table__text">Flow rate</span>
+              <span class="pf-c-table__sort-indicator">
+                <i class="fas fa-arrows-alt-v"></i>
+              </span>
+            </div>
+          </button>
+        </th>
+        <th
+          class="pf-m-border-right pf-m-fit-content pf-c-table__sort"
+          role="columnheader"
+          aria-sort="none"
+          scope="col"
+          rowspan="2"
+        >
+          <button class="pf-c-table__button">
+            <div class="pf-c-table__button-content">
+              <span class="pf-c-table__text">Traffic</span>
+              <span class="pf-c-table__sort-indicator">
+                <i class="fas fa-arrows-alt-v"></i>
+              </span>
+            </div>
+          </button>
+        </th>
+        <th
+          class="pf-m-fit-content pf-c-table__sort"
+          role="columnheader"
+          aria-sort="none"
+          scope="col"
+          rowspan="2"
+        >
+          <button class="pf-c-table__button">
+            <div class="pf-c-table__button-content">
+              <span class="pf-c-table__text">Packets</span>
+              <span class="pf-c-table__sort-indicator">
+                <i class="fas fa-arrows-alt-v"></i>
+              </span>
+            </div>
+          </button>
+        </th>
+      </tr>
+      <tr role="row">
+        <th
+          class="pf-c-table__subhead pf-c-table__sort"
+          role="columnheader"
+          aria-sort="none"
+          scope="col"
+        >
+          <button class="pf-c-table__button">
+            <div class="pf-c-table__button-content">
+              <span class="pf-c-table__text">Source</span>
+              <span class="pf-c-table__sort-indicator">
+                <i class="fas fa-arrows-alt-v"></i>
+              </span>
+            </div>
+          </button>
+        </th>
+        <th
+          class="pf-c-table__subhead pf-c-table__sort"
+          role="columnheader"
+          aria-sort="none"
+          scope="col"
+        >
+          <button class="pf-c-table__button">
+            <div class="pf-c-table__button-content">
+              <span class="pf-c-table__text">Destination</span>
+              <span class="pf-c-table__sort-indicator">
+                <i class="fas fa-arrows-alt-v"></i>
+              </span>
+            </div>
+          </button>
+        </th>
+        <th
+          class="pf-c-table__subhead pf-m-fit-content pf-m-border-right pf-c-table__sort"
+          role="columnheader"
+          aria-sort="none"
+          scope="col"
+        >
+          <button class="pf-c-table__button">
+            <div class="pf-c-table__button-content">
+              <span class="pf-c-table__text">Date & Time</span>
+              <span class="pf-c-table__sort-indicator">
+                <i class="fas fa-arrows-alt-v"></i>
+              </span>
+            </div>
+          </button>
+        </th>
+        <th
+          class="pf-c-table__subhead pf-m-fit-content pf-c-table__sort"
+          role="columnheader"
+          aria-sort="none"
+          scope="col"
+        >
+          <button class="pf-c-table__button">
+            <div class="pf-c-table__button-content">
+              <span class="pf-c-table__text">Source</span>
+              <span class="pf-c-table__sort-indicator">
+                <i class="fas fa-arrows-alt-v"></i>
+              </span>
+            </div>
+          </button>
+        </th>
+        <th
+          class="pf-c-table__subhead pf-m-fit-content pf-m-border-right pf-c-table__sort"
+          role="columnheader"
+          aria-sort="none"
+          scope="col"
+        >
+          <button class="pf-c-table__button">
+            <div class="pf-c-table__button-content">
+              <span class="pf-c-table__text">Destination</span>
+              <span class="pf-c-table__sort-indicator">
+                <i class="fas fa-arrows-alt-v"></i>
+              </span>
+            </div>
+          </button>
+        </th>
+      </tr>
+      <tr class="pf-m-border-row">
+        <td colspan="9" aria-hidden="true" tabindex="-1"></td>
+      </tr>
+    </thead>
+    <tbody role="rowgroup">
+      <tr role="row">
+        <td role="cell" data-label="Source">
+          <div class="pf-l-flex pf-m-nowrap">
+            <div class="pf-l-flex__item">
+              <span class="pf-c-label pf-m-cyan">
+                <span class="pf-c-label__content">P</span>
+              </span>
+            </div>
+            <div class="pf-l-flex__item pf-m-flex-1">
+              <span class="pf-c-table__text pf-m-truncate">
+                <a href="#">api-pod-source-name</a>
+              </span>
+            </div>
+          </div>
+        </td>
+        <td role="cell" data-label="Destination">
+          <div class="pf-l-flex pf-m-nowrap">
+            <div class="pf-l-flex__item">
+              <span class="pf-c-label pf-m-cyan">
+                <span class="pf-c-label__content">P</span>
+              </span>
+            </div>
+            <div class="pf-l-flex__item pf-m-flex-1">
+              <span class="pf-c-table__text pf-m-truncate">
+                <a href="#">api-pod-destination-name</a>
+              </span>
+            </div>
+          </div>
+        </td>
+        <td role="cell" data-label="Date &amp; time">
+          <div class="pf-l-stack">
+            <span>June 22, 2021</span>
+            <span class="pf-u-color-200">3:58:24 PM</span>
+          </div>
+        </td>
+        <td role="cell" data-label="Source">
+          <div class="pf-l-stack">
+            <span>443</span>
+            <span class="pf-u-color-200">(HTTPS)</span>
+          </div>
+        </td>
+        <td role="cell" data-label="Destination">
+          <div class="pf-l-stack">
+            <span>24</span>
+            <span class="pf-u-color-200">(smtp)</span>
+          </div>
+        </td>
+        <td role="cell" data-label="Protocol">TCP</td>
+        <td role="cell" data-label="Flow rate">1.9 Kbps</td>
+        <td role="cell" data-label="Traffic">2.1 KB</td>
+        <td role="cell" data-label="Packets">3</td>
+      </tr>
+      <tr role="row">
+        <td role="cell" data-label="Source">
+          <div class="pf-l-flex pf-m-nowrap">
+            <div class="pf-l-flex__item">
+              <span class="pf-c-label pf-m-cyan">
+                <span class="pf-c-label__content">P</span>
+              </span>
+            </div>
+            <div class="pf-l-flex__item pf-m-flex-1">
+              <span class="pf-c-table__text pf-m-truncate">
+                <a href="#">api-pod-source-name</a>
+              </span>
+            </div>
+          </div>
+        </td>
+        <td role="cell" data-label="Destination">
+          <div class="pf-l-flex pf-m-nowrap">
+            <div class="pf-l-flex__item">
+              <span class="pf-c-label pf-m-cyan">
+                <span class="pf-c-label__content">P</span>
+              </span>
+            </div>
+            <div class="pf-l-flex__item pf-m-flex-1">
+              <span class="pf-c-table__text pf-m-truncate">
+                <a href="#">api-pod-destination-name</a>
+              </span>
+            </div>
+          </div>
+        </td>
+        <td role="cell" data-label="Date &amp; time">
+          <div class="pf-l-stack">
+            <span>June 22, 2021</span>
+            <span class="pf-u-color-200">3:58:24 PM</span>
+          </div>
+        </td>
+        <td role="cell" data-label="Source">
+          <div class="pf-l-stack">
+            <span>443</span>
+            <span class="pf-u-color-200">(HTTPS)</span>
+          </div>
+        </td>
+        <td role="cell" data-label="Destination">
+          <div class="pf-l-stack">
+            <span>24</span>
+            <span class="pf-u-color-200">(smtp)</span>
+          </div>
+        </td>
+        <td role="cell" data-label="Protocol">TCP</td>
+        <td role="cell" data-label="Flow rate">1.9 Kbps</td>
+        <td role="cell" data-label="Traffic">2.1 KB</td>
+        <td role="cell" data-label="Packets">3</td>
+      </tr>
+      <tr role="row">
+        <td role="cell" data-label="Source">
+          <div class="pf-l-flex pf-m-nowrap">
+            <div class="pf-l-flex__item">
+              <span class="pf-c-label pf-m-cyan">
+                <span class="pf-c-label__content">P</span>
+              </span>
+            </div>
+            <div class="pf-l-flex__item pf-m-flex-1">
+              <span class="pf-c-table__text pf-m-truncate">
+                <a href="#">api-pod-source-name</a>
+              </span>
+            </div>
+          </div>
+        </td>
+        <td role="cell" data-label="Destination">
+          <div class="pf-l-flex pf-m-nowrap">
+            <div class="pf-l-flex__item">
+              <span class="pf-c-label pf-m-cyan">
+                <span class="pf-c-label__content">P</span>
+              </span>
+            </div>
+            <div class="pf-l-flex__item pf-m-flex-1">
+              <span class="pf-c-table__text pf-m-truncate">
+                <a href="#">api-pod-destination-name</a>
+              </span>
+            </div>
+          </div>
+        </td>
+        <td role="cell" data-label="Date &amp; time">
+          <div class="pf-l-stack">
+            <span>June 22, 2021</span>
+            <span class="pf-u-color-200">3:58:24 PM</span>
+          </div>
+        </td>
+        <td role="cell" data-label="Source">
+          <div class="pf-l-stack">
+            <span>443</span>
+            <span class="pf-u-color-200">(HTTPS)</span>
+          </div>
+        </td>
+        <td role="cell" data-label="Destination">
+          <div class="pf-l-stack">
+            <span>24</span>
+            <span class="pf-u-color-200">(smtp)</span>
+          </div>
+        </td>
+        <td role="cell" data-label="Protocol">TCP</td>
+        <td role="cell" data-label="Flow rate">1.9 Kbps</td>
+        <td role="cell" data-label="Traffic">2.1 KB</td>
+        <td role="cell" data-label="Packets">3</td>
+      </tr>
+      <tr role="row">
+        <td role="cell" data-label="Source">
+          <div class="pf-l-flex pf-m-nowrap">
+            <div class="pf-l-flex__item">
+              <span class="pf-c-label pf-m-cyan">
+                <span class="pf-c-label__content">P</span>
+              </span>
+            </div>
+            <div class="pf-l-flex__item pf-m-flex-1">
+              <span class="pf-c-table__text pf-m-truncate">
+                <a href="#">api-pod-source-name</a>
+              </span>
+            </div>
+          </div>
+        </td>
+        <td role="cell" data-label="Destination">
+          <div class="pf-l-flex pf-m-nowrap">
+            <div class="pf-l-flex__item">
+              <span class="pf-c-label pf-m-cyan">
+                <span class="pf-c-label__content">P</span>
+              </span>
+            </div>
+            <div class="pf-l-flex__item pf-m-flex-1">
+              <span class="pf-c-table__text pf-m-truncate">
+                <a href="#">api-pod-destination-name</a>
+              </span>
+            </div>
+          </div>
+        </td>
+        <td role="cell" data-label="Date &amp; time">
+          <div class="pf-l-stack">
+            <span>June 22, 2021</span>
+            <span class="pf-u-color-200">3:58:24 PM</span>
+          </div>
+        </td>
+        <td role="cell" data-label="Source">
+          <div class="pf-l-stack">
+            <span>443</span>
+            <span class="pf-u-color-200">(HTTPS)</span>
+          </div>
+        </td>
+        <td role="cell" data-label="Destination">
+          <div class="pf-l-stack">
+            <span>24</span>
+            <span class="pf-u-color-200">(smtp)</span>
+          </div>
+        </td>
+        <td role="cell" data-label="Protocol">TCP</td>
+        <td role="cell" data-label="Flow rate">1.9 Kbps</td>
+        <td role="cell" data-label="Traffic">2.1 KB</td>
+        <td role="cell" data-label="Packets">3</td>
+      </tr>
+      <tr role="row">
+        <td role="cell" data-label="Source">
+          <div class="pf-l-flex pf-m-nowrap">
+            <div class="pf-l-flex__item">
+              <span class="pf-c-label pf-m-cyan">
+                <span class="pf-c-label__content">P</span>
+              </span>
+            </div>
+            <div class="pf-l-flex__item pf-m-flex-1">
+              <span class="pf-c-table__text pf-m-truncate">
+                <a href="#">api-pod-source-name</a>
+              </span>
+            </div>
+          </div>
+        </td>
+        <td role="cell" data-label="Destination">
+          <div class="pf-l-flex pf-m-nowrap">
+            <div class="pf-l-flex__item">
+              <span class="pf-c-label pf-m-cyan">
+                <span class="pf-c-label__content">P</span>
+              </span>
+            </div>
+            <div class="pf-l-flex__item pf-m-flex-1">
+              <span class="pf-c-table__text pf-m-truncate">
+                <a href="#">api-pod-destination-name</a>
+              </span>
+            </div>
+          </div>
+        </td>
+        <td role="cell" data-label="Date &amp; time">
+          <div class="pf-l-stack">
+            <span>June 22, 2021</span>
+            <span class="pf-u-color-200">3:58:24 PM</span>
+          </div>
+        </td>
+        <td role="cell" data-label="Source">
+          <div class="pf-l-stack">
+            <span>443</span>
+            <span class="pf-u-color-200">(HTTPS)</span>
+          </div>
+        </td>
+        <td role="cell" data-label="Destination">
+          <div class="pf-l-stack">
+            <span>24</span>
+            <span class="pf-u-color-200">(smtp)</span>
+          </div>
+        </td>
+        <td role="cell" data-label="Protocol">TCP</td>
+        <td role="cell" data-label="Flow rate">1.9 Kbps</td>
+        <td role="cell" data-label="Traffic">2.1 KB</td>
+        <td role="cell" data-label="Packets">3</td>
+      </tr>
+      <tr role="row">
+        <td role="cell" data-label="Source">
+          <div class="pf-l-flex pf-m-nowrap">
+            <div class="pf-l-flex__item">
+              <span class="pf-c-label pf-m-cyan">
+                <span class="pf-c-label__content">P</span>
+              </span>
+            </div>
+            <div class="pf-l-flex__item pf-m-flex-1">
+              <span class="pf-c-table__text pf-m-truncate">
+                <a href="#">api-pod-source-name</a>
+              </span>
+            </div>
+          </div>
+        </td>
+        <td role="cell" data-label="Destination">
+          <div class="pf-l-flex pf-m-nowrap">
+            <div class="pf-l-flex__item">
+              <span class="pf-c-label pf-m-cyan">
+                <span class="pf-c-label__content">P</span>
+              </span>
+            </div>
+            <div class="pf-l-flex__item pf-m-flex-1">
+              <span class="pf-c-table__text pf-m-truncate">
+                <a href="#">api-pod-destination-name</a>
+              </span>
+            </div>
+          </div>
+        </td>
+        <td role="cell" data-label="Date &amp; time">
+          <div class="pf-l-stack">
+            <span>June 22, 2021</span>
+            <span class="pf-u-color-200">3:58:24 PM</span>
+          </div>
+        </td>
+        <td role="cell" data-label="Source">
+          <div class="pf-l-stack">
+            <span>443</span>
+            <span class="pf-u-color-200">(HTTPS)</span>
+          </div>
+        </td>
+        <td role="cell" data-label="Destination">
+          <div class="pf-l-stack">
+            <span>24</span>
+            <span class="pf-u-color-200">(smtp)</span>
+          </div>
+        </td>
+        <td role="cell" data-label="Protocol">TCP</td>
+        <td role="cell" data-label="Flow rate">1.9 Kbps</td>
+        <td role="cell" data-label="Traffic">2.1 KB</td>
+        <td role="cell" data-label="Packets">3</td>
+      </tr>
+      <tr role="row">
+        <td role="cell" data-label="Source">
+          <div class="pf-l-flex pf-m-nowrap">
+            <div class="pf-l-flex__item">
+              <span class="pf-c-label pf-m-cyan">
+                <span class="pf-c-label__content">P</span>
+              </span>
+            </div>
+            <div class="pf-l-flex__item pf-m-flex-1">
+              <span class="pf-c-table__text pf-m-truncate">
+                <a href="#">api-pod-source-name</a>
+              </span>
+            </div>
+          </div>
+        </td>
+        <td role="cell" data-label="Destination">
+          <div class="pf-l-flex pf-m-nowrap">
+            <div class="pf-l-flex__item">
+              <span class="pf-c-label pf-m-cyan">
+                <span class="pf-c-label__content">P</span>
+              </span>
+            </div>
+            <div class="pf-l-flex__item pf-m-flex-1">
+              <span class="pf-c-table__text pf-m-truncate">
+                <a href="#">api-pod-destination-name</a>
+              </span>
+            </div>
+          </div>
+        </td>
+        <td role="cell" data-label="Date &amp; time">
+          <div class="pf-l-stack">
+            <span>June 22, 2021</span>
+            <span class="pf-u-color-200">3:58:24 PM</span>
+          </div>
+        </td>
+        <td role="cell" data-label="Source">
+          <div class="pf-l-stack">
+            <span>443</span>
+            <span class="pf-u-color-200">(HTTPS)</span>
+          </div>
+        </td>
+        <td role="cell" data-label="Destination">
+          <div class="pf-l-stack">
+            <span>24</span>
+            <span class="pf-u-color-200">(smtp)</span>
+          </div>
+        </td>
+        <td role="cell" data-label="Protocol">TCP</td>
+        <td role="cell" data-label="Flow rate">1.9 Kbps</td>
+        <td role="cell" data-label="Traffic">2.1 KB</td>
+        <td role="cell" data-label="Packets">3</td>
+      </tr>
+      <tr role="row">
+        <td role="cell" data-label="Source">
+          <div class="pf-l-flex pf-m-nowrap">
+            <div class="pf-l-flex__item">
+              <span class="pf-c-label pf-m-cyan">
+                <span class="pf-c-label__content">P</span>
+              </span>
+            </div>
+            <div class="pf-l-flex__item pf-m-flex-1">
+              <span class="pf-c-table__text pf-m-truncate">
+                <a href="#">api-pod-source-name</a>
+              </span>
+            </div>
+          </div>
+        </td>
+        <td role="cell" data-label="Destination">
+          <div class="pf-l-flex pf-m-nowrap">
+            <div class="pf-l-flex__item">
+              <span class="pf-c-label pf-m-cyan">
+                <span class="pf-c-label__content">P</span>
+              </span>
+            </div>
+            <div class="pf-l-flex__item pf-m-flex-1">
+              <span class="pf-c-table__text pf-m-truncate">
+                <a href="#">api-pod-destination-name</a>
+              </span>
+            </div>
+          </div>
+        </td>
+        <td role="cell" data-label="Date &amp; time">
+          <div class="pf-l-stack">
+            <span>June 22, 2021</span>
+            <span class="pf-u-color-200">3:58:24 PM</span>
+          </div>
+        </td>
+        <td role="cell" data-label="Source">
+          <div class="pf-l-stack">
+            <span>443</span>
+            <span class="pf-u-color-200">(HTTPS)</span>
+          </div>
+        </td>
+        <td role="cell" data-label="Destination">
+          <div class="pf-l-stack">
+            <span>24</span>
+            <span class="pf-u-color-200">(smtp)</span>
+          </div>
+        </td>
+        <td role="cell" data-label="Protocol">TCP</td>
+        <td role="cell" data-label="Flow rate">1.9 Kbps</td>
+        <td role="cell" data-label="Traffic">2.1 KB</td>
+        <td role="cell" data-label="Packets">3</td>
+      </tr>
+      <tr role="row">
+        <td role="cell" data-label="Source">
+          <div class="pf-l-flex pf-m-nowrap">
+            <div class="pf-l-flex__item">
+              <span class="pf-c-label pf-m-cyan">
+                <span class="pf-c-label__content">P</span>
+              </span>
+            </div>
+            <div class="pf-l-flex__item pf-m-flex-1">
+              <span class="pf-c-table__text pf-m-truncate">
+                <a href="#">api-pod-source-name</a>
+              </span>
+            </div>
+          </div>
+        </td>
+        <td role="cell" data-label="Destination">
+          <div class="pf-l-flex pf-m-nowrap">
+            <div class="pf-l-flex__item">
+              <span class="pf-c-label pf-m-cyan">
+                <span class="pf-c-label__content">P</span>
+              </span>
+            </div>
+            <div class="pf-l-flex__item pf-m-flex-1">
+              <span class="pf-c-table__text pf-m-truncate">
+                <a href="#">api-pod-destination-name</a>
+              </span>
+            </div>
+          </div>
+        </td>
+        <td role="cell" data-label="Date &amp; time">
+          <div class="pf-l-stack">
+            <span>June 22, 2021</span>
+            <span class="pf-u-color-200">3:58:24 PM</span>
+          </div>
+        </td>
+        <td role="cell" data-label="Source">
+          <div class="pf-l-stack">
+            <span>443</span>
+            <span class="pf-u-color-200">(HTTPS)</span>
+          </div>
+        </td>
+        <td role="cell" data-label="Destination">
+          <div class="pf-l-stack">
+            <span>24</span>
+            <span class="pf-u-color-200">(smtp)</span>
+          </div>
+        </td>
+        <td role="cell" data-label="Protocol">TCP</td>
+        <td role="cell" data-label="Flow rate">1.9 Kbps</td>
+        <td role="cell" data-label="Traffic">2.1 KB</td>
+        <td role="cell" data-label="Packets">3</td>
+      </tr>
+      <tr role="row">
+        <td role="cell" data-label="Source">
+          <div class="pf-l-flex pf-m-nowrap">
+            <div class="pf-l-flex__item">
+              <span class="pf-c-label pf-m-cyan">
+                <span class="pf-c-label__content">P</span>
+              </span>
+            </div>
+            <div class="pf-l-flex__item pf-m-flex-1">
+              <span class="pf-c-table__text pf-m-truncate">
+                <a href="#">api-pod-source-name</a>
+              </span>
+            </div>
+          </div>
+        </td>
+        <td role="cell" data-label="Destination">
+          <div class="pf-l-flex pf-m-nowrap">
+            <div class="pf-l-flex__item">
+              <span class="pf-c-label pf-m-cyan">
+                <span class="pf-c-label__content">P</span>
+              </span>
+            </div>
+            <div class="pf-l-flex__item pf-m-flex-1">
+              <span class="pf-c-table__text pf-m-truncate">
+                <a href="#">api-pod-destination-name</a>
+              </span>
+            </div>
+          </div>
+        </td>
+        <td role="cell" data-label="Date &amp; time">
+          <div class="pf-l-stack">
+            <span>June 22, 2021</span>
+            <span class="pf-u-color-200">3:58:24 PM</span>
+          </div>
+        </td>
+        <td role="cell" data-label="Source">
+          <div class="pf-l-stack">
+            <span>443</span>
+            <span class="pf-u-color-200">(HTTPS)</span>
+          </div>
+        </td>
+        <td role="cell" data-label="Destination">
+          <div class="pf-l-stack">
+            <span>24</span>
+            <span class="pf-u-color-200">(smtp)</span>
+          </div>
+        </td>
+        <td role="cell" data-label="Protocol">TCP</td>
+        <td role="cell" data-label="Flow rate">1.9 Kbps</td>
+        <td role="cell" data-label="Traffic">2.1 KB</td>
+        <td role="cell" data-label="Packets">3</td>
+      </tr>
     </tbody>
   </table>
 </div>
@@ -22831,11 +24001,12 @@ For sticky columns to function correctly, the parent table's width must be contr
 ### Nested column header modifier usage
-| Class                        | Applied to     | Outcome                                                |
-| ---------------------------- | -------------- | ------------------------------------------------------ |
-| `.pf-m-nested-column-header` | `<thead>`      | Modifies a table header to handle nested header cells. |
-| `.pf-m-border-right`         | `<th>`, `<td>` | Modifies a table cell to show a right border.          |
-| `.pf-m-border-left`          | `<th>`, `<td>` | Modifies a table cell to show a left border.           |
+| Class                        | Applied to                                              | Outcome                                                                                     |
+| ---------------------------- | ------------------------------------------------------- | ------------------------------------------------------------------------------------------- |
+| `.pf-m-nested-column-header` | `<thead>`                                               | Modifies a table header to handle nested header cells.                                      |
+| `.pf-m-border-row`           | `.pf-m-sticky-header > .pf-m-nested-column-header > tr` | Modifies the last row in a sticky header with nested column headers to display as a border. |
+| `.pf-m-border-right`         | `<th>`, `<td>`                                          | Modifies a table cell to show a right border.                                               |
+| `.pf-m-border-left`          | `<th>`, `<td>`                                          | Modifies a table cell to show a left border.                                                |
 ## Favorites