creating tables dynamically and make them sortable

taunus/templates/directory.pt

@@ -3,15 +3,24 @@
       xmlns:metal="http://xml.zope.org/namespaces/metal"
       metal:use-macro="base">
   <tal:block metal:fill-slot="body">
-    <div class="data spec">
-      <table>
-	<tr> 
-	  <th>File</th>
-	</tr>
-	<tr tal:repeat="item resource">
-	  <td><a href="${item.path}">${item}</a></td>
-	</tr>
-      </table>
+    <div id="dirlisting" class="data spec">
     </div> <!-- closes data -->
+      <script>
+	YUI().use('datatable', function (Y) {
+	   var cols = [
+	       { key: "name", label: "Name", abbr: "name", sortable: "true" },
+	       { key: "size", label: "Size", abbr: "size", sortable: "true" }
+           ];
+	   var data = [
+	       <tal:block tal:repeat="item resource">
+		 {"name": "<a href='${item.path}'>${item}</a>", "size": ${item.size}},
+               </tal:block>
+	   ];
+	   var table = new Y.DataTable.Base({
+	       columnset: cols,
+	       recordset: data
+	   }).plug(Y.Plugin.DataTableSort).render("#dirlisting");
+	});
+      </script>
   </tal:block>
 </html>