Defining columns

Column Definition Options

---

columnDefinitions are done in json notation:

columnOneDefinition = {
    width: 60,
    minWidth: 50,
    maxWidth: 9000,
    field: "foo",
    displayName: "Pretty Foo",
    sortable: true,
    resizable: true,
    filterable: true,
    sortFn: function(a,b){return a > b}, (see [Sorting and Filtering](https://github.com/Crash8308/ng-grid/wiki/Sorting-and-Filtering))
    cellTemplate: (see [Templating](https://github.com/Crash8308/ng-grid/wiki/Templating)),
    cellClass: "userDefinedCSSClass",
    headerClass: "userDefinedCSSClass",
    headerCellTemplate: (see [Templating](https://github.com/Crash8308/ng-grid/wiki/Templating))
}

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

<div data-bind="koGrid: { data: myDataSource, 
                          columnDefs: [{ field: 'firstName', displayName: 'First Name', width: 90 },
                                       { field: 'lastName', displayName: 'Last Name', width: 80 },
                                       { field: 'age', cellClass: 'ageCell', headerClass: 'ageHeader' ]">
</div>

Width can also be defined in percentages (20%, 30%) or in weighted *s (much like WPF/Silverlight) example:

<div data-bind="koGrid: { data: myDataSource, 
                          columnDefs: [{ field: 'firstName', displayName: 'First Name', width: "*"},
                                       { field: 'lastName', displayName: 'Last Name', width: "*" },
                                       { field: 'age', cellClass: 'ageCell', headerClass: 'ageHeader', width "**">
</div>

If the div bound to the koGrid 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

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.