diff --git a/src/app/columns/column-toggle.component.ts b/src/app/columns/column-toggle.component.ts
index 3e00fd247..a4beb9f36 100644
--- a/src/app/columns/column-toggle.component.ts
+++ b/src/app/columns/column-toggle.component.ts
@@ -37,8 +37,74 @@ import { ColumnMode } from 'projects/swimlane/ngx-datatable/src/public-api';
           </li>
         </ul>
       </div>
+      <div class="selected-column">
+        <h4>Dropdown</h4>
+        <form>
+          <div class="multiselect">
+            <div class="selectBox" (click)="showCheckboxes()">
+              <select>
+                <option>Show/Hide Column</option>
+              </select>
+              <div class="overSelect"></div>
+            </div>
+            <div id="checkboxes">
+              <label for="select/unselect">
+                <input
+                  type="checkbox"
+                  id="select/Unselect"
+                  [checked]="allColumnsChecked"
+                  (click)="allColumnsChecked ? uncheckAll() : checkAll()"
+                />{{ allColumnsChecked ? 'Unselect All' : 'Select All' }}</label
+              >
+              <label *ngFor="let col of allColumns" [for]="col.name">
+                <input type="checkbox" [id]="col.name" [checked]="isChecked(col)" (click)="toggle(col)" />{{
+                  col.name
+                }}</label
+              >
+            </div>
+          </div>
+        </form>
+      </div>
     </div>
-  `
+  `,
+  styles: [
+    `
+      .multiselect {
+        width: 200px;
+        margin: 0 auto;
+      }
+
+      .selectBox {
+        position: relative;
+      }
+
+      .selectBox select {
+        width: 100%;
+        font-weight: bold;
+      }
+
+      .overSelect {
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+      }
+
+      #checkboxes {
+        display: none;
+        border: 1px #dadada solid;
+      }
+
+      #checkboxes label {
+        display: block;
+      }
+
+      #checkboxes label:hover {
+        background-color: #1e90ff;
+      }
+    `
+  ]
 })
 export class ColumnToggleComponent {
   rows = [
@@ -60,6 +126,9 @@ export class ColumnToggleComponent {
 
   ColumnMode = ColumnMode;
 
+  allColumnsChecked: boolean = true;
+  expanded: boolean = false;
+
   toggle(col) {
     const isChecked = this.isChecked(col);
 
@@ -79,4 +148,30 @@ export class ColumnToggleComponent {
       }) !== undefined
     );
   }
+
+  checkAll() {
+    this.columns = this.allColumns;
+    this.allColumnsChecked = true;
+  }
+
+  uncheckAll() {
+    if (this.columns.length == 0) {
+      this.columns = this.allColumns;
+      this.allColumnsChecked = true;
+    } else {
+      this.columns = [];
+      this.allColumnsChecked = false;
+    }
+  }
+
+  showCheckboxes() {
+    var checkboxes = document.getElementById('checkboxes');
+    if (!this.expanded) {
+      checkboxes.style.display = 'block';
+      this.expanded = true;
+    } else {
+      checkboxes.style.display = 'none';
+      this.expanded = false;
+    }
+  }
 }