RFC: Discuss topContainer as child of virtualScroller & transparent header scrolling issue

[michelmaldonado]

What's the problem?

Hi everyone,

I've got a question about the markup of the virtualScroller and the topContainer elements. Currently the topContainer is a child of the virtualScroller. I'm using a fully transparent datagrid, only borders are visible. When using the sticky columns header, the content will visibly scroll underneath the columns:

Schermopname.2025-12-18.om.21.09.41.mov

I've tried several ways, with custom slot components etcetera but I couldn't find a way to separately render the topContainer/columns header. When I move the topcontainer on the same level as the virtualScroller, it works as expected:

Schermopname.2025-12-18.om.21.10.27.mov

Did I miss a way to configure DataGrid this way with the api? Currently I use a hack/hook to move the DOM nodes, I don't like this.

If there isn't a way to do this with build in functions, could it be a feature request to create a component just like the Toolbar, so have control on where the columns header is rendered in the DOM?

Thanks in advance

What are the requirements?

No response

What are our options?

No response

Proposed solution

No response

Resources and benchmarks

No response