angular material table resize column

Question

I am trying to show some data on my webpage with an angular material table but the view doesn't look so good what should I do? I want to have resizable column and data be in the right place not like that and messy

this is my HTML code that shows the whole data

<mat-card>customer card</mat-card>
<div>
  <mat-table [dataSource]="dataSource" class="mat-elevation-z8"  class="table">
    <!-- Position Column -->
    <ng-container matColumnDef="firstName">
      <mat-header-cell *matHeaderCellDef> firstName </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.firstName}} </mat-cell>
    </ng-container>


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


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


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

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

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

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

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

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



   <ng-container matColumnDef="price">
      <th mat-header-cell *matHeaderCellDef >price</th>
      <td mat-cell *matCellDef="let element">
        <mat-form-field>
          <input [(ngModel)]="element.price" matInput placeholder="Price" name="price">
        </mat-form-field>
      </td>
    </ng-container> 

    <ng-container matColumnDef="save">
      <th mat-header-cell *matHeaderCellDef></th>
      <td mat-cell *matCellDef="let element">
        <button (click)="post(element.price)" mat-button>save</button></td>
    </ng-container> 

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

  </mat-table>
  <!-- <button (click)="post(price)" mat-button>save</button> -->
</div>

this is my CSS that I use

.mat-table {
  width: 100%;
  overflow: auto;
}

mat-cell,
mat-footer-cell,
mat-header-cell {
  width: 200px;
  flex: none;
  justify-content: center;
}

.mat-table mat-cell:first-child {
  padding-left: 0px;
  border-left: 1px solid;
}

.mat-table mat-cell:last-child {
  padding-right: 0px;
}

.mat-table mat-header-cell:first-child {
  padding-left: 0px;
  border-left: 1px solid;
}

.mat-table mat-header-cell:last-child {
  padding-right: 0px;
}

.mat-table mat-header-cell {
  border-top: 1px solid;
  border-right: 1px solid;
  border-bottom: 1px solid;
  cursor: col-resize;
}

.mat-table mat-cell {
  border-right: 1px solid;
  border-bottom: 1px solid;
}

and this is the result. and the output doesn't look good at all. what should i do?

Answer 1

You are using Angular Material V5 standard HTML code. change the HTML (I provided in below) and remove the CSS.

if you are using angular version 6 or greater then 6 using below HTML.

Ref - https://material.angular.io/components/table/overview

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8"  class="table">
    <!-- Position Column -->
    <ng-container matColumnDef="firstName">
      <th mat-header-cell *matHeaderCellDef> firstName </th>
      <td mat-cell *matCellDef="let element"> {{element.firstName}} </td>
    </ng-container>


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


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


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

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

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

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

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

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



   <ng-container matColumnDef="price">
      <th mat-header-cell *matHeaderCellDef >price</th>
      <td mat-cell *matCellDef="let element">
        <mat-form-field>
          <input [(ngModel)]="element.price" matInput placeholder="Price" name="price">
        </mat-form-field>
      </td>
    </ng-container> 

    <ng-container matColumnDef="save">
      <th mat-header-cell *matHeaderCellDef></th>
      <td mat-cell *matCellDef="let element">
        <button mat-button>save</button>
    </td>
    </ng-container> 

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

  </table>
  <!-- <button (click)="post(price)" mat-button>save</button> -->