diff --git a/src/view.js b/src/view.js
index 032a4845..bf1611c9 100644
--- a/src/view.js
+++ b/src/view.js
@@ -220,6 +220,43 @@ recline.DataTable = Backbone.View.extend({
   }
 });
 
+// DataTableRow View for rendering an individual document.
+//
+// Since we want this to update in place it is up to creator to provider the element to attach to.
+// In addition you must pass in a headers in the constructor options. This should be list of headers for the DataTable.
+recline.DataTableRow = Backbone.View.extend({
+  initialize: function(options) {
+    this._headers = options.headers;
+    this.el = $(this.el);
+  },
+  template: ' \
+      <td><a class="row-header-menu"></a></td> \
+      {{#cells}} \
+      <td data-header="{{header}}"> \
+        <div class="data-table-cell-content"> \
+          <a href="javascript:{}" class="data-table-cell-edit" title="Edit this cell">&nbsp;</a> \
+          <div class="data-table-cell-value">{{value}}</div> \
+        </div> \
+      </td> \
+      {{/cells}} \
+    ',
+  
+  toTemplateJSON: function() {
+    var doc = this.model;
+    var cellData = _.map(this._headers, function(header) {
+      return {header: header, value: doc.get(header)}
+    })
+    return { id: this.id, cells: cellData }
+  },
+
+  render: function() {
+    this.el.attr('data-id', this.model.id);
+    var html = $.mustache(this.template, this.toTemplateJSON());
+    $(this.el).html(html);
+    return this;
+  }
+});
+
 recline.FlotGraph = Backbone.View.extend({
 
   tagName:  "div",
diff --git a/test/index.html b/test/index.html
index 3c8d8a96..21d80027 100644
--- a/test/index.html
+++ b/test/index.html
@@ -12,6 +12,8 @@
 
   <script type="text/javascript" src="../src/model.js"></script>
   <script type="text/javascript" src="model.test.js"></script>
+  <script type="text/javascript" src="../src/view.js"></script>
+  <script type="text/javascript" src="view.test.js"></script>
 </head>
 <body>
   <h1 id="qunit-header">Qunit Tests</h1>
@@ -19,9 +21,9 @@
   <div id="qunit-testrunner-toolbar"></div>
   <h2 id="qunit-userAgent"></h2>
   <ol id="qunit-tests"></ol>
-  <div id="qunit-fixture">
-    <div id="our-dialog">
-    </div>
+  <div class="fixtures">
+    <table class="test-datatable">
+    </table>
   </div>
 </body>
 </html>
diff --git a/test/view.test.js b/test/view.test.js
new file mode 100644
index 00000000..241d748d
--- /dev/null
+++ b/test/view.test.js
@@ -0,0 +1,25 @@
+(function ($) {
+
+module("View");
+
+test('new DataTableRow View', function () {
+  var $el = $('<tr />');
+  $('.fixtures .test-datatable').append($el);
+  var doc = new recline.Document({
+    'id': 1,
+    'b': '2',
+    'a': '1'
+    });
+  var view = new recline.DataTableRow({
+    model: doc
+    , el: $el
+    , headers: ['a', 'b']
+  });
+  view.render();
+  ok($el.attr('data-id'), '1');
+  var tds = $el.find('td');
+  equal(tds.length, 3);
+  equal($(tds[1]).attr('data-header'), 'a');
+});
+
+})(this.jQuery);
