tabela-anihada.component.html

<table>
  <thead>
    <tr>
      <!-- percorrer cada coluna -->
      <th *ngFor="let coluna of colunas" class="{{ coluna.classeCssCabecalho }}" >
        {{ coluna.cabecalho }}
      </th>
    </tr>
  </thead>
  <tbody>

    <!-- percorrer cada linha -->
    <ng-container *ngFor="let linha of linhas">

      <!-- Em breve iremos criar o componente que representa cada linha -->
      <linha-tabela-aninhada
        [linha]="linha"
        [colunas]="colunas"
        [extratorDeFilhos]="extratorDeFilhos"
        [extratorDeClasseCss]="extratorDeClasseCss" ></linha-tabela-aninhada>
    </ng-container>
  </tbody>
</table>

tabela-aninhada.component.scss

table {
  width: 100%;
  border-spacing: 0;
}

td {
  border-top: 1px solid white;
}

tabela-aninhada.component.ts

import { Component, Input, OnInit } from '@angular/core';
import { ColunaTabelaAninhada } from './coluna-tabela-aninhada';

@Component({
  selector: 'tabela-aninhada',
  templateUrl: './tabela-aninhada.component.html',
  styleUrls: ['./tabela-aninhada.component.scss']
})
export class TabelaAninhadaComponent {


  /**
   * Informe as colunas da sua tabelas
   */
  @Input()
  colunas: ColunaTabelaAninhada[] = [];

  /**
   * Informe o array de dados da sua tabela, onde cada elemento será um linhas da tabela
   */
  @Input()
  linhas: any[] = [];

  /**
   * Informe a função para extrair, de cada linha, as linhas filhas.
   */
  @Input()
  extratorDeFilhos: (linha: any) => any[] = (_:any) => null;

  /**
   * Informe a função para extrair, de cada linha, a classe de css customizada
   */
  @Input()
  extratorDeClasseCss: (nivel) => string;

  constructor() { }

}