CSS to get headers to stick at the top in a Data Grid

[MattGlides]

Is there any CSS to target every data grid component in the app to make the headers sticky like in an excel sheet? If not every single one, can you target a specific one?

[MaximeBaker]

Data grid are canva HTML element so it might be really difficult to apply custom CSS.
@Himaladin What would you say?

[Himaladin]

Unfortunately no — you cannot make Data Grid headers sticky with CSS.
The Data Grid is rendered on a canvas, not normal HTML elements.
Canvas here draws the grid as a graphic (similar to a screenshot), not actual <table> or <div> elements that CSS can style or make sticky.

[Himaladin]

Found it! Here’s how to make the data grid header sticky

I discovered that the Data Grid actually uses two canvas layers — one for the header and another for the full table. The header canvas sits on top of the main canvas, which means we can take advantage of it to make the header sticky. However, styling remains limited because it’s still a canvas element.

The key to making the sticky header work is controlling the container’s min/max height so that scrolling is guaranteed. Here’s the CSS that solved it:

div:has(> div > .dvn-underlay),
div:has(> div > div > div > .dvn-underlay) {
  position: relative;
  min-height: 200px;
  max-height: 200px;
}

.dvn-underlay {
  height: 0;
}

.dvn-underlay > canvas:nth-child(2) {
  position: sticky !important;
  top: -2px !important;
  height: 35px !important;
}

Hope this helps you achieve the sticky header you wanted!

[MaximeBaker]

Wow! You should create a Community Resources !

[Himaladin]

Thank you! It works for now just by coincidence, but it’s a bit of a CSS trick using the Data Grid’s canvas element — which unfortunately doesn’t allow much styling beyond this.

[MaximeBaker]

@Himaladin I love what you do with CSS. I am sure next week you are going to make a project showcase of a pure CSS Glide Movie. Or a new cradle pure CSS Glide app:
https://codepen.io/amit_sheen/pen/XWMXwvJ

[Himaladin]

Haha thanks! That CodePen is wild — maybe one day!
And yeah, we can try everything: the safe hacks, the unsafe ones, and even the ones that are borderline CSS criminality.

[Himaladin]

Got the sticky header working, but the horizontal scrolling breaks afterward.
When the header canvas becomes sticky, it stops syncing its width with the main canvas, so the scroll can’t reach the far right anymore. It looks like this can’t be fully solved with CSS alone since the canvas width is controlled internally by Glide.

I’ll take a break for now — maybe there’s still a workaround hiding somewhere.

[MaximeBaker]

You tried a lot. Take a coffee

[Himaladin]

Thanks! I’ll take a coffee .
The horizontal scrolling issue has been resolved with my previous code revision. I’m still not sure where the custom-class name should be applied.

What I’m still wondering is why a sticky header for this data grid is still desired, even though the component’s “page size” option already automatically generates pagination.

[MattGlides]

I remember there was a way with the old data grid, I had these columns stick at the top, not sure if they did that cause of the old row markers feature or if its buried in my css somewhere. As for why, we’ve found customers find 15 a page too little, and anything more than that they lose the column headers at the to and get lost.

I do appreciate the effort you’re putting in for this, thank you.