The Row Numbers Feature adds a Column that is always present at the start of the grid where each cell of this column will work as a row header. The following example demonstrates the grid with Row Numbers and no additional configuration.
To enable Row Numbers, set the grid option rowNumbers = true.
Configure the Row Numbers Feature. |
<ag-grid-angular
[rowNumbers]="rowNumbers"
/* other grid options ... */ />
this.rowNumbers = true;import { Component } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { AgGridAngular } from "ag-grid-angular";
import {
ClientSideRowModelModule,
ColDef,
ColGroupDef,
GridApi,
GridOptions,
GridReadyEvent,
ModuleRegistry,
RowNumbersOptions,
enableDevValidations,
} from "ag-grid-community";
import { RowNumbersModule } from "ag-grid-enterprise";
if (process.env.NODE_ENV !== "production") {
// Enable extended validations only for development
enableDevValidations();
}
ModuleRegistry.registerModules([ClientSideRowModelModule, RowNumbersModule]);
import { IOlympicData } from "./interfaces";
@Component({
selector: "my-app",
standalone: true,
imports: [AgGridAngular],
template: `<ag-grid-angular
style="width: 100%; height: 100%;"
[columnDefs]="columnDefs"
[defaultColDef]="defaultColDef"
[rowNumbers]="true"
[rowData]="rowData"
(gridReady)="onGridReady($event)"
/> `,
})
export class AppComponent {
columnDefs: ColDef[] = [
{ field: "athlete" },
{ field: "country" },
{ field: "sport" },
{ field: "year" },
{ field: "gold" },
{ field: "silver" },
{ field: "bronze" },
];
defaultColDef: ColDef = {
flex: 1,
minWidth: 100,
};
rowData!: IOlympicData[];
constructor(private http: HttpClient) {}
onGridReady(params: GridReadyEvent<IOlympicData>) {
this.http
.get<IOlympicData[]>(
"https://www.ag-grid.com/example-assets/olympic-winners.json",
)
.subscribe((data) => {
this.rowData = data;
});
}
}
Cell Selection Copy Link
When the grid is configured with Cell Selection, clicking a Row Number will select all the currently visible cells in the row.
<ag-grid-angular
[rowNumbers]="rowNumbers"
[cellSelection]="cellSelection"
/* other grid options ... */ />
this.rowNumbers = true;
this.cellSelection = true;import { Component } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { AgGridAngular } from "ag-grid-angular";
import {
CellSelectionOptions,
ClientSideRowModelModule,
ColDef,
ColGroupDef,
GridApi,
GridOptions,
GridReadyEvent,
ModuleRegistry,
RowNumbersOptions,
enableDevValidations,
} from "ag-grid-community";
import { CellSelectionModule, RowNumbersModule } from "ag-grid-enterprise";
if (process.env.NODE_ENV !== "production") {
// Enable extended validations only for development
enableDevValidations();
}
ModuleRegistry.registerModules([
ClientSideRowModelModule,
RowNumbersModule,
CellSelectionModule,
]);
import { IOlympicData } from "./interfaces";
@Component({
selector: "my-app",
standalone: true,
imports: [AgGridAngular],
template: `<ag-grid-angular
style="width: 100%; height: 100%;"
[columnDefs]="columnDefs"
[defaultColDef]="defaultColDef"
[cellSelection]="true"
[rowNumbers]="true"
[rowData]="rowData"
(gridReady)="onGridReady($event)"
/> `,
})
export class AppComponent {
columnDefs: ColDef[] = [
{ field: "athlete" },
{ field: "country" },
{ field: "sport" },
{ field: "year" },
{ field: "gold" },
{ field: "silver" },
{ field: "bronze" },
];
defaultColDef: ColDef = {
flex: 1,
minWidth: 100,
};
rowData!: IOlympicData[];
constructor(private http: HttpClient) {}
onGridReady(params: GridReadyEvent<IOlympicData>) {
this.http
.get<IOlympicData[]>(
"https://www.ag-grid.com/example-assets/olympic-winners.json",
)
.subscribe((data) => {
this.rowData = data;
});
}
}
Row Selection Copy Link
When the grid is configured with Row Selection and click selection is enabled via rowSelection.enableClickSelection, clicking a Row Number selects the row.
<ag-grid-angular
[rowNumbers]="rowNumbers"
[rowSelection]="rowSelection"
/* other grid options ... */ />
this.rowNumbers = true;
this.rowSelection = {
mode: 'multiRow',
enableClickSelection: true
};When Cell Selection is enabled as well, a Row Number click does both: it selects all the cells in the row and the row itself.
Suppressing Cell Selection Integration Copy Link
By default, clicking a row number selects a cell range including all the cells in the row. To prevent this behaviour use the suppressCellSelectionIntegration option, which leaves only the Row Selection behaviour so that just the row is selected.
<ag-grid-angular
[rowNumbers]="rowNumbers"
[cellSelection]="cellSelection"
[rowSelection]="rowSelection"
/* other grid options ... */ />
this.rowNumbers = {
suppressCellSelectionIntegration: true
};
this.cellSelection = true;
this.rowSelection = {
mode: 'multiRow',
enableClickSelection: true
}; Set to true to prevent selecting all the currently visible cells in the row when clicking a Row Number. |
import { Component } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { AgGridAngular } from "ag-grid-angular";
import {
CellSelectionOptions,
ClientSideRowModelModule,
ColDef,
ColGroupDef,
GridApi,
GridOptions,
GridReadyEvent,
ModuleRegistry,
RowNumbersOptions,
RowSelectionModule,
RowSelectionOptions,
enableDevValidations,
} from "ag-grid-community";
import { CellSelectionModule, RowNumbersModule } from "ag-grid-enterprise";
if (process.env.NODE_ENV !== "production") {
// Enable extended validations only for development
enableDevValidations();
}
ModuleRegistry.registerModules([
ClientSideRowModelModule,
RowNumbersModule,
CellSelectionModule,
RowSelectionModule,
]);
import { IOlympicData } from "./interfaces";
@Component({
selector: "my-app",
standalone: true,
imports: [AgGridAngular],
template: `<ag-grid-angular
style="width: 100%; height: 100%;"
[columnDefs]="columnDefs"
[defaultColDef]="defaultColDef"
[cellSelection]="true"
[rowSelection]="rowSelection"
[rowNumbers]="rowNumbers"
[rowData]="rowData"
(gridReady)="onGridReady($event)"
/> `,
})
export class AppComponent {
columnDefs: ColDef[] = [
{ field: "athlete" },
{ field: "country" },
{ field: "sport" },
{ field: "year" },
{ field: "gold" },
{ field: "silver" },
{ field: "bronze" },
];
defaultColDef: ColDef = {
flex: 1,
minWidth: 100,
};
rowSelection: RowSelectionOptions | "single" | "multiple" = {
mode: "multiRow",
enableClickSelection: true,
};
rowNumbers: boolean | RowNumbersOptions = {
suppressCellSelectionIntegration: true,
};
rowData!: IOlympicData[];
constructor(private http: HttpClient) {}
onGridReady(params: GridReadyEvent<IOlympicData>) {
this.http
.get<IOlympicData[]>(
"https://www.ag-grid.com/example-assets/olympic-winners.json",
)
.subscribe((data) => {
this.rowData = data;
});
}
}
Context Menu Copy Link
Right-clicking a Row Number cell opens the Context Menu. As the cell holds no data of its own, the default items are the row-level ones, such as Export. The clipboard items (Cut, Copy and their variants) are included only when there is a cell range or selected rows to copy. Use rowNumbers.contextMenuItems to override the items for the Row Numbers Column only.
Row Resizing Copy Link
To allow the Row Numbers feature to resize rows, the enableRowResizer property can be used.
<ag-grid-angular
[rowNumbers]="rowNumbers"
/* other grid options ... */ />
this.rowNumbers = {
enableRowResizer: true
}; Set to true to add a resizer to each Row Number cell that allows row resizing. |
import { Component } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { AgGridAngular } from "ag-grid-angular";
import {
ClientSideRowModelModule,
ColDef,
ColGroupDef,
GridApi,
GridOptions,
GridReadyEvent,
ModuleRegistry,
RowNumbersOptions,
enableDevValidations,
} from "ag-grid-community";
import { RowNumbersModule } from "ag-grid-enterprise";
if (process.env.NODE_ENV !== "production") {
// Enable extended validations only for development
enableDevValidations();
}
ModuleRegistry.registerModules([ClientSideRowModelModule, RowNumbersModule]);
import { IOlympicData } from "./interfaces";
@Component({
selector: "my-app",
standalone: true,
imports: [AgGridAngular],
template: `<ag-grid-angular
style="width: 100%; height: 100%;"
[columnDefs]="columnDefs"
[defaultColDef]="defaultColDef"
[rowNumbers]="rowNumbers"
[rowData]="rowData"
(gridReady)="onGridReady($event)"
/> `,
})
export class AppComponent {
columnDefs: ColDef[] = [
{ field: "athlete" },
{ field: "country" },
{ field: "sport" },
{ field: "year" },
{ field: "gold" },
{ field: "silver" },
{ field: "bronze" },
];
defaultColDef: ColDef = {
flex: 1,
minWidth: 100,
};
rowNumbers: boolean | RowNumbersOptions = {
enableRowResizer: true,
};
rowData!: IOlympicData[];
constructor(private http: HttpClient) {}
onGridReady(params: GridReadyEvent<IOlympicData>) {
this.http
.get<IOlympicData[]>(
"https://www.ag-grid.com/example-assets/olympic-winners.json",
)
.subscribe((data) => {
this.rowData = data;
});
}
}
The Row Resizer feature does not work when columns are configured with Auto Row Height.
Row Resize Events Copy Link
The following events are fired when a row resize operation starts and ends.
The row resize has started (Row Numbers Feature) |
The row resize has ended (Row Numbers Feature) |
Value Export Copy Link
By default, when working with exporters such as CSV Export or Excel Export, the value of the Row Numbers column is not exported. This behaviour can be changed by toggling the exportRowNumbers of the export params.
<ag-grid-angular
[rowNumbers]="rowNumbers"
[cellSelection]="cellSelection"
[defaultCsvExportParams]="defaultCsvExportParams"
[defaultExcelExportParams]="defaultExcelExportParams"
/* other grid options ... */ />
this.rowNumbers = true;
this.cellSelection = {
enableHeaderHighlight: true,
handle: { mode: 'fill' },
};
this.defaultCsvExportParams = {
exportRowNumbers: true,
};
this.defaultExcelExportParams = {
exportRowNumbers: true,
}; ExportParams Copy Link
Set to true to allow the contents of the Row Numbers column to be exported. |
import { Component } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { AgGridAngular } from "ag-grid-angular";
import {
CellSelectionOptions,
ClientSideRowModelModule,
ColDef,
ColGroupDef,
CsvExportModule,
CsvExportParams,
ExcelExportParams,
GridApi,
GridOptions,
GridReadyEvent,
ModuleRegistry,
RowNumbersOptions,
enableDevValidations,
} from "ag-grid-community";
import {
CellSelectionModule,
ContextMenuModule,
ExcelExportModule,
RowNumbersModule,
} from "ag-grid-enterprise";
if (process.env.NODE_ENV !== "production") {
// Enable extended validations only for development
enableDevValidations();
}
ModuleRegistry.registerModules([
ClientSideRowModelModule,
RowNumbersModule,
CellSelectionModule,
ExcelExportModule,
CsvExportModule,
ContextMenuModule,
]);
import { IOlympicData } from "./interfaces";
@Component({
selector: "my-app",
standalone: true,
imports: [AgGridAngular],
template: `<ag-grid-angular
style="width: 100%; height: 100%;"
[columnDefs]="columnDefs"
[defaultColDef]="defaultColDef"
[rowNumbers]="true"
[defaultCsvExportParams]="defaultCsvExportParams"
[defaultExcelExportParams]="defaultExcelExportParams"
[cellSelection]="cellSelection"
[rowData]="rowData"
(gridReady)="onGridReady($event)"
/> `,
})
export class AppComponent {
columnDefs: ColDef[] = [
{ field: "athlete" },
{ field: "country" },
{ field: "sport" },
{ field: "year" },
{ field: "gold" },
{ field: "silver" },
{ field: "bronze" },
];
defaultColDef: ColDef = {
flex: 1,
minWidth: 100,
};
defaultCsvExportParams: CsvExportParams = {
exportRowNumbers: true,
};
defaultExcelExportParams: ExcelExportParams = {
exportRowNumbers: true,
};
cellSelection: boolean | CellSelectionOptions = {
enableHeaderHighlight: true,
handle: {
mode: "fill",
},
};
rowData!: IOlympicData[];
constructor(private http: HttpClient) {}
onGridReady(params: GridReadyEvent<IOlympicData>) {
this.http
.get<IOlympicData[]>(
"https://www.ag-grid.com/example-assets/olympic-winners.json",
)
.subscribe((data) => {
this.rowData = data;
});
}
}
Customising Row Numbers Copy Link
Row Numbers can be customised by providing a RowNumbersOptions object to the rowNumbers grid option:
Set to true to prevent selecting all the currently visible cells in the row when clicking a Row Number. |
Set to true to add a resizer to each Row Number cell that allows row resizing. |
The minimum width for the row number column. |
The default width for the row number column. When set, the column never auto-sizes narrower than it, unless maxWidth is smaller. Updating rowNumbers keeps a width the user has resized the column to, within its new minWidth and maxWidth, unless the update sets a different width of at least minWidth. |
Whether this column is resizable. |
Customise the list of menu items available in the context menu. @agModule ContextMenuModule
|
Callback called when a cell is clicked. |
Callback called when a cell is right clicked. |
Callback called when a cell is double clicked. |
The custom header component to be used for rendering the component header. If none specified the default AG Grid header component is used. See Header Component for framework specific implementation detail.
|
The parameters to be passed to the headerComponent. |
Set to true if this column is not navigable (i.e. cannot be tabbed into), otherwise false. Can also be a callback function to have different rows navigable. |
Tooltip for the cell. true shows the displayed cell value (valueFormatted when present, otherwise value). false disables tooltip content configured on the Column Definition. TooltipModule
|
Callback to select which tooltip component to be used for a given row within the same column. @agModule TooltipModule
|
Function or expression. Gets the value from your data for display. |
A function or expression to format a value, should return a string. |
Maximum width in pixels for the cell. |
Provide your own cell Renderer component for this column's cells. See Cell Renderer for framework specific implementation details.
|
Callback to select which cell renderer to be used for a given row within the same column. |
Params to be passed to the cellRenderer component. |