What's the closest jQuery approximation to YUI's DataTable?

Question

My two highest priorities are progressive enhancement and inline editing. I've found progressive enhancement (DataTables) and inline editing (jqGrid), but not both. Support for jQuery UI themes would be nice, but is a lower priority.

UPDATE: Here's an example of what I'm imagining the solution would resemble:

<table summary="A table full of example tabular data">
  <caption>My Table to Progressively Enhance</caption>
  <thead>
    <tr>
      <th id="colA">Column A</th>
      <th id="colB">Column B</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td headers="colA">foo</td>
      <td headers="colB">bar</td>
    </tr>
    <tr>
      <td headers="colA">argle</td>
      <td headers="colB">bargle</td>
    </tr>
  </tbody>
</table>

… insert jquery datatable stuff here …

<script type="text/javascript">
    progressivelyEnhanceMyTable();
</script>

Answer 1

With the latest release of jqGrid, we now get tableToGrid, which solves the grid-from-markup problem quite nicely.

Answer 2

I think jqGrid would be a pretty good fit.

UPDATE:

You can use code like this to convert your table to a javascript object

var $table = $('table'); // select your table
var data = []; // instantiate the data array
$('tr', $table).each(function(i, item){ // loop through the table rows
    obj = {} // create the object to append to the data array
    obj.name = $('td:eq(0)',$(this)).text().trim(); 
    obj.desc = $('td:eq(1)',$(this)).text().trim();
    data += obj; // add the object to the array
});

and then tack it on like in the loading array data example

for(var i=0;i<=data.length;i++) $("#datagrid").addRowData(i+1,data[i]); 

Answer 3

There is a plugin to datatables called jquery-datatables-editable which adds inline editing.