3 files changed, 42 insertions, 16 deletions
diff --git a/templates/todolists/list.html b/templates/todolists/list.html
index 3b2f75c..29829ca 100644
--- a/templates/todolists/list.html
+++ b/templates/todolists/list.html
@@ -13,7 +13,7 @@
     </ul>
     {% endif %}
 
-    <table id="dev-todo-lists" class="results">
+    <table id="dev-todo-lists" class="results todo-table">
         <thead>
             <tr>
                 <th>Name</th>
diff --git a/templates/todolists/public_list.html b/templates/todolists/public_list.html
index 7284120..fe5ffb5 100644
--- a/templates/todolists/public_list.html
+++ b/templates/todolists/public_list.html
@@ -9,22 +9,46 @@
         {% for list in todo_lists %}
             <h4>{{list.name}}</h4>
             <div class="todo_list">
-                <p>{{list.description|safe}}</p>
-                <ul>
-                    {% for pkg in list.packages %}
-                        <li>{{pkg.pkg.pkgname}}</li>
-                    {% endfor %}
-                </ul>
+                <p>{{list.description|safe|linebreaks}}</p>
+                <table "todo-pkglist-{{ list.id }}" class="results todo-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Arch</th>
+                            <th>Repo</th>
+                            <th>Maintainer</th>
+                            <th>Status</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {% for pkg in list.packages %}
+                        <tr class="{% cycle 'odd' 'even' %}">
+                            <td><a href="{{ pkg.pkg.get_absolute_url }}"
+                                    title="View package details for {{ pkg.pkg.pkgname }}">{{ pkg.pkg.pkgname }}</a></td>
+                            <td>{{ pkg.pkg.arch.name }}</td>
+                            <td>{{ pkg.pkg.repo.name|capfirst }}</td>
+                            <td>{{ pkg.pkg.maintainers|join:', ' }}</td>
+                            <td>
+                                {% if pkg.complete %}
+                                <span class="complete">Complete</a>
+                                {% else %}
+                                <span class="incomplete">Incomplete</a>
+                                {% endif %}
+                            </td>
+                        </tr>
+                        {% endfor %}
+                    </tbody>
+                </table>
             </div>
         {% endfor %}
     </div>
 </div>
 {% load cdn %}{% jquery %}
+<script type="text/javascript" src="/media/jquery.tablesorter.min.js"></script>
 <script type="text/javascript">
-    $("#public_todo_lists h4").click(
-            function(e) {
-                $(this).next().toggle();
-            }
-    );
+$(document).ready(function() {
+    $(".results").tablesorter({widgets: ['zebra'], sortList: [[0,0], [1,0]]});
+});
+
 </script>
 {% endblock %}
diff --git a/templates/todolists/view.html b/templates/todolists/view.html
index 1c25392..b5f9a32 100644
--- a/templates/todolists/view.html
+++ b/templates/todolists/view.html
@@ -19,7 +19,7 @@
 
     <p>{{list.description|safe|linebreaks}}</p>
 
-    <table id="dev-todo-pkglist" class="results">
+    <table id="dev-todo-pkglist" class="results todo-table">
         <thead>
             <tr>
                 <th>Name</th>
@@ -50,10 +50,9 @@
             {% endfor %}
         </tbody>
     </table>
-
-</div><!-- #dev-todo-details -->
-
+</div>
 {% load cdn %}{% jquery %}
+<script type="text/javascript" src="/media/jquery.tablesorter.min.js"></script>
 <script type="text/javascript">
     $(function() {
         $('a[href*=todo/flag]').click(function() {
@@ -70,5 +69,8 @@
             return false;
         });
     });
+$(document).ready(function() {
+    $(".results").tablesorter({widgets: ['zebra'], sortList: [[0,0], [1,0]]});
+});
 </script>
 {% endblock %}