CODEWITHSUNDEEP
javascriptreactjsmaterial-table
user20146221
user20146221

Reputation: 35

how to map and display array data in table form in react?

I have data saved in SQL in the form below : enter image description hereOnce I retrieve the data in array format in react such as :

const tbldata = [[cat,dog,bird,cow],[victoria,vancouver,calgary,montreal],[apple,mango,bananas,grapes],[car,plane,truck,train]];

const headers = [A,B,C,D];

How do I display the data in table form in React.js? Like this below?

A B C D
cat dog bird cow
victoria vancouver calgary montreal
apple mango bananas grapes
car plane truck train

I tried using material table because I'm not sure how to use the other table. This is what I tried :

<MaterialTable
    columns = headers     
    data = tbldata
\>

Which is not what I'm looking for. I don't know how to map the array data in a table format.

Upvotes: 1

Views: 342

Answers (1)

Naveen
Naveen

Reputation: 360

I think this will help you.

 class App extends Component {
      render() {
        return (
            <MaterialTable
              columns={[
                { title: 'A', field: 'A' },
                { title: 'B', field: 'B' },
                { title: 'C', field: 'B' },
                { title: 'D', field: 'D' }
              ]}
              data={tbldata.map((item)=> ({A: item[0], B: item[1], C: item[2]}))}
              title="Title"
            />
        )
      }
    }

Upvotes: 1

Related Questions