Example for Rowspan attribute for cdk table

[jainankit102]

Bug, feature request, or proposal:

Request, creating a request as suggested in ticket #10594 by @CDDelta

What is the expected behavior?

Not able to implement rowspan attribute for cdk table. would be great if any example is present on material.angular.io.

What is the current behavior?

No example is present for rowspan attribute for cdk table.

What are the steps to reproduce?

Providing a StackBlitz reproduction is the best way to share your issue.

StackBlitz starter: https://goo.gl/wwnhMV

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

C

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

All

Is there anything else we should know?

expected example:

[andrewseguin]

Thanks, will add this to the queue of things to change in the docs.

[jainankit102]

Thanks a lot @andrewseguin. for us its a blocker couldn't able to move ahead because of this. If I get some stackblitz example then that would be great.

Thanks in advance.

[andrewseguin]

Here's a reproduction of your expected result: https://stackblitz.com/edit/angular-lnahlh?file=app%2Ftable-basic-example.css

[jainankit102]

Thank you a lot @andrewseguin. This is crazy.

[martindchv]

@andrewseguin Can this be applied on header rows? I want to do something like this http://prntscr.com/k725va

[adamdport]

@andrewseguin appreciate the sample, but I don't think this would work for more complicated tables that use pagination, filtering, etc?

edit: Here's the example modified to use pagination. It does not work.

[adamdport]

I ended up manually figuring out the rowspans based on the current filters and page size. The basic idea is to update an array of rowSpans every time the filter or pagination changes:

updateRowSpans(){
    this.rowSpans = [];
    let renderedRowData = this.tableData.filteredData.slice(this.paginator.pageIndex * this.paginator.pageSize, (this.paginator.pageIndex + 1) * this.paginator.pageSize)
    let indexOfFirstRow: Map<string, number> = new Map(); //first appearance of the row to span

    renderedRowData.forEach((row: MyRowObject, index) => {
      if(indexOfFirstRow.get(row.propertyIWantToSpan.id) === undefined){
        //if this is the first one, set the first row so we can increment it later
        indexOfFirstRow.set(row.propertyIWantToSpan.id, index);
        this.rowSpans[index] = 1;
      }else{
        //otherwise, increment the span of the first row and set this one to 0
        this.rowSpans[indexOfFirstRow.get(row.propertyIWantToSpan.id)]++;
        this.rowSpans[index] = 0;
      }
    });
  }

and then

<td mat-cell *matCellDef="let row; let i=index"
          [rowSpan]="rowSpans[i]"
          [style.display]="rowSpans[i]===0 ? 'none' : ''">
...

It'd be cool if something like this could be built into material at some point.

[EliezerB123]

Here's a reproduction of your expected result: https://stackblitz.com/edit/angular-lnahlh?file=app%2Ftable-basic-example.css

Would it be possible to turn this into a directive?

Like:

 <ng-container matColumnDef="testTime">
    <th mat-header-cell *matHeaderCellDef></th>
    <td mat-cell **shouldRowSpan**  *matCellDef="let data; let i=index"></td>
  </ng-container>

And the directive will automatically subscribe himself to a service that handles it.

Essentially, if mat-cell[i] and mat-cell[i+1] have the same content, then give mat-cell[i] rowspan="2", and mat-cell[i+1] display:none; , exactly like in the stackblitz.