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
– Francisco Maria Calisto

2016-09-29 09:13:59 +00:00
Commented Sep 29, 2016 at 9:13 — Francisco Maria Calisto
– Francisco Maria Calisto, Commented Sep 29, 2016 at 9:13

Claus · Accepted Answer · 2016-10-14 20:38:29Z

1

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:

answered Oct 14, 2016 at 20:38

Claus

2,31417 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Griddle empty table when objects in fields

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related