Change param-list to a table

lib/components/ParamsList/params-list.css

@@ -4,13 +4,26 @@ h4 {
   color: black;
 }
 
-.param {
-  padding: 10px 0;
+table {
+  border-collapse: collapse;
 }
 
-.param > span {
-  padding: 5px 10px;
+td, th {
   vertical-align: top;
+  padding: 10px 15px;
+  font-size: 12px;
+}
+
+th {
+  background-color: #DCDCDC;
+  color: black;
+  padding: 5px 15px;
+  text-align: left;
+  border-bottom: 2px solid #afafaf;
+}
+
+td {
+  border-bottom: 1px solid #afafaf;
 }
 
 .param-name {
@@ -20,10 +33,11 @@ h4 {
 .param-type {
   background-color: #EAEAEA;
   border: silver 1px solid;
+  padding: 5px 10px;
+  line-height: 14px;
+  font-family: monospace;
 }
 
 .body-schema {
   display: inline-block;
-  vertical-align: top;
-  padding: 0 10px;
 }

lib/components/ParamsList/params-list.html

@@ -1,21 +1,30 @@
 <h4> Parameters </h4>
 <small class="no-params" *ng-if="data.noParams"> No parameters </small>
 <!-- General parameters -->
-<div *ng-for="#param of data.params">
-  <div class="param">
-    <span class="param-name">{{param.name}}</span>
-    <span class="param-type" [ng-class]="param.type">{{param.type}}</span>
-    <span class="param-description">{{param.description}}</span>
-  </div>
-</div>
-<!-- in-body parameter -->
-<div class="param body-param" *ng-if="data.bodyParam">
-  <span class="param-name">{{data.bodyParam.name}}</span>
-  <div class="body-schema">
-    <schema
-      [title]="data.bodyParam.type"
-      [description]="data.bodyParam.description"
-      pointer="{{data.bodyParam.pointer}}/schema">
-    </schema>
-  </div>
-</div>
+<table *ng-if="!data.noParams">
+  <thead>
+    <tr>
+      <th> Name </th>
+      <th> Type </th>
+      <th> Description </th>
+    </tr>
+  </thead>
+  <tr *ng-for="#param of data.params">
+    <!--<div class="param">-->
+      <td class="param-name">{{param.name}}</td>
+      <td>
+        <span class="param-type" [ng-class]="param.type">{{param.type}}</span>
+      </td>
+      <td class="param-description">{{param.description}}</td>
+    <!--</div>-->
+  </tr>
+  <!-- in-body parameter -->
+  <tr class="param body-param" *ng-if="data.bodyParam">
+    <td class="param-name">{{data.bodyParam.name}}</td>
+    <td>
+      <schema class="body-schema param-type" pointer="{{data.bodyParam.pointer}}/schema">
+      </schema>
+    </td>
+    <td class="param-description">{{data.bodyParam.description}}</td>
+  </tr>
+</table>

lib/components/ParamsList/params-list.js

@@ -35,8 +35,6 @@ export class ParamsList extends BaseComponent {
     // temporary handle body param
     if (params.length && params[params.length - 1].in === 'body') {
       let bodyParam = params.pop();
-      bodyParam.type = bodyParam.schema.type
-        || JsonPointer.baseName(bodyParam.schema.$ref);
       bodyParam.pointer = bodyParam.$$pointer;
       this.data.bodyParam = bodyParam;
     }