Hello Jori!

I did some investigation and I was able to come up with a few CSS rules that I think can solve what you need.

I can see that you are using Rownumber+checkbox for your header column. This solution will work regardless of the rowheader configuration you selected.

You just need to add this css code to your theme/screen(depending on the context you want this applied to):

/*Code start*/

.wj-topleft .wj-header:nth-child(1),

.wj-rowheaders .wj-header:nth-child(1){

  width:100px !important;

}

.wj-topleft .wj-header:nth-child(2),

.wj-rowheaders .wj-header:nth-child(2),

[wj-part="ch"],

[wj-part="cells"]{

  margin-left:55px; !important;

}

[wj-part="rh"], [wj-part="tl"]{

  width:145px !important;

}

/*Code finish*/

This will set your rownumber column width to 100, and reorganize the datagrid so that the other columns don't break.

If you want to increase your row number by "X px", you just need to do 100+X, 55+X and 145+X. Exemple: If i want my row number column width to be 200, the values for the classes would be, 200, 155 and 245.

Example for width 100px:

Example for width 200px:

If you want to check this out, you can check this demo application for one of my assets to see this code in action. I published the version with the 100px width.

DataGrid Reactive Dynamic Columns Demo