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

[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!