Framework:angularvue

    Markup

    You can create Grids either programatically (with pure JavaScript/Typescript/Components), or declare them via declaratively with markup.

    Column Definition

    <ag-grid-column headerName="Name" field="name" [width]="150"></ag-grid-column>

    This example declares a simple Column Definition, specifying header name, field and width.

    Setting Column Properties

    There are some simple rules you should follow when setting column properties via Markup:

    // string value
propertyName="String Value"
[propertyName]="'String Value'"
[propertyName]="{{Interpolated Value}}"
[propertyName]="functionCallReturningAString()"

// boolean value
[propertyName]="true|false"
[propertyName]="{{Interpolated Value}}"
[propertyName]="functionCallReturningABoolean()"

// numeric value
[propertyName]="Numeric Value"
[propertyName]="functionCallReturningANumber()"

// function value
[propertyName]="functionName"
[propertyName]="functionCallReturningAFunction()"

    Setting a Class or a Complex Value

    You can set a Class or a Complex property in the following way:

    // return a Class definition for a Filter
[filter]="getSkillFilter()"

private getSkillFilter(): any {
    return SkillFilter;
}

// return an Object for filterParams
[filterParams]="getCountryFilterParams()"

private getCountryFilterParams():any {
    return {
        cellRenderer: this.countryCellRenderer,
        cellHeight: 20
    }
}

    Grouped Column Definition

    To specify a Grouped Column, you can nest a column defintion:

    <ag-grid-column headerName="IT Skills">
    <ag-grid-column 
        headerName="Skills" 
        [width]="125"
        [sortable]="false"
        [cellRenderer]="skillsCellRenderer"
        [filter]="getSkillFilter()">
    </ag-grid-column>
    <ag-grid-column 
        headerName="Proficiency"
        field="proficiency"
        [width]="120"
        [cellRenderer]="percentCellRenderer"
        [filter]="getProficiencyFilter()">
    </ag-grid-column>
</ag-grid-column>

    In this example we have a parent Column of "IT Skills", with two child columns.

    Example: Rich Grid using Markup

    The example below shows the same rich grid as the example above, but with configuration done via Markup.