CODEWITHSUNDEEP
javascriptreactjsgriddle
Yaroslav
Yaroslav

Reputation: 4659

Griddle empty table when objects in fields

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?

Upvotes: 1

Views: 406

Answers (1)

Claus
Claus

Reputation: 2294

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:

enter image description here

Upvotes: 1

Related Questions