Defining columns

Column Definition Options

---

Customizable options with default values:

• name: "Pretty Foo" (mandatory) each column should have a name, although for backward compatibility with 2.x name can be omitted if field is present
• width: 60
• minWidth: 50
• maxWidth: 9000
• visible: true
• field: "foo" Can also be a property path on your data model. "foo.bar.myField", "Name.First", etc..
• displayName: "Pretty Foo"
• enableSorting: true
• resizable: true
• groupable: true allows the column to be grouped with drag and drop, but has no effect on gridOptions.groups
• pinnable: true allows the column to be pinned when enablePinning is set to true
• editableCellTemplate: true the template to use while editing
• enableCellEdit: true allows the cell to use an edit template when focused (grid option enableCellSelection must be enabled)
• cellEditableCondition: 'true' controls when to use the edit template on per-row basis using an angular expression (enableCellEdit must also be true for editing)
• sortFn: function(a,b){return a > b} (see [Sorting and Filtering] (https://github.com/angular-ui/ng-grid/wiki/Sorting-and-Filtering)) It may be renamed to 'sortingAlgorithm'.
• cellTemplate: ""(see Templating)
• cellClass: "userDefinedCSSClass"
• headerCellClass: "userDefinedCSSClass"
• headerCellTemplate: "" (see Templating)
• cellFilter string name for filter to use on the cell ('currency', 'date', etc..)
• aggLabelFilter string name for filter to use on the aggregate label ('currency', 'date', etc..) defaults to cellFilter 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', headerCellClass: 'ageHeader' }]

Width can also be defined in percentages (20%, 30%), in weighted s, or "" (which sizes the column based on data length) (much like WPF/Silverlight)/ note: "*" only works in single page apps currently because the re-size happens on "document.ready". Still working on improving that. 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: "*" },
                                    { field: 'age', cellClass: 'ageCell', headerCellClass: 'ageHeader', width: "**"}]

If the div bound to the ui-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 (width: 50)
• Asterisks (width: "**") Rounded down
• Percentages (width: "33%") Rounded down
• Auto-width (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.

---

you can also pass the string name of the scope object that contains the column definitions like this:

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

That allows you to push/pop/splice/reassign column definitions and the changes will be reflected in the grid.

---

If you need to control the editability of a column on a per-row level, you can specify an angular expression via cellEditableCondition to restrict the editability of a cell (non-editable cells will never become editable as a result of specifying cellEditableCondition). For example, in the snippet

$scope.gridOptions = { data: myDataSource,
 enableCellSelection: true,
 enableCellEditOnFocus: true,
 cellEditableCondition: 'row.entity.editable',
 columnDefs: [
 { field: 'firstName', displayName: 'First Name', width: "*", resizable: false, enableCellEdit: false},
 { field: 'lastName', displayName: 'First Name', width: "20%"},
 { field: 'address', displayName: 'Last Name', width: "*" , 
   cellEditableCondition: 'row.entity.editable && !row.entity.isAddressDefined()'},
 { field: 'age', cellClass: 'ageCell', headerCellClass: 'ageHeader', width: "**"}]};

firstName is not editable (because enableCellEdit is false), lastName and age are editable when row.editable is true, address is editable when the complicated cellEditableCondition in its column definition is true.