Grid Props
All inputs and outputs accepted by the Angular Grid component
Grid Props
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");
}
}