How to freeze the column in the datagrid 2

0
Hi Team,   How to freeze the header in datagrid 2 . I have used the option as a virtual scrolling but first  3 header were not freezed.   Refer below screenshot for details.   Can anyone help it out how to freeze header.
asked
2 answers
0

the latest version of Datagrid2 enables you to freeze the first column in the widget itself.  If you need to freeze more than that, you could add some custom CSS something like this:



.column1-sticky{
  .tr .th:nth-child(1),
  .tr .td:nth-child(1) {
      z-index: 10;
      position: sticky;
      left: 0;
      min-width:150px;
    }
  .tr:nth-child(even) > .td {
    background-color: white;
    opacity: 1;}}

.column2-sticky{
 .th:nth-child(2),
 .td:nth-child(2) {
   position: sticky;
   left: 150px;
   min-width:150px;
   z-index: 9;}
  .tr:nth-child(even) > .td {
    background-color: white;
    opacity: 1;}}

.column3-sticky{
 .th:nth-child(3),
 .td:nth-child(3) {
   position: sticky;
   left: 300px;
   min-width:150px;
   z-index: 8;}
  .tr:nth-child(even) > .td {
    background-color: white;
    opacity: 1;}}

You will probably also need to do some other styling work on the grid to get it to behave the way you want it to.

answered
0

You can use my mDataGrids module for that. It supports fixed first column, last column and header. You can find it here: https://marketplace.mendix.com/link/component/212219

answered