How to add Row Header in Ag-grid?

Question

Please refer to the image shown below. (The highlighted part is the ROW header that I need in AG-Grid)

Answer 1

I am not sure about the functional use case of this first column for you. Nevertheless you can achieve this by adding it to column definition as shown below.

var gridOptions = {
    // define grid columns
    columnDefs: [
        // using default ColDef
        {
            headerName: ' ',
            field: '__',
            width: 15,
            sortable: false,
            cellStyle: {
                // you can use either came case or dashes, the grid converts to whats needed
                backgroundColor: 'lightgrey', // whatever cell color you want
            },
        },
...
}

Created working sample plnkr here.

Answer 2

As far as I know ag-grid doesn't have any built-in support for row headers, but as a workaround you can make your first column appear as row headers. I recommend making the whole column look a little different compared to the other columns (including the column header if it's not blank) so it can clearly be seen they are column headers, not standard row data.

Example column definitions:

ColumnDefs: [ 
    { headerName: 'Column Title 1', field: 'Column1', minWidth: 100, headerClass: "upperLeftCell", cellStyle: {
            backgroundColor: 'AliceBlue', //make light blue
            fontWeight: 'bold' //and bold
        }
    },
    { headerName: 'Column Title 2', field: 'Column2', minWidth: 100 },
    { headerName: 'Column Title 3', field: 'Column3', minWidth: 100 }
]

You can also style in SCSS as shown here with the upper left cell:

::ng-deep .ag-header-cell.upperLeftCell {
    background-color: aliceblue;
    font-weight: bold;
  }

In your data rows: you have to enter in the first column the title you want for each row.

Answer 3

Add this as your first colDef. It will render a index column that is unmovable. I have a separate IndexColumnCellRender so won't look exact the same, fill in cellStyle to fit your needs, or make a dedicated cell render like me.

    const rowIndexColumn: ColDef = {
      valueGetter: ({ node }) => {
        const rowIndex = node?.rowIndex;
        return rowIndex == null ? "" : rowIndex + 1;
      },
      width: columnWidth,
      headerName: "",
      colId: "some-id",
      field: "some-id",
      suppressNavigable: true,
      suppressPaste: true,
      suppressMovable: true,
      suppressAutoSize: true,
      suppressMenu: true,
      lockPosition: true,
      cellStyle: { padding: 0 },
    };