Griddle empty table when objects in fields

Question

I'm trying Griddle grid component for React. When I pass an array of objects with primitive fields everything works fine

<Griddle results={[{id: 42}]}/> // works

but when there are objects in fields, it shows an empty table

<Griddle results={[{id: {value: 42}}]}/> // doesn't work

I have complex objects in fields and custom components to display them but the table is just empty. How do I make it work?

I am having a similar problem too. – Francisco Maria Calisto Sep 29 '16 at 09:13 — Francisco Maria Calisto, Sep 29 '16 at 09:13

score 1 · Answer 1 · answered Oct 14 '16 at 20:38

You can work around this limitation of Griddle with customComponent. In your case the code would look the following:

import React from 'react';
import Griddle from 'griddle-react';

const GriddleValueComponent = props => (<div>{props.data.value}</div>);

var MyComponent = (props) => {

    const columnMetadata = [
        {
            "columnName": "id",
            "order": 1,
            "displayName": "The Value",
            "customComponent": GriddleValueComponent
        }
    ];

    return (
        <div className="cssmFsaDataList">
            <Griddle results={[{id: {value: 42}}]} columnMetadata={columnMetadata} columns={["id"]} />
        </div>
    );
}

export default MyComponent;

Which renders as this:

Griddle empty table when objects in fields

1 Answers1