Skip to content

feat(table): add support for tfoot#8034

Open
mcoker wants to merge 2 commits intopatternfly:mainfrom
mcoker:table-sticky-footer
Open

feat(table): add support for tfoot#8034
mcoker wants to merge 2 commits intopatternfly:mainfrom
mcoker:table-sticky-footer

Conversation

@mcoker
Copy link
Contributor

@mcoker mcoker commented Dec 18, 2025

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.

@mcoker mcoker marked this pull request as draft December 18, 2025 02:12
@coderabbitai
Copy link

coderabbitai bot commented Dec 18, 2025

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
Copy link
Collaborator

patternfly-build commented Dec 18, 2025

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

@mcoker mcoker marked this pull request as ready for review December 18, 2025 16:07
@mcoker mcoker force-pushed the table-sticky-footer branch from 082f632 to c366f28 Compare January 8, 2026 22:41
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Table - support for table footer

2 participants