CODEWITHSUNDEEP
javascriptreactjs
chandra
chandra

Reputation: 45

How to display array data into tables in Reactjs

I am trying to display csv file data to frontend in reactjs. i read csv file using papaparse and i am getting all data

["0.122584", "0.785882", "0.954039", "0.353008"]
...
...
["0.122584", "0.785882", "0.886715", "-0.626392"]

and want to to display this array data in the form of table.

I tried this 

class Panel extends React.Component {
  constructor(){
      super();
      this.state={
          csvfile:undefined,
          data:null
      };

  }
  handleChange = event =>{
      this.setState({
          csvfile:event.target.files[0]
      });
  };

  importCSV = () =>{
      const { csvfile } = this.state;
      Papa.parse(csvfile, {
          complete: this.updateData,
          header: false
      });
  };

  updateData(result){
      var data = result.data;
      console.log(">>>>>")
      this.setState({
        data:data
      })
      console.log(data)
  }

render(){
return(
<Table bordered>
                 <thead>
                 <tr>
                    <th>#</th>
                     <th>First Name</th>
                     <th>Last Name</th>
                     <th>Username</th>
                </tr>
                 </thead>
                 <tbody>
                 <tr>
                     <th scope="row">1</th>
                     <td>{this.state.data}</td>
                     <td>Otto</td>
                     <td>@mdo</td>
                </tr>
                </tbody>
             </Table>
)
}

But it is not working well. it is displaying all data in single cell only. i want each value in different cell. I am a beginner in reactJs.

Thanks.

Upvotes: 1

Views: 26595

Answers (5)

Hardik Chaudhary
Hardik Chaudhary

Reputation: 1228

Hope this can help you! I write two possibilities(tables) there because your question seems unclear to me.

Update Code

class Table extends React.Component{
 data = [
   ["0.122584", "0.785882", "0.954039", "0.353008"],
   ["1", "2", "0.954039", "0.353008"],
 ];
 render(){
   return(
       <table>
         <tbody>
           {
                this.data.map((numList,i) =>(
                   <tr key={i}>
                    {
                      numList.map((num,j)=>
                         <td key={j}>{num}</td>
                      )
                    }
                   </tr>
                ))
           }
         </tbody>
       </table>
   );
 }
}

ReactDOM.render(<Table/>,document.getElementById("root"));
td{
  border:1px solid #ccc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Upvotes: 5

OAH
OAH

Reputation: 1210

you can use antd :framework for reactjs
so you build columns in an easy way like this 

const columns = [{
      title: 'First Name',
      dataIndex: 'first_name',
      sortDirections: ['descend', 'ascend'],
      key: 'first_name',
      width: '20%',}]

and you can just :

return (

 <Table className="yourClassCss" columns={columns} dataSource={this.state.data} />

    );

Upvotes: 0

Hevar
Hevar

Reputation: 1529

You can map though you data and add a <tr> for each this.state.data.

//...your previous code

let tableRows = null;

if (this.state.data) {
  tableRows = <tr>
    {this.state.data.map((data, index) => {
      return (
        <td key={index}>
          {data}
        </td>
      );
    })}
  </tr>
}

return(
  <Table bordered>
    <thead>
      <tr>
        <th>#</th>
      </tr>
    </thead>
    <tbody>
      {tableRows}
    </tbody>
  </Table>

)

Upvotes: 2

jawkha
jawkha

Reputation: 11

can you provide a snapshot of the data that should be displayed in a single row of your table? The Table component that you have posted has headers for First Name, Last Name, and Username. If the data is properly structured, then you can render it on the screen by modifying your component as follows:

  class Panel extends React.Component {
  constructor(){
      super();
      this.state={
          csvfile:undefined,
          data:null
      };

  }
  handleChange = event =>{
      this.setState({
          csvfile:event.target.files[0]
      });
  };

  importCSV = () =>{
      const { csvfile } = this.state;
      Papa.parse(csvfile, {
          complete: this.updateData,
          header: false
      });
  };

  updateData(result){
      var data = result.data;
      console.log(">>>>>")
      this.setState({
        data:data
      })
      console.log(data)
  }

render(){
return(
<Table bordered>
                 <thead>
                 <tr>
                    <th>#</th>
                     <th>First Name</th>
                     <th>Last Name</th>
                     <th>Username</th>
                </tr>
                 </thead>
                 <tbody>
{this.state.data.map((rowData, index) => (
                 <tr>
                     <th scope="row">{index + 1}</th>
                     <td>{rowData.firstName}</td>
                     <td>{rowData.lastName}</td>
                     <td>{rowData.userName}</td>
                 </tr>

))}

                </tbody>
             </Table>
)
}

Here, I have made the assumption that your data for each row is an object with the properties firstName, lastName, and userName. Let me know if anything is unclear to you.

Upvotes: 1

Titus
Titus

Reputation: 22484

You need to create a <td> element for each value in the this.state.data array, here is how you can do that:

<tr>
   ...
   { !!this.state.data && this.state.data.map(value => (<td>{value}</td>)) }
   ...
</tr>

Upvotes: 0

Related Questions