Use jqxGrid to render cell values that are objects?

Is it possible in jqxGrid to render cell values that are objects?

E.g. In this Codepen example each row has an attribute details which has an object value. I'd like to say, make a custom renderer that displays the JSON stringified version of it, and a custom editor to modify it.

The challenge is that the row values appear as the string "[Object object]":

var rows = [
  { color: "red", details: { a: 1, b: 2 } },
  { color: "green", details: { a: 2, b: 4 } },
  { color: "blue", details: { a: 3, b: 8 } },
  { color: "yellow", details: { a: 4, b: 16 } }
];

I tried creating a cell renderer, but the argument value is already squashed to the string "[Object object]" when the function is called. Do I need to do something with the data adaptor to get the object value?

var cellsrenderer = function(row, column, value) {
  console.log(value);
  return "<div>" + JSON.stringify(value) + "</div>";
};

var columns = [
  {
    text: "Color",
    datafield: "color",
    width: 100
  },
  {
    text: "Details",
    datafield: "details",
    width: 200,
    cellsrenderer: cellsrenderer
  }
];
var source = {
  localdata: rows,
  datatype: "array"
};
var dataAdapter = new $.jqx.dataAdapter(source, {
  loadComplete: function(data) {},
  loadError: function(xhr, status, error) {}
});
$("#grid").jqxGrid({
  height: 600,
  width: 600,
  source: dataAdapter,
  pageable: true,
  pagesize: 20,
  autoheight: true,
  columns: columns
});

try this

var rows = [
  { color: "red", details: [{ a: 1, b: 2 }] },
  { color: "green", details: [{ a: 2, b: 4 }] },
  { color: "blue", details: [{ a: 3, b: 8 }] },
  { color: "yellow", details: [{ a: 4, b: 16 }] }
];