diff --git a/projects/demos/src/app/data-grid/data-grid-demo.component.html b/projects/demos/src/app/data-grid/data-grid-demo.component.html
index 8d6f059d..0c9ec352 100644
--- a/projects/demos/src/app/data-grid/data-grid-demo.component.html
+++ b/projects/demos/src/app/data-grid/data-grid-demo.component.html
@@ -104,4 +104,9 @@ <h3>Data Formatting</h3>
 <p>The <code>name</code> field use a formatter.</p>
 <mtx-grid [data]="list"
           [columns]="columnsWithFormatting">
+</mtx-grid>
+
+<h3>No Result</h3>
+<mtx-grid [data]="[]"
+          [columns]="columnsWithFormatting">
 </mtx-grid>
\ No newline at end of file
diff --git a/projects/extensions/data-grid/column-menu.component.html b/projects/extensions/data-grid/column-menu.component.html
new file mode 100755
index 00000000..8cb64282
--- /dev/null
+++ b/projects/extensions/data-grid/column-menu.component.html
@@ -0,0 +1,80 @@
+<ng-container [ngSwitch]="buttonType">
+    <ng-container *ngSwitchCase="'raised'">
+        <button [ngClass]="buttonClass" mat-raised-button [color]="buttonColor"
+                [matMenuTriggerFor]="menu">
+            <mat-icon *ngIf="buttonIcon">{{buttonIcon}}</mat-icon> {{buttonText}}
+        </button>
+    </ng-container>
+    <ng-container *ngSwitchCase="'stroked'">
+        <button [ngClass]="buttonClass" mat-stroked-button [color]="buttonColor"
+                [matMenuTriggerFor]="menu">
+            <mat-icon *ngIf="buttonIcon">{{buttonIcon}}</mat-icon> {{buttonText}}
+        </button>
+    </ng-container>
+    <ng-container *ngSwitchCase="'flat'">
+        <button [ngClass]="buttonClass" mat-flat-button [color]="buttonColor"
+                [matMenuTriggerFor]="menu">
+            <mat-icon *ngIf="buttonIcon">{{buttonIcon}}</mat-icon> {{buttonText}}
+        </button>
+    </ng-container>
+    <ng-container *ngSwitchCase="'icon'">
+        <button [ngClass]="buttonClass" mat-icon-button [color]="buttonColor"
+                [matMenuTriggerFor]="menu">
+            <mat-icon *ngIf="buttonIcon">{{buttonIcon}}</mat-icon>
+        </button>
+    </ng-container>
+    <ng-container *ngSwitchCase="'fab'">
+        <button [ngClass]="buttonClass" mat-fab [color]="buttonColor" [matMenuTriggerFor]="menu">
+            <mat-icon *ngIf="buttonIcon">{{buttonIcon}}</mat-icon> {{buttonText}}
+        </button>
+    </ng-container>
+    <ng-container *ngSwitchCase="'mini-fab'">
+        <button [ngClass]="buttonClass" mat-mini-fab [color]="buttonColor"
+                [matMenuTriggerFor]="menu">
+            <mat-icon *ngIf="buttonIcon">{{buttonIcon}}</mat-icon> {{buttonText}}
+        </button>
+    </ng-container>
+    <ng-container *ngSwitchDefault>
+        <button [ngClass]="buttonClass" mat-button [color]="buttonColor" [matMenuTriggerFor]="menu">
+            <mat-icon *ngIf="buttonIcon">{{buttonIcon}}</mat-icon> {{buttonText}}
+        </button>
+    </ng-container>
+</ng-container>
+
+<mat-menu #menu="matMenu" class="mtx-grid-column-menu">
+    <div class="mtx-grid-column-menu-inner"
+         (click)="$event.stopPropagation()"
+         (keydown)="$event.stopPropagation()">
+
+        <div class="mtx-grid-column-menu-list"
+             cdkDropList (cdkDropListDropped)="handleDrop($event)"
+             *ngIf="sortable">
+            <div class="mtx-grid-column-menu-item" *ngFor="let col of columns"
+                 cdkDrag [cdkDragDisabled]="selectedType === 'show'? !col.show : col.hide">
+                <mat-icon cdkDragHandle>drag_handle</mat-icon>
+                <ng-template [ngTemplateOutlet]="checkboxList"
+                             [ngTemplateOutletContext]="{ $implicit: col }">
+                </ng-template>
+            </div>
+        </div>
+
+        <div class="mtx-grid-column-menu-list" *ngIf="!sortable">
+            <div class="mtx-grid-column-menu-item" *ngFor="let col of columns">
+                <ng-template [ngTemplateOutlet]="checkboxList"
+                             [ngTemplateOutletContext]="{ $implicit: col }">
+                </ng-template>
+            </div>
+        </div>
+    </div>
+</mat-menu>
+
+<ng-template #checkboxList let-col>
+    <mat-checkbox class="mtx-grid-column-menu-item-label"
+                  *ngIf="selectable"
+                  [(ngModel)]="col[selectedType]"
+                  [disabled]="col.disabled"
+                  (change)="handleSelect($event)">
+        {{col.label}}
+    </mat-checkbox>
+    <span class="mtx-grid-column-menu-item-label" *ngIf="!selectable">{{col.label}}</span>
+</ng-template>
\ No newline at end of file
diff --git a/projects/extensions/data-grid/column-selection.component.scss b/projects/extensions/data-grid/column-menu.component.scss
similarity index 71%
rename from projects/extensions/data-grid/column-selection.component.scss
rename to projects/extensions/data-grid/column-menu.component.scss
index f18e2e19..d62d0376 100755
--- a/projects/extensions/data-grid/column-selection.component.scss
+++ b/projects/extensions/data-grid/column-menu.component.scss
@@ -1,33 +1,33 @@
 @import '~@angular/material/theming';
 
-.mtx-grid-column-selection {
+.mtx-grid-column-menu {
   .mat-menu-content {
     padding: 0;
   }
 }
 
-.mtx-grid-column-selection-inner {
+.mtx-grid-column-menu-inner {
   padding: 16px;
 }
 
-.mtx-grid-column-selection-list {
+.mtx-grid-column-menu-list {
   display: block;
   max-width: 100%;
 
   &.cdk-drop-list-dragging {
-    .mtx-grid-column-selection-item:not(.cdk-drag-placeholder) {
+    .mtx-grid-column-menu-item:not(.cdk-drag-placeholder) {
       transition: transform 250ms cubic-bezier(0, 0, .2, 1);
     }
   }
 
   &.cdk-drop-list {
-    .mtx-grid-column-selection-label {
+    .mtx-grid-column-menu-item-label {
       padding: 0 4px;
     }
   }
 }
 
-.mtx-grid-column-selection-item {
+.mtx-grid-column-menu-item {
   display: flex;
   flex-direction: row;
   align-items: center;
diff --git a/projects/extensions/data-grid/column-selection.component.ts b/projects/extensions/data-grid/column-menu.component.ts
similarity index 58%
rename from projects/extensions/data-grid/column-selection.component.ts
rename to projects/extensions/data-grid/column-menu.component.ts
index 1aad4502..4b55f466 100755
--- a/projects/extensions/data-grid/column-selection.component.ts
+++ b/projects/extensions/data-grid/column-menu.component.ts
@@ -11,20 +11,35 @@ import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
 import { MtxGridColumnSelectionItem } from './grid.interface';
 
 @Component({
-  selector: 'mtx-grid-column-selection',
-  exportAs: 'mtxGridColumnSelection',
-  templateUrl: './column-selection.component.html',
-  styleUrls: ['./column-selection.component.scss'],
+  selector: 'mtx-grid-column-menu',
+  exportAs: 'mtxGridColumnMenu',
+  templateUrl: './column-menu.component.html',
+  styleUrls: ['./column-menu.component.scss'],
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class MtxGridColumnSelectionComponent implements OnInit {
+export class MtxGridColumnMenuComponent implements OnInit {
   @Input() columns = [];
   @Input() selectable = true;
   @Input() selectedType: 'show' | 'hide' = 'show';
   @Input() sortable = true;
   @Input() dndSortable = true;
 
+  @Input() get buttonText() {
+    const defaultText = `Column ${this.selectedType === 'show' ? 'Shown' : 'Hidden'}`;
+    const text = this._buttonText ? this._buttonText : defaultText;
+    return text;
+  }
+  set buttonText(value: string) {
+    this._buttonText = value;
+  }
+  private _buttonText = '';
+
+  @Input() buttonType: 'raised' | 'stroked' | 'flat' | 'icon' | 'fab' | 'mini-fab' | '' = 'stroked';
+  @Input() buttonColor: 'primary' | 'accent' | 'warn' | '' = '';
+  @Input() buttonClass = '';
+  @Input() buttonIcon = '';
+
   @Output() selectionChange = new EventEmitter<string[]>();
   @Output() sortChange = new EventEmitter<string[]>();
 
@@ -37,9 +52,9 @@ export class MtxGridColumnSelectionComponent implements OnInit {
     return fields;
   }
 
-  constructor() { }
+  constructor() {}
 
-  ngOnInit() { }
+  ngOnInit() {}
 
   handleDrop(event: CdkDragDrop<string[]>) {
     moveItemInArray(this.columns, event.previousIndex, event.currentIndex);
diff --git a/projects/extensions/data-grid/column-selection.component.html b/projects/extensions/data-grid/column-selection.component.html
deleted file mode 100755
index 0befc937..00000000
--- a/projects/extensions/data-grid/column-selection.component.html
+++ /dev/null
@@ -1,40 +0,0 @@
-<button mat-stroked-button [matMenuTriggerFor]="menu">
-    Columns {{selectedType === 'show'? 'Shown' : 'Hidden'}}
-</button>
-<mat-menu #menu="matMenu" class="mtx-grid-column-selection">
-    <div class="mtx-grid-column-selection-inner"
-         (click)="$event.stopPropagation()"
-         (keydown)="$event.stopPropagation()">
-
-        <div class="mtx-grid-column-selection-list"
-             cdkDropList (cdkDropListDropped)="handleDrop($event)"
-             *ngIf="sortable">
-            <div class="mtx-grid-column-selection-item" *ngFor="let col of columns"
-                 cdkDrag [cdkDragDisabled]="selectedType === 'show'? !col.show : col.hide">
-                <mat-icon cdkDragHandle>drag_handle</mat-icon>
-                <ng-template [ngTemplateOutlet]="checkboxList"
-                             [ngTemplateOutletContext]="{ $implicit: col }">
-                </ng-template>
-            </div>
-        </div>
-
-        <div class="mtx-grid-column-selection-list" *ngIf="!sortable">
-            <div class="mtx-grid-column-selection-item" *ngFor="let col of columns">
-                <ng-template [ngTemplateOutlet]="checkboxList"
-                             [ngTemplateOutletContext]="{ $implicit: col }">
-                </ng-template>
-            </div>
-        </div>
-    </div>
-</mat-menu>
-
-<ng-template #checkboxList let-col>
-    <mat-checkbox class="mtx-grid-column-selection-label"
-                  *ngIf="selectable"
-                  [(ngModel)]="col[selectedType]"
-                  [disabled]="col.disabled"
-                  (change)="handleSelect($event)">
-        {{col.label}}
-    </mat-checkbox>
-    <span class="mtx-grid-column-selection-label" *ngIf="!selectable">{{col.label}}</span>
-</ng-template>
\ No newline at end of file
diff --git a/projects/extensions/data-grid/grid.component.html b/projects/extensions/data-grid/grid.component.html
index 39c2fe8f..6651a727 100755
--- a/projects/extensions/data-grid/grid.component.html
+++ b/projects/extensions/data-grid/grid.component.html
@@ -3,35 +3,42 @@
 
 <!-- Toolbar -->
 <div class="mtx-grid-toolbar" *ngIf="showToolbar">
-  <mtx-grid-column-selection [columns]="columnSelectionData"
-                             [selectable]="columnHideable"
-                             [selectedType]="columnHidingChecked"
-                             [sortable]="columnMovable"
-                             (selectionChange)="handleColumnHidingChange($event)"
-                             (sortChange)="handleColumnMovingChange($event)">
-  </mtx-grid-column-selection>
+  <mtx-grid-column-menu [columns]="columnMenuData"
+                        [buttonText]="columnMenuButtonText"
+                        [buttonType]="columnMenuButtonType"
+                        [buttonColor]="columnMenuButtonColor"
+                        [buttonClass]="columnMenuButtonClass"
+                        [buttonIcon]="columnMenuButtonIcon"
+                        [selectable]="columnHideable"
+                        [selectedType]="columnHidingChecked"
+                        [sortable]="columnMovable"
+                        (selectionChange)="handleColumnHidingChange($event)"
+                        (sortChange)="handleColumnMovingChange($event)">
+  </mtx-grid-column-menu>
 </div>
 
 <!-- Main Table -->
 <div class="mtx-grid-content">
-  <mat-table [ngClass]="{'mat-table-hover': rowHover, 'mat-table-striped': rowStriped}"
-             [dataSource]="dataSource" [multiTemplateDataRows]="expandable"
-             matSort (matSortChange)="handleSortChange($event)">
+  <table mat-table [ngClass]="{'mat-table-hover': rowHover, 
+                               'mat-table-striped': rowStriped,
+                               'mat-table-expandable': expandable}"
+         [dataSource]="dataSource" [multiTemplateDataRows]="expandable"
+         matSort (matSortChange)="handleSortChange($event)">
 
     <ng-container *ngIf="rowSelectable && !hideRowSelectionCheckbox"
-                  matColumnDef="MatCheckboxColumnDef">
-      <mat-header-cell *matHeaderCellDef class="mat-checkbox-column-cell">
+                  matColumnDef="MtxGridCheckboxColumnDef">
+      <th mat-header-cell *matHeaderCellDef class="mtx-grid-checkbox-cell">
         <mat-checkbox (change)="$event ? handleMasterToggle() : null"
                       [checked]="rowSelection.hasValue() && isAllSelected()"
                       [indeterminate]="rowSelection.hasValue() && !isAllSelected()">
         </mat-checkbox>
-      </mat-header-cell>
-      <mat-cell *matCellDef="let row;" class="mat-checkbox-column-cell">
+      </th>
+      <td mat-cell *matCellDef="let row;" class="mtx-grid-checkbox-cell">
         <mat-checkbox (click)="$event.stopPropagation()"
                       (change)="$event ? handleSingleToggle(row) : null"
                       [checked]="rowSelection.isSelected(row)">
         </mat-checkbox>
-      </mat-cell>
+      </td>
     </ng-container>
 
     <ng-container *ngFor="let col of columns;">
@@ -39,17 +46,17 @@
                     [sticky]="col.pinned==='left'"
                     [stickyEnd]="col.pinned==='right'">
 
-        <mat-header-cell *matHeaderCellDef
-                         [ngClass]="{'mat-table-sticky-left': col.pinned === 'left', 'mat-table-sticky-right': col.pinned === 'right'}"
-                         [ngStyle]="{'width': col.width, 'min-width': col.width, 'left': col.left, 'right': col.right}"
-                         mat-sort-header [disabled]="!col.sortable">
+        <th mat-header-cell *matHeaderCellDef
+            [ngClass]="{'mat-table-sticky-left': col.pinned === 'left', 'mat-table-sticky-right': col.pinned === 'right'}"
+            [ngStyle]="{'width': col.width, 'min-width': col.width, 'left': col.left, 'right': col.right}"
+            mat-sort-header [disabled]="!col.sortable">
 
-          <span class="mat-expanison-placeholder" *ngIf="col.showExpand"></span>{{col.header}}
-        </mat-header-cell>
-        <mat-cell *matCellDef="let row; let index = index; let dataIndex = dataIndex;"
-                  [ngClass]="{'mat-table-sticky-left': col.pinned === 'left', 'mat-table-sticky-right': col.pinned === 'right'}"
-                  [ngStyle]="{'width': col.width, 'min-width': col.width, 'left': col.left, 'right': col.right}"
-                  mtx-selectable-cell (cellSelectionChange)="handleCellSelect($event, row, col)">
+          <span class="mtx-grid-expanison-placeholder" *ngIf="col.showExpand"></span>{{col.header}}
+        </th>
+        <td mat-cell *matCellDef="let row; let index = index; let dataIndex = dataIndex;"
+            [ngClass]="{'mat-table-sticky-left': col.pinned === 'left', 'mat-table-sticky-right': col.pinned === 'right'}"
+            [ngStyle]="{'width': col.width, 'min-width': col.width, 'left': col.left, 'right': col.right}"
+            mtx-selectable-cell (cellSelectionChange)="handleCellSelect($event, row, col)">
 
           <ng-container *ngIf="col.cellTemplate else defaultCellTpl">
             <ng-template [ngTemplateOutlet]="col.cellTemplate"
@@ -66,39 +73,44 @@
             <mtx-grid-cell [rowData]="row" [colDef]="col"> </mtx-grid-cell>
           </ng-template>
 
-        </mat-cell>
+        </td>
 
       </ng-container>
     </ng-container>
 
-    <mat-header-row mat-header-row *matHeaderRowDef="displayedColumns; sticky: true">
-    </mat-header-row>
-    <mat-row *matRowDef="let row; let index = index; let dataIndex = dataIndex; columns: displayedColumns;"
-             [ngClass]="{'selected': rowSelection.isSelected(row), 'mat-row-odd': isOddRow(index, dataIndex)}"
-             (click)="handleRowSelect($event, row)">
-    </mat-row>
+    <tr mat-header-row mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
+    <tr mat-row
+        *matRowDef="let row; let index = index; let dataIndex = dataIndex; columns: displayedColumns;"
+        [ngClass]="{'selected': rowSelection.isSelected(row), 'mat-row-odd': isOddRow(index, dataIndex)}"
+        (click)="handleRowSelect($event, row)">
+    </tr>
 
     <ng-container *ngIf="expandable">
       <!-- Expanded Content Column - The expandable row is made up of this one column that spans across all columns -->
-      <ng-container matColumnDef="MatExpansionColumnDef">
-        <mat-cell *matCellDef="let row; let dataIndex = dataIndex"
-                  [attr.colspan]="displayedColumns.length">
-          <ng-template [ngTemplateOutlet]="expansionTemplate"
-                       [ngTemplateOutletContext]="{ $implicit: row, rowData: row, index: dataIndex }">
-          </ng-template>
-        </mat-cell>
+      <ng-container matColumnDef="MtxGridExpansionColumnDef">
+        <td mat-cell *matCellDef="let row; let dataIndex = dataIndex"
+            [attr.colspan]="displayedColumns.length">
+          <div class="mtx-grid-expanison-detail"
+               [@expansion]="expansionRowStates[dataIndex].expanded ? 'expanded' : 'collapsed'">
+            <ng-template [ngTemplateOutlet]="expansionTemplate"
+                         [ngTemplateOutletContext]="{ $implicit: row, rowData: row, index: dataIndex }">
+            </ng-template>
+          </div>
+        </td>
       </ng-container>
 
-      <mat-row class="mat-expanison-row"
-               *matRowDef="let row; columns: ['MatExpansionColumnDef']; let dataIndex = dataIndex"
-               [@expansion]="expansionRowStates[dataIndex].expanded ? 'expanded' : 'collapsed'">
-      </mat-row>
+      <tr mat-row [ngClass]="{'mtx-grid-expanison': true, 
+                              'expanded': expansionRowStates[dataIndex].expanded,
+                              'collapsed': !expansionRowStates[dataIndex].expanded}"
+          *matRowDef="let row; columns: ['MtxGridExpansionColumnDef']; let dataIndex = dataIndex">
+      </tr>
     </ng-container>
 
-  </mat-table>
+  </table>
 </div>
+
 <!-- Paginator -->
-<mat-paginator [class.mat-paginator-hidden]="!showPaginator"
+<mat-paginator [class.mat-paginator-hidden]="!showPaginator || hasNoResult"
                [showFirstLastButtons]="showFirstLastButtons"
                [length]="length"
                [pageIndex]="pageIndex"
@@ -107,4 +119,13 @@
                [hidePageSize]="hidePageSize"
                (page)="page.emit($event)"
                [disabled]="pageDisabled">
-</mat-paginator>
\ No newline at end of file
+</mat-paginator>
+
+<!-- No Result -->
+<div class="mtx-grid-no-result" *ngIf="hasNoResult">
+  <ng-container *ngIf="noResultTemplate else defaultNoResultTpl">
+    <ng-template [ngTemplateOutlet]="noResultTemplate"
+                 [ngTemplateOutletContext]="{ $implicit: 'aaa' }"></ng-template>
+  </ng-container>
+  <ng-template #defaultNoResultTpl>{{noResultText}}</ng-template>
+</div>
\ No newline at end of file
diff --git a/projects/extensions/data-grid/grid.component.scss b/projects/extensions/data-grid/grid.component.scss
index 5ce1c0e8..dda23d98 100755
--- a/projects/extensions/data-grid/grid.component.scss
+++ b/projects/extensions/data-grid/grid.component.scss
@@ -61,7 +61,7 @@
   .mat-header-cell:first-of-type {
     padding-left: 24px;
 
-    &.mat-checkbox-column-cell {
+    &.mtx-grid-checkbox-cell {
       padding-left: 10px;
       padding-right: 10px;
     }
@@ -70,7 +70,7 @@
       padding-left: 4px;
       padding-right: 24px;
 
-      &.mat-checkbox-column-cell {
+      &.mtx-grid-checkbox-cell {
         padding-left: 10px;
         padding-right: 10px;
       }
@@ -111,11 +111,31 @@
     }
   }
 
-  .mat-expanison-row {
+  .mtx-grid-expanison {
+    height: 0;
     overflow: hidden;
+
+    .mat-cell {
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+
+    &.collapsed {
+      .mat-cell {
+        border-bottom-width: 0;
+        transition: border-bottom-width 225ms cubic-bezier(.4, 0, .2, 1);
+      }
+    }
   }
 
-  .mat-expanison-placeholder {
+  .mtx-grid-expanison-detail {
+    display: flex;
+    align-items: center;
+    min-height: 48px;
+    overflow: hidden;
+  }
+
+  .mtx-grid-expanison-placeholder {
     display: inline-block;
     width: 40px;
     height: 40px;
@@ -132,10 +152,6 @@
     }
   }
 
-  .mat-row-last {
-    border-bottom-width: 0;
-  }
-
   .mat-cell {
     .mat-cell-img {
       width: 30px;
@@ -180,7 +196,7 @@
     display: flex;
   }
 
-  .mat-checkbox-column-cell {
+  .mtx-grid-checkbox-cell {
     flex: none;
     justify-content: center;
     min-width: 40px;
@@ -190,4 +206,11 @@
       margin-left: 0;
     }
   }
+
+  .mtx-grid-no-result {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 150px;
+  }
 }
diff --git a/projects/extensions/data-grid/grid.component.ts b/projects/extensions/data-grid/grid.component.ts
index d67c97f8..211533e5 100755
--- a/projects/extensions/data-grid/grid.component.ts
+++ b/projects/extensions/data-grid/grid.component.ts
@@ -42,16 +42,9 @@ import { MtxGridService } from './grid.service';
 export class MtxGridComponent implements OnInit, OnChanges {
   dataSource: MatTableDataSource<any>;
 
-  @Input() displayedColumns: string[];
-
   @Input() columns: MtxGridColumn[] = [];
-
-  columnSelectionData: MtxGridColumnSelectionItem[] = [];
-
+  @Input() displayedColumns: string[];
   @Input() data = [];
-
-  @Input() summary = [];
-
   @Input() length = 0;
 
   @Input() loading = false;
@@ -65,19 +58,12 @@ export class MtxGridComponent implements OnInit, OnChanges {
   @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
 
   @Input() showPaginator = true;
-
   @Input() pageDisabled = false;
-
   @Input() showFirstLastButtons = true;
-
   @Input() pageIndex = 0;
-
   @Input() pageSize = 10;
-
   @Input() pageSizeOptions = [10, 50, 100];
-
   @Input() hidePageSize = false;
-
   @Output() page = new EventEmitter<PageEvent>();
 
   @Output() sortChange = new EventEmitter<Sort>();
@@ -85,70 +71,80 @@ export class MtxGridComponent implements OnInit, OnChanges {
   /** Hover & Striped style */
 
   @Input() rowHover = false;
-
   @Input() rowStriped = false;
 
   /** Expandable row */
 
-  @Input() expandable = false;
+  expansionRowStates = [];
 
+  @Input() expandable = false;
   @Input() expansionTemplate: TemplateRef<any>;
-
   @Output() expansionChange = new EventEmitter<any>();
 
-  expansionRowStates = [];
-
   /** Whether support multiple row/cell selection */
+
   @Input() multiSelectable = true;
 
   /** Row selection */
 
-  @Input() rowSelectable = false;
-
-  @Input() hideRowSelectionCheckbox = false;
-
   private _selectedRow: any;
 
-  @Output() rowSelectionChange = new EventEmitter<any[]>();
-
   rowSelection: SelectionModel<any>;
 
+  @Input() rowSelectable = false;
+  @Input() hideRowSelectionCheckbox = false;
+  @Output() rowSelectionChange = new EventEmitter<any[]>();
+
   /** Cell selection */
 
   cellSelection = [];
 
   @Input() cellSelectable = true;
-
   @Output() cellSelectionChange = new EventEmitter<any[]>();
 
   private _selectedCell: MtxGridCellSelectionDirective;
 
   /** Toolbar */
+
   @Input() showToolbar = false;
 
-  @Input() columnHideable = true;
+  columnMenuData: MtxGridColumnSelectionItem[] = [];
+
+  @Input() columnMenuButton = false;
+  @Input() columnMenuButtonText = '';
+  @Input() columnMenuButtonType = 'stroked';
+  @Input() columnMenuButtonColor = '';
+  @Input() columnMenuButtonClass = '';
+  @Input() columnMenuButtonIcon = '';
 
+  @Input() columnHideable = true;
   @Input() columnHidingChecked: 'show' | 'hide' = 'show';
+  @Output() columnHidingChange = new EventEmitter<string[]>();
 
   @Input() columnMovable = true;
+  @Output() columnMovingChange = new EventEmitter<string[]>();
 
   @Input() columnPinnable = true;
+  @Output() columnPinningChange = new EventEmitter<string[]>();
 
-  @Output() columnHidingChange = new EventEmitter<string[]>();
+  // No Result
 
-  @Output() columnMovingChange = new EventEmitter<string[]>();
+  @Input() noResultText = 'No records found';
+  @Input() noResultTemplate: TemplateRef<any>;
 
-  @Output() columnPinningChange = new EventEmitter<string[]>();
+  get hasNoResult() {
+    return this.data.length === 0 && !this.loading;
+  }
 
-  constructor(private _dataGridSrv: MtxGridService) { }
+  constructor(private _dataGridSrv: MtxGridService) {}
 
-  ngOnInit() { }
+  ngOnInit() {}
 
   // Waiting for async data
   ngOnChanges() {
     this.displayedColumns = this.columns.filter(item => !item.hide).map(item => item.field);
 
-    this.columnSelectionData = this.columns.map(item => {
+    this.columnMenuData = this.columns.map(item => {
       return {
         label: item.header,
         field: item.field,
@@ -161,7 +157,7 @@ export class MtxGridComponent implements OnInit, OnChanges {
     this.countPinnedPosition();
 
     if (this.rowSelectable && !this.hideRowSelectionCheckbox) {
-      this.displayedColumns.unshift('MatCheckboxColumnDef');
+      this.displayedColumns.unshift('MtxGridCheckboxColumnDef');
     }
 
     // We should copy each item of data for expansion data
@@ -287,7 +283,7 @@ export class MtxGridComponent implements OnInit, OnChanges {
     this.displayedColumns = Object.assign([], columns);
 
     if (this.rowSelectable && !this.hideRowSelectionCheckbox) {
-      this.displayedColumns.unshift('MatCheckboxColumnDef');
+      this.displayedColumns.unshift('MtxGridCheckboxColumnDef');
     }
   }
 
@@ -297,7 +293,7 @@ export class MtxGridComponent implements OnInit, OnChanges {
     this.displayedColumns = Object.assign([], columns);
 
     if (this.rowSelectable && !this.hideRowSelectionCheckbox) {
-      this.displayedColumns.unshift('MatCheckboxColumnDef');
+      this.displayedColumns.unshift('MtxGridCheckboxColumnDef');
     }
   }
 
diff --git a/projects/extensions/data-grid/grid.module.ts b/projects/extensions/data-grid/grid.module.ts
index 5b8565e9..d9f7a2c8 100755
--- a/projects/extensions/data-grid/grid.module.ts
+++ b/projects/extensions/data-grid/grid.module.ts
@@ -18,7 +18,7 @@ import { DragDropModule } from '@angular/cdk/drag-drop';
 import { MtxDialogModule } from '@ng-matero/extensions/dialog';
 import { MtxGridComponent } from './grid.component';
 import { MtxGridCellComponent } from './cell.component';
-import { MtxGridColumnSelectionComponent } from './column-selection.component';
+import { MtxGridColumnMenuComponent } from './column-menu.component';
 import { MtxGridExpansionToggleDirective } from './expansion-toggle.directive';
 import { MtxGridCellSelectionDirective } from './cell-selection.directive';
 import { MtxGridService } from './grid.service';
@@ -45,17 +45,17 @@ import { MtxGridService } from './grid.service';
   exports: [
     MtxGridComponent,
     MtxGridCellComponent,
-    MtxGridColumnSelectionComponent,
+    MtxGridColumnMenuComponent,
     MtxGridExpansionToggleDirective,
     MtxGridCellSelectionDirective,
   ],
   declarations: [
     MtxGridComponent,
     MtxGridCellComponent,
-    MtxGridColumnSelectionComponent,
+    MtxGridColumnMenuComponent,
     MtxGridExpansionToggleDirective,
     MtxGridCellSelectionDirective,
   ],
   providers: [MtxGridService],
 })
-export class MtxGridModule { }
+export class MtxGridModule {}
diff --git a/projects/extensions/data-grid/grid.service.ts b/projects/extensions/data-grid/grid.service.ts
index 8a455795..436fc21a 100755
--- a/projects/extensions/data-grid/grid.service.ts
+++ b/projects/extensions/data-grid/grid.service.ts
@@ -3,7 +3,7 @@ import { MtxGridColumn } from './grid.interface';
 
 @Injectable()
 export class MtxGridService {
-  constructor() { }
+  constructor() {}
 
   /**
    * Get cell value from column key
diff --git a/projects/extensions/data-grid/public-api.ts b/projects/extensions/data-grid/public-api.ts
index 95d2f025..aca971c6 100644
--- a/projects/extensions/data-grid/public-api.ts
+++ b/projects/extensions/data-grid/public-api.ts
@@ -3,6 +3,6 @@ export * from './grid.service';
 export * from './grid.module';
 export * from './grid.component';
 export * from './cell.component';
-export * from './column-selection.component';
+export * from './column-menu.component';
 export * from './expansion-toggle.directive';
 export * from './cell-selection.directive';