From 86fc07d6681948977640f613607bf6ee7ce8e1c8 Mon Sep 17 00:00:00 2001
From: Michael Coker <mcoker@redhat.com>
Date: Thu, 13 Aug 2026 17:50:54 -0500
Subject: [PATCH 1/2] chore: fix editable table alignent

---
 .../Table/examples/TableEditable.tsx          | 72 +++++++++----------
 1 file changed, 35 insertions(+), 37 deletions(-)

diff --git a/packages/react-table/src/components/Table/examples/TableEditable.tsx b/packages/react-table/src/components/Table/examples/TableEditable.tsx
index 04ea0564d77..2de90352332 100644
--- a/packages/react-table/src/components/Table/examples/TableEditable.tsx
+++ b/packages/react-table/src/components/Table/examples/TableEditable.tsx
@@ -35,48 +35,46 @@ const EditButtonsCell: React.FunctionComponent<EditButtonsCellProps> = ({
 
   return (
     <>
-      <Td
-        dataLabel="Save and cancel buttons"
-        className={css(
-          inlineEditStyles.inlineEditGroup,
-          inlineEditStyles.modifiers.iconGroup,
-          inlineEditStyles.modifiers.actionGroup
-        )}
-      >
-        <div className={css(inlineEditStyles.inlineEditAction, inlineEditStyles.modifiers.valid)}>
-          <Button
-            aria-label={`Save edits of ${rowAriaLabel}`}
-            onClick={() => onClick('save')}
-            onKeyDown={(event) => onKeyDown(event, 'stopEditing')}
-            variant="plain"
-          >
-            <RhMicronsCheckmarkIcon />
-          </Button>
+      <Td dataLabel="Edit row data" hasAction>
+        <div
+          className={css(
+            inlineEditStyles.inlineEditGroup,
+            inlineEditStyles.modifiers.iconGroup,
+            inlineEditStyles.modifiers.actionGroup
+          )}
+        >
+          <div className={css(inlineEditStyles.inlineEditAction, inlineEditStyles.modifiers.valid)}>
+            <Button
+              aria-label={`Save edits of ${rowAriaLabel}`}
+              onClick={() => onClick('save')}
+              onKeyDown={(event) => onKeyDown(event, 'stopEditing')}
+              variant="plain"
+            >
+              <RhMicronsCheckmarkIcon />
+            </Button>
+          </div>
+          <div className={css(inlineEditStyles.inlineEditAction)}>
+            <Button
+              aria-label={`Discard edits of ${rowAriaLabel}`}
+              onClick={() => onClick('cancel')}
+              onKeyDown={(event) => onKeyDown(event, 'stopEditing')}
+              variant="plain"
+            >
+              <RhMicronsCloseIcon />
+            </Button>
+          </div>
         </div>
-        <div className={css(inlineEditStyles.inlineEditAction)}>
+        <span className={css(inlineEditStyles.inlineEditAction, inlineEditStyles.modifiers.enableEditable)}>
           <Button
-            aria-label={`Discard edits of ${rowAriaLabel}`}
-            onClick={() => onClick('cancel')}
-            onKeyDown={(event) => onKeyDown(event, 'stopEditing')}
+            ref={editButtonRef}
+            aria-label={`Edit ${rowAriaLabel}`}
+            onClick={() => onClick('edit')}
+            onKeyDown={(event) => onKeyDown(event, 'edit')}
             variant="plain"
           >
-            <RhMicronsCloseIcon />
+            <RhUiEditFillIcon />
           </Button>
-        </div>
-      </Td>
-      <Td
-        dataLabel="Edit button"
-        className={css(inlineEditStyles.inlineEditAction, inlineEditStyles.modifiers.enableEditable)}
-      >
-        <Button
-          ref={editButtonRef}
-          aria-label={`Edit ${rowAriaLabel}`}
-          onClick={() => onClick('edit')}
-          onKeyDown={(event) => onKeyDown(event, 'edit')}
-          variant="plain"
-        >
-          <RhUiEditFillIcon />
-        </Button>
+        </span>
       </Td>
     </>
   );

From 6b12c22bc76663e0db3a2c108c8ae87e2227856d Mon Sep 17 00:00:00 2001
From: Michael Coker <mcoker@redhat.com>
Date: Thu, 13 Aug 2026 17:52:18 -0500
Subject: [PATCH 2/2] chore: div to span

---
 .../src/components/Table/examples/TableEditable.tsx           | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-table/src/components/Table/examples/TableEditable.tsx b/packages/react-table/src/components/Table/examples/TableEditable.tsx
index 2de90352332..3f39751989e 100644
--- a/packages/react-table/src/components/Table/examples/TableEditable.tsx
+++ b/packages/react-table/src/components/Table/examples/TableEditable.tsx
@@ -64,7 +64,7 @@ const EditButtonsCell: React.FunctionComponent<EditButtonsCellProps> = ({
             </Button>
           </div>
         </div>
-        <span className={css(inlineEditStyles.inlineEditAction, inlineEditStyles.modifiers.enableEditable)}>
+        <div className={css(inlineEditStyles.inlineEditAction, inlineEditStyles.modifiers.enableEditable)}>
           <Button
             ref={editButtonRef}
             aria-label={`Edit ${rowAriaLabel}`}
@@ -74,7 +74,7 @@ const EditButtonsCell: React.FunctionComponent<EditButtonsCellProps> = ({
           >
             <RhUiEditFillIcon />
           </Button>
-        </span>
+        </div>
       </Td>
     </>
   );