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

[JiriBalcar]

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

[JiriBalcar]

@willshowell Thank you for the quick response. Unfortunately this is not exactly what I was describing. When one or the other row, but I need to be rendered both of the rows as it is shown in the description. Item has two rows, first with two columns and the second with one column.

[willshowell]

Ah ok, the concept is similar to expandable rows. There are a variety of ways to do it, but here's one option,

https://stackblitz.com/edit/material2-rc0-rqphi1?file=app%2Fapp.component.ts

Basically, you split each data row into two rows with the pertinent data in each.

[JiriBalcar]

@willshowell Thank you, this works. It still seems like quite hacky solution ;-)

It adds complexity for sorting, filtering, pagination and styling the table. For example if you do not want to have border between this two rows and not all of the items should have second row.

It is possible with your solution but look like hack. And I do not know it it will not have performance penalty.

[merylb]

i used the when predicate on the row but doesn't help in my case it extend just the left cells i want expand the number cell on 2 columns and date cell on two columns;

that's what i need :

but that's what i got:

any help please?

[pks90]

Is it also possible to extend the column as well i.e. does isExtendedColumn also exists , do you have an example of that ? I am trying to achieve a rowspan in table maybe the property helps me achive this .

[merylb]

isExtendedColumn is a callback that handle wich row to extend for example:

isExtendedColumn = (index, item) => item.number === '2555/003';

[naxisinc]

Can I put 3 items in the same row? I want to show many pictures but I need to display 3 of them in the same row. Thanks

[andrewseguin]

Closing since this is possible today using multiTemplateDataRows

https://stackblitz.com/edit/angular-3sdzy2?file=app/table-basic-example.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?

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}