How do I merge identical adjacent rows with dynamic row spans in Ag-Grid?

8.3k views Asked by At

Most examples of rowspanning I have seen involve hard-coded values.

How would I create row-spans dynamically based on the column values? Specifically, I'd like to dynamically merge all adjacent identical rows into one cell, to get a result such as this:

Ag-Grid - Only Date rows are to be span

Can the function logic to define a row-span access the values from other rows? Can it do so relative to itself (e.g. next row, prev row)?

1

There are 1 answers

4
Ghonima On BEST ANSWER

While defining your column definitions, you can specify the row span of each column.

For example this will specify 5 rows merged

colDef = {
    headerName: "Country",
    field: "country",
    rowSpan: 5
}

Also you can have it as a function to be more dynamic

colDef = {
    headerName: "Country",
    field: "country",
    rowSpan: function(params) {
        return params.data.country==='Russia' ? 2 : 1;
    }
}

This will specify 2 merged rows if the country is Russia and 1 for everything else. This is taken from AG-Grid documentation here.

I suggest reading more on the row span in the documentation. It explains it well.