Use tables to display problems instead of a simple list

lms/static/coffee/src/staff_grading/staff_grading.coffee

@@ -340,7 +340,14 @@ class StaffGrading
 
   render_view: () ->
     # clear the problem list and breadcrumbs
-    @problem_list.html('')
+    @problem_list.html('''
+        <tr>
+            <th>Problem Name</th>
+            <th>Number Graded</th>
+            <th>Number Pending</th>
+            <th>Number Required</th>
+        </tr>
+    ''')    
     @breadcrumbs.html('')
     @problem_list_container.toggle(@list_view)
     if @backend.mock_backend
@@ -368,7 +375,7 @@ class StaffGrading
 
   problem_link:(problem) ->
     link = $('<a>').attr('href', "javascript:void(0)").append(
-      "#{problem.problem_name} (#{problem.num_graded} graded, #{problem.num_pending} pending, required to grade #{problem.num_required} more)")
+      "#{problem.problem_name}")
         .click =>
           @get_next_submission problem.location
 
@@ -381,7 +388,12 @@ class StaffGrading
 
   render_list: () ->
     for problem in @problems
-      @problem_list.append($('<li>').append(@problem_link(problem)))
+      problem_row = $('<tr>')
+      problem_row.append($('<td>').append(@problem_link(problem)))
+      problem_row.append($('<td>').append("#{problem.num_graded}"))
+      problem_row.append($('<td>').append("#{problem.num_pending}"))
+      problem_row.append($('<td>').append("#{problem.num_required}"))
+      @problem_list.append(problem_row)
 
   render_problem: () ->
     # make the view elements match the state.  Idempotent.

lms/templates/instructor/staff_grading.html

@@ -33,8 +33,8 @@
 </div>
 
 <h2>Problem List</h2>
-    <ul class="problem-list">
-    </ul>
+    <table class="problem-list">
+    </table>
 </section>
 
 <!-- Grading View -->

lms/templates/peer_grading/peer_grading.html

@@ -26,13 +26,32 @@
                 Nothing to grade!
             </div>
             %else:
-                <ul class="problem-list">
+            <div class="problem-list-container">
+                <table class="problem-list">
+                    <tr>
+                        <th>Problem Name</th>
+                        <th>Number Graded</th>
+                        <th>Number Pending</th>
+                        <th>Number Required</th>
+                    </tr>
                 %for problem in problem_list:
-                    <li>
-                    <a href="${ajax_url}problem?location=${problem['location']}">${problem['problem_name']} (${problem['num_graded']} graded, ${problem['num_pending']} pending, required to grade ${problem['num_required']} more)</a>
-                    </li>
+                <tr>
+                    <td>
+                        <a href="${ajax_url}/problem?location=$problem['location']">${problem['problem_name']}</a>
+                    </td>
+                    <td>
+                        ${problem['num_graded']}
+                    </td>
+                    <td>
+                        ${problem['num_pending']}
+                    </td>
+                    <td>
+                        ${problem['num_required']}
+                    </td>
+                </tr>
                 %endfor
-                </ul>
+                </table>
+            </div>
             %endif
         %endif
     </div>