Setting column width in angular ui grid

Question

I'm using angular ui-grid and have a long grid with almost 30 columns, I want to set fixed width for columns so that at least column header can be seen easily. Is there a way to set, say 10% width for all the columns, or I have to do it for each column one by one.

After setting the min-width on ui-grid-header-cell many columns got combined into one

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

Answer 1

If you are looking for fixed width, you can use the width property in the colomnDefs like this:

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

Answer 2

After you have set your 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 set all of the columns to the width you select. With 30 columns at 10% the user will use the horizontal scrollbar to see all the columns, as you prefer. I didn't change any CSS.