Add showFooter support to the fixed-columns extension

[wenzhixin]

🤔Type of Request

• Bug fix
• New feature
• Improvement
• Documentation
• Other

🔗Resolves an issue?

📝Changelog

• Core
• Extensions

The fixed-columns extension now supports the showFooter option. When showFooter is true, the fixed left and right columns render a footer cloned from the main table footer, keeping alignment and horizontal scroll in sync with the body. Previously this was listed as an unsupported option.

💡Example(s)?
Fixed Columns Footer

☑️Self Check before Merge

⚠️ Please check all items below before reviewing. ⚠️

• Doc is updated/provided or not needed
• Demo is updated/provided or not needed
• Changelog is provided or not needed

[Copilot]

Pull request overview

This PR adds showFooter support to the fixed-columns extension by cloning/rendering a footer for the fixed left/right columns and keeping its horizontal scroll aligned with the main table footer.

Changes:

• Add fixed-columns footer initialization + scroll syncing logic in the fixed-columns extension JS.
• Add SCSS to position fixed column footers at the bottom of the fixed columns containers.
• Update fixed-columns extension docs (EN + zh-CN) and add Cypress coverage for the new behavior.

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
src/extensions/fixed-columns/bootstrap-table-fixed-columns.scss	Positions cloned fixed footers (.fixed-table-footer) at the bottom of the fixed columns containers.
src/extensions/fixed-columns/bootstrap-table-fixed-columns.js	Implements fixed footer cloning, height reservation, and scroll syncing for fixed columns.
site/src/pages/zh-cn/docs/extensions/fixed-columns.mdx	Updates documentation to reflect showFooter is now supported (zh-CN).
site/src/pages/docs/extensions/fixed-columns.mdx	Updates documentation to reflect showFooter is now supported (EN).
cypress/extensions/fixed-columns.js	Adds Cypress tests for fixed-columns footer rendering behavior.

Comments suppressed due to low confidence (2)

src/extensions/fixed-columns/bootstrap-table-fixed-columns.js:293

• initFixedColumnsFooter() assumes this.$tableFooter is the .fixed-table-footer container and appends it into .fixed-columns. When options.height is not set, this.$tableFooter is a <tfoot>, and appending a <tfoot> directly under a <div> is invalid / won't render as intended. Gate fixed-columns footer cloning to the fixed-height case (where the footer is a .fixed-table-footer scroll container).

  initFixedColumnsFooter () {
    const showFooter = this.options.showFooter && !this.options.cardView

src/extensions/fixed-columns/bootstrap-table-fixed-columns.js:328

• syncFixedColumnsFooterScroll() should also be a no-op when the table is not in fixed-height mode. In non-height mode the footer is part of the body table (no standalone scrollable footer), so trying to mirror scrollLeft via this.$tableFooter is unnecessary and can target a <tfoot> element.

  syncFixedColumnsFooterScroll () {
    if (!this.options.showFooter || this.options.cardView) {
      return
    }

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 5 out of 5 changed files in this pull request and generated no new comments.

Comments suppressed due to low confidence (1)

src/extensions/fixed-columns/bootstrap-table-fixed-columns.js:344

• syncFixedColumnsFooterScroll() currently sets the left fixed footer’s scrollLeft to the main footer’s scrollLeft. This makes the left fixed footer horizontally scroll along with the main table, which breaks the fixed-columns behavior (the left fixed header/body do not scroll horizontally; they stay pinned to the left). The left fixed footer should remain at scrollLeft = 0, while the right fixed footer can stay pinned to its rightmost position.

  syncFixedColumnsFooterScroll () {
    if (!this.options.showFooter || this.options.cardView) {
      return
    }

    if (this.$fixedFooter) {
      this.$fixedFooter.scrollLeft(this.$tableFooter.scrollLeft())
    }
    if (this.$fixedFooterRight) {
      // the right footer stays pinned to its rightmost position
      this.$fixedFooterRight.scrollLeft(this.$fixedFooterRight.find('table').width())
    }
  }