diff --git a/rd_ui/app/scripts/directives/query_directives.js b/rd_ui/app/scripts/directives/query_directives.js
index 1aacd0a8..b06fdaad 100644
--- a/rd_ui/app/scripts/directives/query_directives.js
+++ b/rd_ui/app/scripts/directives/query_directives.js
@@ -220,6 +220,32 @@
     }
   }
 
+  function schemaBrowser() {
+    return {
+      restrict: 'E',
+      scope: {
+        schema: '='
+      },
+      templateUrl: '/views/directives/schema_browser.html',
+      link: function ($scope) {
+        $scope.showTable = function(table) {
+          table.collapsed = !table.collapsed;
+          $scope.$broadcast('vsRepeatTrigger');
+        }
+
+        $scope.getSize = function(table) {
+          var size = 18;
+
+          if (!table.collapsed) {
+            size += 18 * table.columns.length;
+          }
+
+          return size;
+        }
+      }
+    }
+  }
+
   function queryTimePicker() {
     return {
       restrict: 'E',
@@ -332,5 +358,6 @@
   .directive('queryEditor', ['QuerySnippet', queryEditor])
   .directive('queryRefreshSelect', queryRefreshSelect)
   .directive('queryTimePicker', queryTimePicker)
+  .directive('schemaBrowser', schemaBrowser)
   .directive('queryFormatter', ['$http', 'growl', queryFormatter]);
 })();
diff --git a/rd_ui/app/views/directives/schema_browser.html b/rd_ui/app/views/directives/schema_browser.html
new file mode 100644
index 00000000..b53bb89d
--- /dev/null
+++ b/rd_ui/app/views/directives/schema_browser.html
@@ -0,0 +1,17 @@
+<div class="schema-container">
+  <div class="p-t-5 p-b-5">
+    <input type="text" placeholder="Search schema..." class="form-control" ng-model="schemaFilter">
+  </div>
+
+  <div class="schema-browser" vs-repeat vs-size="getSize(table)">
+    <div ng-repeat="table in schema | filter:schemaFilter track by table.name">
+      <div class="table-name" ng-click="showTable(table)">
+        <i class="fa fa-table"></i> <strong><span title="{{table.name}}">{{table.name}}</span><span
+        ng-if="table.size !== undefined"> ({{table.size}})</span></strong>
+      </div>
+      <div collapse="table.collapsed">
+        <div ng-repeat="column in table.columns track by column" style="padding-left:16px;">{{column}}</div>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/rd_ui/app/views/query.html b/rd_ui/app/views/query.html
index 5d896275..c0ac82de 100644
--- a/rd_ui/app/views/query.html
+++ b/rd_ui/app/views/query.html
@@ -96,24 +96,7 @@
   <! -- editor -->
   <div class="container">
       <div class="row bg-white p-b-5" ng-if="sourceMode" resizable r-directions="['bottom']" r-height="300" style="min-height:100px;">
-
-        <div class="col-md-3 schema-container hidden-sm hidden-xs" ng-show="hasSchema">
-          <div class="p-t-5 p-b-5">
-            <input type="text" placeholder="Search schema..." class="form-control" ng-model="schemaFilter">
-          </div>
-
-          <div class="schema-browser" vs-repeat>
-            <div ng-repeat="table in schema | filter:schemaFilter track by table.name">
-              <div class="table-name" ng-click="table.collapsed = !table.collapsed">
-                <i class="fa fa-table"></i> <strong><span title="{{table.name}}">{{table.name}}</span><span
-                ng-if="table.size !== undefined"> ({{table.size}})</span></strong>
-              </div>
-              <div collapse="table.collapsed">
-                <div ng-repeat="column in table.columns track by column" style="padding-left:16px;">{{column}}</div>
-              </div>
-            </div>
-          </div>
-        </div>
+        <schema-browser schema="schema" class="col-md-3 hidden-sm hidden-xs schema-container" ng-show="hasSchema"></schema-browser>
 
         <div ng-class="editorSize" style="height:100%;">
             <div class="p-5">