From 94d20f8d8d9466e6193d9b99ce6166e8e12066f9 Mon Sep 17 00:00:00 2001
From: Sercan Yemen <sercanyemen@gmail.com>
Date: Wed, 20 Jun 2018 16:32:26 +0300
Subject: [PATCH] Replace cdkTable stuff with matTable since table now is a
 proper Material element

---
 .../contact-list/contact-list.component.html  | 52 +++++++++----------
 src/app/main/apps/contacts/contacts.module.ts |  3 --
 .../dashboards/project/project.component.html | 40 +++++++-------
 .../apps/dashboards/project/project.module.ts |  2 -
 .../main/apps/e-commerce/e-commerce.module.ts |  2 -
 .../e-commerce/orders/orders.component.html   | 46 ++++++++--------
 .../products/products.component.html          | 46 ++++++++--------
 .../file-list/file-list.component.html        | 46 ++++++++--------
 .../apps/file-manager/file-manager.module.ts  |  2 -
 src/app/main/pages/search/search.module.ts    |  2 -
 .../search/tabs/table/table.component.html    | 28 +++++-----
 11 files changed, 129 insertions(+), 140 deletions(-)

diff --git a/src/app/main/apps/contacts/contact-list/contact-list.component.html b/src/app/main/apps/contacts/contact-list/contact-list.component.html
index 015d2a70..fadabf6a 100644
--- a/src/app/main/apps/contacts/contact-list/contact-list.component.html
+++ b/src/app/main/apps/contacts/contact-list/contact-list.component.html
@@ -1,9 +1,9 @@
 <mat-table #table [dataSource]="dataSource"
            [@animateStagger]="{value:'50'}">
     <!-- Checkbox Column -->
-    <ng-container cdkColumnDef="checkbox">
-        <mat-header-cell *cdkHeaderCellDef></mat-header-cell>
-        <mat-cell *cdkCellDef="let contact">
+    <ng-container matColumnDef="checkbox">
+        <mat-header-cell *matHeaderCellDef></mat-header-cell>
+        <mat-cell *matCellDef="let contact">
             <mat-checkbox [(ngModel)]="checkboxes[contact.id]" (ngModelChange)="onSelectedChange(contact.id)"
                           (click)="$event.stopPropagation()">
             </mat-checkbox>
@@ -11,26 +11,26 @@
     </ng-container>
 
     <!-- Avatar Column -->
-    <ng-container cdkColumnDef="avatar">
-        <mat-header-cell *cdkHeaderCellDef></mat-header-cell>
-        <mat-cell *cdkCellDef="let contact">
+    <ng-container matColumnDef="avatar">
+        <mat-header-cell *matHeaderCellDef></mat-header-cell>
+        <mat-cell *matCellDef="let contact">
             <img class="avatar" *ngIf="contact.avatar" [alt]="contact.name"
                  [src]="contact.avatar"/>
         </mat-cell>
     </ng-container>
 
     <!-- Name Column -->
-    <ng-container cdkColumnDef="name">
-        <mat-header-cell *cdkHeaderCellDef>Name</mat-header-cell>
-        <mat-cell *cdkCellDef="let contact">
+    <ng-container matColumnDef="name">
+        <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
+        <mat-cell *matCellDef="let contact">
             <p class="text-truncate font-weight-600">{{contact.name}} {{contact.lastName}}</p>
         </mat-cell>
     </ng-container>
 
     <!-- Email Column -->
-    <ng-container cdkColumnDef="email">
-        <mat-header-cell *cdkHeaderCellDef fxHide fxShow.gt-sm>Email</mat-header-cell>
-        <mat-cell *cdkCellDef="let contact" fxHide fxShow.gt-sm>
+    <ng-container matColumnDef="email">
+        <mat-header-cell *matHeaderCellDef fxHide fxShow.gt-sm>Email</mat-header-cell>
+        <mat-cell *matCellDef="let contact" fxHide fxShow.gt-sm>
             <p class="email text-truncate">
                 {{contact.email}}
             </p>
@@ -38,9 +38,9 @@
     </ng-container>
 
     <!-- Phone Column -->
-    <ng-container cdkColumnDef="phone">
-        <mat-header-cell *cdkHeaderCellDef fxHide fxShow.gt-md>Phone</mat-header-cell>
-        <mat-cell *cdkCellDef="let contact" fxHide fxShow.gt-md>
+    <ng-container matColumnDef="phone">
+        <mat-header-cell *matHeaderCellDef fxHide fxShow.gt-md>Phone</mat-header-cell>
+        <mat-cell *matCellDef="let contact" fxHide fxShow.gt-md>
             <p class="phone text-truncate">
                 {{contact.phone}}
             </p>
@@ -48,9 +48,9 @@
     </ng-container>
 
     <!-- Job Title Column -->
-    <ng-container cdkColumnDef="jobTitle">
-        <mat-header-cell *cdkHeaderCellDef fxHide fxShow.gt-lg>Job title</mat-header-cell>
-        <mat-cell *cdkCellDef="let contact" fxHide fxShow.gt-lg>
+    <ng-container matColumnDef="jobTitle">
+        <mat-header-cell *matHeaderCellDef fxHide fxShow.gt-lg>Job title</mat-header-cell>
+        <mat-cell *matCellDef="let contact" fxHide fxShow.gt-lg>
             <p class="job-title text-truncate">
                 {{contact.jobTitle}}
             </p>
@@ -58,9 +58,9 @@
     </ng-container>
 
     <!-- Company Column -->
-    <ng-container cdkColumnDef="company">
-        <mat-header-cell *cdkHeaderCellDef fxHide fxShow.gt-lg>Company</mat-header-cell>
-        <mat-cell *cdkCellDef="let contact" fxHide fxShow.gt-lg>
+    <ng-container matColumnDef="company">
+        <mat-header-cell *matHeaderCellDef fxHide fxShow.gt-lg>Company</mat-header-cell>
+        <mat-cell *matCellDef="let contact" fxHide fxShow.gt-lg>
             <p class="company text-truncate">
                 {{contact.company}}
             </p>
@@ -68,9 +68,9 @@
     </ng-container>
 
     <!-- Buttons Column -->
-    <ng-container cdkColumnDef="buttons">
-        <mat-header-cell *cdkHeaderCellDef></mat-header-cell>
-        <mat-cell *cdkCellDef="let contact">
+    <ng-container matColumnDef="buttons">
+        <mat-header-cell *matHeaderCellDef></mat-header-cell>
+        <mat-cell *matCellDef="let contact">
             <div fxFlex="row" fxLayoutAlign="end center">
                 <button mat-icon-button (click)="$event.stopPropagation();toggleStar(contact.id)" aria-label="Toggle star">
                     <mat-icon class="amber-fg" *ngIf="user.starred.includes(contact.id)">star</mat-icon>
@@ -93,8 +93,8 @@
         </mat-cell>
     </ng-container>
 
-    <mat-header-row *cdkHeaderRowDef="displayedColumns"></mat-header-row>
-    <mat-row *cdkRowDef="let contact; columns: displayedColumns;"
+    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+    <mat-row *matRowDef="let contact; columns: displayedColumns;"
              class="contact"
              (click)="editContact(contact)"
              [ngClass]="{'mat-accent-50-bg':checkboxes[contact.id]}"
diff --git a/src/app/main/apps/contacts/contacts.module.ts b/src/app/main/apps/contacts/contacts.module.ts
index 39a71560..1f4d3062 100644
--- a/src/app/main/apps/contacts/contacts.module.ts
+++ b/src/app/main/apps/contacts/contacts.module.ts
@@ -1,7 +1,5 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { CdkTableModule } from '@angular/cdk/table';
-
 import { MatButtonModule, MatCheckboxModule, MatDatepickerModule, MatFormFieldModule, MatIconModule, MatInputModule, MatMenuModule, MatRippleModule, MatTableModule, MatToolbarModule } from '@angular/material';
 
 import { FuseSharedModule } from '@fuse/shared.module';
@@ -34,7 +32,6 @@ const routes: Routes = [
     ],
     imports        : [
         RouterModule.forChild(routes),
-        CdkTableModule,
 
         MatButtonModule,
         MatCheckboxModule,
diff --git a/src/app/main/apps/dashboards/project/project.component.html b/src/app/main/apps/dashboards/project/project.component.html
index 17004ab3..c5574557 100644
--- a/src/app/main/apps/dashboards/project/project.component.html
+++ b/src/app/main/apps/dashboards/project/project.component.html
@@ -816,28 +816,28 @@
                                 <mat-table #table [dataSource]="widget11.dataSource">
 
                                     <!-- Avatar Column -->
-                                    <ng-container cdkColumnDef="avatar">
-                                        <mat-header-cell fxFlex="96px" *cdkHeaderCellDef></mat-header-cell>
-                                        <mat-cell fxFlex="96px" *cdkCellDef="let contact">
+                                    <ng-container matColumnDef="avatar">
+                                        <mat-header-cell fxFlex="96px" *matHeaderCellDef></mat-header-cell>
+                                        <mat-cell fxFlex="96px" *matCellDef="let contact">
                                             <img class="avatar" *ngIf="contact.avatar" [alt]="contact.name"
                                                  [src]="contact.avatar"/>
                                         </mat-cell>
                                     </ng-container>
 
                                     <!-- Name Column -->
-                                    <ng-container cdkColumnDef="name">
-                                        <mat-header-cell *cdkHeaderCellDef>Name</mat-header-cell>
-                                        <mat-cell *cdkCellDef="let contact">
+                                    <ng-container matColumnDef="name">
+                                        <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
+                                        <mat-cell *matCellDef="let contact">
                                             <p class="text-truncate font-weight-600">{{contact.name}}
                                                 {{contact.lastName}}</p>
                                         </mat-cell>
                                     </ng-container>
 
                                     <!-- Position Column -->
-                                    <ng-container cdkColumnDef="position">
-                                        <mat-header-cell *cdkHeaderCellDef fxHide fxShow.gt-sm>Position
+                                    <ng-container matColumnDef="position">
+                                        <mat-header-cell *matHeaderCellDef fxHide fxShow.gt-sm>Position
                                         </mat-header-cell>
-                                        <mat-cell *cdkCellDef="let contact" fxHide fxShow.gt-sm>
+                                        <mat-cell *matCellDef="let contact" fxHide fxShow.gt-sm>
                                             <p class="position text-truncate">
                                                 {{contact.position}}
                                             </p>
@@ -845,10 +845,10 @@
                                     </ng-container>
 
                                     <!-- Office Column -->
-                                    <ng-container cdkColumnDef="office">
-                                        <mat-header-cell *cdkHeaderCellDef fxHide fxShow.gt-md>Office
+                                    <ng-container matColumnDef="office">
+                                        <mat-header-cell *matHeaderCellDef fxHide fxShow.gt-md>Office
                                         </mat-header-cell>
-                                        <mat-cell *cdkCellDef="let contact" fxHide fxShow.gt-md>
+                                        <mat-cell *matCellDef="let contact" fxHide fxShow.gt-md>
                                             <p class="office text-truncate">
                                                 {{contact.office}}
                                             </p>
@@ -856,10 +856,10 @@
                                     </ng-container>
 
                                     <!-- Email Column -->
-                                    <ng-container cdkColumnDef="email">
-                                        <mat-header-cell *cdkHeaderCellDef fxHide fxShow.gt-sm>Email
+                                    <ng-container matColumnDef="email">
+                                        <mat-header-cell *matHeaderCellDef fxHide fxShow.gt-sm>Email
                                         </mat-header-cell>
-                                        <mat-cell *cdkCellDef="let contact" fxHide fxShow.gt-sm>
+                                        <mat-cell *matCellDef="let contact" fxHide fxShow.gt-sm>
                                             <p class="email text-truncate">
                                                 {{contact.email}}
                                             </p>
@@ -867,10 +867,10 @@
                                     </ng-container>
 
                                     <!-- Phone Column -->
-                                    <ng-container cdkColumnDef="phone">
-                                        <mat-header-cell *cdkHeaderCellDef fxHide fxShow.gt-md>Phone
+                                    <ng-container matColumnDef="phone">
+                                        <mat-header-cell *matHeaderCellDef fxHide fxShow.gt-md>Phone
                                         </mat-header-cell>
-                                        <mat-cell *cdkCellDef="let contact" fxHide fxShow.gt-md>
+                                        <mat-cell *matCellDef="let contact" fxHide fxShow.gt-md>
                                             <p class="phone text-truncate">
                                                 {{contact.phone}}
                                             </p>
@@ -878,8 +878,8 @@
                                     </ng-container>
 
                                     <mat-header-row
-                                        *cdkHeaderRowDef="widgets.widget11.table.columns"></mat-header-row>
-                                    <mat-row *cdkRowDef="let contact; columns: widgets.widget11.table.columns;">
+                                        *matHeaderRowDef="widgets.widget11.table.columns"></mat-header-row>
+                                    <mat-row *matRowDef="let contact; columns: widgets.widget11.table.columns;">
                                     </mat-row>
                                 </mat-table>
                             </div>
diff --git a/src/app/main/apps/dashboards/project/project.module.ts b/src/app/main/apps/dashboards/project/project.module.ts
index 46e2c8f6..127f49d7 100644
--- a/src/app/main/apps/dashboards/project/project.module.ts
+++ b/src/app/main/apps/dashboards/project/project.module.ts
@@ -1,6 +1,5 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { CdkTableModule } from '@angular/cdk/table';
 import { MatButtonModule, MatDividerModule, MatFormFieldModule, MatIconModule, MatMenuModule, MatSelectModule, MatTableModule, MatTabsModule } from '@angular/material';
 import { NgxChartsModule } from '@swimlane/ngx-charts';
 
@@ -28,7 +27,6 @@ const routes: Routes = [
     imports     : [
         RouterModule.forChild(routes),
 
-        CdkTableModule,
         MatButtonModule,
         MatDividerModule,
         MatFormFieldModule,
diff --git a/src/app/main/apps/e-commerce/e-commerce.module.ts b/src/app/main/apps/e-commerce/e-commerce.module.ts
index b01a6ff2..abd3f06e 100644
--- a/src/app/main/apps/e-commerce/e-commerce.module.ts
+++ b/src/app/main/apps/e-commerce/e-commerce.module.ts
@@ -1,6 +1,5 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { CdkTableModule } from '@angular/cdk/table';
 import { MatButtonModule, MatChipsModule, MatFormFieldModule, MatIconModule, MatInputModule, MatPaginatorModule, MatRippleModule, MatSelectModule, MatSnackBarModule, MatSortModule, MatTableModule, MatTabsModule } from '@angular/material';
 import { NgxChartsModule } from '@swimlane/ngx-charts';
 import { AgmCoreModule } from '@agm/core';
@@ -75,7 +74,6 @@ const routes: Routes = [
     imports     : [
         RouterModule.forChild(routes),
 
-        CdkTableModule,
         MatButtonModule,
         MatChipsModule,
         MatFormFieldModule,
diff --git a/src/app/main/apps/e-commerce/orders/orders.component.html b/src/app/main/apps/e-commerce/orders/orders.component.html
index 0ea2bdce..5a6cd0ff 100644
--- a/src/app/main/apps/e-commerce/orders/orders.component.html
+++ b/src/app/main/apps/e-commerce/orders/orders.component.html
@@ -46,25 +46,25 @@
                        fusePerfectScrollbar>
 
                 <!-- ID Column -->
-                <ng-container cdkColumnDef="id">
-                    <mat-header-cell *cdkHeaderCellDef mat-sort-header>ID</mat-header-cell>
-                    <mat-cell *cdkCellDef="let order">
+                <ng-container matColumnDef="id">
+                    <mat-header-cell *matHeaderCellDef mat-sort-header>ID</mat-header-cell>
+                    <mat-cell *matCellDef="let order">
                         <p class="text-truncate">{{order.id}}</p>
                     </mat-cell>
                 </ng-container>
 
                 <!-- Reference Column -->
-                <ng-container cdkColumnDef="reference">
-                    <mat-header-cell *cdkHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>Reference</mat-header-cell>
-                    <mat-cell *cdkCellDef="let order" fxHide fxShow.gt-sm>
+                <ng-container matColumnDef="reference">
+                    <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>Reference</mat-header-cell>
+                    <mat-cell *matCellDef="let order" fxHide fxShow.gt-sm>
                         <p class="text-truncate">{{order.reference}}</p>
                     </mat-cell>
                 </ng-container>
 
                 <!-- Name Column -->
-                <ng-container cdkColumnDef="customer">
-                    <mat-header-cell *cdkHeaderCellDef mat-sort-header>Customer</mat-header-cell>
-                    <mat-cell *cdkCellDef="let order">
+                <ng-container matColumnDef="customer">
+                    <mat-header-cell *matHeaderCellDef mat-sort-header>Customer</mat-header-cell>
+                    <mat-cell *matCellDef="let order">
                         <p class="text-truncate">
                             {{order.customer.firstName}}
                             {{order.customer.lastName}}
@@ -73,9 +73,9 @@
                 </ng-container>
 
                 <!-- Total Price Column -->
-                <ng-container cdkColumnDef="total">
-                    <mat-header-cell *cdkHeaderCellDef mat-sort-header fxHide fxShow.gt-md>Total</mat-header-cell>
-                    <mat-cell *cdkCellDef="let order" fxHide fxShow.gt-md>
+                <ng-container matColumnDef="total">
+                    <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-md>Total</mat-header-cell>
+                    <mat-cell *matCellDef="let order" fxHide fxShow.gt-md>
                         <p class="total-price text-truncate">
                             {{order.total | currency:'USD':'symbol'}}
                         </p>
@@ -83,9 +83,9 @@
                 </ng-container>
 
                 <!-- Payment Column -->
-                <ng-container cdkColumnDef="payment">
-                    <mat-header-cell *cdkHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>Payment</mat-header-cell>
-                    <mat-cell *cdkCellDef="let order" fxHide fxShow.gt-sm>
+                <ng-container matColumnDef="payment">
+                    <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>Payment</mat-header-cell>
+                    <mat-cell *matCellDef="let order" fxHide fxShow.gt-sm>
                         <p class="text-truncate">
                             {{order.payment.method}}
                         </p>
@@ -93,9 +93,9 @@
                 </ng-container>
 
                 <!-- Status Column -->
-                <ng-container cdkColumnDef="status">
-                    <mat-header-cell *cdkHeaderCellDef mat-sort-header>Status</mat-header-cell>
-                    <mat-cell *cdkCellDef="let order">
+                <ng-container matColumnDef="status">
+                    <mat-header-cell *matHeaderCellDef mat-sort-header>Status</mat-header-cell>
+                    <mat-cell *matCellDef="let order">
                         <p class="status text-truncate h6 p-4" [ngClass]="order.status[0].color">
                             {{order.status[0].name}}
                         </p>
@@ -103,18 +103,18 @@
                 </ng-container>
 
                 <!-- Date Column -->
-                <ng-container cdkColumnDef="date">
-                    <mat-header-cell *cdkHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>Date</mat-header-cell>
-                    <mat-cell *cdkCellDef="let order" fxHide fxShow.gt-sm>
+                <ng-container matColumnDef="date">
+                    <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>Date</mat-header-cell>
+                    <mat-cell *matCellDef="let order" fxHide fxShow.gt-sm>
                         <p class="text-truncate">
                             {{order.date}}
                         </p>
                     </mat-cell>
                 </ng-container>
 
-                <mat-header-row *cdkHeaderRowDef="displayedColumns"></mat-header-row>
+                <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
 
-                <mat-row *cdkRowDef="let order; columns: displayedColumns;"
+                <mat-row *matRowDef="let order; columns: displayedColumns;"
                          class="order"
                          matRipple
                          [routerLink]="'/apps/e-commerce/orders/'+order.id">
diff --git a/src/app/main/apps/e-commerce/products/products.component.html b/src/app/main/apps/e-commerce/products/products.component.html
index 3c8ccaed..2d5be7fd 100644
--- a/src/app/main/apps/e-commerce/products/products.component.html
+++ b/src/app/main/apps/e-commerce/products/products.component.html
@@ -55,17 +55,17 @@
                        fusePerfectScrollbar>
 
                 <!-- ID Column -->
-                <ng-container cdkColumnDef="id">
-                    <mat-header-cell *cdkHeaderCellDef mat-sort-header>ID</mat-header-cell>
-                    <mat-cell *cdkCellDef="let product">
+                <ng-container matColumnDef="id">
+                    <mat-header-cell *matHeaderCellDef mat-sort-header>ID</mat-header-cell>
+                    <mat-cell *matCellDef="let product">
                         <p class="text-truncate">{{product.id}}</p>
                     </mat-cell>
                 </ng-container>
 
                 <!-- Image Column -->
-                <ng-container cdkColumnDef="image">
-                    <mat-header-cell *cdkHeaderCellDef></mat-header-cell>
-                    <mat-cell *cdkCellDef="let product">
+                <ng-container matColumnDef="image">
+                    <mat-header-cell *matHeaderCellDef></mat-header-cell>
+                    <mat-cell *matCellDef="let product">
                         <img class="product-image"
                              *ngIf="product.images[0]" [alt]="product.name"
                              [src]="product.images[0].url"/>
@@ -74,17 +74,17 @@
                 </ng-container>
 
                 <!-- Name Column -->
-                <ng-container cdkColumnDef="name">
-                    <mat-header-cell *cdkHeaderCellDef mat-sort-header>Name</mat-header-cell>
-                    <mat-cell *cdkCellDef="let product">
+                <ng-container matColumnDef="name">
+                    <mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
+                    <mat-cell *matCellDef="let product">
                         <p class="text-truncate">{{product.name}}</p>
                     </mat-cell>
                 </ng-container>
 
                 <!-- Category Column -->
-                <ng-container cdkColumnDef="category">
-                    <mat-header-cell *cdkHeaderCellDef fxHide mat-sort-header fxShow.gt-md>Category</mat-header-cell>
-                    <mat-cell *cdkCellDef="let product" fxHide fxShow.gt-md>
+                <ng-container matColumnDef="category">
+                    <mat-header-cell *matHeaderCellDef fxHide mat-sort-header fxShow.gt-md>Category</mat-header-cell>
+                    <mat-cell *matCellDef="let product" fxHide fxShow.gt-md>
                         <p class="category text-truncate">
                             {{product.categories[0]}}
                         </p>
@@ -92,9 +92,9 @@
                 </ng-container>
 
                 <!-- Price Column -->
-                <ng-container cdkColumnDef="price">
-                    <mat-header-cell *cdkHeaderCellDef mat-sort-header fxHide fxShow.gt-xs>Price</mat-header-cell>
-                    <mat-cell *cdkCellDef="let product" fxHide fxShow.gt-xs>
+                <ng-container matColumnDef="price">
+                    <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-xs>Price</mat-header-cell>
+                    <mat-cell *matCellDef="let product" fxHide fxShow.gt-xs>
                         <p class="price text-truncate">
                             {{product.priceTaxIncl | currency:'USD':'symbol'}}
                         </p>
@@ -102,9 +102,9 @@
                 </ng-container>
 
                 <!-- Quantity Column -->
-                <ng-container cdkColumnDef="quantity">
-                    <mat-header-cell *cdkHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>Quantity</mat-header-cell>
-                    <mat-cell *cdkCellDef="let product" fxHide fxShow.gt-sm>
+                <ng-container matColumnDef="quantity">
+                    <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>Quantity</mat-header-cell>
+                    <mat-cell *matCellDef="let product" fxHide fxShow.gt-sm>
 
                         <span class="quantity-indicator text-truncate"
                               [ngClass]="{'mat-red-500-bg':product.quantity <= 5, 'mat-amber-500-bg':product.quantity > 5 && product.quantity <= 25,'mat-green-600-bg':product.quantity > 25}">
@@ -117,17 +117,17 @@
                 </ng-container>
 
                 <!-- Active Column -->
-                <ng-container cdkColumnDef="active">
-                    <mat-header-cell *cdkHeaderCellDef mat-sort-header fxHide fxShow.gt-xs>Active</mat-header-cell>
-                    <mat-cell *cdkCellDef="let product" fxHide fxShow.gt-xs>
+                <ng-container matColumnDef="active">
+                    <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-xs>Active</mat-header-cell>
+                    <mat-cell *matCellDef="let product" fxHide fxShow.gt-xs>
                         <mat-icon *ngIf="product.active" class="active-icon mat-green-600-bg s-16">check</mat-icon>
                         <mat-icon *ngIf="!product.active" class="active-icon mat-red-500-bg s-16">close</mat-icon>
                     </mat-cell>
                 </ng-container>
 
-                <mat-header-row *cdkHeaderRowDef="displayedColumns"></mat-header-row>
+                <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
 
-                <mat-row *cdkRowDef="let product; columns: displayedColumns;"
+                <mat-row *matRowDef="let product; columns: displayedColumns;"
                          class="product"
                          matRipple
                          [routerLink]="'/apps/e-commerce/products/'+product.id+'/'+product.handle">
diff --git a/src/app/main/apps/file-manager/file-list/file-list.component.html b/src/app/main/apps/file-manager/file-list/file-list.component.html
index 721b781b..175fccd7 100644
--- a/src/app/main/apps/file-manager/file-list/file-list.component.html
+++ b/src/app/main/apps/file-manager/file-list/file-list.component.html
@@ -1,47 +1,47 @@
 <mat-table #table [dataSource]="dataSource" [@animateStagger]="{value:'50'}">
 
     <!-- Type Column -->
-    <ng-container cdkColumnDef="icon">
-        <mat-header-cell *cdkHeaderCellDef fxFlex="64px"></mat-header-cell>
-        <mat-cell *cdkCellDef="let row" fxFlex="64px">
+    <ng-container matColumnDef="icon">
+        <mat-header-cell *matHeaderCellDef fxFlex="64px"></mat-header-cell>
+        <mat-cell *matCellDef="let row" fxFlex="64px">
             <mat-icon class="type-icon" [ngClass]="row.type"></mat-icon>
         </mat-cell>
     </ng-container>
 
     <!-- Name Column -->
-    <ng-container cdkColumnDef="name">
-        <mat-header-cell *cdkHeaderCellDef>Name</mat-header-cell>
-        <mat-cell *cdkCellDef="let row"> {{row.name}}</mat-cell>
+    <ng-container matColumnDef="name">
+        <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
+        <mat-cell *matCellDef="let row"> {{row.name}}</mat-cell>
     </ng-container>
 
     <!-- Type Column -->
-    <ng-container cdkColumnDef="type">
-        <mat-header-cell *cdkHeaderCellDef fxHide fxShow.gt-md>Type</mat-header-cell>
-        <mat-cell *cdkCellDef="let row" fxHide fxShow.gt-md> {{row.type}}</mat-cell>
+    <ng-container matColumnDef="type">
+        <mat-header-cell *matHeaderCellDef fxHide fxShow.gt-md>Type</mat-header-cell>
+        <mat-cell *matCellDef="let row" fxHide fxShow.gt-md> {{row.type}}</mat-cell>
     </ng-container>
 
     <!-- Owner Column -->
-    <ng-container cdkColumnDef="owner">
-        <mat-header-cell *cdkHeaderCellDef fxHide.xs>Owner</mat-header-cell>
-        <mat-cell *cdkCellDef="let row" fxHide.xs> {{row.owner}}</mat-cell>
+    <ng-container matColumnDef="owner">
+        <mat-header-cell *matHeaderCellDef fxHide.xs>Owner</mat-header-cell>
+        <mat-cell *matCellDef="let row" fxHide.xs> {{row.owner}}</mat-cell>
     </ng-container>
 
     <!-- Size Column -->
-    <ng-container cdkColumnDef="size">
-        <mat-header-cell *cdkHeaderCellDef fxHide.xs>Size</mat-header-cell>
-        <mat-cell *cdkCellDef="let row" fxHide.xs>{{row.size === '' ? '-': row.size}}</mat-cell>
+    <ng-container matColumnDef="size">
+        <mat-header-cell *matHeaderCellDef fxHide.xs>Size</mat-header-cell>
+        <mat-cell *matCellDef="let row" fxHide.xs>{{row.size === '' ? '-': row.size}}</mat-cell>
     </ng-container>
 
     <!-- Modified Column -->
-    <ng-container cdkColumnDef="modified">
-        <mat-header-cell *cdkHeaderCellDef fxHide fxShow.gt-md>Modified</mat-header-cell>
-        <mat-cell *cdkCellDef="let row" fxHide fxShow.gt-md>{{row.modified}}</mat-cell>
+    <ng-container matColumnDef="modified">
+        <mat-header-cell *matHeaderCellDef fxHide fxShow.gt-md>Modified</mat-header-cell>
+        <mat-cell *matCellDef="let row" fxHide fxShow.gt-md>{{row.modified}}</mat-cell>
     </ng-container>
 
     <!-- Detail Button Column -->
-    <ng-container cdkColumnDef="detail-button">
-        <mat-header-cell *cdkHeaderCellDef fxFlex="48px" fxHide.gt-md></mat-header-cell>
-        <mat-cell *cdkCellDef="let row" fxFlex="48px" fxHide.gt-md>
+    <ng-container matColumnDef="detail-button">
+        <mat-header-cell *matHeaderCellDef fxFlex="48px" fxHide.gt-md></mat-header-cell>
+        <mat-cell *matCellDef="let row" fxFlex="48px" fxHide.gt-md>
             <button mat-icon-button class="sidebar-toggle" fxHide.gt-md
                     (click)="toggleSidebar('file-manager-details-sidebar')">
                 <mat-icon class="secondary-text">info</mat-icon>
@@ -49,8 +49,8 @@
         </mat-cell>
     </ng-container>
 
-    <mat-header-row *cdkHeaderRowDef="displayedColumns"></mat-header-row>
-    <mat-row *cdkRowDef="let row; columns: displayedColumns;"
+    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+    <mat-row *matRowDef="let row; columns: displayedColumns;"
              (click)="onSelect(row)"
              [ngClass]="{'mat-accent-50-bg':row == selected}"
              matRipple [@animate]="{value:'*',params:{y:'100%'}}"
diff --git a/src/app/main/apps/file-manager/file-manager.module.ts b/src/app/main/apps/file-manager/file-manager.module.ts
index ba57d866..c4f65037 100644
--- a/src/app/main/apps/file-manager/file-manager.module.ts
+++ b/src/app/main/apps/file-manager/file-manager.module.ts
@@ -1,6 +1,5 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { CdkTableModule } from '@angular/cdk/table';
 import { MatButtonModule, MatIconModule, MatRippleModule, MatSlideToggleModule, MatTableModule } from '@angular/material';
 
 import { FuseSharedModule } from '@fuse/shared.module';
@@ -33,7 +32,6 @@ const routes: Routes = [
     imports     : [
         RouterModule.forChild(routes),
 
-        CdkTableModule,
         MatButtonModule,
         MatIconModule,
         MatRippleModule,
diff --git a/src/app/main/pages/search/search.module.ts b/src/app/main/pages/search/search.module.ts
index c5266f31..8109f3cf 100644
--- a/src/app/main/pages/search/search.module.ts
+++ b/src/app/main/pages/search/search.module.ts
@@ -1,6 +1,5 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
-import { CdkTableModule } from '@angular/cdk/table';
 import { MatButtonModule, MatFormFieldModule, MatIconModule, MatInputModule, MatTableModule, MatTabsModule } from '@angular/material';
 
 import { FuseSharedModule } from '@fuse/shared.module';
@@ -29,7 +28,6 @@ const routes = [
     ],
     imports     : [
         RouterModule.forChild(routes),
-        CdkTableModule,
 
         MatButtonModule,
         MatFormFieldModule,
diff --git a/src/app/main/pages/search/tabs/table/table.component.html b/src/app/main/pages/search/tabs/table/table.component.html
index d1ca2f12..0e413878 100644
--- a/src/app/main/pages/search/tabs/table/table.component.html
+++ b/src/app/main/pages/search/tabs/table/table.component.html
@@ -6,31 +6,31 @@
               The actual rendered columns are set as a property on the row definition" -->
 
         <!-- ID Column -->
-        <ng-container cdkColumnDef="name">
-            <mat-header-cell *cdkHeaderCellDef>Name</mat-header-cell>
-            <mat-cell *cdkCellDef="let row"> {{row.name}}</mat-cell>
+        <ng-container matColumnDef="name">
+            <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
+            <mat-cell *matCellDef="let row"> {{row.name}}</mat-cell>
         </ng-container>
 
         <!-- Progress Column -->
-        <ng-container cdkColumnDef="position">
-            <mat-header-cell *cdkHeaderCellDef>Position</mat-header-cell>
-            <mat-cell *cdkCellDef="let row"> {{row.position}}</mat-cell>
+        <ng-container matColumnDef="position">
+            <mat-header-cell *matHeaderCellDef>Position</mat-header-cell>
+            <mat-cell *matCellDef="let row"> {{row.position}}</mat-cell>
         </ng-container>
 
         <!-- Name Column -->
-        <ng-container cdkColumnDef="office">
-            <mat-header-cell *cdkHeaderCellDef>Office</mat-header-cell>
-            <mat-cell *cdkCellDef="let row"> {{row.office}}</mat-cell>
+        <ng-container matColumnDef="office">
+            <mat-header-cell *matHeaderCellDef>Office</mat-header-cell>
+            <mat-cell *matCellDef="let row"> {{row.office}}</mat-cell>
         </ng-container>
 
         <!-- Color Column -->
-        <ng-container cdkColumnDef="salary">
-            <mat-header-cell *cdkHeaderCellDef>Salary</mat-header-cell>
-            <mat-cell *cdkCellDef="let row"> {{row.salary | currency:'USD':'symbol'}}</mat-cell>
+        <ng-container matColumnDef="salary">
+            <mat-header-cell *matHeaderCellDef>Salary</mat-header-cell>
+            <mat-cell *matCellDef="let row"> {{row.salary | currency:'USD':'symbol'}}</mat-cell>
         </ng-container>
 
-        <mat-header-row *cdkHeaderRowDef="displayedColumns"></mat-header-row>
-        <mat-row *cdkRowDef="let row; columns: displayedColumns;"></mat-row>
+        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+        <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
     </mat-table>
 
 </div>