Defining columns

Column Definition Options

---

Customizable options with default values:

• width: 60
• minWidth: 50
• maxWidth: 9000
• field: "foo"
• displayName: "Pretty Foo"
• sortable: true
• resizable: true
• sortFn: function(a,b){return a > b} (see Sorting and Filtering)
• cellTemplate: ""(see Templating)
• cellClass: "userDefinedCSSClass"
• headerClass: "userDefinedCSSClass"
• headerCellTemplate: "" (see Templating)
• aggLabelFilter string name for filter to use on the aggregate label ('currency', 'date', etc..) will display the raw value of the field if not set.

An example of defining the columns of a grid looks like:

$scope.gridOptions = { data: myDataSource, 
                       columnDefs: [{ field: 'firstName', displayName: 'First Name', width: 90 },
                                    { field: 'lastName', displayName: 'Last Name', width: 80 },
                                    { field: 'age', cellClass: 'ageCell', headerClass: 'ageHeader' }]

Width can also be defined in percentages (20%, 30%), in weighted *s, or "auto" (which sizes the column based on data length) (much like WPF/Silverlight) example:

$scope.gridOptions = { data: myDataSource, 
                       columnDefs: [{ field: 'firstName', displayName: 'First Name', width: "*" resizable: false},
                                    { field: 'lastName', displayName: 'First Name', width: "20%" },
                                    { field: 'address', displayName: 'Last Name', width: "auto" },
                                    { field: 'age', cellClass: 'ageCell', headerClass: 'ageHeader', width "**"}]

If the div bound to the ng-grid is 400px wide then having 4 total *s would make each star worth 100px each. Column 1 would be 100px wide, Column 2: 100px, and Column 3: 200px. This is always rounded down. In the event that you have a grid 1000px wide with two columns and 3 total stars you would have 1 pixel remaining and each * worth 333 pixels

The widths are calculated in the following order:

• Pre-defined width (widh: 50)
• Asterisks (width: "**") Rounded down
• Percentages (width: "33%") Rounded down
• Auto-width based on represented data length

Special note on percentages:

you can go over 100% of grid width, this is intended. If you have a grid 1000px wide with 4 columns, You can specify each column to be 50% width. This will result in each column being 500px wide and the Viewport overflowing as intended.