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

Question

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?

Answer 1

Thanks for the answers and help. Finally I solved this by creating a common table and adding material CSS to it!

HTML

 <div class="container">
  <div class="mat-elevation-z8">
    <table class="mat-table">
      <tr class="mat-header-row">
        <th class="mat-header-cell">Nombre</th>
        <th class="mat-header-cell">Apellido</th>
        <th class="mat-header-cell">DNI</th>
        <th class="mat-header-cell">Fecha de Nacimiento</th>
      </tr>
      <tr class="mat-row">
        <td class="mat-cell">{{element.nombre_paciente}}</td>
        <td class="mat-cell">{{element.apellido_paciente}}</td>
        <td class="mat-cell">{{element.dni}}</td>
        <td class="mat-cell">{{element.fecha_nacimiento | date: "dd/MM/yyyy"}}</td>
      </tr>
      <tr class="mat-header-row">
        <th class="mat-header-cell">Obra Social</th>
        <th class="mat-header-cell">Número de Obra Social</th>
        <th class="mat-header-cell">Número de Teléfono</th>
        <th class="mat-header-cell">Número de Contácto</th>
      </tr>
      <tr class="mat-row">
        <td class="mat-cell">{{element.obra_social}}</td>
        <td class="mat-cell">{{element.numero_os}}</td>
        <td class="mat-cell">{{element.telefono}}</td>
        <td class="mat-cell">{{element.telefono_contacto}}</td>
      </tr>
      <tr>
        <td colspan="4" style="width: 100%;">
        <div>
          <button mat-button matTooltip="Ver la ficha del paciente" (click)="fichaDialog()">Ficha</button>
          <button mat-button matTooltip="Ver observaciones del paciente" (click)="observacionesDialog()">Observaciones</button>
          <button mat-button matTooltip="Ver tratamientos del paciente"(click)="tratamientosDialog()">Tratamientos</button>
          <button mat-button matTooltip="Ver turnos del paciente" (click)="turnosDialog()">Turnos</button>
        </div>
      </td>
      </tr>
      <tr style="justify-content: center;">
        <td colspan="4" style="width: 100%;">
        <div class="footer">
          <button mat-raised-button  color="primary" class="push-right" style="width: 83.11px;"
            [routerLink]="['/PacienteEdita/',id]">Editar</button>
          <button mat-raised-button  color="warn" (click)="deletePaciente(id, element)">Eliminar</button>
        </div>
      </td>
      </tr>
    </table>
  </div>
</div>

CSS

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

tr.mat-header-row {
  height: 56px;
}

tr.mat-row, tr.mat-footer-row {
  height: 48px;
  text-align: center;
}

th.mat-header-cell {
  text-align: center;
  width: 25%;
}

th.mat-header-cell, td.mat-cell, td.mat-footer-cell {
  padding: 0;
  border-bottom-width: 1px;
  border-bottom-style: solid;
}

th.mat-header-cell:first-child, td.mat-cell:first-child, td.mat-footer-cell:first-child {
  padding-left: 24px;
  width: 25%;
}

th.mat-header-cell:last-child, td.mat-cell:last-child, td.mat-footer-cell:last-child {
  padding-right: 24px;
}

.footer{    
  align-items: flex-end;
  padding: 8px;
  padding-top: 12px;
}
.buttonsTr{
  width: 100% !important;
}
.buttonsDiv{
  width: 100% !important;
}

I hope this could be useful to anyone!!