Deserialize to multiple key-value cells in table view

Change-Id: I9df364e87d49018ae8257706bfc58c236723e2d8
diff --git a/dev/js/spec/matchSpec.js b/dev/js/spec/matchSpec.js
index e52132c..dc2186d 100644
--- a/dev/js/spec/matchSpec.js
+++ b/dev/js/spec/matchSpec.js
@@ -28,46 +28,48 @@
 };
 
 var snippet = "<span title=\"cnx/l:meist\">" +
-  "  <span title=\"cnx/p:ADV\">" +
-  "    <span title=\"cnx/syn:@PREMOD\">" +
-  "      <span title=\"mate/l:meist\">" +
-  "        <span title=\"mate/l:meist\">" +
-  "          <span title=\"mate/p:ADV\">" +
-  "            <span title=\"opennlp/p:ADV\">meist</span>" +
-  "          </span>" +
-  "        </span>" +
-  "      </span>" +
-  "    </span>" +
-  "  </span>" +
-  "</span>" +
-  "<span title=\"cnx/l:deutlich\">" +
-  "  <span title=\"cnx/p:A\">" +
-  "    <span title=\"cnx/syn:@PREMOD\">" +
-  "      <span title=\"mate/l:deutlich\">" +
-  "        <span title=\"mate/m:degree:pos\">" +
-  "          <span title=\"mate/p:ADJD\">" +
-  "            <span title=\"opennlp/p:ADJD\">deutlich</span>" +
-  "          </span>" +
-  "        </span>" +
-  "      </span>" +
-  "    </span>" +
-  "  </span>" +
-  "</span>" +
-  "<span title=\"cnx/l:fähig\">" +
-  "  <span title=\"cnx/l:leistung\">" +
-  "    <span title=\"cnx/p:A\">" +
-  "      <span title=\"cnx/syn:@NH\">" +
-  "        <span title=\"mate/l:leistungsfähig\">" +
-  "          <span title=\"mate/m:degree:comp\">" +
-  "            <span title=\"mate/p:ADJD\">" +
-  "              <span title=\"opennlp/p:ADJD\">leistungsfähiger</span>" +
-  "            </span>" +
-  "          </span>" +
-  "        </span>" +
-  "      </span>" +
-  "    </span>" +
-  "  </span>" +
-  "</span>";
+    "  <span title=\"cnx/p:ADV\">" +
+    "    <span title=\"cnx/syn:@PREMOD\">" +
+    "      <span title=\"mate/l:meist\">" +
+    "        <span title=\"mate/l:meist\">" +
+    "          <span title=\"mate/p:ADV\">" +
+    "            <span title=\"opennlp/p:ADV\">meist</span>" +
+    "          </span>" +
+    "        </span>" +
+    "      </span>" +
+    "    </span>" +
+    "  </span>" +
+    "</span>" +
+    "<span title=\"cnx/l:deutlich\">" +
+    "  <span title=\"cnx/p:A\">" +
+    "    <span title=\"cnx/syn:@PREMOD\">" +
+    "      <span title=\"mate/l:deutlich\">" +
+    "        <span title=\"mate/m:degree:pos\">" +
+    "          <span title=\"mate/p:ADJD\">" +
+    "            <span title=\"opennlp/p:ADJD\">deutlich</span>" +
+    "          </span>" +
+    "        </span>" +
+    "      </span>" +
+    "    </span>" +
+    "  </span>" +
+    "</span>" +
+    "<span title=\"cnx/l:fähig\">" +
+    "  <span title=\"cnx/l:leistung\">" +
+    "    <span title=\"cnx/p:A\">" +
+    "      <span title=\"cnx/p:ADJA\">" +
+    "        <span title=\"cnx/syn:@NH\">" +
+    "          <span title=\"mate/l:leistungsfähig\">" +
+    "            <span title=\"mate/m:degree:comp\">" +
+    "              <span title=\"mate/p:ADJD\">" +
+    "                <span title=\"opennlp/p:ADJD\">leistungsfähiger</span>" +
+    "              </span>" +
+    "            </span>" +
+    "          </span>" +
+    "        </span>" +
+    "      </span>" +
+    "    </span>" +
+    "  </span>" +
+    "</span>";
 
 var treeSnippet =
   "<span class=\"context-left\"></span>" +
diff --git a/dev/js/src/match/table.js b/dev/js/src/match/table.js
index da56e29..d889026 100644
--- a/dev/js/src/match/table.js
+++ b/dev/js/src/match/table.js
@@ -68,15 +68,6 @@
     getValue : function (pos, foundry, layer) {
       return this._info[pos][foundry + '/' + layer]
     },
-    
-    /*
-      getLayerPerFoundry : function (foundry) {
-        return this._foundry[foundry]
-      },
-      getFoundryPerLayer : function (layer) {
-        return this._layer[layer];
-      },
-    */
 
     // Parse the snippet
     _parse : function (children) {
@@ -170,11 +161,27 @@
         if (name === undefined)
           return c;
 
-        if (name instanceof Array) {
-          for (var n = 0; n < name.length; n++) {
-            c.appendChild(d.createTextNode(name[n]));
-            if (n !== name.length - 1) {
-              c.appendChild(d.createElement('br'));
+        if (name instanceof Array && name[1] !== undefined) {
+
+          // There are multiple values to add
+
+          // These are andgroups
+          if (name.some(function (item) { return item.indexOf(':') == -1 ? false : true})) {
+            c.classList.add('matchkeyvalues');
+            for (var n = 0; n < name.length; n++) {
+              var text = d.createTextNode(name[n]);
+              var e = c.appendChild(d.createElement('div'));
+              e.appendChild(text);
+            };
+          }
+
+          // Add alternatives
+          else {
+            for (var n = 0; n < name.length; n++) {
+              c.appendChild(d.createTextNode(name[n]));
+              if (n !== name.length - 1) {
+                c.appendChild(d.createElement('br'));
+              };
             };
           };
         }