How to show row number as the first column? - ag-grid

Question

It's like this (but start from 1):
Please note the number is for the row element of grid instead of row data of the source. So the number shown in the first cell of each rows should indicate the position of the current row (which starts from 1 for the first row) regardless the row data and the sorting criteria.
Update: The result is like this: https://jsfiddle.net/wp6o350z/
<script src="https://unpkg.com/ag-grid/dist/ag-grid.min.noStyle.js"></script>
<link rel="stylesheet" href="https://unpkg.com/ag-grid/dist/styles/ag-grid.css">
<link rel="stylesheet" href="https://unpkg.com/ag-grid/dist/styles/ag-theme-balham.css">
<div id="myGrid" style="height: 200px;width:500px;" class="ag-theme-balham"></div>
<script type="text/javascript" charset="utf-8">
// specify the columns
var columnDefs = [
{headerName: "#", field: "row", width: 30 },
{headerName: "Make", field: "make", width: 100 },
{headerName: "Model", field: "model", width: 100},
{headerName: "Price", field: "price", width: 100}
];
// specify the data
var rowData = [
{row: 1, make: "Toyota", model: "Celica", price: 35000},
{row: 2, make: "Ford", model: "Mondeo", price: 32000},
{row: 3, make: "Porsche", model: "Boxter", price: 72000},
{row: 4, make: "Toyota", model: "Celica", price: 35000},
{row: 5, make: "Ford", model: "Mondeo", price: 32000},
{row: 6, make: "Porsche", model: "Boxter", price: 72000},
{row: 7, make: "Toyota", model: "Celica", price: 35000},
{row: 8, make: "Ford", model: "Mondeo", price: 32000},
{row: 9, make: "Porsche", model: "Boxter", price: 72000}
];
// let the grid know which columns and what data to use
var gridOptions = {
columnDefs: columnDefs,
rowData: rowData,
};
// lookup the container we want the Grid to use
var eGridDiv = document.querySelector('#myGrid');
// create the grid passing in the div to use together with the columns & data we want to use
new agGrid.Grid(eGridDiv, gridOptions);
</script>
The problems in this sample are:
The row number is defined in the data, which is not supported in real case. Maintaining a row is difficult and slow since inserting from the beginning will need to update many rows.
Since the row number is defined in the data, after sorting you won't see the row number is randomized. I still want to see the row number start from 1 from the beginning.
Basically it's easier to be part of the grid feature, and many other grids (not limited to JS grids) support this. I'm wondering if it's easy to do it in with ag-grid.

Answer 1

Ag-grid now has a "valueGetter" for cells that takes an expression, so you can just use
columnDefs: [
{
headerName: "Row",
valueGetter: "node.rowIndex + 1"
},
(other columns)
]
In order to have it refresh after sorting, you need to call refreshCells:
onSortChanged(e: AgGridEvent) {
e.api.refreshCells();
}
If you are filtering, you would do the same thing on the 'filterChanged' event.

Answer 2

One way that we can use is:
create a custom component that implements "ICellRendererAngularComp" interface
refer to https://www.ag-grid.com/javascript-grid-cell-rendering-components/#example-rendering-using-angular-components
and implements agInit method like below:
import { ICellRendererAngularComp } from 'ag-grid-angular';
import { Component } from '#angular/core';
#Component({
selector: 'app-ag-grid-row-number',
templateUrl: './ag-grid-row-number.component.html',
styleUrls: ['./ag-grid-row-number.component.scss']
})
export class AgGridRowNumberComponent implements ICellRendererAngularComp {
rowNumber: number;
refresh(params: any): boolean {
return true;
}
agInit(params: import('ag-grid-community').ICellRendererParams): void {
this.rowNumber = params.rowIndex + 1;
}
afterGuiAttached?(params?: import('ag-grid-community').IAfterGuiAttachedParams): void {
}
}
In your view:
{{ rowNumber }}
finally in your list component:
public columnDefs = [
{headerName: 'row number', cellRendererFramework: AgGridRowNumberComponent},
... ]