Is there a way to display subarrays with Griddle/ReactJS?

Question

Say the data I want to model in a griddle grid is something like the following:

[
      {
        "custID": 9,
        "custName": "Customer 1",
        "host": "Host 1",
        "mesg": null,
        "password": "Password 1",
        "pm": "PM 1",
        "products": [
          {
            "applyRestrictions": false,
            "exportPath": "iih",
            "export": false,
            "fieldRestriction": null,
            "ftExportPath": null,
            "mesg": null,
            "productCode": "iih",
            "status": 0,
            "xslt": "something.xslt"
          },
          {
            "applyRestrictions": false,
            "exportPath": "lxh/large",
            "export": false,
            "fieldRestriction": "whut.xml",
            "ftExportPath": "lxh/ft",
            "mesg": null,
            "productCode": "lxh",
            "status": 0,
            "xslt": "large.xslt"
          }
        ],
        "status": 0,
        "username": "Username 1"
      },
      {
        "custID": 18,
        "custName": "Customer 2",
        "host": "Host 1",
        "mesg": null,
        "password": "Password 1",
        "pm": "PM 1",
        "products": [],
        "status": 0,
        "username": "Username 1"
      }
]

The reactJS component I've created is something like this (simplified):

var customerColumnData =  [
    {
        "columnName": "custID",
        "order": 1,
        "locked": true,
        "visible": true,
        "displayName" : "Customer ID"
    },
    {
        "columnName": "custName",
        "order": 2,
        "locked": true,
        "visible": true,
        "displayName" : "Name"
    },
    {
        "columnName": "host",
        "order": 3,
        "locked": true,
        "visible": true,
        "displayName" : "FTP Host"
    },
    {
        "columnName": "username",
        "order": 4,
        "locked": false,
        "visible": true,
        "displayName" : "FTP Username"
    },
    {
        "columnName": "password",
        "order": 5,
        "locked": false,
        "visible": true,
        "displayName" : "FTP Password"
    },
    {
        "columnName": "pm",
        "order": 6,
        "locked": false,
        "visible": true,
        "displayName" : "PM"
    },
    {
        "columnName": "products",
        "order": 7,
        "locked": false,
        "visible": true,
        "displayName": "Products"
    }
];

const ExportCustomerGrid = React.createClass(
{
    <snip some stuff here>
    render: function()
    {
        return (
            <div>
                <Griddle results={ this.state.statusRespData } columnMetadata={ customerColumnData } initialSort={1}
                    columns={["custID","custName","host","username","password","pm","products"]} />
            </div>
        );
    }
});

Rendering the page with that component in it returns the following error:

Uncaught Invariant Violation: Objects are not valid as a React child (found: object with keys 
{applyFTRestrictions, citationExportPath, exportFT, fieldRestrictionFile, ftExportPath, mesg, productCode,
status, xslt}). If you meant to render a collection of children, use an array instead or wrap the object using
createFragment(object) from the React add-ons. Check the render method of `GridRow`

Is there a way to associate a react component with the subarray, with the subarray not having the same properties as the parent array elements? That seems to be the limitation mentioned in the Griddle documentation.

I've tried adding a "customComponent" to the Products column, but I still get the same error.