4

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

Bill
  • 3
  • 2
Yuvaraja
  • 53
  • 1
  • 4

1 Answers1

-1

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.

Ghonima
  • 2,978
  • 2
  • 14
  • 23
  • 1
    Yup, I saw this documentation before raising the question. I appreciate your answer is fine. I need row span dynamic way. Can you please suggest for dynamic way. – Yuvaraja Apr 01 '20 at 03:14
  • Not sure what you mean, since it's a function you can have it return a different row span based on your logic. – Ghonima Apr 01 '20 at 09:17
  • I think what he was trying to ask was how to, for example, merge two cells after the ag-grid is loaded and the cells are displayed. – user1969903 Jul 27 '20 at 08:40
  • 4
    How can rowSpan when two country is same not just Russia? – Mostafa Saadatnia Jul 01 '21 at 05:07