Mat-table with headers in two rows, using Angular 8

I'm showing information in a table using mat-table. I have something like this:

material table

with this HTML:

  <div class="container">
   <div class="mat-elevation-z8">
    <table #dataTable mat-table [dataSource]="dataSource">
      <ng-container class="ng-hide" matColumnDef="$key">
        <th class="ng-hide" mat-header-cell *matHeaderCellDef>ID del Paciente</th>
        <td class="ng-hide" mat-cell *matCellDef="let element"> {{element.$key}} </td>
      </ng-container>

      <ng-container matColumnDef="nombre_paciente">
        <th mat-header-cell *matHeaderCellDef> Nombre </th>
        <td mat-cell *matCellDef="let element"> {{element.nombre_paciente}}</td>
      </ng-container>

      <ng-container matColumnDef="apellido_paciente">
        <th mat-header-cell *matHeaderCellDef> Apellido </th>
        <td mat-cell *matCellDef="let element"> {{element.apellido_paciente}} </td>
      </ng-container>

      <ng-container matColumnDef="dni">
        <th mat-header-cell *matHeaderCellDef> DNI </th>
        <td mat-cell *matCellDef="let element"> {{element.dni}} </td>
      </ng-container>

      <ng-container matColumnDef="fecha_nacimiento">
        <th mat-header-cell *matHeaderCellDef> Fecha de Nacimiento </th>
        <td mat-cell *matCellDef="let element"> {{element.fecha_nacimiento | date: "dd/MM/yyyy" }</td>
      </ng-container>

      <ng-container matColumnDef="obra_social">
        <th mat-header-cell *matHeaderCellDef> Obra Social </th>
        <td mat-cell *matCellDef="let element"> {{element.obra_social}} </td>
      </ng-container>

      <ng-container matColumnDef="numero_os">
        <th mat-header-cell *matHeaderCellDef> Número de Obra Social </th>
        <td mat-cell *matCellDef="let element"> {{element.numero_os}} </td>
      </ng-container>

      <ng-container matColumnDef="telefono">
        <th mat-header-cell *matHeaderCellDef> Número de teléfono </th>
        <td mat-cell *matCellDef="let element"> {{element.telefono}} </td>
      </ng-container>

      <ng-container matColumnDef="telefono_contacto">
        <th mat-header-cell *matHeaderCellDef> Teléfono de Contacto </th>
        <td mat-cell *matCellDef="let element"> {{element.telefono_contacto}} </td>
      </ng-container>

      <ng-container matColumnDef="accion">
        <th mat-header-cell *matHeaderCellDef></th>
        <td mat-cell *matCellDef="let element; let i = index;">
          <button mat-raised-button color="primary" class="push-right"
            [routerLink]="['/PacienteEdita/', element.$key]">Editar</button>
          <button mat-raised-button color="warn" (click)="deletePaciente(i, element)">Eliminar</button>
        </td>
      </ng-container>

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

    </table>
  </div>
</div>

and this TS:

import { Component, OnInit, ViewChild } from '@angular/core';
import { Paciente } from './../../shared/paciente';
import { MatTableDataSource, MatTable } from '@angular/material';
import { PacienteService } from './../../shared/paciente.service';
import { ActivatedRoute } from '@angular/router';


@Component({
  selector: 'app-pacientes-detalle',
  templateUrl: './pacientes-detalle.component.html',
  styleUrls: ['./pacientes-detalle.component.css']
})
export class PacientesDetalleComponent implements OnInit {
  id: any;
  element: Paciente;
  dataSource: MatTableDataSource<Paciente[]>;
  displayedColumns: any[] = [
    '$key',
    'nombre_paciente',
    'apellido_paciente',
    'dni',
    'fecha_nacimiento',
    'obra_social',
    'numero_os',
    'telefono',
    'telefono_contacto',
    'accion'
  ];
  @ViewChild('dataTable',{ static:false }) dataTable: MatTable<any>;
  constructor(
    private actRoute: ActivatedRoute, 
    private pacienteApi: PacienteService
    ) { 
  }

  ngOnInit() {
    this.id = this.actRoute.snapshot.paramMap.get('id');
    this.pacienteApi.GetPaciente(this.id).valueChanges().subscribe(data => {
      /* Data table */
      this.element = data;
      this.element.$key = this.id;
      this.dataSource = new MatTableDataSource<Paciente[]>([data]);
    })
  }
}

I'm trying to get, using mat-table and angular 8, something like this:

table without material

The problem is i can't make it work with displayedColumns. I've tried to use two different displayed columns, but it didn't work for me.

Any suggestions?