diff --git a/src/patternfly/components/Table/examples/Table.css b/src/patternfly/components/Table/examples/Table.css
index 9a7bbe2e2f..0a9a3a8c21 100644
--- a/src/patternfly/components/Table/examples/Table.css
+++ b/src/patternfly/components/Table/examples/Table.css
@@ -13,15 +13,11 @@
#ws-core-c-table-nested-column-headers-sticky-header .ws-preview-html,
#ws-core-c-table-sticky-header .ws-preview-html,
#ws-core-c-table-sticky-footer .ws-preview-html,
-#ws-core-c-table-sticky-header-with-base-and-stuck .ws-preview-html {
+#ws-core-c-table-sticky-header-with-base-and-stuck .ws-preview-html,
+#ws-core-c-table-sticky-footer-with-base-and-stuck .ws-preview-html {
height: 400px;
}
-#ws-core-c-table-sticky-header .ws-preview-html,
-#ws-core-c-table-sticky-footer .ws-preview-html {
- overflow: auto;
-}
-
.pf-v6-c-overflow-menu .pf-v6-c-menu {
position: absolute;
inset-inline-end: 0;
diff --git a/src/patternfly/components/Table/examples/Table.md b/src/patternfly/components/Table/examples/Table.md
index 5dec69c972..725b666066 100644
--- a/src/patternfly/components/Table/examples/Table.md
+++ b/src/patternfly/components/Table/examples/Table.md
@@ -3785,6 +3785,7 @@ This example shows the use of `.pf-m-sticky-header-base` and `.pf-m-sticky-heade
### Sticky footer
```hbs
+
{{#> table table--id="table-sticky-footer" table--IsGrid=true table--modifier="pf-m-grid-md" table--HasStickyFooter=true table--attribute='aria-label="This is a table with a sticky footer"'}}
{{#> table-thead}}
{{#> table-tr}}
@@ -3963,25 +3964,193 @@ This example shows the use of `.pf-m-sticky-header-base` and `.pf-m-sticky-heade
{{/table-tr}}
{{/table-tfoot}}
{{/table}}
+
```
### Sticky footer with base and stuck
-This example uses `.pf-m-sticky-footer-base` for sticky positioning without sticky styling. Apply `.pf-m-sticky-footer-stuck` dynamically while the footer is stuck and floating above the table content, and remove it when the footer reaches the bottom of the table so it returns to a normal row.
+This example uses `.pf-m-sticky-footer-base` and `.pf-m-sticky-footer-stuck` for sticky positioning. Apply `.pf-m-sticky-footer-stuck` dynamically while the footer is stuck and floating above the table content, and remove it when the footer reaches the bottom of the table so it returns to a normal row.
```hbs
+
{{#> table table--IsGrid=true table--modifier="pf-m-grid-md" table--HasStickyFooterBase=true table--HasStickyFooterStuck=true table--attribute='aria-label="This is a table with a sticky footer using base and stuck"'}}
+ {{#> table-thead}}
+ {{#> table-tr}}
+ {{#> table-th table-th--attribute='scope="col"'}}
+ Repositories
+ {{/table-th}}
+ {{#> table-th table-th--attribute='scope="col"'}}
+ Branches
+ {{/table-th}}
+ {{#> table-th table-th--attribute='scope="col"'}}
+ 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-tr}}
+ {{/table-thead}}
+
{{#> table-tbody}}
{{#> table-tr}}
- {{#> table-td}}Table content{{/table-td}}
+ {{#> table-td table-td--data-label="Repository name"}}
+ Repository 1
+ {{/table-td}}
+ {{#> 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="Workspaces"}}
+ 5
+ {{/table-td}}
+ {{#> table-td table-td--data-label="Last commit"}}
+ 2 days ago
+ {{/table-td}}
+ {{/table-tr}}
+
+ {{#> table-tr}}
+ {{#> table-td table-td--data-label="Repository name"}}
+ Repository 2
+ {{/table-td}}
+ {{#> 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="Workspaces"}}
+ 5
+ {{/table-td}}
+ {{#> table-td table-td--data-label="Last commit"}}
+ 2 days ago
+ {{/table-td}}
+ {{/table-tr}}
+
+ {{#> table-tr}}
+ {{#> table-td table-td--data-label="Repository name"}}
+ Repository 3
+ {{/table-td}}
+ {{#> 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="Workspaces"}}
+ 5
+ {{/table-td}}
+ {{#> table-td table-td--data-label="Last commit"}}
+ 2 days ago
+ {{/table-td}}
+ {{/table-tr}}
+
+ {{#> table-tr}}
+ {{#> table-td table-td--data-label="Repository name"}}
+ Repository 4
+ {{/table-td}}
+ {{#> 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="Workspaces"}}
+ 5
+ {{/table-td}}
+ {{#> table-td table-td--data-label="Last commit"}}
+ 2 days ago
+ {{/table-td}}
+ {{/table-tr}}
+
+ {{#> table-tr}}
+ {{#> table-td table-td--data-label="Repository name"}}
+ Repository 5
+ {{/table-td}}
+ {{#> 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="Workspaces"}}
+ 5
+ {{/table-td}}
+ {{#> table-td table-td--data-label="Last commit"}}
+ 2 days ago
+ {{/table-td}}
+ {{/table-tr}}
+
+ {{#> table-tr}}
+ {{#> table-td table-td--data-label="Repository name"}}
+ Repository 6
+ {{/table-td}}
+ {{#> 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="Workspaces"}}
+ 5
+ {{/table-td}}
+ {{#> table-td table-td--data-label="Last commit"}}
+ 2 days ago
+ {{/table-td}}
+ {{/table-tr}}
+
+ {{#> table-tr}}
+ {{#> table-td table-td--data-label="Repository name"}}
+ Repository 7
+ {{/table-td}}
+ {{#> 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="Workspaces"}}
+ 5
+ {{/table-td}}
+ {{#> table-td table-td--data-label="Last commit"}}
+ 2 days ago
+ {{/table-td}}
+ {{/table-tr}}
+
+ {{#> table-tr}}
+ {{#> table-td table-td--data-label="Repository name"}}
+ Repository 8
+ {{/table-td}}
+ {{#> 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="Workspaces"}}
+ 5
+ {{/table-td}}
+ {{#> table-td table-td--data-label="Last commit"}}
+ 2 days ago
+ {{/table-td}}
{{/table-tr}}
{{/table-tbody}}
{{#> table-tfoot}}
{{#> table-tr}}
- {{#> table-th table-th--attribute='scope="row"'}}Total{{/table-th}}
+ {{#> table-th table-th--attribute='scope="row"'}}
+ Total
+ {{/table-th}}
+ {{#> table-td table-td--attribute='colspan="4"'}}
+ 4
+ {{/table-td}}
{{/table-tr}}
{{/table-tfoot}}
{{/table}}
+
```
### Sticky column
diff --git a/src/patternfly/components/Table/table.scss b/src/patternfly/components/Table/table.scss
index 7eb155e35b..5ae05ce3a7 100644
--- a/src/patternfly/components/Table/table.scss
+++ b/src/patternfly/components/Table/table.scss
@@ -297,8 +297,8 @@
--#{$table}--m-sticky-header--BoxShadow: var(--#{$table}--m-sticky-header--BoxShadow--glass);
--#{$table}--m-sticky-header--BorderRadius: var(--#{$table}--m-sticky-header--BorderRadius--glass);
--#{$table}--m-sticky-footer--BorderBlockStartWidth: 0;
- --#{$table}--m-sticky-footer-stuck--BoxShadow: var(--#{$table}--m-sticky-footer--BoxShadow--glass);
- --#{$table}--m-sticky-footer-stuck--BorderRadius: var(--#{$table}--m-sticky-footer--BorderRadius--glass);
+ --#{$table}--m-sticky-footer--BoxShadow: var(--#{$table}--m-sticky-footer--BoxShadow--glass);
+ --#{$table}--m-sticky-footer--BorderRadius: var(--#{$table}--m-sticky-footer--BorderRadius--glass);
}
}
@@ -357,7 +357,6 @@
border-radius: var(--#{$table}--m-sticky-header--BorderRadius);
box-shadow: var(--#{$table}--m-sticky-header--BoxShadow);
}
-
.#{$table}__th::after {
position: absolute;
@@ -426,6 +425,13 @@
}
}
+ &.pf-m-sticky-footer,
+ &.pf-m-sticky-footer-stuck {
+ > .#{$table}__tbody:last-of-type > .#{$table}__tr:last-of-type {
+ border-block-end-color: transparent;
+ }
+ }
+
&.pf-m-sticky-footer,
&.pf-m-sticky-footer-base {
> .#{$table}__tfoot {
@@ -434,7 +440,7 @@
z-index: var(--#{$table}--m-sticky-footer--ZIndex);
background: transparent;
- &::before {
+ &::after {
position: absolute;
inset: 0;
z-index: -1;
@@ -468,31 +474,6 @@
border-end-end-radius: var(--#{$table}--m-sticky-footer--BorderRadius);
}
}
-
- > .#{$table}__tbody:last-of-type > .#{$table}__tr:last-of-type {
- border-block-end: 0;
- }
- }
-
- &.pf-m-sticky-footer-stuck {
- --#{$table}--m-sticky-footer--BoxShadow: var(--#{$table}--m-sticky-footer-stuck--BoxShadow);
- --#{$table}--m-sticky-footer--BorderRadius: var(--#{$table}--m-sticky-footer-stuck--BorderRadius);
-
- > .#{$table}__tfoot::before {
- opacity: 1;
- }
- }
-
- &.pf-m-sticky-footer:not(.pf-m-sticky-footer-base) {
- --#{$table}--m-sticky-footer--BoxShadow: var(--#{$table}--m-sticky-footer-stuck--BoxShadow);
- --#{$table}--m-sticky-footer--BorderRadius: var(--#{$table}--m-sticky-footer-stuck--BorderRadius);
-
- > .#{$table}__tfoot,
- > .#{$table}__tfoot :is(.#{$table}__th, .#{$table}__td) {
- &::after {
- opacity: 1;
- }
- }
}
// - Table plain