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;
}

Solution 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%'}
]

Solution 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.

Solution 3

The best way is to use the GridOptions minimumColumnSize property:

$scope.gridOptions.minimumColumnSize = 100;

Zero performance impact and no oddities with the CSS methods.

Reference page, Ctrl-F minimumColumnSize: http://ui-grid.info/docs/#!/api/ui.grid.class:GridOptions

Solution 4

Try by the following function by calling before ui-grid data source binds.

 function SetColumnWidth() {
        var cols = _.filter($scope.gridOptions.columnDefs, function (c) {
            return c.visible != false;
        });
        var maxWidth = (document.documentElement.clientWidth) / cols.length;
        for (var i = 0; i < cols.length; i++) {
            cols[i].maxWidth = parseInt(maxWidth);
        }
    }

set column width to width: "*" and set minWidth as per convinient.

This solution is work for any screen as, especially large resolution screen. It will manage to equally divide maxWidth of all columns and cover the whole area of the screen.

View more solutions

Comments

[Mahtab Alam]

I used .ui-grid-header-cell { min-width: 150px !important;} but, column height have changed now and many columns are merged into one. Please see the edited question

[ArielGro]

BTW, Percentage works as well, so width:30% will work

[tonysepia]

Only not width:30% but width:'30%' <- passed as string