Skip to content

[Bug Report][3.8.9] Fixed header is rendered on top of the rows of a data table, rather than above them #21557

@RylanBueckert-Broadsign

Description

Environment

Vuetify Version: 3.8.9
Vue Version: 3.5.16
Browsers: Chrome 137.0.0.0
OS: Windows 10

Steps to reproduce

Create a data table with a fixed header, and set the height so that a scrollbar is needed to see all the rows.

You can visually see that the headers are inside the scrollable area due to the scrollbar extending to the top of the table. This looks off because the headers do not move when scrolling the table.

When the table is in the loading state, it becomes partially transparent. If you have scrolled the table so that there is a row under the headers, you can see the header text overlap with the row which looks ugly.

Expected Behavior

The vertical scrollbar stops ends before the headers. There is no visibly overlapping text when table is loading

Actual Behavior

Vertical scrollbar extends into the header area. Can see overlapping text when loading

Reproduction Link

https://play.vuetifyjs.com/#...

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions