ReactJS - How to split table row into two rows to show more responsive way of data

Question

I have a requirement to display table data in reactjs application. But the table having more fields so, am trying to split the table row into two rows. How can i split the row.

Here am getting data from MongoDB by using API to invoke JavaServlets.

I tried by placing two tags but it is throwing error.

Please find the code that am showing my table data ( reactJS ).

class SearchResults extends React.Component {
    constructor(props) {
        super(props);
        this.state = { currentPage: 1 };
        this.handlePageChange=this.handlePageChange.bind(this);

    }
          handlePageChange(page, evt) {
            this.setState({ currentPage: page  } );
          }
    render() {

        const per_page = "10";
        const paginationData = this.props.results;
        let numPages = Math.ceil(paginationData.length / per_page);

        if (paginationData.length % per_page > 0) {
          numPages++;
        }


        return (
            <div className="panel panel-primary">
            <div className="panel-heading">ORDERS LIST</div>
            <table className="table table-hover" >
                <thead >
                <tr>
                <th>Order Number</th>
                <th>Customer Name</th>
                <th>Created By</th>
            </tr>
                </thead>

                <SearchResultsList items={ this.props.results } />

            </table>

                <Pagination id="content" className="users-pagination pull-right" bsSize="medium" 
                     first last  next  prev  boundaryLinks items={numPages} 
                activePage={ this.state.currentPage } onSelect={ this.handlePageChange } />
            </div>
        );
    }
}

class SearchResultsList extends React.Component {
    constructor(props) {
        super(props);
        this.state = { };
    }
    render() {
        return (<tbody>{ this.props.items
            .map((item, index) => {
                  if (index >= start_offset && start_count < per_page) {
                      start_count++;
                      return <SearchResultsItem key={item.id} item={item} />;

                  }
          })
      }  
        </tbody>
         );

        }

}

class SearchResultsItem extends React.Component {
    constructor(props) {
        super(props);
        this.state = { };
    }
    render() {
         return(  
                 <tr>
                    <td>{ this.props.item.order_number }</td>
                    <td>{ this.props.item.customer_name }</td>
                    <td>{ this.props.item.buyer_email }</td>
                </tr>
        ); 
    }
}

In the last render() method i want to have two table row tags to some fields in next row.

Like the below code.

render() {
     return(  
             <tr>
                <td>{ this.props.item.order_number }</td>
                <td>{ this.props.item.customer_name }</td>
                <td>{ this.props.item.buyer_email }</td>
            </tr>
            <tr>
                <td>{ this.props.item.buyer_id }</td>
                <td>{ this.props.item.buyer_city }</td>
                <td>{ this.props.item.buyer_state }</td>
            </tr>
    ); 
}

But am getting error if i place one more table row tag in return. How i can split table row?

also what exactly is the error and which react version is being used? — semuzaboi, Nov 15 '17 at 04:59

score 0 · Accepted Answer · answered Nov 15 '17 at 05:02

if you are using react < v16 , you have to make a small change in your render method.

    render() {
         return(  <tbody> <!-- wrapper element -->
                 <tr>
                    <td>{ this.props.item.order_number }</td>
                    <td>{ this.props.item.customer_name }</td>
                    <td>{ this.props.item.buyer_email }</td>
                </tr>
                <tr>
                    <td>{ this.props.item.buyer_id }</td>
                    <td>{ this.props.item.buyer_city }</td>
                    <td>{ this.props.item.buyer_state }</td>
                </tr>
</tbody>
        ); 
    }

More details can be seen here in this SO Question

Am using v 15.6.1. The above solution is not working properly. It's splitting into two rows. But, all fields are rendering in the first column itself.. — Karthikeyan, Nov 15 '17 at 11:05

ReactJS - How to split table row into two rows to show more responsive way of data

1 Answers1