From 9c710d6fa3f877e6630e33c5922050d3b0435cf7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=87etin?=
 <69278826+cetincakiroglu@users.noreply.github.com>
Date: Tue, 14 Dec 2021 16:31:40 +0300
Subject: [PATCH] update table, menu, topbar, dialog, toast components and css

---
 src/app/app.main.component.ts                 |   7 +-
 src/app/app.menu.component.ts                 |  30 ++--
 src/app/app.menu.service.ts                   |   2 +-
 src/app/app.menuitem.component.ts             |   6 +-
 src/app/app.topbar.component.html             |   8 +-
 src/app/demo/view/dashboard.component.html    |   4 +-
 src/app/demo/view/dashboarddemo.scss          |   2 -
 .../demo/view/documentation.component.html    |  78 ++++-----
 .../demo/view/floatlabeldemo.component.html   |  20 +--
 src/app/demo/view/inputdemo.component.html    |   4 +-
 src/app/demo/view/inputdemo.component.ts      |   2 +
 .../demo/view/invalidstatedemo.component.html |  98 ++++++-----
 src/app/demo/view/menusdemo.component.ts      |   2 +-
 src/app/demo/view/messagesdemo.component.html |   4 +-
 src/app/demo/view/messagesdemo.component.ts   |   7 +
 src/app/demo/view/overlaysdemo.component.html |   2 +-
 src/app/demo/view/overlaysdemo.component.ts   |   3 +-
 src/app/demo/view/overlaysdemo.scss           |   6 +
 src/app/demo/view/panelsdemo.component.html   |   2 -
 src/app/demo/view/tabledemo.component.html    | 156 +++++++++++-------
 src/app/demo/view/tabledemo.component.ts      |   8 +-
 src/app/demo/view/tabledemo.scss              |  13 ++
 src/app/pages/app.crud.component.html         |  34 ++--
 src/app/pages/app.crud.component.ts           |  10 ++
 src/assets/sass/layout/_topbar.scss           |   4 +-
 src/styles.scss                               |   2 -
 26 files changed, 302 insertions(+), 212 deletions(-)

diff --git a/src/app/app.main.component.ts b/src/app/app.main.component.ts
index 5c7cd60..3832599 100644
--- a/src/app/app.main.component.ts
+++ b/src/app/app.main.component.ts
@@ -99,6 +99,7 @@ export class AppMainComponent implements AfterViewInit, OnDestroy, OnInit {
         }
         else {
             this.menuActiveMobile = !this.menuActiveMobile;
+            this.topMenuActive = false;
         }
 
         event.preventDefault();
@@ -127,7 +128,7 @@ export class AppMainComponent implements AfterViewInit, OnDestroy, OnInit {
         setTimeout(() => {
             this.topMenuActive = false;
             this.topMenuLeaving = false;
-        }, 500);
+        }, 1);
     }
 
     onMenuClick() {
@@ -155,6 +156,10 @@ export class AppMainComponent implements AfterViewInit, OnDestroy, OnInit {
         return window.innerWidth > 1024;
     }
 
+    isMobile(){
+        return window.innerWidth < 1024;
+    }
+
     onSearchClick() {
         this.topMenuButtonClick = true;
     }
diff --git a/src/app/app.menu.component.ts b/src/app/app.menu.component.ts
index 67ee72a..dbaff1b 100644
--- a/src/app/app.menu.component.ts
+++ b/src/app/app.menu.component.ts
@@ -12,7 +12,7 @@ import {AppComponent} from './app.component';
                         <li app-menuitem *ngFor="let child of item.items" [item]="child" [index]="i"></li>
                     </ul>
                 </li>
-                <a href="https://www.primefaces.org/primeblocks-ng/">
+                <a href="https://www.primefaces.org/primeblocks-ng/#/">
                     <img src="assets/layout/images/{{app.darkMode ? 'banner-primeblocks-dark' : 'banner-primeblocks'}}.png" alt="Prime Blocks" class="w-full mt-3"/>
                 </a>
             </ul>
@@ -41,7 +41,7 @@ export class AppMenuComponent implements OnInit {
                     {label: 'Form Layout', icon: 'pi pi-fw pi-id-card', routerLink: ['/uikit/formlayout']},
                     {label: 'Input', icon: 'pi pi-fw pi-check-square', routerLink: ['/uikit/input']},
                     {label: 'Float Label', icon: 'pi pi-fw pi-bookmark', routerLink: ['/uikit/floatlabel']},
-                    {label: 'Invalid State', icon: 'pi pi-exclamation-circle', routerLink: ['/uikit/invalidstate']},
+                    {label: 'Invalid State', icon: 'pi pi-fw pi-exclamation-circle', routerLink: ['/uikit/invalidstate']},
                     {label: 'Button', icon: 'pi pi-fw pi-mobile', routerLink: ['/uikit/button'], class: 'rotated-icon'},
                     {label: 'Table', icon: 'pi pi-fw pi-table', routerLink: ['/uikit/table']},
                     {label: 'List', icon: 'pi pi-fw pi-list', routerLink: ['/uikit/list']},
@@ -67,38 +67,38 @@ export class AppMenuComponent implements OnInit {
                 label: 'Hierarchy',
                 items: [
                     {
-                        label: 'Submenu 1', icon: 'pi pi-fw pi-align-left',
+                        label: 'Submenu 1', icon: 'pi pi-fw pi-bookmark',
                         items: [
                             {
-                                label: 'Submenu 1.1', icon: 'pi pi-fw pi-align-left',
+                                label: 'Submenu 1.1', icon: 'pi pi-fw pi-bookmark',
                                 items: [
-                                    {label: 'Submenu 1.1.1', icon: 'pi pi-fw pi-align-left'},
-                                    {label: 'Submenu 1.1.2', icon: 'pi pi-fw pi-align-left'},
-                                    {label: 'Submenu 1.1.3', icon: 'pi pi-fw pi-align-left'},
+                                    {label: 'Submenu 1.1.1', icon: 'pi pi-fw pi-bookmark'},
+                                    {label: 'Submenu 1.1.2', icon: 'pi pi-fw pi-bookmark'},
+                                    {label: 'Submenu 1.1.3', icon: 'pi pi-fw pi-bookmark'},
                                 ]
                             },
                             {
-                                label: 'Submenu 1.2', icon: 'pi pi-fw pi-align-left',
+                                label: 'Submenu 1.2', icon: 'pi pi-fw pi-bookmark',
                                 items: [
-                                    {label: 'Submenu 1.2.1', icon: 'pi pi-fw pi-align-left'}
+                                    {label: 'Submenu 1.2.1', icon: 'pi pi-fw pi-bookmark'}
                                 ]
                             },
                         ]
                     },
                     {
-                        label: 'Submenu 2', icon: 'pi pi-fw pi-align-left',
+                        label: 'Submenu 2', icon: 'pi pi-fw pi-bookmark',
                         items: [
                             {
-                                label: 'Submenu 2.1', icon: 'pi pi-fw pi-align-left',
+                                label: 'Submenu 2.1', icon: 'pi pi-fw pi-bookmark',
                                 items: [
-                                    {label: 'Submenu 2.1.1', icon: 'pi pi-fw pi-align-left'},
-                                    {label: 'Submenu 2.1.2', icon: 'pi pi-fw pi-align-left'},
+                                    {label: 'Submenu 2.1.1', icon: 'pi pi-fw pi-bookmark'},
+                                    {label: 'Submenu 2.1.2', icon: 'pi pi-fw pi-bookmark'},
                                 ]
                             },
                             {
-                                label: 'Submenu 2.2', icon: 'pi pi-fw pi-align-left',
+                                label: 'Submenu 2.2', icon: 'pi pi-fw pi-bookmark',
                                 items: [
-                                    {label: 'Submenu 2.2.1', icon: 'pi pi-fw pi-align-left'},
+                                    {label: 'Submenu 2.2.1', icon: 'pi pi-fw pi-bookmark'},
                                 ]
                             },
                         ]
diff --git a/src/app/app.menu.service.ts b/src/app/app.menu.service.ts
index d209192..0163ecf 100644
--- a/src/app/app.menu.service.ts
+++ b/src/app/app.menu.service.ts
@@ -15,6 +15,6 @@ export class MenuService {
     }
 
     reset() {
-       // this.resetSource.next();
+    //    this.resetSource.next(true);
     }
 }
diff --git a/src/app/app.menuitem.component.ts b/src/app/app.menuitem.component.ts
index 31db832..d690171 100644
--- a/src/app/app.menuitem.component.ts
+++ b/src/app/app.menuitem.component.ts
@@ -18,7 +18,7 @@ import {AppMainComponent} from './app.main.component';
 				<i [ngClass]="item.icon" class="layout-menuitem-icon"></i>
 				<span>{{item.label}}</span>
 				<span class="menuitem-badge" *ngIf="item.badge">{{item.badge}}</span>
-				<i class="pi pi-fw pi-angle-down layout-submenu-toggler" *ngIf="item.items"></i>
+				<i class="pi pi-fw {{active ? 'pi-angle-up' : 'pi-angle-down'}} ml-auto" *ngIf="item.items"></i>
 			</a>
 			<a (click)="itemClick($event)" *ngIf="(item.routerLink && !item.items) && item.visible !== false" [ngClass]="item.class"
 			   [routerLink]="item.routerLink" routerLinkActive="active-menuitem-routerlink router-link-exact-active"
@@ -26,7 +26,7 @@ import {AppMainComponent} from './app.main.component';
 				<i [ngClass]="item.icon" class="layout-menuitem-icon"></i>
 				<span>{{item.label}}</span>
 				<span class="menuitem-badge" *ngIf="item.badge">{{item.badge}}</span>
-				<i class="pi pi-fw pi-angle-down layout-submenu-toggler" *ngIf="item.items"></i>
+				<i class="pi pi-fw {{active ? 'pi-angle-up' : 'pi-angle-down'}} ml-auto" *ngIf="item.items"></i>
 			</a>
 			<ul *ngIf="(item.items && active) && item.visible !== false" [@children]="(active ? 'visibleAnimated' : 'hiddenAnimated')">
 				<ng-template ngFor let-child let-i="index" [ngForOf]="item.items">
@@ -36,7 +36,7 @@ import {AppMainComponent} from './app.main.component';
 		</ng-container>
     `,
     host: {
-        '[class.active-menuitem]': 'active'
+        '[class.active-menuitem]': 'active',
     },
     animations: [
         trigger('children', [
diff --git a/src/app/app.topbar.component.html b/src/app/app.topbar.component.html
index c287d4a..18583ee 100644
--- a/src/app/app.topbar.component.html
+++ b/src/app/app.topbar.component.html
@@ -4,16 +4,16 @@
         <span>SAKAI</span>
     </a>
 
-    <a class="p-link  layout-menu-button layout-topbar-button" href="#" (click)="appMain.toggleMenu($event)">
+    <a class="p-link layout-menu-button layout-topbar-button" href="#" (click)="appMain.toggleMenu($event)">
         <i class="pi pi-bars"></i>
     </a>
 
     <a class="p-link layout-topbar-menu-button layout-topbar-button" href="#" (click)="appMain.toggleTopMenu($event)">
         <i class="pi pi-ellipsis-v"></i>
     </a>
-    
-    <div class="layout-topbar-menu lg flex origin-top layout-topbar-menu-mobile-active" *ngIf="appMain.topMenuActive">
-        <a href="#" class="p-link layout-topbar-button">
+
+    <div class="layout-topbar-menu" [ngClass]="{'layout-topbar-menu-mobile-active':appMain.topMenuActive,'':appMain.topMenuLeaving}">
+         <a href="#" class="p-link layout-topbar-button">
             <i class="pi pi-calendar"></i>
             <span>Calendar</span>
         </a>
diff --git a/src/app/demo/view/dashboard.component.html b/src/app/demo/view/dashboard.component.html
index a365129..13b6e93 100755
--- a/src/app/demo/view/dashboard.component.html
+++ b/src/app/demo/view/dashboard.component.html
@@ -64,7 +64,7 @@
         <div class="col-12 xl:col-6">
             <div class="card">
                 <h5>Recent Sales</h5>
-                <p-table [value]="products" [paginator]="true" [rows]="5">
+                <p-table [value]="products" [paginator]="true" [rows]="5" responsiveLayout="scroll">
                     <ng-template pTemplate="header">
                         <tr>
                             <th>Image</th>
@@ -76,7 +76,7 @@
                     <ng-template pTemplate="body" let-product>
                         <tr>
                             <td>
-                                <img src="../../../assets/demo/images/product/{{product.image}}" alt="{{product.name}}" width="50px" height="50px">
+                                <img src="../../../assets/demo/images/product/{{product.image}}" alt="{{product.name}}" width="100">
                             </td>
                             <td>{{product.name}}</td>
                             <td>{{product.price | currency:'USD'}}</td>
diff --git a/src/app/demo/view/dashboarddemo.scss b/src/app/demo/view/dashboarddemo.scss
index 4fd08b4..e69de29 100644
--- a/src/app/demo/view/dashboarddemo.scss
+++ b/src/app/demo/view/dashboarddemo.scss
@@ -1,2 +0,0 @@
-.layout-dashboard {
-}
diff --git a/src/app/demo/view/documentation.component.html b/src/app/demo/view/documentation.component.html
index ab6fb2b..7586445 100755
--- a/src/app/demo/view/documentation.component.html
+++ b/src/app/demo/view/documentation.component.html
@@ -107,71 +107,71 @@ export class AppMenuComponent implements OnInit, AfterViewInit &#123;
         this.model = [
             &#123;label: 'Dashboard', icon: 'pi pi-home', routerLink: ['/']&#125;,
             &#123;
-                label: 'UI Kit', icon: 'pi pi-star-o', routerLink: ['/uikit'],
+                label: 'UI Kit', icon: 'pi pi-star', routerLink: ['/uikit'],
                 items: [
-                    &#123;label: 'Form Layout', icon: 'pi pi-id-card', routerLink: ['/uikit/formlayout']&#125;,
-                    &#123;label: 'Input', icon: 'pi pi-check-square', routerLink: ['/uikit/input']&#125;,
-                    &#123;label: 'Float Label', icon: 'pi pi-bookmark', routerLink: ['/uikit/floatlabel']&#125;,
-                    &#123;label: 'Invalid State', icon: 'pi pi-exclamation-circle', routerLink: ['/uikit/invalidstate']&#125;,
-                    &#123;label: 'Button', icon: 'pi pi-mobile', routerLink: ['/uikit/button'], class: 'rotated-icon'&#125;,
-                    &#123;label: 'Table', icon: 'pi pi-table', routerLink: ['/uikit/table']&#125;,
-                    &#123;label: 'List', icon: 'pi pi-list', routerLink: ['/uikit/list']&#125;,
-                    &#123;label: 'Tree', icon: 'pi pi-share-alt', routerLink: ['/uikit/tree']&#125;,
-                    &#123;label: 'Panel', icon: 'pi pi-tablet', routerLink: ['/uikit/panel']&#125;,
-                    &#123;label: 'Overlay', icon: 'pi pi-clone', routerLink: ['/uikit/overlay']&#125;,
-                    &#123;label: 'Media', icon: 'pi pi-image', routerLink: ['/uikit/media']&#125;,
-                    &#123;label: 'Menu', icon: 'pi pi-bars', routerLink: ['/uikit/menu']&#125;,
-                    &#123;label: 'Message', icon: 'pi pi-comment', routerLink: ['/uikit/message']&#125;,
-                    &#123;label: 'File', icon: 'pi pi-file', routerLink: ['/uikit/file']&#125;,
-                    &#123;label: 'Chart', icon: 'pi pi-chart-bar', routerLink: ['/uikit/charts']&#125;,
-                    &#123;label: 'Misc', icon: 'pi pi-circle-off', routerLink: ['/uikit/misc']&#125;
+                    &#123;label: 'Form Layout', icon: 'pi pi-fw pi-id-card', routerLink: ['/uikit/formlayout']&#125;,
+                    &#123;label: 'Input', icon: 'pi pi-fw pi-check-square', routerLink: ['/uikit/input']&#125;,
+                    &#123;label: 'Float Label', icon: 'pi pi-fw pi-bookmark', routerLink: ['/uikit/floatlabel']&#125;,
+                    &#123;label: 'Invalid State', icon: 'pi pi-fw pi-exclamation-circle', routerLink: ['/uikit/invalidstate']&#125;,
+                    &#123;label: 'Button', icon: 'pi pi-fw pi-mobile', routerLink: ['/uikit/button'], class: 'rotated-icon'&#125;,
+                    &#123;label: 'Table', icon: 'pi pi-fw pi-table', routerLink: ['/uikit/table']&#125;,
+                    &#123;label: 'List', icon: 'pi pi-fw pi-list', routerLink: ['/uikit/list']&#125;,
+                    &#123;label: 'Tree', icon: 'pi pi-fw pi-share-alt', routerLink: ['/uikit/tree']&#125;,
+                    &#123;label: 'Panel', icon: 'pi pi-fw pi-tablet', routerLink: ['/uikit/panel']&#125;,
+                    &#123;label: 'Overlay', icon: 'pi pi-fw pi-clone', routerLink: ['/uikit/overlay']&#125;,
+                    &#123;label: 'Media', icon: 'pi pi-fw pi-image', routerLink: ['/uikit/media']&#125;,
+                    &#123;label: 'Menu', icon: 'pi pi-fw pi-bars', routerLink: ['/uikit/menu']&#125;,
+                    &#123;label: 'Message', icon: 'pi pi-fw pi-comment', routerLink: ['/uikit/message']&#125;,
+                    &#123;label: 'File', icon: 'pi pi-fw pi-file', routerLink: ['/uikit/file']&#125;,
+                    &#123;label: 'Chart', icon: 'pi pi-fw pi-chart-bar', routerLink: ['/uikit/charts']&#125;,
+                    &#123;label: 'Misc', icon: 'pi pi-fw pi-circle-off', routerLink: ['/uikit/misc']&#125;
                 ]
             &#125;,
             &#123;
-                label: 'Pages', icon: 'pi pi-briefcase', routerLink: ['/pages'],
+                label: 'Pages', icon: 'pi pi-fw pi-briefcase', routerLink: ['/pages'],
                 items: [
-                    &#123;label: 'Crud', icon: 'pi pi-pencil', routerLink: ['/pages/crud']&#125;,
+                    &#123;label: 'Crud', icon: 'pi pi-fw pi-pencil', routerLink: ['/pages/crud']&#125;,
                     &#123;label: 'Timeline', icon: 'pi pi-fw pi-calendar', routerLink: ['/pages/timeline']&#125;,
-                    &#123;label: 'Not Found', icon: 'pi pi-exclamation-circle', routerLink: ['/notfound']&#125;,
-                    &#123;label: 'Empty', icon: 'pi pi-circle-off', routerLink: ['/pages/empty']&#125;
+                    &#123;label: 'Not Found', icon: 'pi pi-fw pi-exclamation-circle', routerLink: ['/notfound']&#125;,
+                    &#123;label: 'Empty', icon: 'pi pi-fw pi-circle-off', routerLink: ['/pages/empty']&#125;
                 ]
             &#125;,
             &#123;
-                label: 'Hierarchy', icon: 'pi pi-align-left',
+                label: 'Hierarchy', icon: 'pi pi-fw pi-align-left',
                 items: [
                     &#123;
-                        label: 'Submenu 1', icon: 'pi pi-align-left',
+                        label: 'Submenu 1', icon: 'pi pi-fw pi-bookmark',
                         items: [
                             &#123;
-                                label: 'Submenu 1.1', icon: 'pi pi-align-left',
+                                label: 'Submenu 1.1', icon: 'pi pi-fw pi-bookmark',
                                 items: [
-                                    &#123;label: 'Submenu 1.1.1', icon: 'pi pi-align-left'&#125;,
-                                    &#123;label: 'Submenu 1.1.2', icon: 'pi pi-align-left'&#125;,
-                                    &#123;label: 'Submenu 1.1.3', icon: 'pi pi-align-left'&#125;,
+                                    &#123;label: 'Submenu 1.1.1', icon: 'pi pi-fw pi-bookmark'&#125;,
+                                    &#123;label: 'Submenu 1.1.2', icon: 'pi pi-fw pi-bookmark'&#125;,
+                                    &#123;label: 'Submenu 1.1.3', icon: 'pi pi-fw pi-bookmark'&#125;,
                                 ]
                             &#125;,
                             &#123;
-                                label: 'Submenu 1.2', icon: 'pi pi-align-left',
+                                label: 'Submenu 1.2', icon: 'pi pi-fw pi-bookmark',
                                 items: [
-                                    &#123;label: 'Submenu 1.2.1', icon: 'pi pi-align-left'&#125;
+                                    &#123;label: 'Submenu 1.2.1', icon: 'pi pi-fw pi-bookmark'&#125;
                                 ]
                             &#125;,
                         ]
                     &#125;,
                     &#123;
-                        label: 'Submenu 2', icon: 'pi pi-align-left',
+                        label: 'Submenu 2', icon: 'pi pi-fw pi-bookmark',
                         items: [
                             &#123;
-                                label: 'Submenu 2.1', icon: 'pi pi-align-left',
+                                label: 'Submenu 2.1', icon: 'pi pi-fw pi-bookmark',
                                 items: [
-                                    &#123;label: 'Submenu 2.1.1', icon: 'pi pi-align-left'&#125;,
-                                    &#123;label: 'Submenu 2.1.2', icon: 'pi pi-align-left'&#125;,
+                                    &#123;label: 'Submenu 2.1.1', icon: 'pi pi-fw pi-bookmark'&#125;,
+                                    &#123;label: 'Submenu 2.1.2', icon: 'pi pi-fw pi-bookmark'&#125;,
                                 ]
                             &#125;,
                             &#123;
-                                label: 'Submenu 2.2', icon: 'pi pi-align-left',
+                                label: 'Submenu 2.2', icon: 'pi pi-fw pi-bookmark',
                                 items: [
-                                    &#123;label: 'Submenu 2.2.1', icon: 'pi pi-align-left'&#125;,
+                                    &#123;label: 'Submenu 2.2.1', icon: 'pi pi-fw pi-bookmark'&#125;,
                                 ]
                             &#125;,
                         ]
@@ -179,13 +179,13 @@ export class AppMenuComponent implements OnInit, AfterViewInit &#123;
                 ]
             &#125;,
             &#123;
-                label: 'Start', icon: 'pi pi-download',
+                label: 'Start', icon: 'pi pi-fw pi-download',
                 items: [
                     &#123;
-                        label: 'Buy Now', icon: 'pi pi-shopping-cart', url: ['https://www.primefaces.org/store']
+                        label: 'Buy Now', icon: 'pi pi-fw pi-shopping-cart', url: ['https://www.primefaces.org/store']
                     &#125;,
                     &#123;
-                        label: 'Documentation', icon: 'pi pi-info-circle', routerLink: ['/documentation']
+                        label: 'Documentation', icon: 'pi pi-fw pi-info-circle', routerLink: ['/documentation']
                     &#125;
                 ]
             &#125;
@@ -322,7 +322,7 @@ $menuTooltipTextColor:#ffffff !default;
 </app-code>
 
 <h5>sass/variables/theme/_theme_light</h5>
-<p>Variables of the light component theme, see the <a href="https://www.primefaces.org/designer/api/primeng/10.0.0/">Theme Designer API</a> for documentation.</p>
+<p>Variables of the light component theme, see the <a href="https://www.primefaces.org/designer/api/primeng/11.1.0/">Theme Designer API</a> for documentation.</p>
 <div style="height:400px;overflow: auto;">
 <app-code ngPreserveWhitespaces ngNonBindable lang="css">
 //reused color variables
diff --git a/src/app/demo/view/floatlabeldemo.component.html b/src/app/demo/view/floatlabeldemo.component.html
index bc3f248..3648c9a 100644
--- a/src/app/demo/view/floatlabeldemo.component.html
+++ b/src/app/demo/view/floatlabeldemo.component.html
@@ -1,44 +1,44 @@
 <div class="card">
     <h5>Float Label</h5>
     <div class="grid p-fluid mt-3">
-        <div class="p-field col-12 md:col-4">
+        <div class="field col-12 md:col-4">
             <span class="p-float-label">
                 <input type="text" id="inputtext" pInputText [(ngModel)]="value1">
                 <label for="inputtext">InputText</label>
             </span>
         </div>
-        <div class="p-field col-12 md:col-4">
+        <div class="field col-12 md:col-4">
             <span class="p-float-label">
                 <p-autoComplete inputId="autocomplete" [(ngModel)]="value2" [suggestions]="filteredCountries"
                 (completeMethod)="searchCountry($event)" field="name"></p-autoComplete>
                 <label for="autocomplete">AutoComplete</label>
             </span>
         </div>
-        <div class="p-field col-12 md:col-4">
+        <div class="field col-12 md:col-4">
             <span class="p-float-label">
                 <p-calendar inputId="calendar" [(ngModel)]="value3"></p-calendar>
                 <label for="calendar">Calendar</label>
             </span>
         </div>
-        <div class="p-field col-12 md:col-4">
+        <div class="field col-12 md:col-4">
             <span class="p-float-label">
                 <p-chips inputId="chips" [(ngModel)]="value4"></p-chips>
                 <label for="chips">Chips</label>
             </span>
         </div>
-        <div class="p-field col-12 md:col-4">
+        <div class="field col-12 md:col-4">
             <span class="p-float-label">
                 <p-inputMask inputId="inputmask" mask="99/99/9999" [(ngModel)]="value5"></p-inputMask>
                 <label for="inputmask">InputMask</label>
             </span>
         </div>
-        <div class="p-field col-12 md:col-4">
+        <div class="field col-12 md:col-4">
             <span class="p-float-label">
                 <p-inputNumber inputId="inputnumber" [(ngModel)]="value6"></p-inputNumber>
                 <label for="inputnumber">InputNumber</label>
             </span>
         </div>
-        <div class="p-field col-12 md:col-4">
+        <div class="field col-12 md:col-4">
             <div class="p-inputgroup">
                 <span class="p-inputgroup-addon">
                     <i class="pi pi-user"></i>
@@ -49,19 +49,19 @@
                 </span>
             </div>
         </div>
-        <div class="p-field col-12 md:col-4">
+        <div class="field col-12 md:col-4">
             <span class="p-float-label">
                 <p-dropdown inputId="dropdown" [autoDisplayFirst]="false" [options]="cities" [(ngModel)]="value8" optionLabel="name"></p-dropdown>
                 <label for="dropdown">Dropdown</label>
             </span>
         </div>
-        <div class="p-field col-12 md:col-4">
+        <div class="field col-12 md:col-4">
             <span class="p-float-label">
                 <p-multiSelect inputId="multiselect" [options]="cities" [(ngModel)]="value9" optionLabel="name" [filter]="false"></p-multiSelect>
                 <label for="multiselect">MultiSelect</label>
             </span>
         </div>
-        <div class="p-field col-12 md:col-4">
+        <div class="field col-12 md:col-4">
             <span class="p-float-label">
                 <textarea inputId="textarea" rows="3" cols="30" [(ngModel)]="value10" pInputTextarea></textarea>
                 <label for="textarea">Textarea</label>
diff --git a/src/app/demo/view/inputdemo.component.html b/src/app/demo/view/inputdemo.component.html
index 92e8f1c..dac3f61 100644
--- a/src/app/demo/view/inputdemo.component.html
+++ b/src/app/demo/view/inputdemo.component.html
@@ -47,10 +47,10 @@
 			<textarea pInputTextarea placeholder="Your Message" autoResize rows="3" cols="30"></textarea>
 
 			<h5>AutoComplete</h5>
-			<p-autoComplete placeholder="Search" id="dd" dropdown multiple></p-autoComplete>
+			<p-autoComplete placeholder="Search" id="dd" [dropdown]="true" [multiple]="true" [suggestions]="filteredCountries" (completeMethod)="filterCountry($event)" field="name"></p-autoComplete>
 
 			<h5>Calendar</h5>
-			<p-calendar showIcon showButtonBar></p-calendar>
+			<p-calendar [showIcon]="true" [showButtonBar]="true" [(ngModel)]="selectedDate"></p-calendar>
 
 			<h5>InputNumber</h5>
 			<p-inputNumber mode="decimal" [showButtons]="true" [min]="0" [max]="100">
diff --git a/src/app/demo/view/inputdemo.component.ts b/src/app/demo/view/inputdemo.component.ts
index daa6645..0c7340d 100644
--- a/src/app/demo/view/inputdemo.component.ts
+++ b/src/app/demo/view/inputdemo.component.ts
@@ -85,6 +85,8 @@ export class InputDemoComponent implements OnInit{
 
     valueKnob = 20;
 
+    selectedDate:any;
+
     constructor(private countryService: CountryService) {}
 
     ngOnInit() {
diff --git a/src/app/demo/view/invalidstatedemo.component.html b/src/app/demo/view/invalidstatedemo.component.html
index 279257d..53f153d 100644
--- a/src/app/demo/view/invalidstatedemo.component.html
+++ b/src/app/demo/view/invalidstatedemo.component.html
@@ -1,55 +1,51 @@
-<div class="grid p-fluid">
-    <div class="col">
-        <div class="card">
-            <h5>Invalid State</h5>
-            <div class="grid">
-                <div class="col-12 md:col-6">
-                    <div class="p-field my-3">
-                        <label for="inputtext">InputText</label>
-                        <input type="text" id="inputtext" pInputText class="ng-invalid ng-dirty">
-                    </div>
-                    <div class="p-field my-3">
-                        <label for="autocomplete">AutoComplete</label>
-                        <p-autoComplete inputId="autocomplete" [(ngModel)]="value1" [suggestions]="filteredCountries" (completeMethod)="searchCountry($event)" field="name" class="ng-invalid ng-dirty"></p-autoComplete>
+<div class="card floatlabel-demo">
+    <h5>Invalid State</h5>
+    <div class="grid p-fluid">
+        <div class="col-12 md:col-6">
+            <div class="field mt-3">
+                <label for="inputtext">InputText</label>
+                <input type="text" id="inputtext" pInputText class="ng-invalid ng-dirty">
+            </div>
+            <div class="field">
+                <label for="autocomplete">AutoComplete</label>
+                <p-autoComplete inputId="autocomplete" [(ngModel)]="value1" [suggestions]="filteredCountries" (completeMethod)="searchCountry($event)" field="name" class="ng-invalid ng-dirty"></p-autoComplete>
 
-                    </div>
-                    <div class="p-field my-3">
-                        <label for="calendar">Calendar</label>
-                        <p-calendar inputId="calendar" [(ngModel)]="value2" class="ng-invalid ng-dirty" [showIcon]="true"></p-calendar>
-                    </div>
-                    <div class="p-field my-3">
-                        <label for="chips">Chips</label>
-                        <p-chips inputId="chips" [(ngModel)]="value3" class="ng-invalid ng-dirty"></p-chips>
-                    </div>
-                    <div class="p-field my-3">
-                        <label for="password">Password</label>
-                        <p-password [(ngModel)]="value8" class="ng-invalid ng-dirty"></p-password>
-                    </div>
-                </div>
-                
-                <div class="col-12 md:col-6">                    
-                    <div class="p-field my-3">
-                        <label for="inputmask">InputMask</label>
-                        <p-inputMask inputId="inputmask" mask="99/99/9999" [(ngModel)]="value5" class="ng-invalid ng-dirty"></p-inputMask>
-                    </div>
-                    <div class="p-field my-3">
-                        <label for="inputnumber">InputNumber</label>
-                        <p-inputNumber inputId="inputnumber" [(ngModel)]="value6" class="ng-invalid ng-dirty"></p-inputNumber>
-                    </div>
-                    <div class="p-field my-3">
-                        <label for="dropdown">Dropdown</label>
-                        <p-dropdown inputId="dropdown" [autoDisplayFirst]="false" [options]="cities" [(ngModel)]="value9" optionLabel="name" class="ng-invalid ng-dirty"></p-dropdown>
-                    </div>
-                    <div class="p-field my-3">
-                        <label for="multiselect">MultiSelect</label>
-                        <p-multiSelect inputId="multiselect" [options]="cities" [(ngModel)]="value10" optionLabel="name" [filter]="false" class="ng-invalid ng-dirty"></p-multiSelect>
-                    </div>
-                    <div class="p-field my-3">
-                        <label for="textarea">Textarea</label>
-                        <textarea inputId="textarea" rows="3" cols="30" [(ngModel)]="value4" pInputTextarea class="ng-invalid ng-dirty"></textarea>
-                    </div>
-                </div>
+            </div>
+            <div class="field">
+                <label for="calendar">Calendar</label>
+                <p-calendar inputId="calendar" [(ngModel)]="value2" class="ng-invalid ng-dirty" [showIcon]="true"></p-calendar>
+            </div>
+            <div class="field">
+                <label for="chips">Chips</label>
+                <p-chips inputId="chips" [(ngModel)]="value3" class="ng-invalid ng-dirty"></p-chips>
+            </div>
+            <div class="field">
+                <label for="password">Password</label>
+                <p-password [(ngModel)]="value8" class="ng-invalid ng-dirty"></p-password>
+            </div>
+        </div>
+        
+        <div class="col-12 md:col-6">                    
+            <div class="field mt-3">
+                <label for="inputmask">InputMask</label>
+                <p-inputMask inputId="inputmask" mask="99/99/9999" [(ngModel)]="value5" class="ng-invalid ng-dirty"></p-inputMask>
+            </div>
+            <div class="field">
+                <label for="inputnumber">InputNumber</label>
+                <p-inputNumber inputId="inputnumber" [(ngModel)]="value6" class="ng-invalid ng-dirty"></p-inputNumber>
+            </div>
+            <div class="field">
+                <label for="dropdown">Dropdown</label>
+                <p-dropdown inputId="dropdown" [autoDisplayFirst]="false" [options]="cities" [(ngModel)]="value9" optionLabel="name" class="ng-invalid ng-dirty"></p-dropdown>
+            </div>
+            <div class="field">
+                <label for="multiselect">MultiSelect</label>
+                <p-multiSelect inputId="multiselect" [options]="cities" [(ngModel)]="value10" optionLabel="name" [filter]="false" class="ng-invalid ng-dirty"></p-multiSelect>
+            </div>
+            <div class="field">
+                <label for="textarea">Textarea</label>
+                <textarea inputId="textarea" rows="3" cols="30" [(ngModel)]="value4" pInputTextarea class="ng-invalid ng-dirty"></textarea>
             </div>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/app/demo/view/menusdemo.component.ts b/src/app/demo/view/menusdemo.component.ts
index ee59c89..1585766 100755
--- a/src/app/demo/view/menusdemo.component.ts
+++ b/src/app/demo/view/menusdemo.component.ts
@@ -340,7 +340,7 @@ export class MenusDemoComponent implements OnInit {
                 ]
             },
             {
-                label: 'Sports', icon: 'pi pi-fw pi-star-o',
+                label: 'Sports', icon: 'pi pi-fw pi-star',
                 items: [
                     [
                         {
diff --git a/src/app/demo/view/messagesdemo.component.html b/src/app/demo/view/messagesdemo.component.html
index 6a6812f..7f723b5 100755
--- a/src/app/demo/view/messagesdemo.component.html
+++ b/src/app/demo/view/messagesdemo.component.html
@@ -2,7 +2,7 @@
     <div class="col-12 lg:col-6">
         <div class="card">
             <h5>Toast</h5>
-            <p-toast key="tst"></p-toast>
+            <p-toast key="tst" [baseZIndex]="99999"></p-toast>
             <button type="button" pButton (click)="showSuccessViaToast()" label="Success" class="p-button-success mr-2 mb-2"></button>
             <button type="button" pButton (click)="showInfoViaToast()" label="Info" class="p-button-info mr-2 mb-2"></button>
             <button type="button" pButton (click)="showWarnViaToast()" label="Warn" class="p-button-warning mr-2 mb-2"></button>
@@ -11,7 +11,7 @@
     </div>
 
     <div class="col-12 lg:col-6">
-        <div class="card">
+        <div class="card z-3">
             <h5>Messages</h5>
             <button type="button" pButton (click)="showSuccessViaMessages()" label="Success" class="p-button-success mr-2 mb-2"></button>
             <button type="button" pButton (click)="showInfoViaMessages()" label="Info" class="p-button-info mr-2 mb-2"></button>
diff --git a/src/app/demo/view/messagesdemo.component.ts b/src/app/demo/view/messagesdemo.component.ts
index b468d18..935c384 100755
--- a/src/app/demo/view/messagesdemo.component.ts
+++ b/src/app/demo/view/messagesdemo.component.ts
@@ -6,11 +6,18 @@ import {Message, MessageService} from 'primeng/api';
     styles: [`
         :host ::ng-deep .p-button {
             min-width: 8em;
+            z-index:10000;
         }
 
 		:host ::ng-deep .p-message {
 			margin-left: .25em;
+            z-index:10000;
 		}
+
+        :host ::ng-deep .p-toast{
+            margin-top: 5em;
+            z-index:99999;
+        }
     `],
     providers: [MessageService]
 })
diff --git a/src/app/demo/view/overlaysdemo.component.html b/src/app/demo/view/overlaysdemo.component.html
index 450a023..b40e56e 100755
--- a/src/app/demo/view/overlaysdemo.component.html
+++ b/src/app/demo/view/overlaysdemo.component.html
@@ -3,7 +3,7 @@
     <div class="col-12 lg:col-6">
         <div class="card p-fluid">
             <h5>Dialog</h5>
-            <p-dialog header="Dialog" [(visible)]="display" modal="modal" showEffect="fade" [style]="{width: '40vw'}">
+            <p-dialog header="Dialog" [(visible)]="display" modal="modal" showEffect="fade" [style]="{width: '400px'}">
                 <div style="line-height: 1.5">
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
diff --git a/src/app/demo/view/overlaysdemo.component.ts b/src/app/demo/view/overlaysdemo.component.ts
index 6947416..e903e68 100755
--- a/src/app/demo/view/overlaysdemo.component.ts
+++ b/src/app/demo/view/overlaysdemo.component.ts
@@ -1,6 +1,7 @@
 import {Component, OnInit} from '@angular/core';
 import {ConfirmationService, MessageService} from 'primeng/api';
 import {Product} from '../domain/product';
+import {AppMainComponent} from 'src/app/app.main.component';
 import {ProductService} from '../service/productservice';
 
 @Component({
@@ -28,7 +29,7 @@ export class OverlaysDemoComponent implements OnInit {
 
     visibleSidebar5;
 
-    constructor(private productService: ProductService, private confirmationService: ConfirmationService, private messageService: MessageService) {}
+    constructor(private productService: ProductService, private confirmationService: ConfirmationService, private messageService: MessageService, public appMain: AppMainComponent) {}
 
     ngOnInit() {
         this.productService.getProductsSmall().then(products => this.products = products);
diff --git a/src/app/demo/view/overlaysdemo.scss b/src/app/demo/view/overlaysdemo.scss
index fc88a12..b8ec660 100644
--- a/src/app/demo/view/overlaysdemo.scss
+++ b/src/app/demo/view/overlaysdemo.scss
@@ -6,3 +6,9 @@
 :host ::ng-deep button {
 	margin-right: .25em;
 }
+
+@media (max-width: 1024px){
+	:host ::ng-deep .p-dialog{
+		margin: 0 20px;
+	}
+}
\ No newline at end of file
diff --git a/src/app/demo/view/panelsdemo.component.html b/src/app/demo/view/panelsdemo.component.html
index 462bdc8..940a37d 100755
--- a/src/app/demo/view/panelsdemo.component.html
+++ b/src/app/demo/view/panelsdemo.component.html
@@ -126,8 +126,6 @@
                 <button pButton type="button" icon="pi pi-plus" class="p-button-rounded p-button-plain p-button-text"
                         (click)="menu.toggle($event)"></button>
             </div>
-
-            <p class="card-subtitle">Subtitle</p>
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
                 dolore magna aliqua.
                 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
diff --git a/src/app/demo/view/tabledemo.component.html b/src/app/demo/view/tabledemo.component.html
index a70afd8..3ca5cd2 100644
--- a/src/app/demo/view/tabledemo.component.html
+++ b/src/app/demo/view/tabledemo.component.html
@@ -4,11 +4,14 @@
 			<h5>Default</h5>
 			<p>Pagination, sorting, filtering and checkbox selection.</p>
 			<p-table #dt [value]="customers1" [(selection)]="selectedCustomers1" dataKey="id"
-					 styleClass="p-datatable-customers" [rowHover]="true" [rows]="10" [paginator]="true"
+					responsiveLayout="scroll"
+					 styleClass="p-datatable-customers p-datatable-selectable" [rowHover]="true" [rows]="10" [paginator]="true"
 					 [filterDelay]="0" [globalFilterFields]="['name','country.name','representative.name','status']">
 				<ng-template pTemplate="caption">
-					<div class="flex flex-sm-column flex-md-row justify-content-md-between table-header">
-						List of Customers
+					<div class="flex flex-sm-column flex-md-row justify-content-md-between table-header md:align-items-end">
+						<h6>
+							List of Customers
+						</h6>
 						<span class="p-input-icon-left">
 							<i class="pi pi-search"></i>
 							<input pInputText type="text" (input)="dt.filterGlobal($event.target.value, 'contains')" placeholder="Global Search"/>
@@ -70,16 +73,20 @@
 						</td>
 						<td>
 							<span class="p-column-title">Country</span>
-							<img src="assets/demo/flags/flag_placeholder.png"
-								 [class]="'flag flag-' + customer.country.code" width="30">
-							<span class="image-text" style="margin-left: .5em;vertical-align: middle">{{customer.country.name}}</span>
+							<div>
+								<img src="assets/demo/flags/flag_placeholder.png"
+									 [class]="'flag flag-' + customer.country.code" width="30">
+								<span class="image-text" style="margin-left: .5em;vertical-align: middle">{{customer.country.name}}</span>
+							</div>
 						</td>
 						<td>
 							<span class="p-column-title">Representative</span>
-							<img [alt]="customer.representative.name"
-								 src="assets/demo/images/avatar/{{customer.representative.image}}" width="32"
-								 style="vertical-align: middle"/>
-							<span class="image-text" style="margin-left: .5em;vertical-align: middle">{{customer.representative.name}}</span>
+							<div>
+								<img [alt]="customer.representative.name"
+									 src="assets/demo/images/avatar/{{customer.representative.image}}" width="32"
+									 style="vertical-align: middle"/>
+								<span class="image-text" style="margin-left: .5em;vertical-align: middle">{{customer.representative.name}}</span>
+							</div>
 						</td>
 						<td>
 							<span class="p-column-title">Date</span>
@@ -112,7 +119,7 @@
 			<h5>Customized</h5>
 			<p>Scrollable table with gridlines (<mark>.p-datatable-gridlines</mark>), striped rows (<mark>.p-datatable-striped</mark>) and smaller paddings (<mark>p-datatable-sm</mark>).</p>
 			<p-table #dtc [value]="customers2" [(selection)]="selectedCustomer" dataKey="id" selectionMode="single"
-					 styleClass="p-datatable-customers p-datatable-gridlines p-datatable-striped p-datatable-sm"
+					 styleClass="p-datatable-customers p-datatable-gridlines p-datatable-striped p-datatable-sm" responsiveLayout="scroll"
 					 [scrollable]="true" scrollHeight="600px" [filterDelay]="0" [globalFilterFields]="['name','country.name','representative.name','status']">
 				<ng-template pTemplate="caption">
 					<div class="flex flex-sm-column flex-md-row justify-content-md-between table-header">
@@ -187,14 +194,49 @@
 		</div>
 	</div>
 
+	<div class="col-12">
+		<div class="card">
+			<h5>Frozen Columns</h5>
+			<p-toggleButton [(ngModel)]="idFrozen" [onIcon]="'pi pi-lock'" offIcon="pi pi-lock-open" [onLabel]="'Unfreeze Id'" offLabel="Freeze Id" [style]="{'width': '12rem'}"></p-toggleButton>
+		
+			<p-table [value]="customers3" scrollDirection="both" [scrollable]="true" scrollHeight="400px" styleClass="mt-3" responsiveLayout="scroll">
+				<ng-template pTemplate="header">
+					<tr>
+						<th style="width:200px" pFrozenColumn>Name</th>
+						<th style="width:100px" alignFrozen="left" pFrozenColumn [frozen]="idFrozen">Id</th>
+						<th style="width:200px">Country</th>
+						<th style="width:200px">Date</th>
+						<th style="width:200px">Company</th>
+						<th style="width:200px">Status</th>
+						<th style="width:200px">Activity</th>
+						<th style="width:200px">Representative</th>
+						<th style="width:200px">Balance</th>
+					</tr>
+				</ng-template>
+				<ng-template pTemplate="body" let-customer>
+					<tr>
+						<td style="width:200px" pFrozenColumn>{{customer.name}}</td>
+						<td style="width:100px" alignFrozen="left" pFrozenColumn [frozen]="idFrozen">{{customer.id}}</td>
+						<td style="width:200px">{{customer.country.name}}</td>
+						<td style="width:200px">{{customer.date}}</td>
+						<td style="width:200px">{{customer.company}}</td>
+						<td style="width:200px">{{customer.status}}</td>
+						<td style="width:200px">{{customer.activity}}</td>
+						<td style="width:200px">{{customer.representative.name}}</td>
+						<td style="width:200px">{{formatCurrency(customer.balance)}}</td>
+					</tr>
+				</ng-template>
+			</p-table>
+		</div>
+	</div>
+
 	<div class="col-12">
 		<div class="card">
 			<h5>Row Expand</h5>
 			<p-toast></p-toast>
-			<p-table [value]="products" dataKey="name" [expandedRowKeys]="expandedRows" styleClass="p-datatable-customers rowexpand-table">
+			<p-table [value]="products" dataKey="name" [expandedRowKeys]="expandedRows" styleClass="p-datatable-customers p-datatable-selectable rowexpand-table" responsiveLayout="scroll">
 				<ng-template pTemplate="caption">
-					<button pButton icon="pi pi-fw pi-plus" label="Expand All" (click)="expandAll()"></button>
-					<button pButton icon="pi pi-fw pi-minus" class="ml-2" label="Collapse All" (click)="collapseAll()"></button>
+					<button pButton icon="pi pi-fw {{isExpanded ? 'pi-minus' : 'pi-plus'}}" label="{{isExpanded ? 'Collapse All' : 'Expand All'}}" (click)="expandAll()"></button>
 					<div class="flex table-header">
 					</div>
 				</ng-template>
@@ -259,49 +301,49 @@
 		</ng-template>
 		</p-table>
 	</div>
-</div>
+	</div>
 
-<div class="col-12">
-	<div class="card">
-		<h5>Row Group and Scrolling</h5>
-		<p-table [value]="customers3" sortField="representative.name" sortMode="single" (onSort)="onSort()" [scrollable]="true" scrollHeight="600px"
-				 styleClass="p-datatable-customers">
-			<ng-template pTemplate="header">
-				<tr>
-					<th>Name</th>
-					<th>Country</th>
-					<th>Company</th>
-					<th>Status</th>
-					<th>Date</th>
-				</tr>
-			</ng-template>
-			<ng-template pTemplate="body" let-customer let-rowIndex="rowIndex">
-				<tr *ngIf="rowGroupMetadata[customer.representative.name].index === rowIndex">
-					<td colspan="5">
-						<img [alt]="customer.representative.name" src="assets/demo/images/avatar/{{customer.representative.image}}" width="32" style="vertical-align: middle" />
-						<span class="p-text-bold p-ml-2">{{customer.representative.name}}</span>
-					</td>
-				</tr>
-				<tr>
-					<td><span class="p-column-title">Name</span>
-						{{customer.name}}
-					</td>
-					<td><span class="p-column-title">Country</span>
-						<img src="assets/demo/flags/flag_placeholder.png" [class]="'flag flag-' + customer.country.code" width="30">
-						<span class="image-text" style="margin-left: .5em">{{customer.country.name}}</span>
-					</td>
-					<td><span class="p-column-title">Company</span>
-						{{customer.company}}
-					</td>
-					<td><span class="p-column-title">Status</span>
-						<span [class]="'customer-badge status-' + customer.status">{{customer.status}}</span>
-					</td>
-					<td><span class="p-column-title">Date</span>
-						{{customer.date}}
-					</td>
-				</tr>
-			</ng-template>
-		</p-table>
+	<div class="col-12">
+		<div class="card">
+			<h5>Row Group and Scrolling</h5>
+			<p-table [value]="customers3" sortField="representative.name" sortMode="single" (onSort)="onSort()" responsiveLayout="scroll" [scrollable]="true" scrollHeight="600px"
+					styleClass="p-datatable-customers">
+				<ng-template pTemplate="header">
+					<tr>
+						<th>Name</th>
+						<th>Country</th>
+						<th>Company</th>
+						<th>Status</th>
+						<th>Date</th>
+					</tr>
+				</ng-template>
+				<ng-template pTemplate="body" let-customer let-rowIndex="rowIndex">
+					<tr *ngIf="rowGroupMetadata[customer.representative.name].index === rowIndex">
+						<td colspan="5">
+							<img [alt]="customer.representative.name" src="assets/demo/images/avatar/{{customer.representative.image}}" width="32" style="vertical-align: middle" />
+							<span class="p-text-bold ml-2">{{customer.representative.name}}</span>
+						</td>
+					</tr>
+					<tr>
+						<td><span class="p-column-title">Name</span>
+							{{customer.name}}
+						</td>
+						<td><span class="p-column-title">Country</span>
+							<img src="assets/demo/flags/flag_placeholder.png" [class]="'flag flag-' + customer.country.code" width="30">
+							<span class="image-text" style="margin-left: .5em">{{customer.country.name}}</span>
+						</td>
+						<td><span class="p-column-title">Company</span>
+							{{customer.company}}
+						</td>
+						<td><span class="p-column-title">Status</span>
+							<span [class]="'customer-badge status-' + customer.status">{{customer.status}}</span>
+						</td>
+						<td><span class="p-column-title">Date</span>
+							{{customer.date}}
+						</td>
+					</tr>
+				</ng-template>
+			</p-table>
+		</div>
 	</div>
 </div>
-</div>
diff --git a/src/app/demo/view/tabledemo.component.ts b/src/app/demo/view/tabledemo.component.ts
index a1c1308..6fc2c50 100644
--- a/src/app/demo/view/tabledemo.component.ts
+++ b/src/app/demo/view/tabledemo.component.ts
@@ -49,6 +49,8 @@ export class TableDemoComponent implements OnInit {
 
     isExpanded: boolean = false;
 
+    idFrozen: boolean = false;
+
     @ViewChild('dt') table: Table;
 
     constructor(private customerService: CustomerService, private productService: ProductService, private messageService: MessageService, private confirmService: ConfirmationService, private cd: ChangeDetectorRef) {}
@@ -60,7 +62,7 @@ export class TableDemoComponent implements OnInit {
             this.customers1.forEach(customer => customer.date = new Date(customer.date));
         });
         this.customerService.getCustomersMedium().then(customers => this.customers2 = customers);
-        this.customerService.getCustomersMedium().then(customers => this.customers3 = customers);
+        this.customerService.getCustomersLarge().then(customers => this.customers3 = customers);
         this.productService.getProductsWithOrdersSmall().then(data => this.products = data);
 
         this.representatives = [
@@ -125,7 +127,7 @@ export class TableDemoComponent implements OnInit {
         this.isExpanded = !this.isExpanded;
     }
 
-    collapseAll(){
-        this.products.forEach(product => this.expandedRows[product.name] = false);
+    formatCurrency(value) {
+        return value.toLocaleString('en-US', {style: 'currency', currency: 'USD'});
     }
 }
diff --git a/src/app/demo/view/tabledemo.scss b/src/app/demo/view/tabledemo.scss
index cd5f4e6..712d7ac 100644
--- a/src/app/demo/view/tabledemo.scss
+++ b/src/app/demo/view/tabledemo.scss
@@ -3,6 +3,7 @@
 	.p-progressbar {
 		height: .5rem;
 		background-color: #D8DADC;
+		min-width:100px;
 
 		.p-progressbar-value {
 			background-color: #607D8B;
@@ -180,8 +181,20 @@
 						}
 					}
 				}
+
+				&.p-datatable-selectable{
+					.p-datatable-tbody>tr{
+						>td{
+							display:flex !important;
+							justify-content: space-between;
+						}
+
+					}
+				}
 			}
 		}
+		
 	}
+	
 
 }
diff --git a/src/app/pages/app.crud.component.html b/src/app/pages/app.crud.component.html
index 4eef74d..6a4959e 100644
--- a/src/app/pages/app.crud.component.html
+++ b/src/app/pages/app.crud.component.html
@@ -77,40 +77,52 @@
         <p-dialog [(visible)]="productDialog" [style]="{width: '450px'}" header="Product Details" [modal]="true" styleClass="p-fluid">
             <ng-template pTemplate="content">
                 <img [src]="'assets/demo/images/product/' + product.image" [alt]="product.image" class="product-image" *ngIf="product.image">
-                <div class="p-field">
+                <div class="field">
                     <label for="name">Name</label>
                     <input type="text" pInputText id="name" [(ngModel)]="product.name" required autofocus />
                     <small class="ng-dirty ng-invalid" *ngIf="submitted && !product.name">Name is required.</small>
                 </div>
-                <div class="p-field">
+                <div class="field">
                     <label for="description">Description</label>
                     <textarea id="description" pInputTextarea [(ngModel)]="product.description" required rows="3" cols="20"></textarea>
                 </div>
 
-                <div class="p-field">
-                    <label class="mb-3">Category</label>
-                    <div class="p-formgrid grid">
-                        <div class="p-field-radiobutton col-6">
+                <div class="field">
+                    <label for="status">Inventory Status</label>
+                    <p-dropdown id="status" [options]="statuses" optionLabel="label" [(ngModel)]="selectedStatus" placeholder="Select a Status" >
+                        <ng-template pTemplate="selectedItem">
+                            <span *ngIf="selectedStatus" [class]="'product-badge status-' + selectedStatus.value.toLowerCase()">{{selectedStatus.label}}</span>
+                        </ng-template>
+                        <ng-template let-status pTemplate="status">
+                            <span [class]="'product-badge status-' + status.value.toLowerCase()">{{status.label}}</span>
+                        </ng-template>
+                    </p-dropdown>
+                </div>
+
+                <div class="field">
+                    <label>Category</label>
+                    <div class="formgrid grid">
+                        <div class="field-radiobutton col-6">
                             <p-radioButton id="category1" name="category" value="Accessories" [(ngModel)]="product.category"></p-radioButton>
                             <label for="category1">Accessories</label>
                         </div>
-                        <div class="p-field-radiobutton col-6">
+                        <div class="field-radiobutton col-6">
                             <p-radioButton id="category2" name="category" value="Clothing" [(ngModel)]="product.category"></p-radioButton>
                             <label for="category2">Clothing</label>
                         </div>
-                        <div class="p-field-radiobutton col-6">
+                        <div class="field-radiobutton col-6">
                             <p-radioButton id="category3" name="category" value="Electronics" [(ngModel)]="product.category"></p-radioButton>
                             <label for="category3">Electronics</label>
                         </div>
-                        <div class="p-field-radiobutton col-6">
+                        <div class="field-radiobutton col-6">
                             <p-radioButton id="category4" name="category" value="Fitness" [(ngModel)]="product.category"></p-radioButton>
                             <label for="category4">Fitness</label>
                         </div>
                     </div>
                 </div>
 
-                <div class="p-formgrid grid">
-                    <div class="p-field col">
+                <div class="formgrid grid">
+                    <div class="field col">
                         <label for="price">Price</label>
                         <p-inputNumber id="price" [(ngModel)]="product.price" mode="currency" currency="USD" locale="en-US"></p-inputNumber>
                     </div>
diff --git a/src/app/pages/app.crud.component.ts b/src/app/pages/app.crud.component.ts
index dd8235e..a8da156 100644
--- a/src/app/pages/app.crud.component.ts
+++ b/src/app/pages/app.crud.component.ts
@@ -40,6 +40,10 @@ export class AppCrudComponent implements OnInit {
 
     cols: any[];
 
+    statuses: any[];
+
+    selectedStatus:any;
+
     rowsPerPageOptions = [5, 10, 20];
 
     constructor(private productService: ProductService, private messageService: MessageService,
@@ -55,6 +59,12 @@ export class AppCrudComponent implements OnInit {
             {field: 'rating', header: 'Reviews'},
             {field: 'inventoryStatus', header: 'Status'}
         ];
+
+        this.statuses = [
+            {label: 'INSTOCK', value: 'instock'},
+            {label: 'LOWSTOCK', value: 'lowstock'},
+            {label: 'OUTOFSTOCK', value: 'outofstock'}
+        ];
     }
 
     openNew() {
diff --git a/src/assets/sass/layout/_topbar.scss b/src/assets/sass/layout/_topbar.scss
index 7940236..cc2f95f 100644
--- a/src/assets/sass/layout/_topbar.scss
+++ b/src/assets/sass/layout/_topbar.scss
@@ -118,8 +118,8 @@
             top: 5rem;
             min-width: 15rem;
             display: none;
-            -webkit-animation: scalein 0.15s linear;
-            animation: scalein 0.15s linear;
+            // -webkit-animation: scalein 0.15s linear;
+            // animation: scalein 0.15s linear;
 
             &.layout-topbar-menu-mobile-active {
                 display: block
diff --git a/src/styles.scss b/src/styles.scss
index d1689bd..da9a06f 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -357,8 +357,6 @@
     }
 }
 
-
-
 .crud-demo {
     .p-toolbar {
         flex-wrap: wrap;