Angular Material 2 Inline buttons inside md-cell how to - datatable

Question

Can someone give an example of Angular Material 2 DataTable with inline buttons inside a cell ?? I can't make it work... Button allways appear one below the other.
My Code is The Following But is not Working:
<div class="example-container mat-elevation-z8">
<!--Filtering input fiels-->
<div class="example-header">
<md-input-container floatPlaceholder="never">
<input mdInput #filter placeholder="Αναζήτηση">
</md-input-container>
</div>
<md-table #table [dataSource]="incidentsDataSource" mdSort>
<ng-container cdkColumnDef="protocolNo">
<md-header-cell *cdkHeaderCellDef md-sort-header> Αρ. Πρωτοκόλλου</md-header-cell>
<md-cell *cdkCellDef="let row"> {{row.protocolNo}}</md-cell>
</ng-container>
<ng-container cdkColumnDef="date">
<md-header-cell *cdkHeaderCellDef md-sort-header> Ημερομηνία</md-header-cell>
<md-cell *cdkCellDef="let row"> {{row.date | date:'dd/MM/yyyy' }}</md-cell>
</ng-container>
<ng-container cdkColumnDef="patient">
<md-header-cell *cdkHeaderCellDef md-sort-header> Ασθενής</md-header-cell>
<md-cell *cdkCellDef="let row"> {{row.patient.lastName}} {{row.patient.firstName}}</md-cell>
</ng-container>
<ng-container cdkColumnDef="doctor">
<md-header-cell *cdkHeaderCellDef md-sort-header> Ιατρός</md-header-cell>
<md-cell *cdkCellDef="let row"> {{row.doctor.lastName}} {{row.doctor.firstName}}</md-cell>
</ng-container>
<ng-container cdkColumnDef="signingDoctor">
<md-header-cell *cdkHeaderCellDef md-sort-header> Υπογράφων Ιατρός</md-header-cell>
<md-cell *cdkCellDef="let row"> {{row.signingDoctor.lastName}} {{row.signingDoctor.firstName}}</md-cell>
</ng-container>
<ng-container cdkColumnDef="clinic">
<md-header-cell *cdkHeaderCellDef md-sort-header> Κλινική</md-header-cell>
<md-cell *cdkCellDef="let row"> {{row.clinic?.name}}</md-cell>
</ng-container>
<ng-container cdkColumnDef="isPayed">
<md-header-cell *cdkHeaderCellDef md-sort-header> Πληρωμή</md-header-cell>
<md-cell *cdkCellDef="let row"> {{row.isPayed | payment}}</md-cell>
</ng-container>
<ng-container cdkColumnDef="actions">
<md-header-cell *cdkHeaderCellDef> Ενέργειες</md-header-cell>
Here is the Cell Data
Trying Here to Display Buttons Inline in the Cell But is not working
<div style="display: inline-block;">
<button md-button (click)="showAndPrint(row)" >
<md-icon class="md-18">visibility</md-icon> εκτ
</button>
<button md-button (click)="editItem(row)" style="display: inline-block;">
<md-icon class="md-18">mode_edit</md-icon> επεξ
</button>
<button md-button (click)="deleteItem(row)" style="display: inline-block;">
<md-icon class="md-18">delete</md-icon> διαγ
</button>
</div>
</md-cell>
</ng-container>
<md-header-row *cdkHeaderRowDef="displayedColumns"></md-header-row>
<md-row *cdkRowDef="let row; columns: displayedColumns;"></md-row>
</md-table>
<md-paginator #paginator
[length]="incidentsDataSource.size"
[pageIndex]="0"
[pageSize]="10"
[pageSizeOptions]="[10, 25, 50, 100]">
</md-paginator>
</div>
Thanks in Advance

Answer 1

The Following Code Works and Displays Inline Buttons Inside the Cell:
<ng-container matColumnDef="actions">
<mat-header-cell *matHeaderCellDef> Ενέργειες</mat-header-cell>
<mat-cell *matCellDef="let row" style="white-space: nowrap">
<button mat-icon-button (click)="openDialog(row)">
<span matTooltip="Λεπτομέρειες!">
<mat-icon style="color: grey">assignment</mat-icon>
</span>
</button>
<a [routerLink]="['update/', row.id]">
<span matTooltip="Επεξεργασία!">
<mat-icon>mode_edit</mat-icon>
</span>
</a>
<a [routerLink]="['delete/', row.id]">
<span matTooltip="Διαγραφή!">
<mat-icon>delete</mat-icon>
</span>
</a>
</mat-cell>
</ng-container>
using the following css:
.example-container {
display: flex;
flex-direction: column;
max-height: 750px;
min-width: 300px;
}
.example-header {
min-height: 64px;
display: flex;
align-items: center;
padding-left: 24px;
font-size: 20px;
}
.mat-table {
overflow: auto;
}
.mat-header-cell .mat-sort-header-sorted {
color: black;
}
.mat-input-container {
font-size: 14px;
flex-grow: 1;
margin-left: 32px;
}
.mat-table {
overflow: auto;
}
a {
color: grey !important;
}
/* For Sticky Header */
.mat-header-row {
top: 0;
position: sticky;
position: -webkit-sticky;
z-index: 1;
background-color: inherit;
}
.mat-form-field {
font-size: 14px;
width: 100%;
}

Answer 2

Setting the width of the column of actions should solve your problem.
Add the following to your components .scss file:
.mat-column-actions {
flex: 0 0 300px;
}
Change the 300px value to whatever fits your needs!