Setting column width in angular ui grid

Question

I use angular ui-grid and have a long grid with almost 30 columns, I want to set a fixed width for the columns so that you can easily see at least the column heading. Is there a way to set, say, 10% of the width for all columns, or should I do this for each column one by one.

After setting the minimum width on the ii-grid-header cell, many columns were merged into one

.ui-grid-header-cell { min-width: 150px !important; } 

Answer 1

Once you have defined the column definitions, you can add the following

 for (var i = 0; i < $scope.gridOptions.columnDefs.length; i++) { $scope.gridOptions.columnDefs[i].width = '10%'; } 

This will cause all columns to be selected in width. With 30 columns at 10%, the user will use the horizontal scroll bar to see all the columns as you prefer. I did not change CSS.

Answer 2

you can add style to your css

 .ui-grid-header-cell { min-width: 200px !important; max-width: 300px !important; } 

Answer 3

If you add width using a loop or similar methods, this may slow down the rendering of your mesh. Therefore, I would suggest doing this with CSS. Since I had the same issue with 15,000 rows and 80 columns, and I tried to add width using a loop, and it seems to slow down the grid rendering. So, try adding the code below to your CSS, it will solve your goal.

 .ui-grid-header-cell { min-width: 200px !important; max-width: 300px !important; } .ui-grid-cell { min-width: 200px !important; max-width: 300px !important; } 

Answer 4

If you are looking for a fixed width, you can use the width property in colomnDefs as follows:

 columnDefs : [ { field : 'pageIcon', displayName : 'Page Icon', width:25}, { field : 'pageName', displayName : 'Page Name', width:100} ]