CODEWITHSUNDEEP
material-uimui-x-data-grid
ETLNSC
ETLNSC

Reputation: 11

Is it possible to make MUI DataGrid header and footer stick to page top and bottom?

I want to make the DataGrid header and footer stick to the page top and bottom when the page is scrolled. I know this kinda happens if you don't use the autoHeight prop, but this introduces another scroll bar to the page, which is not what I want as it is less intuitive to navigate the page. The DataGrid is also not the only thing on the page. There is stuff before and after it. I made an example with regular HTML and CSS, which works, but I haven't gotten it to work in the DataGrid yet. Is it possible to do it this way at all?

Example: https://jsfiddle.net/dn37yL14/3/

I've tried some solutions I've found online, like adding position: sticky to the DataGrid header class, but I haven't gotten it to work yet. Some other solutions use fixed height which introduces the scroll bar to the DataGrid that I don't want.

Upvotes: 1

Views: 530

Answers (0)

Related Questions