Populating a react-table with an object instead of a list

Question

The documentation for the react-table library (https://github.com/react-tools/react-table#data) states:

"Simply pass the data prop anything that resembles an array or object."

However, the tables are rendered as expected when passing in an array of data, but when passing an object, I get the error:

"Invalid prop data of type object supplied to ReactTable, expected array."

An example data object looks like this:

const data = {
"entry1": {
    name: 'Tanner Linsley',
    age: 26,
    friend: {
        name: 'Jason Maurer',
        age: 23,
    }
}, "entry2": {
    name: 'aTanner Linsley',
    age: 26,
    friend: {
        name: 'aJason Maurer',
        age: 23,
    }
} };

Is this a problem with the structure of my object, or does it simply mean the library does not support the population via objects in this way?

Note: I prefer to maintain this data structure (which will become huge) as an object (dictionary) instead of an array so I can efficiently access elements by key for another use (outside of react-table).

Ramiz Wachtler · Accepted Answer · 2017-12-14 19:44:46Z

1

The react-table library would expect an input like that:

const data = [{
    name: 'Tanner Linsley',
    age: 26,
    friend: {
        name: 'Jason Maurer',
        age: 23,
    }
},{
    name: 'aTanner Linsley',
    age: 26,
    friend: {
        name: 'aJason Maurer',
        age: 23,
    }
}];

I prefer to maintain this data structure

Is there any particular reason to that? However, if you really want to do it like that, you could apply the Object.values(...) (MDN Source) method to your data before passing it to the component. In that case you can manage it as you desire and the component will get the right data structure.

const convertedObject = Object.values(data);

But keep in mind that in this case, you will lose your keys entry1 and so on.

answered Dec 14, 2017 at 19:44

Ramiz Wachtler

5,6932 gold badges30 silver badges33 bronze badges

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

2 Comments

firetiger77 Over a year ago

Yes, the benefit of using an object/dict versus an array is faster accesses. data['key'] is faster than data.filter(element => {element.name == name})[0]

Isaac Pak Over a year ago

Instead of trying to get users to create array data structures, why not change the documentation to explicitly say "only accepts arrays" for data.

Collectives™ on Stack Overflow

Populating a react-table with an object instead of a list

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related