Column Definition
Column configuration reference for Angular
Column Definition
Angular uses AngularColumnDefinition, which extends the core ColumnDefinition to allow TemplateRef references as renderers in addition to functions and string keys.
interface AngularColumnDefinition {
field: string;
colId?: string;
cellDataType: CellDataType;
width: number;
headerName?: string;
editable?: boolean;
sortable?: boolean;
filterable?: boolean;
hidden?: boolean;
resizable?: boolean;
minWidth?: number;
maxWidth?: number;
movable?: boolean;
rowDrag?: boolean;
cellRenderer?: string | TemplateRef<{ $implicit: CellRendererParams }> | ((params: CellRendererParams) => unknown);
editRenderer?: string | TemplateRef<{ $implicit: EditRendererParams }> | ((params: EditRendererParams) => unknown);
headerRenderer?: string | TemplateRef<{ $implicit: HeaderRendererParams }> | ((params: HeaderRendererParams) => unknown);
valueFormatter?: (value: CellValue) => string;
computeColumnClasses?: (context: HighlightContext) => string[];
computeCellClasses?: (context: HighlightContext) => string[];
}Required Properties
field
Type: string
Property name in the row data object.
cellDataType
Type: CellDataType
| Value | Description |
|---|---|
"text" | String values |
"number" | Numeric values |
"boolean" | Boolean values |
"date" | Date objects |
"dateString" | ISO date strings |
"dateTime" | DateTime objects |
"dateTimeString" | ISO DateTime strings |
"object" | Complex objects |
width
Type: number
Column width in pixels.
Optional Properties
colId
Type: string
Default: Same as field
Unique identifier for the column.
headerName
Type: string
Default: Same as field
Display name shown in the column header.
editable
Type: boolean
Default: false
Enable inline editing for this column.
sortable
Type: boolean
Default: true
Enable sorting for this column.
filterable
Type: boolean
Default: true
Enable filtering for this column.
hidden
Type: boolean
Default: false
Whether the column is hidden.
resizable
Type: boolean
Default: true
Whether the column can be resized.
minWidth / maxWidth
Type: number
Default: 50 / undefined
Minimum and maximum width constraints when resizing.
movable
Type: boolean
Default: true
Whether the column can be reordered by dragging its header.
rowDrag
Type: boolean
Default: false
Whether this column acts as a drag handle for row dragging.
Renderers (Angular-specific)
Angular supports three renderer shapes in column definitions:
- Inline function — same as React / Vue
- String key — looks up the renderer from the component's
[cellRenderers]/[editRenderers]/[headerRenderers]registry TemplateRef— passed directly from the component template
Using a TemplateRef
@Component({
selector: "app-my-grid",
standalone: true,
imports: [GpGridComponent],
template: `
<ng-template #statusCell let-params>
<span [class]="params.value === 'Active' ? 'text-green-600' : 'text-red-600'">
{{ params.value }}
</span>
</ng-template>
<gp-grid
[columns]="columns"
[rowData]="data"
[rowHeight]="36"
[cellRenderers]="{ status: statusCell }"
/>
`,
})
export class MyGridComponent {
@ViewChild("statusCell", { static: true }) statusCell!: TemplateRef<{ $implicit: CellRendererParams }>;
columns: AngularColumnDefinition[] = [
{ field: "status", cellDataType: "text", width: 120, cellRenderer: "status" },
];
}You can also reference a TemplateRef directly in a column definition without the registry:
@Component({
template: `
<ng-template #salaryCell let-params>
<span>${{ (params.value as number).toLocaleString() }}</span>
</ng-template>
<gp-grid [columns]="getColumns(salaryCell)" [rowData]="data" [rowHeight]"36" />
`,
})
export class MyGridComponent {
getColumns(salaryCell: TemplateRef<{ $implicit: CellRendererParams }>): AngularColumnDefinition[] {
return [
{ field: "salary", cellDataType: "number", width: 140, cellRenderer: salaryCell },
];
}
}valueFormatter
Type: (value: CellValue) => string
Converts a raw cell value into the display string used by the default renderer, filters, sort comparisons, and copy-paste.
{
field: "salary",
cellDataType: "number",
width: 140,
valueFormatter: (value) => `$${(value as number).toLocaleString()}`,
}Inside a cellRenderer the params.value you receive is already the formatted string when a valueFormatter is set.
computeColumnClasses / computeCellClasses
Per-column overrides for the grid-level highlighting callbacks. See the Styling guide for full context shape.
{
field: "score",
cellDataType: "number",
width: 100,
computeCellClasses: (ctx) => {
const value = ctx.rowData?.score as number;
if (value != null && value < 60) return ["bg-red-50"];
if (value != null && value >= 90) return ["bg-green-50"];
return [];
},
}