Extensible table rows in angular 4 with angular material

Question

How would you make rows extensible in corner material tables? One of the requirements is to use a table of corner materials . I would also prefer to use the accordion material for the information presented here .

I want to click on a row and show different information for each column. I am looking for something like below. If you click line 1, lines 2 and 3 appear with different data.

Answer 1

As Andrew Segin mentioned here , this is already doable out of the box: using a predicate when.

: https://stackblitz.com/edit/angular-material-expandable-table-rows ( )

mat-table mat-row matRipple. expandedElement :

<mat-row *matRowDef="let row; columns: displayedColumns;"
        matRipple 
        class="element-row" 
        [class.expanded]="expandedElement == row"
        (click)="expandedElement = row">
</mat-row>

, , :

<mat-row *matRowDef="let row; columns: ['expandedDetail']; when: isExpansionDetailRow"
        [@detailExpand]="row.element == expandedElement ? 'expanded' : 'collapsed'"
        style="overflow: hidden"> 
</mat-row>

when . isExpansionDetailRow , , detailRow detailRow:

isExpansionDetailRow = (row: any) => row.hasOwnProperty('detailRow');

RC0 :

isExpansionDetailRow = (i: number, row: any) => row.hasOwnProperty('detailRow');

, "ExpansionDetailRow", detailRow , :

connect(): Observable<Element[]> {
    const rows = [];
    data.forEach(element => rows.push(element, { detailRow: true, element }));
    return Observable.of(rows);
}

rows row , :

: DIRECTIVE

Mat (, )

Answer 2

, . ( , ).

: click :

<md-row *mdRowDef="let row; columns: displayedColumns; let index=index" (click)="expandRow(index, row)" #myRow></md-row>

. row_detail.html html, .

@Component({
  selector: 'app-inline-message',
  templateUrl: 'row_detail.html',
  styles: ['
    :host {
      display: block;
      padding: 24px;
      background: rgba(0,0,0,0.03);
    }
  ']
})
export class InlineMessageComponent {
  @Input() content1: string;
  @Input() content2: string;
}

, , . ...

expandedRow: number;
@ViewChildren('myRow', { read: ViewContainerRef }) containers;

... :

/**
   * Shows the detail view of the row
   * @param {number} index
   */
expandRow(index: number, row: DataFromRowFormat) {

    if (this.expandedRow != null) {
      // clear old message
      this.containers.toArray()[this.expandedRow].clear();
    }

    if (this.expandedRow === index) {
      this.expandedRow = null;
    } else {
      const container = this.containers.toArray()[index];
      const factory: ComponentFactory<InlineMessageComponent> = this.resolver.resolveComponentFactory(InlineMessageComponent);
      const messageComponent = container.createComponent(factory);

      messageComponent.instance.content1= "some text";
      messageComponent.instance.content2 = "some more text";
    }
}

Answer 3

Angular Material. mat-sort-header name. mat paginator , , .

https://stackblitz.com/edit/angular-material2-issue-zs6rfz

Answer 4

When the CDK was the only way to get something close to Material Table, using md-rowin a regular table was a viable alternative, but since @angular/material 2.0.0-beta.12ditched tables CDKnow also have their own data tables, it can suit your needs. See the documentation below:

https://material.angular.io/components/table/overview