Baike.dev
All toolsAI codingTrendingOpen sourceNewsSubmit
Log in
Back to tool/Back to issues
#7122·bootstrap-vue

sticky-headers and sortable columns seem to be mutually exclusive.

Author: PDXfosterCreated Feb 10, 2023Updated Oct 20, 2025

Describe the bug

Sticky-header and sortable columns seem to be incompatible. When I add the "sortable" property to a field, the class "position-relative" is added to the , which overrides the sticky header. Playing around, if I set sortable on a field, go into dev tools, and simply remove the "position-relative" class, sort works, and the header is sticky. I'm not sure why this class is being added with sortable, but on the surface, it seems like it shouldn't be.

Steps to reproduce the bug

  1. Go to https://codepen.io/PDXfoster/pen/WNKVrBz - view both sticky header, and sortable implementation
  2. Scroll
  3. See header is NOT sticky
  4. See that sort works
  5. Go to https://codepen.io/PDXfoster/pen/poZMgMx - view just sticky header implementation
  6. Scroll
  7. See header IS sticky
  8. See that sort does not work

Expected behavior

I would expect that these two features are not mutually exclusive, so I can have both sticky headers, and sortable columns

Versions

Libraries:

  • BootstrapVue: 2.23.0
  • Bootstrap: 4.6.0
  • Vue: 2.6.14

Environment:

  • Device: Mac
  • OS: macOS 13.2
  • Browser: Vivaldi
  • Version: 5.6.2867.62

Additional context

Add any other context about the bug here.

Source: bootstrap-vue/bootstrap-vue

View original on GitHubView discussion on GitHub