Well, it seems that material table has no api documentation for it, I could not find any trick to do this too, But we can twick the our data to support this, as per your second example we can reform the data to new json and we can get our expected result.
Step 1 :
const originalData = [
{ id: 1, name: 'Hydrogen', weight: 1.0079, descriptions: ['row1', 'row2'] },
{ id: 2, name: 'Helium', weight: 4.0026, descriptions: ['row1', 'row2', 'row3'] },
{ id: 3, name: 'Lithium', weight: 6.941, descriptions: ['row1', 'row2'] },
{ id: 4, name: 'Beryllium', weight: 9.0122, descriptions: ['row1', 'row2', 'row3'] },
{ id: 5, name: 'Boron', weight: 10.811, descriptions: ['row1'] },
{ id: 6, name: 'Carbon', weight: 12.0107, descriptions: ['row1', 'row2', 'row3'] },
{ id: 7, name: 'Nitrogen', weight: 14.0067, descriptions: ['row1'] },
{ id: 8, name: 'Oxygen', weight: 15.9994, descriptions: ['row1'] },
{ id: 9, name: 'Fluorine', weight: 18.9984, descriptions: ['row1', 'row2', 'row3'] },
{ id: 10, name: 'Neon', weight: 20.1797, descriptions: ['row1', 'row2', 'row3'] },
]; //original data
const DATA = originalData.reduce((current, next) => {
next.descriptions.forEach(b => {
current.push({ id: next.id, name: next.name, weight: next.weight, descriptions: b })
});
return current;
}, []);//iterating over each one and adding as the description
console.log(DATA)
const ELEMENT_DATA: PeriodicElement[] = DATA; //adding data to the element data
Step 2
this will be as it is as your second stackblitz link.
getRowSpan(col, index) {
return this.spans[index] && this.spans[index][col];
}
Step 3
as it is as per your second link
constructor() {
this.cacheSpan('Priority', d => d.id);
this.cacheSpan('Name', d => d.name);
this.cacheSpan('Weight', d => d.weight);
}
/**
* Evaluated and store an evaluation of the rowspan for each row.
* The key determines the column it affects, and the accessor determines the
* value that should be checked for spanning.
*/
cacheSpan(key, accessor) {
for (let i = 0; i < DATA.length;) {
let currentValue = accessor(DATA[i]);
let count = 1;
// Iterate through the remaining rows to see how many match
// the current value as retrieved through the accessor.
for (let j = i + 1; j < DATA.length; j++) {
if (currentValue != accessor(DATA[j])) {
break;
}
count++;
}
if (!this.spans[i]) {
this.spans[i] = {};
}
// Store the number of similar values that were found (the span)
// and skip i to the next unique row.
this.spans[i][key] = count;
i += count;
}
}
Step 4
Using index to pass down to rowspan and hiding the rows where it doesn't needed
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef> Priority </th>
<td mat-cell *matCellDef="let data;let i = dataIndex" [attr.rowspan]="getRowSpan('Priority',i)" [style.display]="getRowSpan('Priority', i) ? '' : 'none'">
{{ data.id }} </td>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let data;let i = dataIndex" [attr.rowspan]="getRowSpan('Name',i)" [style.display]="getRowSpan('Name', i) ? '' : 'none'">
{{ data.name }} </td>
</ng-container>
<ng-container matColumnDef="weight">
<th mat-header-cell *matHeaderCellDef> Weight </th>
<td mat-cell *matCellDef="let data;let i = dataIndex" [attr.rowspan]="getRowSpan('Weight',i)" [style.display]="getRowSpan('Weight', i) ? '' : 'none'">
{{ data.weight }} </td>
</ng-container>
<ng-container matColumnDef="descriptions">
<th mat-header-cell *matHeaderCellDef> Descriptions </th>
<td mat-cell *matCellDef="let data"> {{ data.descriptions }} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
Here is the demo
getRowSpan(), I would recommend you add a data field in your object. Data binding to a method is expensive in iteration. - wannadream