javascript - Griddle/ReactJS でサブ配列を表示する方法はありますか?

Question

グリドル グリッドでモデル化したいデータは次のようなものだとします。

[
      {
        "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"
      }
]

私が作成した reactJS コンポーネントは次のようなものです (簡略化):

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>
        );
    }
});

そのコンポーネントを含むページをレンダリングすると、次のエラーが返されます。

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`

親配列要素と同じプロパティを持たないサブ配列で、反応コンポーネントをサブ配列に関連付ける方法はありますか? これは、グリドルのドキュメントに記載されている制限のようです。

Products 列に「customComponent」を追加しようとしましたが、それでも同じエラーが発生します。