Skip to content
This repository has been archived by the owner on Sep 8, 2020. It is now read-only.

Defining columns

Jump to bottom
westonlast edited this page Sep 6, 2019 · 5 revisions

Column Definition Options

Customizable options with default values:

  • 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"
  • sortable: 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)
  • cellTemplate: ""(see Templating)
  • cellClass: "userDefinedCSSClass"
  • headerClass: "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', headerClass: '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', 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 (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', headerClass: '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.

Clone this wiki locally