Ag grid to put border only between group values

Question

Attached my plunker link [https://plnkr.co/edit/lnF09XtK3eDo1a5v]

Do we have option to put a border between different group values..in this example country is group and let says UnitedStates rows are completed , can we get bottom border to depict end of group value

Answer 1

You can use rowClassRules to determine which rows should have certain styling. In your case you may want to style the border-top of every first row in the group minus the very first row in the table. So it'd be

<AgGridReact
  ...
  rowClassRules={{
    "first-row-in-group": (params) => 
        params.node.rowIndex !== 0 && params.node.firstChild
  }}
/>

In your css file

/* style expanded row group */
.first-row-in-group,
/* style collapsed row group */
.ag-row-group-contracted {
  border-top: tomato solid 1px !important;
}

Live Demo