daniele-zurico

<div class="mat-elevation-z8">
  <mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">

    <ng-container [matColumnDef]="cols" *ngFor="let cols of displayedColumns">
      <mat-header-cell *matHeaderCellDef mat-sort-header> {{cols}} </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element[cols]}} </mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>

daniele-zurico

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  data: any[] = [

daniele-zurico

import {Component} from '@angular/core';
import * as faker from 'faker';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  title = 'app';

daniele-zurico

import { Component, OnInit, ViewChild, Input } from '@angular/core';
import { MatPaginator, MatSort } from '@angular/material';
import { NgxDataTableDataSource } from './ngx-data-table-datasource';
import {
  trigger,
  state,
  style,
  transition,
  animate,
} from '@angular/animations';

daniele-zurico

<mat-cell *matCellDef="let element" [ngClass]="{'col-value': element.details === undefined}">
  <!-- expand caret -->
  <span *ngIf="i === 0 && element.details">
    <span *ngIf="expandedElement && expandedElement[cols] === element[cols]; else plusIcon" class="expand-icon">&#9650;</span>
    <ng-template #plusIcon><span class="expand-icon">&#9660;</span></ng-template>
  </span>
  <span>{{element[cols]}}</span>
</mat-cell>

daniele-zurico

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

daniele-zurico

<!-- Expanded Content Column - The detail row is made up of this one column -->
<ng-container matColumnDef="expandedDetail">
  <mat-cell *matCellDef="let detail">
    <ngx-data-table [data]="detail.element.details" class="detail-table"></ngx-data-table>
  </mat-cell>
</ng-container>

daniele-zurico

import { DataSource } from '@angular/cdk/collections';
import { MatPaginator, MatSort } from '@angular/material';
import { map } from 'rxjs/operators';
import { Observable, of as observableOf, merge } from 'rxjs';

/**
 * Data source for the NgxDataTable view. This class should
 * encapsulate all logic for fetching and manipulating the displayed data
 * (including sorting, pagination, and filtering).
 */

daniele-zurico

<div class="mat-elevation-z8">
<mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
  <ng-container [matColumnDef]="cols" *ngFor="let cols of displayedColumns; let i = index">
    <mat-header-cell *matHeaderCellDef mat-sort-header>{{cols}}</mat-header-cell>
    <mat-cell *matCellDef="let element" [ngClass]="{'col-value': element.details === undefined}">
      <!-- expand caret -->
      <span *ngIf="i === 0 && element.details">
        <span *ngIf="expandedElement && expandedElement[cols] === element[cols]; else plusIcon" class="expand-icon">&#9650;</span>
        <ng-template #plusIcon><span class="expand-icon">&#9660;</span></ng-template>
      </span>

daniele-zurico

.detail-table {display: flex;flex-direction: column;display: block;margin: 10px;width: 100%;}
.expand-icon {color: rgba(0,0,0,.44);font-size: 12px; margin-right: 5px; cursor: pointer;}
.col-value:first-child span{margin-left: 15px;}
.mat-form-field {padding: 10px 10px 0 10px;width: calc(100% - 20px);}