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.