From 4d09b88673ad02e2b9fc161959252804bb340059 Mon Sep 17 00:00:00 2001
From: Michael Coker <mcoker@redhat.com>
Date: Thu, 25 Jun 2026 14:50:37 -0500
Subject: [PATCH 1/2] fix(table): updated nested sticky header example with
 isBorderRow tr

---
 .../src/components/Table/examples/Table.md    |   1 +
 .../examples/TableNestedStickyHeader.tsx      | 163 +++++++++---------
 2 files changed, 85 insertions(+), 79 deletions(-)

diff --git a/packages/react-table/src/components/Table/examples/Table.md b/packages/react-table/src/components/Table/examples/Table.md
index ab72bbd0c19..4b48ed61ed6 100644
--- a/packages/react-table/src/components/Table/examples/Table.md
+++ b/packages/react-table/src/components/Table/examples/Table.md
@@ -452,6 +452,7 @@ To make a nested column header:
 2. Pass `nestedHeaderColumnSpans` to `Table`. `nestedHeaderColumnSpans` is an array of numbers representing the column spans of the top level columns to `Table`, where each number is equal to the number of sub columns for a column, or `1` if a column contains no sub columns.
 3. Pass `hasNestedHeader` to `Thead`.
 4. Pass two `Tr` as children of `Thead`.
+5. If the parent `Table` has a sticky header, pass an additional `Tr isBorderRow` in `Thead` to create the bottom border in the `Thead`.
 
 The first `Tr` represents the top level of columns, and each must pass either `rowSpan` if the column does not contain sub columns or `colSpan` if the column contains sub columns. The value of `rowSpan` is equal to the number of rows the nested header will span, typically `2`, and the value of `colSpan` is equal to the number of sub columns in a column. Each `Th` except the last should also pass `hasRightBorder`.
 
diff --git a/packages/react-table/src/components/Table/examples/TableNestedStickyHeader.tsx b/packages/react-table/src/components/Table/examples/TableNestedStickyHeader.tsx
index c40a84b5b9b..925855cb71f 100644
--- a/packages/react-table/src/components/Table/examples/TableNestedStickyHeader.tsx
+++ b/packages/react-table/src/components/Table/examples/TableNestedStickyHeader.tsx
@@ -112,85 +112,90 @@ export const TableNestedHeaders: React.FunctionComponent = () => {
   });
 
   return (
-    <InnerScrollContainer>
-      <Table aria-label="Nested column headers table" gridBreakPoint="" isStickyHeader>
-        <Thead hasNestedHeader>
-          <Tr>
-            <Th hasRightBorder colSpan={3}>
-              {columnNames.pods}
-            </Th>
-            <Th hasRightBorder colSpan={2}>
-              {columnNames.ports}
-            </Th>
-            <Th modifier="fitContent" hasRightBorder rowSpan={2} sort={getSortParams(5)}>
-              {columnNames.protocol}
-            </Th>
-            <Th modifier="fitContent" hasRightBorder rowSpan={2} sort={getSortParams(6)}>
-              {columnNames.flowRate}
-            </Th>
-            <Th modifier="fitContent" hasRightBorder rowSpan={2} sort={getSortParams(7)}>
-              {columnNames.traffic}
-            </Th>
-            <Th modifier="fitContent" rowSpan={2} sort={getSortParams(8)}>
-              {columnNames.packets}
-            </Th>
-          </Tr>
-          <Tr>
-            <Th isSubheader sort={getSortParams(0)}>
-              {columnNames.source}
-            </Th>
-            <Th isSubheader sort={getSortParams(1)}>
-              {columnNames.destination}
-            </Th>
-            <Th isSubheader modifier="fitContent" hasRightBorder sort={getSortParams(2)}>
-              {columnNames.datetime}
-            </Th>
-            <Th isSubheader modifier="fitContent" sort={getSortParams(3)}>
-              {columnNames.source}
-            </Th>
-            <Th isSubheader modifier="fitContent" hasRightBorder sort={getSortParams(4)}>
-              {columnNames.destination}
-            </Th>
-          </Tr>
-        </Thead>
-        <Tbody>
-          {sortedConnections.map((connection) => (
-            <Tr key={connection.source.podName}>
-              <Td dataLabel={columnNames.source}>{connection.source.podName}</Td>
-              <Td dataLabel={columnNames.destination}>{connection.destination.podName}</Td>\
-              <Td dataLabel={columnNames.datetime}>
-                <div>
-                  <Timestamp dateFormat="full" timeFormat="medium" date={new Date(connection.timestamp)} />
-                </div>
-              </Td>
-              <Td dataLabel={columnNames.source}>
-                <Stack>
-                  <StackItem>
-                    <span>{connection.source.port.num}</span>
-                  </StackItem>
-                  <StackItem>
-                    <small>({connection.source.port.protocol})</small>
-                  </StackItem>
-                </Stack>
-              </Td>
-              <Td dataLabel={columnNames.destination}>
-                <Stack>
-                  <StackItem>
-                    <span>{connection.destination.port.num}</span>
-                  </StackItem>
-                  <StackItem>
-                    <small>({connection.destination.port.protocol})</small>
-                  </StackItem>
-                </Stack>
-              </Td>
-              <Td dataLabel={columnNames.protocol}>{connection.protocol}</Td>
-              <Td dataLabel={columnNames.flowRate}>{connection.flowRate}</Td>
-              <Td dataLabel={columnNames.traffic}>{connection.traffic}</Td>
-              <Td dataLabel={columnNames.packets}>{connection.packets}</Td>
+    <div style={{ height: '250px' }}>
+      <InnerScrollContainer>
+        <Table aria-label="Nested column headers table" gridBreakPoint="" isStickyHeader>
+          <Thead hasNestedHeader>
+            <Tr>
+              <Th hasRightBorder colSpan={3}>
+                {columnNames.pods}
+              </Th>
+              <Th hasRightBorder colSpan={2}>
+                {columnNames.ports}
+              </Th>
+              <Th modifier="fitContent" hasRightBorder rowSpan={2} sort={getSortParams(5)}>
+                {columnNames.protocol}
+              </Th>
+              <Th modifier="fitContent" hasRightBorder rowSpan={2} sort={getSortParams(6)}>
+                {columnNames.flowRate}
+              </Th>
+              <Th modifier="fitContent" hasRightBorder rowSpan={2} sort={getSortParams(7)}>
+                {columnNames.traffic}
+              </Th>
+              <Th modifier="fitContent" rowSpan={2} sort={getSortParams(8)}>
+                {columnNames.packets}
+              </Th>
             </Tr>
-          ))}
-        </Tbody>
-      </Table>
-    </InnerScrollContainer>
+            <Tr>
+              <Th isSubheader sort={getSortParams(0)}>
+                {columnNames.source}
+              </Th>
+              <Th isSubheader sort={getSortParams(1)}>
+                {columnNames.destination}
+              </Th>
+              <Th isSubheader modifier="fitContent" hasRightBorder sort={getSortParams(2)}>
+                {columnNames.datetime}
+              </Th>
+              <Th isSubheader modifier="fitContent" sort={getSortParams(3)}>
+                {columnNames.source}
+              </Th>
+              <Th isSubheader modifier="fitContent" hasRightBorder sort={getSortParams(4)}>
+                {columnNames.destination}
+              </Th>
+            </Tr>
+            <Tr isBorderRow aria-hidden="true">
+              <Td colSpan={9}></Td>
+            </Tr>
+          </Thead>
+          <Tbody>
+            {sortedConnections.map((connection) => (
+              <Tr key={connection.source.podName}>
+                <Td dataLabel={columnNames.source}>{connection.source.podName}</Td>
+                <Td dataLabel={columnNames.destination}>{connection.destination.podName}</Td>\
+                <Td dataLabel={columnNames.datetime}>
+                  <div>
+                    <Timestamp dateFormat="full" timeFormat="medium" date={new Date(connection.timestamp)} />
+                  </div>
+                </Td>
+                <Td dataLabel={columnNames.source}>
+                  <Stack>
+                    <StackItem>
+                      <span>{connection.source.port.num}</span>
+                    </StackItem>
+                    <StackItem>
+                      <small>({connection.source.port.protocol})</small>
+                    </StackItem>
+                  </Stack>
+                </Td>
+                <Td dataLabel={columnNames.destination}>
+                  <Stack>
+                    <StackItem>
+                      <span>{connection.destination.port.num}</span>
+                    </StackItem>
+                    <StackItem>
+                      <small>({connection.destination.port.protocol})</small>
+                    </StackItem>
+                  </Stack>
+                </Td>
+                <Td dataLabel={columnNames.protocol}>{connection.protocol}</Td>
+                <Td dataLabel={columnNames.flowRate}>{connection.flowRate}</Td>
+                <Td dataLabel={columnNames.traffic}>{connection.traffic}</Td>
+                <Td dataLabel={columnNames.packets}>{connection.packets}</Td>
+              </Tr>
+            ))}
+          </Tbody>
+        </Table>
+      </InnerScrollContainer>
+    </div>
   );
 };

From ef54927e2e0db487e25fccb2fd99fa5aa76d5570 Mon Sep 17 00:00:00 2001
From: Michael Coker <mcoker@redhat.com>
Date: Thu, 25 Jun 2026 15:12:33 -0500
Subject: [PATCH 2/2] chore: removed random slash

---
 .../src/components/Table/examples/TableNestedStickyHeader.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-table/src/components/Table/examples/TableNestedStickyHeader.tsx b/packages/react-table/src/components/Table/examples/TableNestedStickyHeader.tsx
index 925855cb71f..6c62e16ef0c 100644
--- a/packages/react-table/src/components/Table/examples/TableNestedStickyHeader.tsx
+++ b/packages/react-table/src/components/Table/examples/TableNestedStickyHeader.tsx
@@ -161,7 +161,7 @@ export const TableNestedHeaders: React.FunctionComponent = () => {
             {sortedConnections.map((connection) => (
               <Tr key={connection.source.podName}>
                 <Td dataLabel={columnNames.source}>{connection.source.podName}</Td>
-                <Td dataLabel={columnNames.destination}>{connection.destination.podName}</Td>\
+                <Td dataLabel={columnNames.destination}>{connection.destination.podName}</Td>
                 <Td dataLabel={columnNames.datetime}>
                   <div>
                     <Timestamp dateFormat="full" timeFormat="medium" date={new Date(connection.timestamp)} />