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

Baziotes

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

Cinchonize

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

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

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.

Ils

Answer 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

Tricycle

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

Cay

Answer 5

you can add a style to your css

.ui-grid-header-cell {

    min-width: 200px !important;
    max-width: 300px !important;

}

Ballad

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 – Baziotes

Answer 6

If you will add width using for loop or like ways it may slow down rendering of your grid, So I would suggest to do it via CSS. Because I had same problem with 15,000 rows and 80 columns and I tried adding width using loop and it seems to slow down rendering of grid. So, Try adding below code in your CSS, it will solve your purpose.

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

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

Yemane