styled button

Core/Core/ClientApp/src/app/home/components/file-history/file-history.component.css

@@ -2,8 +2,29 @@ table{
   width: 100%;
 }
-.mat-column-name{
-  max-width:7em;
-  word-wrap:break-word;
-  overflow-wrap:break-word;
+.mat-column-position {
+  width: 15%;
+}
+
+.mat-column-name {
+  width: 70%;
+  max-width: 7em;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}
+
+.mat-column-delete {
+  text-align:center;
+  width: 15%;
+}
+
+.deleteButton {
+  font-weight: bold;
+  color: white;
+
+  border-radius: 50%;
+  border: none;
+  background-color: orange;
+  text-align: center;
+  text-decoration: none;
 }

Core/Core/ClientApp/src/app/home/components/file-history/file-history.component.html

 <div>
-    <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
-      <!-- Position Column -->
-      <ng-container matColumnDef="position">
-        <th mat-header-cell *matHeaderCellDef> No. </th>
-        <td mat-cell *matCellDef="let element"> {{element.position}} </td>
-      </ng-container>
-      <!-- Name Column -->
-      <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef> Název </th>
-        <td mat-cell *matCellDef="let element"> {{element.name}} </td>
-      </ng-container>
-       <!--Delete Column--> 
-      <ng-container matColumnDef="delete">
-        <th mat-header-cell *matHeaderCellDef> Smazat </th>
-        <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
-      </ng-container>
-      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-    </table>
-    <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
+  <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
+    <!-- Position Column -->
+    <ng-container matColumnDef="position">
+      <th mat-header-cell *matHeaderCellDef> No. </th>
+      <td mat-cell *matCellDef="let element"> {{element.position}} </td>
+    </ng-container>
+    <!-- Name Column -->
+    <ng-container matColumnDef="name">
+      <th mat-header-cell *matHeaderCellDef> Název </th>
+      <td mat-cell *matCellDef="let element"> {{element.name}} </td>
+    </ng-container>
+    <!--Delete Column-->
+    <ng-container matColumnDef="delete">
+      <th mat-header-cell *matHeaderCellDef> Smazat </th>
+      <td mat-cell *matCellDef="let element"><button class="deleteButton">X</button></td>
+      <!--<td mat-cell *matCellDef="let element"> {{element.symbol}} </td>-->
+    </ng-container>
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+  </table>
+  <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
 </div>

Core/Core/ClientApp/src/app/home/home.module.ts

@@ -12,7 +12,7 @@ import { ImportComponent } from "./components/import/import.component";
 import { ImportService } from "./components/import/import.service";
 import { AccountPropertiesModule } from "./components/account-properties/account-properties.module";
 import { FileHistoryComponent } from "./components/file-history/file-history.component";
-import { MatTableModule, MatPaginatorModule, MatPaginatorIntl } from "@angular/material";
+import { MatTableModule, MatPaginatorModule, MatPaginatorIntl, MatButtonModule } from "@angular/material";
 import { HomeService } from "./home.service";
 import { HomeChartDefinitionsService } from "./home-chart-definitions.service";
 import { getCzechPaginatorIntl } from "./czech-paginator-intl";
@@ -31,6 +31,7 @@ import { getCzechPaginatorIntl } from "./czech-paginator-intl";
     FormsModule,
     MatTableModule,
     MatPaginatorModule,
+    MatButtonModule,
     ReactiveFormsModule,
     AccountPropertiesModule
   ],