Grid Props
Reference for every input and output exposed by the Angular Grid component, covering data sources, columns, sorting, filtering, and selection inputs today.
The GpGridComponent is a standalone Angular component with OnPush change detection. Binder syntax is standard Angular: [inputName] for inputs and (outputName) for outputs.
Required Inputs
[columns]
Type: AngularColumnDefinition[]
Array of column definitions. See Column Definition for details.
@Component({
standalone: true,
imports: [GpGridComponent],
template: `<gp-grid [columns]="columns" [rowData]="data" [rowHeight]="36" />`,
})
export class MyGridComponent {
columns: AngularColumnDefinition[] = [
{ field: "id", cellDataType: "number", width: 80 },
{ field: "name", cellDataType: "text", width: 200 },
];
}[rowHeight]
Type: number
Height of each row in pixels.
<gp-grid [columns]="columns" [rowData]="data" [rowHeight]="36" />Data Inputs
[rowData]
Type: TData[]
Array of row data objects. The simplest way to provide data.
<gp-grid [columns]="columns" [rowData]="data" [rowHeight]="36" />[dataSource]
Type: DataSource<TData>
Data source for advanced data handling. Use this for server-side data or when you need mutation capabilities. See Data Sources.
<gp-grid [columns]="columns" [dataSource]="dataSource" [rowHeight]="36" />Optional Inputs
[headerHeight]
Type: number
Default: Same as [rowHeight]
Height of the header row in pixels.
<gp-grid [columns]="columns" [rowData]="data" [rowHeight]="36" [headerHeight]="48" />[overscan]
Type: number
Default: 3
Number of rows to render outside the visible viewport.
<gp-grid [columns]="columns" [rowData]="data" [rowHeight]="36" [overscan]="5" />[sortingEnabled]
Type: boolean
Default: true
Enable or disable sorting globally.
<gp-grid [columns]="columns" [rowData]="data" [rowHeight]="36" [sortingEnabled]="false" />[darkMode]
Type: boolean
Default: false
Enable dark mode styling.
<gp-grid [columns]="columns" [rowData]="data" [rowHeight]="36" [darkMode]="true" />[wheelDampening]
Type: number
Default: 0.1
Dampening factor for wheel scrolling (0–1).
<gp-grid [columns]="columns" [rowData]="data" [rowHeight]="36" [wheelDampening]="0.2" />Drag & Reorder Inputs / Outputs
[rowDragEntireRow]
Type: boolean
Default: false
When enabled, clicking and dragging any cell in a row initiates a row drag instead of cell selection.
(onRowDragEnd)
Type: { source: number; target: number }
Emitted when a row is dropped after dragging.
@Component({
template: `
<gp-grid
[columns]="columns"
[dataSource]="dataSource"
[rowHeight]="36"
[rowDragEntireRow]="true"
(onRowDragEnd)="handleRowDragEnd($event)"
/>
`,
})
export class MyGridComponent {
handleRowDragEnd({ source, target }: { source: number; target: number }) {
this.dataSource.moveRow?.(source, target);
}
}(onColumnMoved)
Type: { fromIndex: number; toIndex: number }
Emitted when a column header is dragged to a new position.
@Component({
template: `
<gp-grid
[columns]="columns"
[rowData]="data"
[rowHeight]="36"
(onColumnMoved)="handleColumnMoved($event)"
/>
`,
})
export class MyGridComponent {
handleColumnMoved({ fromIndex, toIndex }: { fromIndex: number; toIndex: number }) {
const next = [...this.columns];
const [moved] = next.splice(fromIndex, 1);
next.splice(toIndex, 0, moved);
this.columns = next;
}
}(onColumnResized)
Type: { colIndex: number; newWidth: number }
Emitted when a column is resized by dragging the header edge.
Identity & Edit Inputs / Outputs
[getRowId]
Type: ((row: TData) => RowId) | null
Function to extract a unique ID from each row. Required when (onCellValueChanged) is used.
(onCellValueChanged)
Type: CellValueChangedEvent<TData>
Emitted after a cell value is committed via inline editing or fill-handle drag.
@Component({
template: `
<gp-grid
[columns]="columns"
[rowData]="data"
[rowHeight]="36"
[getRowId]="idGetter"
(onCellValueChanged)="handleCellValueChanged($event)"
/>
`,
})
export class MyGridComponent {
idGetter = (row: MyRow) => row.id;
handleCellValueChanged(event: CellValueChangedEvent<MyRow>) {
console.log(`Row ${event.rowId} changed ${event.oldValue} → ${event.newValue}`);
}
}Styling Inputs
[highlighting]
Type: HighlightingOptions | null
Dynamic row, column, and cell class computation. See the Styling guide.
@Component({
template: `
<gp-grid
[columns]="columns"
[rowData]="data"
[rowHeight]="36"
[highlighting]="highlightingOptions"
/>
`,
})
export class MyGridComponent {
highlightingOptions: HighlightingOptions = {
computeRowClasses: (ctx) =>
ctx.rowIndex != null && ctx.rowIndex % 2 === 1 ? ["zebra-row"] : [],
computeCellClasses: (ctx) =>
ctx.isSelected ? ["bg-blue-50"] : [],
};
}Renderer Inputs
[cellRenderers]
Type: Record<string, CellRendererTemplate>
Registry of named cell renderers. Reference by key in column definitions.
[editRenderers]
Type: Record<string, EditRendererTemplate>
Registry of named edit renderers.
[headerRenderers]
Type: Record<string, HeaderRendererTemplate>
Registry of named header renderers.
[cellRenderer]
Type: CellRendererTemplate | null
Global cell renderer for all cells.
[editRenderer]
Type: EditRendererTemplate | null
Global edit renderer.
[headerRenderer]
Type: HeaderRendererTemplate | null
Global header renderer.
Template Ref
You can access the underlying component instance (and its core property) via a template ref:
@Component({
template: `
<gp-grid #grid [columns]="columns" [rowData]="data" [rowHeight]="36" />
<button (click)="sortByName(grid)">Sort by name</button>
`,
})
export class MyGridComponent {
sortByName(grid: GpGridComponent) {
grid.vm.coreRef?.setSort("name", "asc");
}
}API Overview
Browse the full API reference for @gp-grid/angular with details on every component, input, output, and helper exported by the Angular integration package.
Column Definition
Configure each Angular grid column individually with type, width, sorting, filtering, rendering, and editing options through the column definition object.