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

Question

I have data saved in SQL in the form below : Once 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.

<MaterialTable columns=headers data=tblData /> ?

Joel
– Joel

2022-11-17 22:20:58 +00:00
Commented Nov 17, 2022 at 22:20 — Joel
– Joel, Commented Nov 17, 2022 at 22:20
Have you looked at the documentation or any tutorials?

Andy
– Andy

2022-11-17 22:21:45 +00:00
Commented Nov 17, 2022 at 22:21 — Andy
– Andy, Commented Nov 17, 2022 at 22:21

Naveen · Accepted Answer · 2022-12-10 10:47:30Z

1

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"
            />
        )
      }
    }

edited Dec 10, 2022 at 10:47

answered Nov 18, 2022 at 13:18

Naveen

3602 silver badges12 bronze badges

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

Collectives™ on Stack Overflow

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

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