How to fix the table grid header in Mendix 8.5.0 version

2
Hi Team, Not able to fix sticky header in Mendix 8.5.0 version. Grid is having lot of data, so implementing vertical scroll. At  the time of scrolling grid header is also moving.  Please suggest.
asked
2 answers
2

It can be done by applying the following style in your custom.scss:

Mendix <= 7

.table-with-vertical-scroll {
    .mx-datagrid-body-table {
        display: block;
        height: <your wanted height>px;
        overflow-y: scroll;
        .mx-datagrid-body tr td:first-child {
            width: 200px;
        }
    }
}

Mendix >= 8

.table-with-vertical-scroll {
    table {
        display: block;
        height: <your height>px;
        overflow-y: scroll;

        tbody tr td:first-child {
            width: 200px;
        }
    }
}

Note: this will cause your table to act like a regular <div> container, and therefor the table cell width is not used correct from the colgroup that is used in the HTML structure of the data grid.

The fix that I found is to set a fixed width on the first table cell (<td>).

I hope this helps you in the right direction.

Cheers,

Jeffrey

answered
1

I think you are looking for a sticky header. It should be possible to apply something similar to Mendix 8.x as what Austin McNicholas wrote in https://forum.mendix.com/link/questions/91580 for Mendix 7.15 – you might have to select the right DOM element(s) to pull it off.

answered