Dynamic rowspan using angular material mat-table in angular 8

Question

I'm having data like below, I want to use in mat-table by grouping of city

arr = [{
{id: 1, status: 'active', name: 'AAA', city: 'cityA'},
{id: 2, status: 'active', name: 'AAA', city: 'cityA'},
{id: 3, status: 'active', name: 'AAA', city: 'cityA'},
{id: 4, status: 'active', name: 'AAA', city: 'cityB'},
{id: 5, status: 'active', name: 'AAA', city: 'cityB'},
{id: 6, status: 'active', name: 'AAA', city: 'cityB'},
{id: 7, status: 'active', name: 'AAA', city: 'cityC'},
{id: 8, status: 'active', name: 'AAA', city: 'cityC'},
{id: 9, status: 'active', name: 'AAA', city: 'cityC'},
}]

Expected Output

enter image description here