How can I merge cells of Ag-grid?

Question

I am using Ag-grid and I need merge particular cells in a row.

How can I do this?

Answer 1

This example demonstrates merging of "First name" and "Last name" fields to form "Name" Field

columnDefs: [
        {
          headerName: 'Name',
          field: 'name',
          filter: true,
          width: 210,
          valueGetter:function(params){
              return params.data.fname+" "+params.data.lname
          }
        },
...
]

Answer 2

ag-Grid calls this "Column Spanning." In the good old' days of HTML tables, we'd call this colspan, and rowspan for the closely-related action of merging cells vertically.

Anyway, here is the ag-Grid reference:

https://www.ag-grid.com/javascript-grid-column-spanning/

Answer 3

You can add this to your colDef for the particular column

cellClass: function(params) {
    if(params.data.someConditionForCellsToBeMerged) {
      return params.data.someConditionForCellToKeep ? "top-row-span": "bottom-row-span";
    }   
}

And then in your css:

.ag-neo .ag-cell.top-row-span {
  border-bottom: 0px;
}

.ag-neo .ag-cell.bottom-row-span {
  border-top: 0px;
  text-indent: -100em; // you can use this to hide the content of the bottom cell
}