feat(table): add support for tfoot by mcoker · Pull Request #8034 · patternfly/patternfly

mcoker · 2025-12-18T02:12:22Z

Table footer example - https://pf-pr-8034.surge.sh/components/table#table-footer
Sticky footer example - https://pf-pr-8034.surge.sh/components/table#sticky-footer

Towards patternfly/pf-roadmap#282. This was demo code to show glass styles for table header/footer - cleaned it up to be a basic implementation for support for <tfoot>. It does not have any special glass styling, it's just support for the table footer. It does support being sticky, like the table header/<thead>

Fixes #8035

Summary by CodeRabbit

New Features
- Added table footer support including a sticky footer option
- Introduced public boolean attributes to enable plain tables, sticky headers, and sticky footers
Documentation
- Updated component docs and demos with footer examples and guidance for the new flags
- Replaced modifier-based configuration examples with the new boolean attribute approach

_{✏️ Tip: You can customize this high-level summary in your review settings.}

coderabbitai · 2025-12-18T02:12:41Z

Walkthrough

Introduces new public flags (IsPlain, HasStickyHeader, HasStickyFooter) for table component configuration, replacing modifier-based approaches. Adds sticky footer support with new CSS variables and styling. Introduces new table-tfoot.hbs template for table footer rendering. Updates examples and documentation accordingly.

Changes

Cohort / File(s)	Summary
Styling and Layout `src/patternfly/components/Table/examples/Table.css`, `src/patternfly/components/Table/table.scss`	Added sticky footer CSS rules with z-index variables. Expanded `.ws-preview-html` height rule to include sticky footer preview. Introduced `.pf-m-sticky-footer` block for footer positioning and borders. Added `.table__tfoot` styling. Simplified sticky header positioning. Updated action cell padding variable references.
Template Components `src/patternfly/components/Table/table.hbs`, `src/patternfly/components/Table/table-tfoot.hbs`	Updated main table template with three new modifier options (IsPlain, HasStickyHeader, HasStickyFooter) mapping to pf-m-plain, pf-m-sticky-header, and pf-m-sticky-footer classes. Added new table-tfoot.hbs template rendering table footer with optional modifier and attributes.
Documentation and Examples `src/patternfly/components/Table/examples/Table.md`, `src/patternfly/demos/Table/examples/Table.md`	Updated component examples to use new public flags instead of inline modifiers (IsPlain, HasStickyHeader, HasStickyFooter). Added comprehensive sticky footer examples and dedicated table footer sections demonstrating new footer functionality. Updated demo examples to reflect HasStickyHeader flag usage.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

CSS variable migration: Review references to --pf-v6-c-table--cell--PaddingBlockStart/End changed to --#{$table}--cell--PaddingBlockStart/End in action cell and compact contexts to ensure consistency across all impacted selectors.
Sticky footer implementation: Verify new z-index variable declarations and .pf-m-sticky-footer positioning logic mirrors sticky header pattern correctly and handles border rendering appropriately.
Public API consistency: Confirm all three new flags (IsPlain, HasStickyHeader, HasStickyFooter) are correctly wired in the template and that documentation examples accurately reflect the new public attribute signatures.

Pre-merge checks

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The PR title accurately reflects the main change—adding table footer (tfoot) support, which is central to the changeset including new tfoot template, CSS styling, and updated examples.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

patternfly-build · 2025-12-18T02:15:10Z

Preview: https://pf-pr-8034.surge.sh

A11y report: https://pf-pr-8034-a11y.surge.sh

coderabbitai

Actionable comments posted: 0

🧹 Nitpick comments (4)

src/patternfly/components/Table/table.scss (1)

257-263: Sticky header/footer and tfoot styling look consistent; consider documenting .pf-m-sticky-footer alongside header

The new sticky footer vars and block mirror the sticky header pattern and look correct: position: sticky + inset-block-end: 0, separate z-index vars, and a border pseudo-element to avoid double borders with the last tbody row.

The switch to inset: 0 for the sticky header border pseudo-element is a nice cleanup and should be behavior‑preserving.

The .pf-v6-c-table__tfoot block wiring (--table__tr--BorderBlockEndWidth: 0, vertical-align: top) matches the new table-tfoot.hbs usage.

One small follow-up suggestion: in the “Sticky table usage” docs table you still only list .pf-m-sticky-header. It would be clearer to add .pf-m-sticky-footer there as well, now that the modifier exists and is wired to table--HasStickyFooter.

Also applies to: 285-288, 328-349, 1303-1308

src/patternfly/components/Table/examples/Table.md (3)

3762-3927: Sticky header examples correctly migrated to table--HasStickyHeader; consider minor doc tweak

The main sticky header example (table-sticky-header) and the nested-column sticky header example both now use table--HasStickyHeader=true, which matches the template wiring and SCSS.

Extra body rows added to the sticky header example are just demo content and properly use table-td--data-label as before.

Optional doc improvement: in the “Sticky table usage” table you still only list .pf-m-sticky-header as a class. You might want to mention the table--HasStickyHeader flag there as the preferred way to enable it in examples, mirroring what you did for the plain variant.

Also applies to: 4371-4415

3933-4112: Sticky footer demo looks sound; document the modifier/flag more explicitly

The new “Sticky footer” example:

Uses table--HasStickyFooter=true and a table-tfoot block, which is exactly what the new SCSS and table-tfoot.hbs expect.

Uses <th scope="row"> in the footer row, which is good for accessibility.

Has enough body rows to actually demonstrate the sticky behavior in the scrollable preview.

I’d suggest extending the “Sticky table usage” or “Table footer usage” docs to explicitly mention both .pf-m-sticky-footer and the table--HasStickyFooter flag, similar to how sticky headers and the plain variant are documented, so consumers know both the underlying class and the preferred flag.

5328-5445: Table footer examples and usage are consistent; fix the earlier ‘Applied to’ type to match

The new “Table footer” example uses table-tfoot with a single summary row and <th scope="row">, which is semantically correct.

The usage table documents .pf-v6-c-table__tfoot applied to tfoot, matching the new table-tfoot.hbs template and SCSS.

One follow-up: in the earlier “Basic table usage” table, .pf-v6-c-table__thead, .pf-v6-c-table__tbody, and .pf-v6-c-table__tfoot are documented as applied to <tr>, but the implementation (and these examples) apply them to <thead>, <tbody>, and <tfoot>. It would be good to update that “Applied to” column for consistency.

📜 Review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between cbc1c57 and 34c464c.

📒 Files selected for processing (6)

src/patternfly/components/Table/examples/Table.css (1 hunks)
src/patternfly/components/Table/examples/Table.md (6 hunks)
src/patternfly/components/Table/table-tfoot.hbs (1 hunks)
src/patternfly/components/Table/table.hbs (1 hunks)
src/patternfly/components/Table/table.scss (6 hunks)
src/patternfly/demos/Table/examples/Table.md (2 hunks)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

GitHub Check: build-upload

🔇 Additional comments (6)

src/patternfly/components/Table/table.scss (1)

526-529: Action cell padding variables updated correctly to table-scoped tokens

The padding overrides for .pf-v6-c-table__td.pf-m-action (both default and compact) now use the public --pf-v6-c-table--cell--* variables instead of the older internal names, which aligns with the token strategy used in the root of this file. I don’t see any behavioral regressions here.

Also applies to: 1217-1219

src/patternfly/components/Table/examples/Table.css (1)

14-15: Preview height extension to sticky footer demo is appropriate

Extending the height: 400px rule to #ws-core-c-table-sticky-footer .ws-preview-html matches the sticky header preview behavior and should make the new footer demo usable without affecting other examples.

src/patternfly/components/Table/table-tfoot.hbs (1)

1-7: table-tfoot template is consistent with existing table partials

The <tfoot> element, {{pfv}}table__tfoot class, optional table-tfoot--modifier, and raw table-tfoot--attribute handling all match existing BEM and templating patterns (thead/tbody), and the @partial-block yield keeps it flexible. Looks good.

src/patternfly/components/Table/table.hbs (1)

9-11: New public flags map cleanly to existing modifiers

Wiring table--IsPlain, table--HasStickyHeader, and table--HasStickyFooter into setModifiers with pf-m-plain, pf-m-sticky-header, and pf-m-sticky-footer is consistent with the rest of the API and matches how the examples now consume these features. No issues from a template or BEM perspective.

src/patternfly/demos/Table/examples/Table.md (1)

218-219: Demos correctly migrated to table--HasStickyHeader flag

Updating the sticky-header demos to use table--HasStickyHeader=true instead of relying on pf-m-sticky-header in the modifier keeps them aligned with the new public API while preserving behavior. Looks consistent in both the simple and scrollable/table--scrollable examples.

Also applies to: 295-301

src/patternfly/components/Table/examples/Table.md (1)

1932-1932: Plain variant now uses the public table--IsPlain flag correctly

Using table--IsPlain=true alongside table--modifier="pf-m-grid-md" aligns this example with the new API while still documenting .pf-m-plain in the usage table below. No behavior issues here.

github-actions · 2026-03-11T11:47:22Z

This PR has been automatically marked as stale because it has not had activity in the last 60 days.

jcmill · 2026-04-07T18:45:55Z

+      }
+    }
+
+    > .#{$table}__tbody:last-of-type > .#{$table}__tr:last-of-type {


Because this executes whenever the sticky-footer modifier is present, what do you think about using the following incase someone doesn't end up using a tfoot (either accidentally or otherwise)? Otherwise that last border will be lost.

&:has(tfoot) > .#{$table}__tbody:last-of-type > .#{$table}__tr:last-of-type {

Personally I could go either way. 2 downsides to that would be that 1) it increases the specificity, though shouldn't be a problem, and 2) the :has() selector isn't as performant as standard selectors, and tables tend to have a lot of nodes, and lots of nodes in :has() can make it slower. Tables often have a lot of rows and sometimes contain nested tables, and table performance is something I try to keep an eye on. That said, using a descendent selector like &:has(> tfoot) > .#{$table}__tbody:last-of-type > .#{$table}__tr:last-of-type { would probably mitigate any performance issues.

I would lean toward leaving it as-is, unless you can think of a valid use case where it could create a bug? If someone is using pf-m-sticky-footer without a tfoot I would probably just tell them to remove that class. WDYT - still think we should update it?

thatblindgeye

Can we also open a React followup for this if one doesnt exist

mcoker · 2026-04-13T19:17:40Z

Can we also open a React followup for this if one doesnt exist

@thatblindgeye 👍👍 patternfly/patternfly-react#12354

kmcfaul

Implementation lgtm, but have a question about the design.

Looking at the preview, I find the footer a bit hard to differentiate from a normal table row, especially when it's non-sticky / sticky but flush with the end of the table. My first reaction seeing the example was that the footer was missing until I looked more carefully at the bottom row, though I did quickly see it was footer after that.

I'm wondering if anyone from design has any thoughts about this?

mcoker · 2026-04-14T19:07:27Z

@kmcfaul one thing we talked about on Monday was removing the bottom border, so I just pushed that update. @lboehling @andrew-ronaldson any other updates you'd want to make? https://pf-pr-8034.surge.sh/components/table#table-footer

FWIW here it is with a secondary and striped background color

kmcfaul

I like it better without the bottom border 👍

mcoker · 2026-04-15T18:10:16Z

+  &.pf-m-plain {
+    --#{$table}--BackgroundColor: transparent;
+  }


Should be able to remove this

mcoker · 2026-04-15T18:10:41Z

+  &.pf-m-sticky-footer {
+    > .#{$table}__tfoot {
+      position: sticky;
+      inset-block-end: 0;
+      z-index: var(--#{$table}--m-sticky-footer--ZIndex);
+      background: var(--#{$table}--BackgroundColor);
+
+      &::before {
+        position: absolute;
+        inset: 0;
+        z-index: var(--#{$table}--m-sticky-footer--border--ZIndex);
+        pointer-events: none;
+        content: "";
+        border-block-start: var(--#{$table}--border-width--base) solid var(--#{$table}--BorderColor);
+      }
+    }
+
+    > .#{$table}__tbody:last-of-type > .#{$table}__tr:last-of-type {
+      border-block-end: 0;
+    }
+  }


Refactor this to sticky-base/sticky-stuck

mcoker · 2026-04-15T18:11:04Z

+<tfoot class="{{pfv}}table__tfoot
+  {{#if table-tfoot--modifier}}{{table-tfoot--modifier}}{{/if}}"


Suggested change

<tfoot class="{{pfv}}table__tfoot

{{#if table-tfoot--modifier}}{{table-tfoot--modifier}}{{/if}}"

<tfoot class="{{pfv}}table__tfoot{{#if table-tfoot--modifier}} {{table-tfoot--modifier}}{{/if}}"

patternfly-build · 2026-06-11T15:54:42Z

🎉 This PR is included in version 6.6.0-prerelease.7 🎉

The release is available on:

Your semantic-release bot 📦🚀

mcoker marked this pull request as draft December 18, 2025 02:12

coderabbitai Bot reviewed Dec 18, 2025

View reviewed changes

mcoker marked this pull request as ready for review December 18, 2025 16:07

mcoker requested review from andrew-ronaldson and lboehling December 18, 2025 18:05

mcoker added 2 commits January 8, 2026 16:41

feat(table): add support for tfoot

f21cdf5

chore: fix overflow for sticky examples

c366f28

mcoker force-pushed the table-sticky-footer branch from 082f632 to c366f28 Compare January 8, 2026 22:41

github-actions Bot added the Stale label Mar 11, 2026

mcoker requested a review from jcmill April 7, 2026 14:40

jcmill reviewed Apr 9, 2026

View reviewed changes

Merge branch 'main' into table-sticky-footer

f627ca0

github-actions Bot removed the Stale label Apr 13, 2026

thatblindgeye approved these changes Apr 13, 2026

View reviewed changes

kmcfaul approved these changes Apr 14, 2026

View reviewed changes

mcoker force-pushed the table-sticky-footer branch from 8089b93 to f627ca0 Compare April 14, 2026 18:59

kmcfaul approved these changes Apr 15, 2026

View reviewed changes

mcoker commented Apr 15, 2026

View reviewed changes

andrew-ronaldson approved these changes Apr 30, 2026

View reviewed changes

mcoker merged commit e28f20c into patternfly:main Jun 11, 2026
6 checks passed

mcoker deleted the table-sticky-footer branch June 11, 2026 15:42

patternfly-build added the released on @prerelease label Jun 11, 2026

This was referenced Jun 11, 2026

Table - update tfoot sticky classes to use sticky and sticky-stuck #8450

Open

Bug - Table - Fixed header will hide the table rows in Safari browser #8453

Open

		<tfoot class="{{pfv}}table__tfoot
		{{#if table-tfoot--modifier}}{{table-tfoot--modifier}}{{/if}}"

	<tfoot class="{{pfv}}table__tfoot
	{{#if table-tfoot--modifier}}{{table-tfoot--modifier}}{{/if}}"
	<tfoot class="{{pfv}}table__tfoot{{#if table-tfoot--modifier}} {{table-tfoot--modifier}}{{/if}}"

Conversation

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

Uh oh!

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Dec 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Pre-merge checks

Uh oh!

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

Uh oh!

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Mar 11, 2026

Uh oh!

jcmill Apr 7, 2026

Choose a reason for hiding this comment

Uh oh!

mcoker Apr 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

thatblindgeye left a comment

Choose a reason for hiding this comment

Uh oh!

mcoker commented Apr 13, 2026

Uh oh!

kmcfaul left a comment

Choose a reason for hiding this comment

Uh oh!

mcoker commented Apr 14, 2026

Uh oh!

kmcfaul left a comment

Choose a reason for hiding this comment

Uh oh!

mcoker Apr 15, 2026

Choose a reason for hiding this comment

Uh oh!

mcoker Apr 15, 2026

Choose a reason for hiding this comment

Uh oh!

mcoker Apr 15, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

patternfly-build commented Jun 11, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

mcoker commented Dec 18, 2025 •

edited

Loading

coderabbitai Bot commented Dec 18, 2025 •

edited

Loading

patternfly-build commented Dec 18, 2025 •

edited

Loading

mcoker Apr 10, 2026 •

edited

Loading