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