diff --git a/public/app/plugins/panel/table/column_options.html b/public/app/plugins/panel/table/column_options.html
index 709066bdd4b..e58a0d7cc5b 100644
--- a/public/app/plugins/panel/table/column_options.html
+++ b/public/app/plugins/panel/table/column_options.html
@@ -58,7 +58,7 @@
     <div ng-if="style.type === 'number'">
       <div class="gf-form">
         <label class="gf-form-label width-10">Unit</label>
-        <div class="gf-form-dropdown-typeahead width-16" ng-model="style.unit" dropdown-typeahead2="editor.unitFormats" dropdown-typeahead-on-select="editor.setUnitFormat(style, $subItem)"></div>
+        <unit-picker onChange="editor.setUnitFormat(style)" value="style.unit" width="16"></unit-picker>
       </div>
       <div class="gf-form">
         <label class="gf-form-label width-10">Decimals</label>
diff --git a/public/app/plugins/panel/table/column_options.ts b/public/app/plugins/panel/table/column_options.ts
index 0274a575211..d4fcabc95cf 100644
--- a/public/app/plugins/panel/table/column_options.ts
+++ b/public/app/plugins/panel/table/column_options.ts
@@ -73,9 +73,11 @@ export class ColumnOptionsCtrl {
     this.panelCtrl.render();
   }
 
-  setUnitFormat(column: any, subItem: any) {
-    column.unit = subItem.value;
-    this.panelCtrl.render();
+  setUnitFormat(column: any) {
+    return (value: any) => {
+      column.unit = value;
+      this.panelCtrl.render();
+    };
   }
 
   addColumnStyle() {