[Table] Posibility to have more rows for item with second row colspan

Feature request

What is the expected behavior?

declare two rows for one item in dataSource

What is the use-case or motivation for changing an existing behavior?

Table with items with second row for labels.

First column	Second column
Item 1 - One	Item 1 - Two
Item 1 - Two cols
Item 2 - One	Item 2 - Two
Item 2 - Two cols

Is there anything else we should know?

Is this posible with the current implementation in cdk-table or mat-table

[willshowell]

Though not yet documented, this is possible with the when predicate on the row.

<mat-header-row *matHeaderRowDef="['data', 'id']"></mat-header-row>
<mat-row *matRowDef="let row; columns: ['data', 'id'];"></mat-row>
<mat-row
    *matRowDef="let row; columns: ['data']; when: isExtendedRow"
    class="darken">
</mat-row>

isExtendedRow = (index, item) => item.extend;

// ...

const DATA = [
  { data: 'ABC', id: 1 },
  { data: 'DEF', id: 2 },
  { data: 'GHI', id: 3, extend: true },
  { data: 'JKL', id: 4, },
  { data: 'MNO', id: 5, extend: true },
]

https://stackblitz.com/edit/material2-rc0-6drmzf?file=app%2Fapp.component.html

[DmitryEfimenko]

How can I have multiple rows based on an array in an element? For example, I have a records with structure like:

[
  {
    id: 1,
    name: 'Luke',
    books: ['book1', 'book2']
  }
]

So I’d like to create 3 rows per that record:

<tr>
  <td>1</td>
  <td>Luke</td>
</tr>
<tr>
  <td colspan="2">book1</td>
</tr>
<tr>
  <td colspan="2">book2</td>
</tr>

I understand that multiTemplateDataRows lets me have multiple row definitions, but I need dynamic number of these row definitions. I need to put *matRowDef into a *ngFor loop somehow.

How can I achieve that?