How to auto size column width in AngularJS ui-grid

Question

In AngularJS ui-grid , how can I configure the grid so that it can auto adjust the width of the columns according to the contents when it render?

I know there is a tutorial showing the auto size function, but that works only when you double click the column, I wish it could happen when the grid is initiated.

Answer 1

use an asterisk in your column definition:

width:"*";

Answer 2

There is a pluggin that do this: ui-grid-auto-fit-columns

GitHub: https://github.com/Den-dp/ui-grid-auto-fit-columns

Example: http://jsbin.com/tufazaw/edit?js,output

Usage:

<div ui-grid="gridOptions" ui-grid-auto-fit-columns></div>

angular.module('app', ['ui.grid', 'ui.grid.autoFitColumns'])