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?

Nothing inherent to ag-grid... but this gihub issue has some details/workarounds: https://github.com/ceolter/ag-grid/issues/22 — Jarod Moser, May 10 '17 at 15:26

score 2 · Answer 1 · answered Nov 01 '20 at 18:58

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
          }
        },
...
]

score 0 · Answer 2 · edited Mar 27 '19 at 05:05

0

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/

edited Mar 27 '19 at 05:05

Shiladitya

12,003
15
25
38

answered Jan 31 '18 at 14:07

kmiklas

13,085
22
67
103

score -1 · Answer 3 · answered Feb 19 '18 at 14:05

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
}

How can I merge cells of Ag-grid?

3 Answers3