how to add pagination and fire row click event in table in react js

Question

I have below child component in react which I am rendering on button click event in parent component. Till here I have no problem. Table is getting rendered on page. I have written row click event findDetails() on table. But problem is that rowClick event in not working on row click. Instead of that it get executed when component is rendering on page. I want to execute on rowClick. Below is my code for table component. Also I need to implement pagination as well in same table which I am not sure how to do it.


class Table extends Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }

  getHeaader = () => {
       var tableHeadings = [
      "Customer ID",
      "Customer Name",
      "Address",
      "Contact",
    ];
    return tableHeadings.map((key) => {
      return <th key={key}> {key.toUpperCase()}</th>;
    });
  };

  getRowsData = (e) => {
    return this.props.Data.map((value, index) => {
      const {
         "Customer_ID",
         "Customer_Name",
         "Address",
         "Contact",
      } = value;
      return (
        <tr
          key={CUSTOMER_ID}
          onClick={this.findDetails(value)}
        >
          <td> {CUSTOMER_ID} </td>
          <td> {CUSTOMER_NAME} </td>
          <td> {Address} </td>
          <td> {Contact} </td>
          <td>
            <button className="btn btn-info">Find Details</button>
          </td>
        </tr>
      );
    });
  };


  findDetails = (value) => {
    console.log("in show button", value.count);
    if (value["count"] === 0) {
      alert("No details for given customer");
    }
  };

  render() {
    return (
      <div>
        <table
          id="display-table"
          className="table table-bordered table table-hover table table-responsive pagination"
          style={{ tableLayout: "fixed" }}
        >
          <tbody>
            <tr>{this.getHeaader()}</tr>
            {this.getRowsData()}
          </tbody>
        </table>
      </div>
    );
  }
}

export default Table;
`

<tr> is just a wrapping tag in HTML and does not accept onClick events. Instead try applying your onClick function on <td> tags. — Enchew
– Enchew, Commented Apr 21, 2020 at 7:46
@Enchew I have tried that as well but no luck. Its still behave the same way. — Nilesh
– Nilesh, Commented Apr 21, 2020 at 7:47
Actually what I said is gibberish and incorrect. I tested it and it worked. I found your mistake, please check the answer I wrote. — Enchew
– Enchew, Commented Apr 21, 2020 at 7:50
Can you please help in for how will I navigate to new component on button click. I have written below line in findDetails() function, this.props.history.push("/NewComponent"); — Nilesh
– Nilesh, Commented Apr 21, 2020 at 8:49
You could use <Link to='/NewComponent> Find Details </Link> Your way is possible too. — Enchew
– Enchew, Commented Apr 21, 2020 at 8:53

Enchew · Accepted Answer · 2020-04-21 07:50:30Z

1

You invoke your onClick in the wrong way. When passing parameters, you have to wrap your function in an anonymous one:

  <tr
          key={CUSTOMER_ID}
          onClick={() => this.findDetails(value)}
  >

I'll explain. When passing onClick, React is waiting for a function name (actually a reference), that then it calls, by adding parentheses. If you add them by yourself as you did (onClick={this.findDetails()} ) you invoke the function right away and you pass the RESULT of the function to the onClick listener.

answered Apr 21, 2020 at 7:50

Enchew

9996 silver badges11 bronze badges

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

3 Comments

Nilesh Over a year ago

ohh my goodness!!!. I spent whole evening to fix this and you caught this is seconds. Thanks a lot for help. Could you also please help me how will I apply a pagination for this table.

Enchew Over a year ago

Recently I helped someone in the site implementing pagination. Have a look at this link: stackoverflow.com/questions/61311155/… Check my answer and the comments below the answer, which continue in the chat. In the meanwhile, please consider upvoting and marking the answer as accepted.

Nilesh Over a year ago

I will check. Thank you once again.

Collectives™ on Stack Overflow

how to add pagination and fire row click event in table in react js

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related