Ag-Grid column on second line of row if data exists

Question

I am looking to implement the free version of ag-grid for displaying about 1,000 records. The records have about 8 columns that will display on the first row, but I would like the 9th column to display across the entire width of the row on a second line. It would only display if data exists. Is there a way to accomplish that with Ag-Grid?

Phil Phil · Accepted Answer · 2018-05-12T06:31:46

In the free version of AgGrid you have Full Width Rows. However, you cannot have a full-width-row and a regular columns-row which both access the same data. And I assume what you are looking for is a design like this:

|___|___|___|___|___|
|___________________|
|___|___|___|___|___|
|___________________|
|___|___|___|___|___|
|___________________|

So in order to have both columns and rows, you would need to duplicate the data and do something like

function isFullWidth(index) {
  return index % 2 === 0;
}

Now if you want the full-width-row to be expandable/collapsable (I assume it is for some detail information that the 9th column is too small and you want to place an expand button in that column), you have to get ag-grid enterprise for the row-grouping or row-trees.

Our team also faced that problem (data not fitting in the column) and we went for the approach of putting ngx-bootstrap-tooltip in a column, so on hover (or hammer.js-gesture) you see a tooltip.

Ag-Grid column on second line of row if data exists

1 Answers