It would be so slick if you could use dojox.grid.DataGrid and dojox.data.HtmlStore together. Maybe there is an easier way to get sortable tables with Dojo, but this is all I can come up with... and it doesn't quite work. There is a DojoCampus example of this but it does not work either! What am I missing?
<html>
<head>
<style type="text/css" media="all">
@import "http://ajax.googleapis.com/ajax/libs/dojo/1.3/dojo/resources/dojo.css";
@import "http://ajax.googleapis.com/ajax/libs/dojo/1.3/dojox/grid/resources/Grid.css";
@import "http://ajax.googleapis.com/ajax/libs/dojo/1.3/dojox/grid/resources/tundraGrid.css";
</style>
<script type="text/javascript">
var djConfig = {parseOnLoad: true};
</script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/dojo/1.3/dojo/dojo.xd.js"></script>
<script type="text/javascript">
dojo.require("dojox.data.HtmlStore");
dojo.require("dojox.grid.DataGrid");
dojo.require('dojo.parser');
</script>
<script type="text/javascript">
var layoutBooks = [[{
field: "isbn",
name: "ISBN",
width: 10
},
{
field: "author",
name: "Author",
width: 10
},
{
field: "title",
name: "Title",
width: 'auto'
}]];
</script>
</head>
<body class=tundra>
<b>
Standard HTML table:
</b>
<br>
<table id="myData2">
<thead>
<tr>
<th>
isbn
</th>
<th>
title
</th>
<th>
author
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
A9B57C
</td>
<td>
Title of 1
</td>
<td>
Author of 1
</td>
</tr>
<tr>
<td>
A9B57F
</td>
<td>
Title of 2
</td>
<td>
Author of 2
</td>
</tr>
<tr>
<td>
A9B577
</td>
<td>
Title of 3
</td>
<td>
Author of 3
</td>
</tr>
<tr>
<td>
A9B574
</td>
<td>
Title of 4
</td>
<td>
Author of 4
</td>
</tr>
<tr>
<td>
A9B5CC
</td>
<td>
Title of 5
</td>
<td>
Author of 5
</td>
</tr>
</tbody>
</table>
<br>
<br>
<b>
dojox.grid.DataGrid connected to the above table:
</b>
<br>
<div dojoType="dojox.data.HtmlStore" dataId="myData2" jsId="gridStore">
</div>
<div style="width: 400px; height: 200px;">
<div id="grid" dojoType="dojox.grid.DataGrid" store="gridStore" structure="layoutBooks"
query="{}" rowsPerPage="40">
</div>
</div>