Search code examples
ag-gridag-grid-angularag-grid-validation

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


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)?


Solution

  • 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.