fix(table): fix animation style conflicts by mcoker · Pull Request #7663 · patternfly/patternfly

mcoker · 2025-07-16T15:19:33Z

fixes #7662

Reverts these animation commits:

Reworks those changes so that most are behind the opt-in class.

This reverts commit d21e7a3.

…atternfly#7578)" This reverts commit 0d556bd.

…fly#7537)" This reverts commit a8e2447.

This reverts commit cf30724.

patternfly-build · 2025-07-16T15:23:25Z

Preview: https://patternfly-pr-7663.surge.sh

A11y report: https://patternfly-pr-7663-a11y.surge.sh

mcoker · 2025-07-16T15:58:15Z

Here is the diff of all table stuff from the v6.2.3 tag ($ git diff v6.2.3 -- src/patternfly/components/Table/).

Aside from animations, this output also includes these changes, which can be ignored

fix(table): correct alignment with a table cell that contains a button #7551 - adds support for a .pf-m-action cell
fix(table): use correct th font weight in grid view #7527 - corrects the font-weight for responsive column heaaders

diff --git a/src/patternfly/components/Table/TableCells/table-cell-toggle.hbs b/src/patternfly/components/Table/TableCells/table-cell-toggle.hbs
index 7633e5f97..2021aaaf1 100644
--- a/src/patternfly/components/Table/TableCells/table-cell-toggle.hbs
+++ b/src/patternfly/components/Table/TableCells/table-cell-toggle.hbs
@@ -9,7 +9,7 @@
     button--aria-describedby=table-tr--IsExpanded
     button--aria-label=(ternary IsThead 'Toggle all rows' 'Toggle row')
     button--aria-labelledby=(dasherize table--id 'node' table-tr--index)
-    button--aria-controls=(dasherize table--id 'content' table-tr--index)
+    button--aria-controls=(ternary table-tr--aria-controls table-tr--aria-controls (dasherize table--id 'content' table-tr--index))
     button--id=(dasherize table--id 'expandable-toggle' table-tr--index)}}
 
     {{> table-toggle-icon}}
diff --git a/src/patternfly/components/Table/examples/Table.md b/src/patternfly/components/Table/examples/Table.md
index d2a7c51d3..5e0d2014e 100644
--- a/src/patternfly/components/Table/examples/Table.md
+++ b/src/patternfly/components/Table/examples/Table.md
@@ -621,6 +621,92 @@ These classes can be used to ensure that the table changes between the tabular a
 {{/table}}
 
+### Table with buttons and actions
+```hbs
+{{#> table table--id="table-buttons-and-actions" table--IsGrid=true table--modifier="pf-m-grid-md" table--attribute='aria-label="This is a table with buttons and actions"'}}
+  {{#> table-thead}}
+    {{#> table-tr}}
+      {{#> table-th table-th--attribute='scope="col"'}}
+        Deployment
+      {{/table-th}}
+      {{#> table-th table-th--attribute='scope="col"'}}
+        Status
+      {{/table-th}}
+      {{#> table-th table-th--attribute='scope="col"'}}
+        Builds
+      {{/table-th}}
+      {{#> table-th table-th--attribute='scope="col"'}}
+        Start New Build
+      {{/table-th}}
+      {{> table-cell-action}}
+    {{/table-tr}}
+  {{/table-thead}}
+
+  {{#> table-tbody}}
+    {{#> table-tr}}
+      {{#> table-td table-td--data-label="Deployment"}}
+        Deployment 1
+      {{/table-td}}
+      {{#> table-td table-td--data-label="Status"}}
+        Success
+      {{/table-td}}
+      {{#> table-td table-td--data-label="Builds"}}
+        6
+      {{/table-td}}
+      {{#> table-td table-td--data-label="Start Build" table-td--modifier="pf-m-action"}}
+        <span>
+          {{#> button button--IsTertiary=true}}
+            Start
+          {{/button}}
+        </span>
+      {{/table-td}}
+      {{> table-cell-action}}
+    {{/table-tr}}
+    
+    {{#> table-tr}}
+      {{#> table-td table-td--data-label="Deployment"}}
+        Deployment 2
+      {{/table-td}}
+      {{#> table-td table-td--data-label="Status"}}
+        Failed
+      {{/table-td}}
+      {{#> table-td table-td--data-label="Builds"}}
+        2
+      {{/table-td}}
+      {{#> table-td table-td--data-label="Start Build" table-td--modifier="pf-m-action"}}
+        <span>
+          {{#> button button--IsTertiary=true}}
+            Start
+          {{/button}}
+        </span>
+      {{/table-td}}
+      {{> table-cell-action}}
+    {{/table-tr}}
+    
+    {{#> table-tr}}
+      {{#> table-td table-td--data-label="Deployment"}}
+        Deployment 3
+      {{/table-td}}
+      {{#> table-td table-td--data-label="Status"}}
+        Success
+      {{/table-td}}
+      {{#> table-td table-td--data-label="Builds"}}
+        7
+      {{/table-td}}
+      {{#> table-td table-td--data-label="Start Build" table-td--modifier="pf-m-action"}}
+        <span>
+          {{#> button button--IsTertiary=true}}
+            Start
+          {{/button}}
+        </span>
+      {{/table-td}}
+      {{> table-cell-action}}
+    {{/table-tr}}
+
+  {{/table-tbody}}
+{{/table}}
+```
+
 When including interactive elements in a table, the primary, descriptive cell in the corresponding row is a `<th>`, rather than a `<td>`. In this example, 'Node 1' and 'Node 2 siemur/test-space' are `<th>`s.
 
 When header cells are empty or they contain interactive elements, `<th>` should be replaced with `<td>`.
@@ -639,6 +725,7 @@ When header cells are empty or they contain interactive elements, `<th>` should
 | `.pf-v6-c-table__check` | `<th>`, `<td>` | Initiates a checkbox or radio input table cell. |
 | `.pf-v6-c-table__action` | `<th>`, `<td>` | Initiates an action table cell. |
 | `.pf-v6-c-table__inline-edit-action` | `<th>`, `<td>` | Initiates an inline edit action table cell. |
+| `.pf-m-action` | `<td>` | Initiates an table cell with button. |
 
 ## Expandable
 
@@ -649,7 +736,7 @@ Note: Table column widths will respond automatically when toggling expanded rows
 {{#> table table--id="table-expandable" table--IsGrid=true table--modifier="pf-m-grid-lg" table--IsExpandable=true table--attribute='aria-label="Expandable table example"'}}
   {{#> table-thead}}
     {{#> table-tr table-tr--index="thead" table-tr--index="thead"}}
-      {{> table-cell-toggle}}
+      {{> table-cell-toggle table-tr--aria-controls="table-expandable-content-1 table-expandable-content-2 table-expandable-content-3 table-expandable-content-4"}}
       {{> table-cell-check}}
       {{#> table-th table-th--attribute='scope="col"' table-th--IsSortable=true table-th--modifier="pf-m-width-30" table-th--IsSelected="true" table-th--IsAsc="true"}}
         Repositories
@@ -774,12 +861,134 @@ Note: Table column widths will respond automatically when toggling expanded rows
 {{/table}}
 
+### Animated expandable
+```hbs isBeta
+{{#> table table--IsAnimateExpand=true table--id="table-animated-expandable" table--IsGrid=true table--modifier="pf-m-grid-lg" table--IsExpandable=true table--attribute='aria-label="Animated expandable table example"'}}
+  {{#> table-thead}}
+    {{#> table-tr table-tr--index="thead" table-tr--index="thead"}}
+      {{> table-cell-toggle table-tr--aria-controls="table-animated-expandable-content-1 table-animated-expandable-content-2 table-animated-expandable-content-3 table-animated-expandable-content-4"}}
+      {{> table-cell-check}}
+      {{#> table-th table-th--attribute='scope="col"' table-th--IsSortable=true table-th--modifier="pf-m-width-30" table-th--IsSelected="true" table-th--IsAsc="true"}}
+        Repositories
+      {{/table-th}}
+      {{#> table-th table-th--attribute='scope="col"' table-th--IsSortable=true}}
+        Branches
+      {{/table-th}}
+      {{#> table-th table-th--attribute='scope="col"' table-th--IsSortable=true}}
+        Pull requests
+      {{/table-th}}
+      {{> table-cell-empty table-cell--text='Links'}}
+      {{> table-cell-empty}}
+    {{/table-tr}}
+  {{/table-thead}}
+  {{#> table-tbody table-tr--index="1" table-tbody--modifier="pf-m-expanded"}}
+    {{#> table-tr table-tr--IsExpanded=true}}
+      {{> table-cell-toggle}}
+      {{> table-cell-check}}
+      {{> table--node}}
+      {{#> table-td table-td--data-label="Branches"}}
+        10
+      {{/table-td}}
+      {{#> table-td table-td--data-label="Pull requests"}}
+        25
+      {{/table-td}}
+      {{#> table-td table-td--data-label="Action"}}
+        <a href="#">Link 1</a>
+      {{/table-td}}
+      {{> table-cell-action}}
+    {{/table-tr}}
+    {{#> table-tr table-tr--IsExpandable=true table-tr--IsExpanded=true}}
+      {{> table-cell-empty}}
+      {{> table-cell-empty}}
+      {{#> table-td table-td--attribute=(concat 'colspan="4" id="' table--id '-content-' table-tr--index '"')}}
+        {{#> table-expandable-row-content}}
+          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.
+        {{/table-expandable-row-content}}
+      {{/table-td}}
+      {{> table-cell-empty}}
+    {{/table-tr}}
+  {{/table-tbody}}
+  {{#> table-tbody table-tr--index="2"}}
+    {{#> table-tr}}
+      {{> table-cell-toggle}}
+      {{> table-cell-check}}
+      {{> table--node}}
+      {{#> table-td table-td--data-label="Branches"}}
+        10
+      {{/table-td}}
+      {{#> table-td table-td--data-label="Pull requests"}}
+        25
+      {{/table-td}}
+      {{#> table-td table-td--data-label="Action"}}
+        <a href="#">Link 2</a>
+      {{/table-td}}
+      {{> table-cell-action}}
+    {{/table-tr}}
+    {{#> table-tr table-tr--IsExpandable=true}}
+      {{#> table-td table-td--attribute=(concat 'colspan="7" id="' table--id '-content-' table-tr--index '"')}}
+        {{#> table-expandable-row-content}}
+          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.
+        {{/table-expandable-row-content}}
+      {{/table-td}}
+    {{/table-tr}}
+  {{/table-tbody}}
+  {{#> table-tbody table-tr--index="3" table-tbody--modifier="pf-m-expanded"}}
+    {{#> table-tr table-tr--IsExpanded=true}}
+      {{> table-cell-toggle}}
+      {{> table-cell-check}}
+      {{> table--node}}
+      {{#> table-td table-td--data-label="Branches"}}
+        10
+      {{/table-td}}
+      {{#> table-td table-td--data-label="Pull requests"}}
+        25
+      {{/table-td}}
+      {{#> table-td table-td--data-label="Action"}}
+        <a href="#">Link 3</a>
+      {{/table-td}}
+      {{> table-cell-action}}
+    {{/table-tr}}
+    {{#> table-tr table-tr--IsExpandable=true table-tr--IsExpanded=true}}
+      {{#> table-td table-td--attribute=(concat 'colspan="7" id="' table--id '-content-' table-tr--index '"')}}
+        {{#> table-expandable-row-content}}
+          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.
+        {{/table-expandable-row-content}}
+      {{/table-td}}
+    {{/table-tr}}
+  {{/table-tbody}}
+  {{#> table-tbody table-tr--index="4" table-tbody--modifier="pf-m-expanded"}}
+    {{#> table-tr table-tr--IsExpanded=true}}
+      {{> table-cell-toggle}}
+      {{> table-cell-check}}
+      {{> table--node}}
+      {{#> table-td table-td--data-label="Branches"}}
+        10
+      {{/table-td}}
+      {{#> table-td table-td--data-label="Pull requests"}}
+        25
+      {{/table-td}}
+      {{#> table-td table-td--data-label="Action"}}
+        <a href="#">Link 4</a>
+      {{/table-td}}
+      {{> table-cell-action}}
+    {{/table-tr}}
+    {{#> table-tr table-tr--IsExpandable=true table-tr--IsExpanded=true}}
+      {{#> table-td table-td--modifier="pf-m-no-padding" table-td--attribute=(concat 'colspan="7" id="' table--id '-content-' table-tr--index '"')}}
+        {{#> table-expandable-row-content}}
+          Expandable row content has no padding.
+        {{/table-expandable-row-content}}
+      {{/table-td}}
+    {{/table-tr}}
+  {{/table-tbody}}
+{{/table}}
+```
+
 ### Expandable with set width columns example
 {{#> table table--id="expandable-set-width-columns-example" table--IsGrid=true table--modifier="pf-m-grid-lg" table--IsExpandable=true table--attribute='aria-label="Expandable table, set column widths example"'}}
   {{#> table-thead}}
     {{#> table-tr table-tr--index="thead"}}
-      {{> table-cell-toggle table-tr--IsExpanded=true}}
+      {{> table-cell-toggle table-tr--IsExpanded=true table-tr--aria-controls="expandable-set-width-columns-example-content-1 expandable-set-width-columns-example-content-2 expandable-set-width-columns-example-content-3 expandable-set-width-columns-example-content-4"}}
       {{> table-cell-check}}
       {{#> table-th table-th--attribute='scope="col"' table-th--modifier="pf-m-width-30" table-th--IsSortable=true table-th--IsSelected="true" table-th--IsAsc="true"}}
         Repositories
@@ -929,7 +1138,7 @@ Note: Table column widths will respond automatically when toggling expanded rows
 {{#> table table--id="table-expandable-nested-table" table--IsGrid=true table--modifier="pf-m-grid-lg" table--IsExpandable=true table--attribute='aria-label="Expandable with nested table example"'}}
   {{#> table-thead}}
     {{#> table-tr table-tr--index="thead"}}
-      {{> table-cell-toggle}}
+      {{> table-cell-toggle table-tr--aria-controls="table-expandable-nested-table-content-1 table-expandable-nested-table-content-2 table-expandable-nested-table-content-3 table-expandable-nested-table-content-4"}}
       {{> table-cell-check}}
       {{#> table-th table-th--attribute='scope="col"' table-th--IsSortable=true table-th--modifier="pf-m-width-30" table-th--IsSelected="true" table-th--IsAsc="true"}}
         Repositories
@@ -1165,6 +1374,7 @@ Note: To apply padding to `.pf-v6-c-table__expandable-row`, wrap the content in
 | `.pf-v6-c-table__toggle-icon` | `<span>` | Initiates the table toggle icon wrapper. |
 | `.pf-v6-c-table__expandable-row` | `<tr>` | Initiates an expandable row. |
 | `.pf-v6-c-table__expandable-row-content` | `.pf-v6-c-table__expandable-row` > `<td>` > `<div>` | Initiates an expandable row content wrapper. |
+| `.pf-m-animate-expand` | `.pf-v6-c-table` | Modifies the table to animate expansion. |
 | `.pf-m-expanded` | `.pf-v6-c-table__toggle` > `.pf-v6-c-button`, `.pf-v6-c-table__expandable-row` | Modifies for expanded state. |
 | `.pf-m-no-padding` | `.pf-v6-c-table__expandable-row` > `<td>` | Modifies the expandable row to have no padding. |
 
@@ -1222,19 +1432,25 @@ Note: To apply padding to `.pf-v6-c-table__expandable-row`, wrap the content in
 
     {{#> table-tr table-tr--IsExpandable=true table-tr--IsExpanded=true}}
       {{#> table-td table-td--attribute='colspan="7"' table-td--modifier="pf-m-no-padding"}}
-        {{> table-nested table-nested--id='nested-table-1'}}
+        {{#> table-expandable-row-content table-expandable-row-content--HasNoBackground=true}}
+          {{> table-nested table--id=(concat table--id '-nested-table-1')}}
+        {{/table-expandable-row-content}}
       {{/table-td}}
     {{/table-tr}}
 
     {{#> table-tr table-tr--IsExpandable=true}}
       {{#> table-td table-td--attribute='colspan="7"' table-td--modifier="pf-m-no-padding"}}
-        {{> table-nested table-nested--id='nested-table-2'}}
+        {{#> table-expandable-row-content table-expandable-row-content--HasNoBackground=true}}
+          {{> table-nested table--id=(concat table--id '-nested-table-2')}}
+        {{/table-expandable-row-content}}
       {{/table-td}}
     {{/table-tr}}
 
     {{#> table-tr table-tr--IsExpandable=true}}
       {{#> table-td table-td--attribute='colspan="7"' table-td--modifier="pf-m-no-padding"}}
-        {{> table-nested table-nested--id='nested-table-3'}}
+        {{#> table-expandable-row-content table-expandable-row-content--HasNoBackground=true}}
+          {{> table-nested table--id=(concat table--id '-nested-table-3')}}
+        {{/table-expandable-row-content}}
       {{/table-td}}
     {{/table-tr}}
   {{/table-tbody}}
@@ -1267,19 +1483,25 @@ Note: To apply padding to `.pf-v6-c-table__expandable-row`, wrap the content in
 
     {{#> table-tr table-tr--IsExpandable=true}}
       {{#> table-td table-td--attribute='colspan="7"' table-td--modifier="pf-m-no-padding"}}
-        {{> table-nested table-nested--id='nested-table-4'}}
+        {{#> table-expandable-row-content table-expandable-row-content--HasNoBackground=true}}
+          {{> table-nested table--id=(concat table--id '-nested-table-4')}}
+        {{/table-expandable-row-content}}
       {{/table-td}}
     {{/table-tr}}
 
     {{#> table-tr table-tr--IsExpandable=true}}
       {{#> table-td table-td--attribute='colspan="7"' table-td--modifier="pf-m-no-padding"}}
-        {{> table-nested table-nested--id='nested-table-5'}}
+        {{#> table-expandable-row-content table-expandable-row-content--HasNoBackground=true}}
+          {{> table-nested table--id=(concat table--id '-nested-table-5')}}
+        {{/table-expandable-row-content}}
       {{/table-td}}
     {{/table-tr}}
 
     {{#> table-tr table-tr--IsExpandable=true}}
       {{#> table-td table-td--attribute='colspan="7"' table-td--modifier="pf-m-no-padding"}}
-        {{> table-nested table-nested--id='nested-table-6'}}
+        {{#> table-expandable-row-content table-expandable-row-content--HasNoBackground=true}}
+          {{> table-nested table--id=(concat table--id '-nested-table-6')}}
+        {{/table-expandable-row-content}}
       {{/table-td}}
     {{/table-tr}}
   {{/table-tbody}}
@@ -1312,19 +1534,192 @@ Note: To apply padding to `.pf-v6-c-table__expandable-row`, wrap the content in
 
     {{#> table-tr table-tr--IsExpandable=true}}
       {{#> table-td table-td--attribute='colspan="7"' table-td--modifier="pf-m-no-padding"}}
-        {{> table-nested table-nested--id='nested-table-7'}}
+        {{#> table-expandable-row-content table-expandable-row-content--HasNoBackground=true}}
+          {{> table-nested table--id=(concat table--id '-nested-table-7')}}
+        {{/table-expandable-row-content}}
       {{/table-td}}
     {{/table-tr}}
 
     {{#> table-tr table-tr--IsExpandable=true}}
       {{#> table-td table-td--attribute='colspan="7"' table-td--modifier="pf-m-no-padding"}}
-        {{> table-nested table-nested--id='nested-table-8'}}
+        {{#> table-expandable-row-content table-expandable-row-content--HasNoBackground=true}}
+          {{> table-nested table--id=(concat table--id '-nested-table-8')}}
+        {{/table-expandable-row-content}}
       {{/table-td}}
     {{/table-tr}}
 
     {{#> table-tr table-tr--IsExpandable=true}}
       {{#> table-td table-td--attribute='colspan="7"' table-td--modifier="pf-m-no-padding"}}
-        {{> table-nested table-nested--id='nested-table-9'}}
+        {{#> table-expandable-row-content table-expandable-row-content--HasNoBackground=true}}
+          {{> table-nested table--id=(concat table--id '-nested-table-9')}}
+        {{/table-expandable-row-content}}
+      {{/table-td}}
+    {{/table-tr}}
+  {{/table-tbody}}
+{{/table}}
+```
+
+### Animated compound expansion example
+```hbs isBeta
+{{#> table table--IsAnimateExpand=true table--id="table-animate-compound-expansion" table--IsGrid=true table--modifier="pf-m-grid-md" table--IsExpandable=true table--attribute='aria-label="Animated compound expandable table example"'}}
+  {{#> table-thead}}
+    {{#> table-tr}}
+      {{#> table-th table-th--attribute='scope="col"' table-th--IsSortable=true table-th--IsSelected="true" table-th--IsAsc="true"}}
+        Repositories
+      {{/table-th}}
+      {{#> table-th table-th--attribute='scope="col"' table-th--IsSortable=true}}
+        Branches
+      {{/table-th}}
+      {{#> table-th table-th--attribute='scope="col"' table-th--IsSortable=true}}
+        Pull requests
+      {{/table-th}}
+      {{#> table-th table-th--attribute='scope="col"'}}
+       Workspaces
+      {{/table-th}}
+      {{#> table-th table-th--attribute='scope="col"'}}
+       Last commit
+      {{/table-th}}
+      {{> table-cell-empty table-cell--text='Links'}}
+      {{> table-cell-empty}}
+    {{/table-tr}}
+  {{/table-thead}}
+  {{#> table-tbody table-tbody--modifier="pf-m-expanded"}}
+    {{#> table-tr table-tr--IsControlRow="true" table-tr--IsExpanded=true}}
+      {{#> table-td table-td--IsCompoundExpansionToggle=true table-td--modifier="pf-m-expanded" table-td--data-label="Repositories" table-td--button--attribute=(concat 'aria-expanded="true" aria-controls="' table--id '-nested-table-1"')}}
+        <i class="fas fa-code-branch" aria-hidden="true"></i>&nbsp;10
+      {{/table-td}}
+      {{#> table-td table-td--IsCompoundExpansionToggle=true table-td--data-label="Branches" table-td--button--attribute=(concat 'aria-expanded="true" aria-controls="' table--id '-nested-table-2"')}}
+        <i class="fas fa-code" aria-hidden="true"></i>&nbsp;
+        234
+      {{/table-td}}
+      {{#> table-td table-td--IsCompoundExpansionToggle=true table-td--data-label="Pull requests" table-td--button--attribute=(concat 'aria-expanded="true" aria-controls="' table--id '-nested-table-3"')}}
+        <i class="fas fa-cube" aria-hidden="true"></i>&nbsp;
+        4
+      {{/table-td}}
+      {{#> table-th table-th--data-label="Workspaces"}}
+        <a href="#">siemur/test-space</a>
+      {{/table-th}}
+      {{#> table-td table-td--data-label="Last commit"}}
+        <span>20 minutes</span>
+      {{/table-td}}
+      {{#> table-td table-td--data-label="Action"}}
+        <a href="#">Open in Github</a>
+      {{/table-td}}
+      {{> table-cell-action}}
+    {{/table-tr}}
+    {{#> table-tr table-tr--IsExpandable=true table-tr--IsExpanded=true}}
+      {{#> table-td table-td--attribute='colspan="7"' table-td--modifier="pf-m-no-padding"}}
+        {{#> table-expandable-row-content table-expandable-row-content--HasNoBackground=true}}
+          {{> table-nested table--id=(concat table--id '-nested-table-1')}}
+        {{/table-expandable-row-content}}
+      {{/table-td}}
+    {{/table-tr}}
+    {{#> table-tr table-tr--IsExpandable=true}}
+      {{#> table-td table-td--attribute='colspan="7"' table-td--modifier="pf-m-no-padding"}}
+        {{#> table-expandable-row-content table-expandable-row-content--HasNoBackground=true}}
+          {{> table-nested table--id=(concat table--id '-nested-table-2')}}
+        {{/table-expandable-row-content}}
+      {{/table-td}}
+    {{/table-tr}}
+    {{#> table-tr table-tr--IsExpandable=true}}
+      {{#> table-td table-td--attribute='colspan="7"' table-td--modifier="pf-m-no-padding"}}
+        {{#> table-expandable-row-content table-expandable-row-content--HasNoBackground=true}}
+          {{> table-nested table--id=(concat table--id '-nested-table-3')}}
+        {{/table-expandable-row-content}}
+      {{/table-td}}
+    {{/table-tr}}
+  {{/table-tbody}}
+  {{#> table-tbody}}
+    {{#> table-tr table-tr--IsControlRow="true"}}
+      {{#> table-td table-td--IsCompoundExpansionToggle=true table-td--data-label="Repositories" table-td--button--attribute=(concat 'aria-expanded="true" aria-controls="' table--id '-nested-table-4"')}}
+        <i class="fas fa-code-branch" aria-hidden="true"></i>&nbsp;
+        2
+      {{/table-td}}
+      {{#> table-td table-td--IsCompoundExpansionToggle=true table-td--data-label="Branches" table-td--button--attribute=(concat 'aria-expanded="true" aria-controls="' table--id '-nested-table-5"')}}
+        <i class="fas fa-code" aria-hidden="true"></i>&nbsp;
+        82
+      {{/table-td}}
+      {{#> table-td table-td--IsCompoundExpansionToggle=true table-td--data-label="Pull requests" table-td--button--attribute=(concat 'aria-expanded="true" aria-controls="' table--id '-nested-table-6"')}}
+        <i class="fas fa-cube" aria-hidden="true"></i>&nbsp;
+        1
+      {{/table-td}}
+      {{#> table-th table-th--data-label="Workspaces"}}
+        <a href="#">siemur/test-space</a>
+      {{/table-th}}
+      {{#> table-td table-td--data-label="Last commit"}}
+        <span>1 day ago</span>
+      {{/table-td}}
+      {{#> table-td table-td--data-label="Action"}}
+        <a href="#">Open in Github</a>
+      {{/table-td}}
+      {{> table-cell-action}}
+    {{/table-tr}}
+    {{#> table-tr table-tr--IsExpandable=true}}
+      {{#> table-td table-td--attribute='colspan="7"' table-td--modifier="pf-m-no-padding"}}
+        {{#> table-expandable-row-content table-expandable-row-content--HasNoBackground=true}}
+          {{> table-nested table--id=(concat table--id '-nested-table-4')}}
+        {{/table-expandable-row-content}}
+      {{/table-td}}
+    {{/table-tr}}
+    {{#> table-tr table-tr--IsExpandable=true}}
+      {{#> table-td table-td--attribute='colspan="7"' table-td--modifier="pf-m-no-padding"}}
+        {{#> table-expandable-row-content table-expandable-row-content--HasNoBackground=true}}
+          {{> table-nested table--id=(concat table--id '-nested-table-5')}}
+        {{/table-expandable-row-content}}
+      {{/table-td}}
+    {{/table-tr}}
+    {{#> table-tr table-tr--IsExpandable=true}}
+      {{#> table-td table-td--attribute='colspan="7"' table-td--modifier="pf-m-no-padding"}}
+        {{#> table-expandable-row-content table-expandable-row-content--HasNoBackground=true}}
+          {{> table-nested table--id=(concat table--id '-nested-table-6')}}
+        {{/table-expandable-row-content}}
+      {{/table-td}}
+    {{/table-tr}}
+  {{/table-tbody}}
+  {{#> table-tbody}}
+    {{#> table-tr table-tr--IsControlRow="true"}}
+      {{#> table-td table-td--IsCompoundExpansionToggle=true table-td--data-label="Repositories" table-td--button--attribute=(concat 'aria-expanded="true" aria-controls="' table--id '-nested-table-7"')}}
+        <i class="fas fa-code-branch" aria-hidden="true"></i>&nbsp;
+        4
+      {{/table-td}}
+      {{#> table-td table-td--IsCompoundExpansionToggle=true table-td--data-label="Branches" table-td--button--attribute=(concat 'aria-expanded="true" aria-controls="' table--id '-nested-table-8"')}}
+        <i class="fas fa-code" aria-hidden="true"></i>&nbsp;
+        4
+      {{/table-td}}
+      {{#> table-td table-td--IsCompoundExpansionToggle=true table-td--data-label="Pull requests" table-td--button--attribute=(concat 'aria-expanded="true" aria-controls="' table--id '-nested-table-9"')}}
+        <i class="fas fa-cube" aria-hidden="true"></i>&nbsp;
+        1
+      {{/table-td}}
+      {{#> table-th table-th--data-label="Workspaces"}}
+        <a href="#">siemur/test-space</a>
+      {{/table-th}}
+      {{#> table-td table-td--data-label="Last commit"}}
+        <span>2 days ago</span>
+      {{/table-td}}
+      {{#> table-td table-td--data-label="Action"}}
+        <a href="#">Open in Github</a>
+      {{/table-td}}
+      {{> table-cell-action}}
+    {{/table-tr}}
+    {{#> table-tr table-tr--IsExpandable=true}}
+      {{#> table-td table-td--attribute='colspan="7"' table-td--modifier="pf-m-no-padding"}}
+        {{#> table-expandable-row-content table-expandable-row-content--HasNoBackground=true}}
+          {{> table-nested table--id=(concat table--id '-nested-table-7')}}
+        {{/table-expandable-row-content}}
+      {{/table-td}}
+    {{/table-tr}}
+    {{#> table-tr table-tr--IsExpandable=true}}
+      {{#> table-td table-td--attribute='colspan="7"' table-td--modifier="pf-m-no-padding"}}
+        {{#> table-expandable-row-content table-expandable-row-content--HasNoBackground=true}}
+          {{> table-nested table--id=(concat table--id '-nested-table-8')}}
+        {{/table-expandable-row-content}}
+      {{/table-td}}
+    {{/table-tr}}
+    {{#> table-tr table-tr--IsExpandable=true}}
+      {{#> table-td table-td--attribute='colspan="7"' table-td--modifier="pf-m-no-padding"}}
+        {{#> table-expandable-row-content table-expandable-row-content--HasNoBackground=true}}
+          {{> table-nested table--id=(concat table--id '-nested-table-9')}}
+        {{/table-expandable-row-content}}
       {{/table-td}}
     {{/table-tr}}
   {{/table-tbody}}
@@ -1346,6 +1741,10 @@ Note: To apply padding to `.pf-v6-c-table__expandable-row`, wrap the content in
 | `.pf-v6-c-table__control-row` | `.pf-v6-c-table__expandable > <tr>` | Modifies a compound expandable table control row. |
 | `.pf-m-expanded` | `<tbody>`, `.pf-v6-c-table__compound-expansion-toggle` > `.pf-v6-c-button` | Modifies a tbody with a row and an expandable row. |
 | `.pf-v6-c-table__compound-expansion-toggle` | `<td>` | Modifies a `<td>` on active/focus. |
+| `.pf-m-animate-expand` | `.pf-v6-c-table` | Modifies the table to animate expansion. |
+| `.pf-m-expanded` | `.pf-v6-c-table__tbody`, `.pf-v6-c-table__control-row`, `.pf-v6-c-table__compound-expansion-toggle` | Modifies a `<tbody>`, control row, and item in a control row for the expanded state. |
+| `.pf-m-no-background` | `.pf-v6-c-table__expandable-row-content` | Modifies the expandable row content to have a transparent background. For in compound expandable when the parent expandable row has no padding with `.pf-m-no-padding`. |
+| `.pf-m-no-animate-expand` | `.pf-v6-c-table__control-row.pf-m-expanded` | Disables animation on a compound expandable row. **Note:** Used to disable the animation when clicking between compound expandable items. |
 
 ## Compact variant
 
@@ -1483,7 +1882,7 @@ Note: To apply padding to `.pf-v6-c-table__expandable-row`, wrap the content in
 {{#> table table--id="table-compact-expandable" table--IsGrid=true table--IsCompact=true table--modifier="pf-m-grid-md" table--IsExpandable=true table--attribute='aria-label="Compact expandable table example"'}}
   {{#> table-thead}}
     {{#> table-tr table-tr--index="thead"}}
-      {{> table-cell-toggle}}
+      {{> table-cell-toggle table-tr--aria-controls="table-compact-expandable-content-1 table-compact-expandable-content-2 table-compact-expandable-content-3 table-compact-expandable-content-4"}}
       {{> table-cell-check}}
       {{#> table-th table-th--attribute='scope="col"' table-th--modifier="pf-m-width-30"}}
         Repositories
@@ -1520,9 +1919,9 @@ Note: To apply padding to `.pf-v6-c-table__expandable-row`, wrap the content in
       {{> table-cell-empty}}
       {{> table-cell-empty}}
       {{#> table-td table-td--attribute=(concat 'colspan="4" id="' table--id '-content-' table-tr--index '"')}}
-        <div class="pf-v6-c-table__expandable-row-content">
+        {{#> table-expandable-row-content}}
           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>
+        {{/table-expandable-row-content}}
       {{/table-td}}
       {{> table-cell-empty}}
     {{/table-tr}}
@@ -2329,22 +2728,25 @@ Note: To apply padding to `.pf-v6-c-table__expandable-row`, wrap the content in
 
     {{#> table-tr table-tr--IsExpandable=true}}
       {{#> table-td table-td--attribute='colspan="7"' table-td--modifier="pf-m-no-padding"}}
-        {{#> table-nested table--id=(concat table--id '-nested-table-1')}}
-        {{/table-nested}}
+        {{#> table-expandable-row-content table-expandable-row-content--HasNoBackground=true}}
+          {{> table-nested table--id=(concat table--id '-nested-table-1')}}
+        {{/table-expandable-row-content}}
       {{/table-td}}
     {{/table-tr}}
 
     {{#> table-tr table-tr--IsExpandable=true}}
       {{#> table-td table-td--attribute='colspan="7"' table-td--modifier="pf-m-no-padding"}}
-        {{#> table-nested table--id=(concat table--id '-nested-table-2')}}
-        {{/table-nested}}
+        {{#> table-expandable-row-content table-expandable-row-content--HasNoBackground=true}}
+          {{> table-nested table--id=(concat table--id '-nested-table-2')}}
+        {{/table-expandable-row-content}}
       {{/table-td}}
     {{/table-tr}}
 
     {{#> table-tr table-tr--IsExpandable=true}}
       {{#> table-td table-td--attribute='colspan="7"' table-td--modifier="pf-m-no-padding"}}
-        {{#> table-nested table--id=(concat table--id '-nested-table-3')}}
-        {{/table-nested}}
+        {{#> table-expandable-row-content table-expandable-row-content--HasNoBackground=true}}
+          {{> table-nested table--id=(concat table--id '-nested-table-3')}}
+        {{/table-expandable-row-content}}
       {{/table-td}}
     {{/table-tr}}
 
@@ -2374,22 +2776,25 @@ Note: To apply padding to `.pf-v6-c-table__expandable-row`, wrap the content in
 
     {{#> table-tr table-tr--IsExpandable=true}}
       {{#> table-td table-td--attribute='colspan="7"' table-td--modifier="pf-m-no-padding"}}
-        {{#> table-nested table--id=(concat table--id '-nested-table-4')}}
-        {{/table-nested}}
+        {{#> table-expandable-row-content table-expandable-row-content--HasNoBackground=true}}
+          {{> table-nested table--id=(concat table--id '-nested-table-4')}}
+        {{/table-expandable-row-content}}
       {{/table-td}}
     {{/table-tr}}
 
     {{#> table-tr table-tr--IsExpandable=true}}
       {{#> table-td table-td--attribute='colspan="7"' table-td--modifier="pf-m-no-padding"}}
-        {{#> table-nested table--id=(concat table--id '-nested-table-5')}}
-        {{/table-nested}}
+        {{#> table-expandable-row-content table-expandable-row-content--HasNoBackground=true}}
+          {{> table-nested table--id=(concat table--id '-nested-table-5')}}
+        {{/table-expandable-row-content}}
       {{/table-td}}
     {{/table-tr}}
 
     {{#> table-tr table-tr--IsExpandable=true}}
       {{#> table-td table-td--attribute='colspan="7"' table-td--modifier="pf-m-no-padding"}}
-        {{#> table-nested table--id=(concat table--id '-nested-table-6')}}
-        {{/table-nested}}
+        {{#> table-expandable-row-content table-expandable-row-content--HasNoBackground=true}}
+          {{> table-nested table--id=(concat table--id '-nested-table-6')}}
+        {{/table-expandable-row-content}}
       {{/table-td}}
     {{/table-tr}}
   {{/table-tbody}}
@@ -2422,22 +2827,25 @@ Note: To apply padding to `.pf-v6-c-table__expandable-row`, wrap the content in
 
     {{#> table-tr table-tr--IsExpandable=true table-tr--IsExpanded=true}}
       {{#> table-td table-td--attribute='colspan="7"' table-td--modifier="pf-m-no-padding"}}
-        {{#> table-nested table--id=(concat table--id '-nested-table-7')}}
-        {{/table-nested}}
+        {{#> table-expandable-row-content table-expandable-row-content--HasNoBackground=true}}
+          {{> table-nested table--id=(concat table--id '-nested-table-7')}}
+        {{/table-expandable-row-content}}
       {{/table-td}}
     {{/table-tr}}
 
     {{#> table-tr table-tr--IsExpandable=true}}
       {{#> table-td table-td--attribute='colspan="7"' table-td--modifier="pf-m-no-padding"}}
-        {{#> table-nested table--id=(concat table--id '-nested-table-8')}}
-        {{/table-nested}}
+        {{#> table-expandable-row-content table-expandable-row-content--HasNoBackground=true}}
+          {{> table-nested table--id=(concat table--id '-nested-table-8')}}
+        {{/table-expandable-row-content}}
       {{/table-td}}
     {{/table-tr}}
 
     {{#> table-tr table-tr--IsExpandable=true}}
       {{#> table-td table-td--attribute='colspan="7"' table-td--modifier="pf-m-no-padding"}}
-        {{#> table-nested table--id=(concat table--id '-nested-table-9')}}
-        {{/table-nested}}
+        {{#> table-expandable-row-content table-expandable-row-content--HasNoBackground=true}}
+          {{> table-nested table--id=(concat table--id '-nested-table-9')}}
+        {{/table-expandable-row-content}}
       {{/table-td}}
     {{/table-tr}}
   {{/table-tbody}}
@@ -2470,22 +2878,25 @@ Note: To apply padding to `.pf-v6-c-table__expandable-row`, wrap the content in
 
     {{#> table-tr table-tr--IsExpandable=true}}
       {{#> table-td table-td--attribute='colspan="7"' table-td--modifier="pf-m-no-padding"}}
-        {{#> table-nested table--id=(concat table--id '-nested-table-10')}}
-        {{/table-nested}}
+        {{#> table-expandable-row-content table-expandable-row-content--HasNoBackground=true}}
+          {{> table-nested table--id=(concat table--id '-nested-table-10')}}
+        {{/table-expandable-row-content}}
       {{/table-td}}
     {{/table-tr}}
 
     {{#> table-tr table-tr--IsExpandable=true}}
       {{#> table-td table-td--attribute='colspan="7"' table-td--modifier="pf-m-no-padding"}}
-        {{#> table-nested table--id=(concat table--id '-nested-table-11')}}
-        {{/table-nested}}
+        {{#> table-expandable-row-content table-expandable-row-content--HasNoBackground=true}}
+          {{> table-nested table--id=(concat table--id '-nested-table-11')}}
+        {{/table-expandable-row-content}}
       {{/table-td}}
     {{/table-tr}}
 
     {{#> table-tr table-tr--IsExpandable=true}}
       {{#> table-td table-td--attribute='colspan="7"' table-td--modifier="pf-m-no-padding"}}
-        {{#> table-nested table--id=(concat table--id '-nested-table-12')}}
-        {{/table-nested}}
+        {{#> table-expandable-row-content table-expandable-row-content--HasNoBackground=true}}
+          {{> table-nested table--id=(concat table--id '-nested-table-12')}}
+        {{/table-expandable-row-content}}
       {{/table-td}}
     {{/table-tr}}
   {{/table-tbody}}
diff --git a/src/patternfly/components/Table/table-column-help-action.hbs b/src/patternfly/components/Table/table-column-help-action.hbs
index cddc6d32a..08e355bfe 100644
--- a/src/patternfly/components/Table/table-column-help-action.hbs
+++ b/src/patternfly/components/Table/table-column-help-action.hbs
@@ -2,5 +2,5 @@
   {{#if table-column-help-action--attribute}}
     {{{table-column-help-action--attribute}}}
   {{/if}}>
-  {{> button button--IsPlain=true button--IsIcon=true button--icon="question-circle" button--HasNoPadding=true button--aria-label='aria-label="More info"'}}
+  {{> button button--IsPlain=true button--IsIcon=true button--icon-template="icon-help" button--HasNoPadding=true button--aria-label='aria-label="More info"'}}
 </span>
diff --git a/src/patternfly/components/Table/table-expandable-row-content.hbs b/src/patternfly/components/Table/table-expandable-row-content.hbs
index 073e28216..fb92353e9 100644
--- a/src/patternfly/components/Table/table-expandable-row-content.hbs
+++ b/src/patternfly/components/Table/table-expandable-row-content.hbs
@@ -1,4 +1,8 @@
-<div class="{{pfv}}table__expandable-row-content{{#if table-expandable-row-content--modifier}} {{table-expandable-row-content--modifier}}{{/if}}"
+<div class="{{pfv}}table__expandable-row-content
+  {{setModifiers
+    table-expandable-row-content--HasNoBackground="pf-m-no-background"
+    table-expandable-row-content--modifier=table-expandable-row-content--modifier
+  }}"
   {{#if table-expandable-row-content--attribute}}
     {{{table-expandable-row-content--attribute}}}
   {{/if}}>
diff --git a/src/patternfly/components/Table/table-grid.scss b/src/patternfly/components/Table/table-grid.scss
index b7a81298a..18f84b1f8 100644
--- a/src/patternfly/components/Table/table-grid.scss
+++ b/src/patternfly/components/Table/table-grid.scss
@@ -94,6 +94,7 @@
   --#{$table}--cell--first-child--responsive--PaddingBlockStart: var(--pf-t--global--spacer--sm);
   --#{$table}--cell--responsive--PaddingInlineEnd: 0;
   --#{$table}--cell--responsive--PaddingInlineStart: 0;
+  --#{$table}--cell--responsive--th--FontWeight: var(--pf-t--global--font--weight--body--bold);
 
   // * Table grid compact table
   --#{$table}--m-compact__tr--responsive--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -132,6 +133,8 @@
 
 // - Table mobile layout
 @include pf-mobile-layout {
+  $pf-mobile-parent: &;
+
   --#{$table}--cell--PaddingBlockStart: var(--#{$table}--m-grid--cell--PaddingBlockStart);
   --#{$table}--cell--PaddingInlineEnd: var(--#{$table}--m-grid--cell--PaddingInlineEnd);
   --#{$table}--cell--PaddingBlockEnd: var(--#{$table}--m-grid--cell--PaddingBlockEnd);
@@ -182,6 +185,20 @@
     }
   }
 
+  &.pf-m-animate-expand {
+    --#{$table}__expandable-row--Display: block;
+
+    > .#{$table}__tbody > .#{$table}__expandable-row {
+      &:not(.pf-m-expanded) {
+        > :is(.#{$table}__td, .#{$table}__th) {
+          &[data-label]::before {
+            content: none; // hides column header for non-expanded rows
+          }
+        }
+      }
+    }
+  }
+
   // Remove border on tr inside non-expanded tbody in of expandable tables
   &.pf-m-expandable {
     --#{$table}__tr--BorderBlockEndWidth: 0; // nested table rows have no border
@@ -265,6 +282,10 @@
     grid-template-columns: 1fr minmax(0, 1.5fr);
     align-items: start;
 
+    &.pf-m-action {
+      align-items: center;
+    }
+
     // set contents of td to start at column two of td grid
     > * {
       grid-column: 2;
@@ -272,7 +293,7 @@
 
     &::before {
       position: revert;
-      font-weight: bold;
+      font-weight: var(--#{$table}--cell--responsive--th--FontWeight);
       text-align: start;
       content: attr(data-label);
     }
diff --git a/src/patternfly/components/Table/table.hbs b/src/patternfly/components/Table/table.hbs
index b3ec51ce0..d11a21360 100644
--- a/src/patternfly/components/Table/table.hbs
+++ b/src/patternfly/components/Table/table.hbs
@@ -1,10 +1,13 @@
 <table class="{{pfv}}table
-  {{#if table--IsExpandable}} pf-m-expandable{{/if}}
-  {{#if table--IsTree-view}} pf-m-tree-view{{/if}}
-  {{#if tree-view--HasCheckboxes}} pf-m-tree-view-checkboxes{{/if}}
-  {{#if table--HasNoPosinset}} pf-m-no-inset{{/if}}
-  {{#if table--IsCompact}} pf-m-compact{{/if}}
-  {{#if table--modifier}} {{table--modifier}}{{/if}}"
+  {{setModifiers
+    table--IsExpandable='pf-m-expandable'
+    table--IsTree-view='pf-m-tree-view'
+    tree-view--HasCheckboxes='pf-m-tree-view-checkboxes'
+    table--HasNoPosinset='pf-m-no-inset'
+    table--IsCompact='pf-m-compact'
+    table--IsAnimateExpand='pf-m-animate-expand'
+    table--modifier=table--modifier
+  }}"
   {{#if table--IsGrid}}
     role="grid"
   {{/if}}
diff --git a/src/patternfly/components/Table/table.scss b/src/patternfly/components/Table/table.scss
index 03ced8687..065e1108b 100644
--- a/src/patternfly/components/Table/table.scss
+++ b/src/patternfly/components/Table/table.scss
@@ -118,6 +118,23 @@
   --#{$table}__action--PaddingInlineStart: var(--pf-t--global--spacer--sm);
   --#{$table}__action--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
 
+  // * Table expandable row
+  --#{$table}__expandable-row--TransitionDuration--expand--slide: 0s;
+  --#{$table}__expandable-row--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
+  --#{$table}__expandable-row--TransitionDuration--collapse--slide: 0s;
+  --#{$table}__expandable-row--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
+  --#{$table}__expandable-row--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
+  --#{$table}__expandable-row--Opacity: 0;
+  --#{$table}__tbody--m-expanded__expandable-row--Opacity: 1;
+  --#{$table}__expandable-row--TranslateY: 0;
+  --#{$table}__tbody--m-expanded__expandable-row--TranslateY: 0;
+
+  @media screen and (prefers-reduced-motion: no-preference) {
+    --#{$table}__expandable-row--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
+    --#{$table}__expandable-row--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
+    --#{$table}__expandable-row--TranslateY: -.5rem;
+  }
+
   // * Table expandable row content
   --#{$table}__expandable-row-content--PaddingBlockStart: var(--pf-t--global--spacer--md);
   --#{$table}__expandable-row-content--PaddingBlockEnd: var(--pf-t--global--spacer--md);
@@ -179,6 +196,14 @@
   --#{$table}--m-compact--cell--PaddingBlockStart: var(--pf-t--global--spacer--sm);
   --#{$table}--m-compact--cell--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
 
+  // * Table cell with button
+  --#{$table}__td--m-action--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+  --#{$table}__td--m-action--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+
+  // * Table compact cell with button
+  --#{$table}--m-compact__td--m-action--PaddingBlockStart: var(--pf-t--global--spacer--xs);
+  --#{$table}--m-compact__td--m-action--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
+
   // * Table compact action
   --#{$table}--m-compact__action--PaddingBlockStart: var(--pf-t--global--spacer--xs);
   --#{$table}--m-compact__action--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
@@ -461,6 +486,11 @@
   //   }
   // }
 
+  .#{$table}__td.pf-m-action {
+    --pf-v6-c-table--cell--PaddingBlockStart: var(--#{$table}__td--m-action--PaddingBlockStart);
+    --pf-v6-c-table--cell--PaddingBlockEnd: var(--#{$table}__td--m-action--PaddingBlockEnd);
+  }
+
   // - Table sort
   // set property here to increase specificity
   .#{$table}__sort {
@@ -562,6 +592,86 @@
   .#{$button} .#{$table}__sort-indicator {
     --#{$table}__sort-indicator--MarginInlineStart: 0;
   }
+
+  // stylelint-disable max-nesting-depth, selector-max-class
+  &.pf-m-animate-expand {
+    > .#{$table}__tbody {
+      &.pf-m-expanded {
+        > .#{$table}__control-row {
+          border-block-end: 0;
+        }
+      }
+
+      > .#{$table}__expandable-row {
+        display: var(--#{$table}__expandable-row--Display, revert);
+        visibility: hidden;
+        opacity: var(--#{$table}__expandable-row--Opacity);
+        transition-delay: 0s, 0s, var(--#{$table}__expandable-row--TransitionDuration--collapse--fade), var(--#{$table}__expandable-row--TransitionDuration--collapse--fade);
+        transition-timing-function: var(--#{$table}__expandable-row--TransitionTimingFunction);
+        transition-duration: var(--#{$table}__expandable-row--TransitionDuration--collapse--fade), var(--#{$table}__expandable-row--TransitionDuration--collapse--slide), 0s, 0s;
+        transition-property: opacity, translate, visibility, background-color;
+        translate: 0 var(--#{$table}__expandable-row--TranslateY);
+
+        &[hidden] {
+          display: var(--#{$table}__expandable-row--Display, revert);
+        }
+
+        &.pf-m-expanded {
+          visibility: visible;
+          opacity: var(--#{$table}__tbody--m-expanded__expandable-row--Opacity);
+          transition-delay: 0s;
+          transition-duration: var(--#{$table}__expandable-row--TransitionDuration--expand--fade), var(--#{$table}__expandable-row--TransitionDuration--expand--slide), 0s, 0s;
+          translate: 0 var(--#{$table}__tbody--m-expanded__expandable-row--TranslateY);
+
+          > :is(.#{$table}__td, .#{$table}__th) {
+            > .#{$table}__expandable-row-content {
+              max-height: 99999px;
+            }
+          }
+        }
+
+        &:not(.pf-m-expanded) {
+          > :is(.#{$table}__td, .#{$table}__th) {
+            &,
+            > .#{$table}__expandable-row-content {
+              padding: 0;
+              overflow: hidden;
+              transition-delay: var(--#{$table}__expandable-row--TransitionDuration--collapse--fade);
+              transition-property: padding, max-height, overflow;
+            }
+
+            > .#{$table}__expandable-row-content {
+              max-height: 0;
+            }
+          }
+        }
+
+        // Remove top padding from regular expandable
+        // > :is(.#{$table}__th, .#{$table}__td) {
+        //   padding-block-start: 0;
+        // }
+      }
+
+      // Add padding back to compound expandable
+      > .#{$table}__control-row ~ .#{$table}__expandable-row.pf-m-expanded {
+        > :is(.#{$table}__th, .#{$table}__td):not(.pf-m-no-padding) {
+          padding-block-start: var(--#{$table}--cell--PaddingBlockStart);
+        }
+      }
+
+      > .#{$table}__tr:has(~ .#{$table}__expandable-row) {
+        border-block-end: 0;
+      }
+
+      > .#{$table}__control-row.pf-m-no-animate-expand ~ .#{$table}__expandable-row {
+        --#{$table}__expandable-row--TransitionDuration--collapse--fade: 0s;
+        --#{$table}__expandable-row--TransitionDuration--collapse--slide: 0s;
+        --#{$table}__expandable-row--TransitionDuration--expand--fade: 0s;
+        --#{$table}__expandable-row--TransitionDuration--expand--slide: 0s;
+      }
+    }
+  }
+  // stylelint-enable
 }
 
 // - Table truncate - Table wrap - Table nowrap - Table fit content - Table wrap - Table break word
@@ -971,6 +1081,7 @@
 
       .#{$table}__expandable-row-content {
         padding: 0;
+        border-radius: 0;
       }
     }
   }
@@ -983,6 +1094,10 @@
     padding-inline-end: var(--#{$table}__expandable-row-content--PaddingInlineEnd);
     background-color: var(--#{$table}__expandable-row-content--BackgroundColor);
     border-radius: var(--#{$table}__expandable-row-content--BorderRadius);
+
+    &.pf-m-no-background {
+      background-color: transparent;
+    }
   }
 
   // - Table expandable row content expanded
@@ -1031,6 +1146,11 @@
     --#{$table}--cell--PaddingBlockEnd: var(--#{$table}--m-compact__action--PaddingBlockEnd);
   }
 
+  .#{$table}__td.pf-m-action {
+    --pf-v6-c-table--cell--PaddingBlockStart: var(--#{$table}--m-compact__td--m-action--PaddingBlockStart);
+    --pf-v6-c-table--cell--PaddingBlockEnd: var(--#{$table}--m-compact__td--m-action--PaddingBlockEnd);
+  }
+
   .#{$table}__icon {
     width: auto;
     min-width: 0;
@@ -1086,6 +1206,12 @@
     .#{$table}__control-row {
       background-color: var(--#{$table}__control-row--BackgroundColor);
       border-block-end: var(--#{$table}__control-row--BorderBlockEndWidth) solid var(--#{$table}__control-row__tbody--BorderBlockEndColor);
+
+      // stylelint-disable max-nesting-depth, selector-max-class
+      &.pf-m-expanded {
+        border-block-end: 0; // TODO this is a dupe of the block above, consolidate in a breaking change
+      }
+      // stylelint-enable
     }
   }
 }

kmcfaul

LGTM 🚀

kmcfaul · 2025-07-17T14:48:40Z

src/patternfly/components/Table/table.scss

+        // Remove top padding from regular expandable
+        // > :is(.#{$table}__th, .#{$table}__td) {
+        //   padding-block-start: 0;
+        // }


This block looks like it can be removed, but not a blocker

thatblindgeye

Post-merge LGTM

patternfly-build · 2025-07-17T15:02:17Z

🎉 This PR is included in version 6.3.0-prerelease.39 🎉

The release is available on:

Your semantic-release bot 📦🚀

mcoker added 5 commits July 15, 2025 14:32

Revert "fix(table): fixed expandable table styles (patternfly#7654)"

a9ad543

This reverts commit d21e7a3.

Revert "fix(table): fix comp exp jump, background fade on collapse (p…

3d2f5c5

…atternfly#7578)" This reverts commit 0d556bd.

Revert "fix(table): updated expandable to animate visibility (pattern…

2749fb3

…fly#7537)" This reverts commit a8e2447.

Revert "fix(table): animate expandable (patternfly#7497)"

ca36e40

This reverts commit cf30724.

fix(table): fix animation style conflicts

7ff04a9

mcoker requested review from kmcfaul and thatblindgeye July 16, 2025 15:32

mcoker marked this pull request as ready for review July 16, 2025 15:45

mcoker added 3 commits July 16, 2025 12:13

chore(table): mark animated examples as beta

e857da3

fix(table): remove nth-child expandable row styles

d8e96dc

chore(table): remove unnecessary styles

5db2277

kmcfaul approved these changes Jul 17, 2025

View reviewed changes

kmcfaul reviewed Jul 17, 2025

View reviewed changes

chore(table): remove comment

0fefb34

mcoker merged commit 6e6d120 into patternfly:main Jul 17, 2025
4 checks passed

mcoker deleted the limit-table-animations branch July 17, 2025 14:53

thatblindgeye reviewed Jul 17, 2025

View reviewed changes

patternfly-build added the released on @prerelease label Jul 17, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(table): fix animation style conflicts#7663

fix(table): fix animation style conflicts#7663
mcoker merged 9 commits intopatternfly:mainfrom
mcoker:limit-table-animations

mcoker commented Jul 16, 2025 •

edited

Loading

Uh oh!

patternfly-build commented Jul 16, 2025 •

edited

Loading

Uh oh!

mcoker commented Jul 16, 2025 •

edited

Loading

Uh oh!

kmcfaul left a comment

Uh oh!

kmcfaul Jul 17, 2025

Uh oh!

Uh oh!

thatblindgeye left a comment

Uh oh!

patternfly-build commented Jul 17, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

mcoker commented Jul 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

patternfly-build commented Jul 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mcoker commented Jul 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

kmcfaul left a comment

Choose a reason for hiding this comment

Uh oh!

kmcfaul Jul 17, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

thatblindgeye left a comment

Choose a reason for hiding this comment

Uh oh!

patternfly-build commented Jul 17, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

mcoker commented Jul 16, 2025 •

edited

Loading

patternfly-build commented Jul 16, 2025 •

edited

Loading

mcoker commented Jul 16, 2025 •

edited

Loading