react-table iterating over object array to print values in a column

Question

I am using react-table to generate tables(https://react-table.js.org/#/story/readme). I have a state defined as following:

this.state = {

    sampleTable:[
        {author: 'Mac', books: [{title:'One', price: 20}, {title:'Two', price: 20}]},
        {author: 'Rick', books: [{title:'Three', price: 20}, {title:'Four', price: 20}]}
    ],

    sampleTableColumns:[
        {Header: 'Author', accessor: 'author'},
        {Header: 'Books', accessor: 'books.title'},
    ],
};

And I am trying to make table as following:

<ReactTable
    className="-highlight"
    data={this.state.sampleTable}
    columns={this.state.sampleTableColumns}
    defaultPageSize={10}
/>

However in the books column I see nothing. I am not sure how am I supposed to iterate over books array so that I can print say book titles in books column?

Thinker · Accepted Answer · 2017-08-07 08:50:32Z

14

I had to write my accessor like following:

sampleTableColumns:[
    {
        Header: 'Author',
        accessor: 'author',

    },
    {
        Header: 'Books',
        id:'books',
        accessor: data => {
            let output = [];
            _.map(data.books, book => {
                output.push(book.title);
            });
            return output.join(', ');
        },
    },
],

answered Aug 7, 2017 at 8:50

Thinker

5,39615 gold badges70 silver badges143 bronze badges

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

Comments

Shivam Modi · Accepted Answer · 2021-01-25 12:06:13Z

4

It's simple without using any dependencies like lodash...

You just need to use React-table Cell attribute

sampleTableColumns:[
{
    Header: 'Author',
    accessor: 'author',
},
{
    Header: 'Books',
    accessor: 'books',
    Cell: (props) => {
        const { sampleTable} = props.original;
        return (
            { sampleTable.books.map( (book) =>(<h4>{book.title}</h4>)) }
        );
    },
},],

answered Jan 25, 2021 at 12:06

Shivam Modi

3793 silver badges6 bronze badges

Comments

nkmuturi · Accepted Answer · 2022-05-26 15:57:33Z

2

I believe Shivam Modi answered it. Using TypeScript his solution could be rendered something like (using built-in row selector):

{
        Header: "Books",
        accessor: "books",
        Cell: ({ row }) => {
            return (
                 row.original.books
                    .map((book: Book) => (
                        <div key={book.id}>
                            <h4>{book.name}</h4>
                        </div>
                    ))
            );
        },
    },

answered May 26, 2022 at 15:57

nkmuturi

4666 silver badges14 bronze badges

Comments

Stephen L · Accepted Answer · 2017-08-02 18:52:15Z

0

Your books data is an array and I don't believe react-table knows how to render those by default. You can instead supply your own render function in the sampleTableColumns for that cell, which would look something like:

sampleTableColumns:[
    {Header: 'Author', accessor: 'author'},
    {
      Header: 'Books', 
      accessor: 'books'
      render: (rowInfo) => {
        return (
          <span>
           {rowInfo.value.map(book => (<span>{book.title}</span>))}
          </span>
      },
    },
],

edited Aug 2, 2017 at 18:52

answered Jul 31, 2017 at 18:48

Stephen L

2,35913 silver badges17 bronze badges

8 Comments

Thinker Over a year ago

Hey Stephen, thanks for your answer. But it did print nothing.. :( same issue. I just need to print in that column, all the book titles by that author

Stephen L Over a year ago

Try my code and editing your books column object accessor to read 'books' rather than 'books.title'

Thinker Over a year ago

I a trying your code and if I change the accessor to books from books.title then it gives me error: Objects are not valid as a React child (found: object with keys {title, price}). If you meant to render a collection of children, use an array instead,

Stephen L Over a year ago

Hmm okay I'll take a look at this later today

Stephen L Over a year ago

I edited the code above to what i believe will work. If it's still giving you an error, let's start a chat to resolve

|

deathfry · Accepted Answer · 2021-06-18 20:48:39Z

0

Well, I am too late for the party but all above doesn't work for me and I tried to use ES6 syntax. I have requested data in array, so here we go (I renamed variables):

  export const returnPreparedField = (array) => {
    const newArray = [];

    for (let arrayValue of array) {

        const newElement = {
            id: "element",
            header: element,
            accessor: data => data.element.find(elementToFind => (elementToFind.name === element))?.value,
            show: true,
            width: 100
        };

        newArray.push(newElement);
    }
    return newArray;
};

answered Jun 18, 2021 at 20:48

deathfry

7541 gold badge14 silver badges31 bronze badges

Collectives™ on Stack Overflow

react-table iterating over object array to print values in a column

5 Answers 5

Comments

It's simple without using any dependencies like lodash...

You just need to use React-table Cell attribute

Comments

Comments

8 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

It's simple without using any dependencies like lodash...

You just need to use React-table Cell attribute

Comments

Comments

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related