how to add check box in table using reactjs

Question

At what i m trying to do is i want to make checkbox in table using react js .but in my below in first not able to check box shown. i m trying to do is n my below code but i am unable to do is in my below code,and i also want to make one submit button inside table using reactjs .

anyone help me out this. I m stuck on that.its very thankful.

check her in my code https://codepen.io/svpan/pen/NWdJvmX

class TableComponent extends React.Component {
  state = {};

  handleRowClick = async (rowID) => {
    // make an API call here, sth like
    console.log(rowID)
    const url1 = "https://grandiose-mulberry-garnet.glitch.me/query?id="+rowID;
    const url2 = "https://grandiose-mulberry-garnet.glitch.me/params/"+rowID;
    // const url = "https://mocki.io/v1/4d51be0b-4add-4108-8c30-df4d60e8df54";
    // you can use any of the above API to test.
    const response = await fetch(url1);
    const res = await response.json();
    // console.log(res)
    this.setState({
      ...res,
    });
    window.open(res.url, '_blank');
  };

  render() {
    var dataColumns = this.props.data.columns;
    var dataRows = this.props.data.rows;

    var tableHeaders = (
      <thead>
        <tr>
          {" "}
          {dataColumns.map(function (column) {
            return <th> {column} </th>;
          })}{" "}
        </tr>{" "}
      </thead>
    );

    var tableBody = dataRows.map((row) => {
      return (
        <tr onClick={() => this.handleRowClick(row.id)} key={row.id}>
          {" "}
          {dataColumns.map(function (column) {
            return (
              <td>
                {" "}
                <a target="_blank" rel="noopener noreferrer" href={row.url}>
                  {" "}
                  {row[column]}{" "}
                </a>
              </td>
            );
          })}{" "}
        </tr>
      );
    });

    // Decorate with Bootstrap CSS
    return (
      
      <table className="table table-bordered table-hover" width="100%">
        {" "}
        {tableHeaders} {tableBody}{" "}
      </table>
     
    );
  }
}
 
// Example Data
var tableData = {
  
 columns: ['Select','Service_Name', 'Cost/Unit'],
  rows: [{
    'Service_Name': 'airplane',
    'Cost/Unit': 50,
    'id': 1
   
  }, {
    'Service_Name': 'cat',
    'Cost/Unit': 50,
    'id': 2
  },{
    'Service_Name': 'fruits',
    'Cost/Unit': 50,
    'id': 5
  }, {
    'Service_Name': 'pool',
    'Cost/Unit': 50,
    'id': 4
  }]
};
 

ReactDOM.render(
  <TableComponent data = {tableData} />,
  document.getElementById('table-component')

);

I would use react-table: react-table.tanstack.com/docs/examples/row-selection — Ajeet Shah
– Ajeet Shah, Commented Apr 30, 2021 at 10:47
thanks for reply@AjeetShah but i try to implement this one react-table.tanstack.com/docs/examples/row-selection in my code but not work cna u plz show me something in here n my code codepen.io/svpan/pen/NWdJvmX its very thankful — sneha
– sneha, Commented Apr 30, 2021 at 10:50

snehal gugale · Accepted Answer · 2021-04-30 11:11:16Z

1

I've tweaked your code a little bit to add checkbox in select column.

  class TableComponent extends React.Component {
  state = {};

  handleRowClick = async (rowID) => {
    // make an API call here, sth like
    console.log(rowID)
    const url1 = "https://grandiose-mulberry-garnet.glitch.me/query?id="+rowID;
    const url2 = "https://grandiose-mulberry-garnet.glitch.me/params/"+rowID;
    // const url = "https://mocki.io/v1/4d51be0b-4add-4108-8c30-df4d60e8df54";
    // you can use any of the above API to test.
    const response = await fetch(url1);
    const res = await response.json();
    // console.log(res)
    this.setState({
      ...res,
    });
    window.open(res.url, '_blank');
  };

  render() {
    var dataColumns = this.props.data.columns;
    var dataRows = this.props.data.rows;

    var tableHeaders = (
      <thead>
        <tr>
          {" "}
          {dataColumns.map(function (column) {
            return <th> {column} </th>;
          })}{" "}
        </tr>{" "}
      </thead>
    );

    var tableBody = dataRows.map((row) => {
      return (
        <tr onClick={() => this.handleRowClick(row.id)} key={row.id}>
          {dataColumns.map(function (column) {
            if(column == 'Select')
              return (
              <td>
                 <input type="checkbox" />
              </td>
            );
            else
            return (
              <td>
                <a target="_blank" rel="noopener noreferrer" href={row.url}>
                  {
                      row[column]
                  }
                </a>
              </td>
            );
          })}
        </tr>
      );
    });

    // Decorate with Bootstrap CSS
    return (
      
       <div>
  <table className="table table-bordered table-hover" width="100%">
    {tableHeaders} {tableBody}
  </table>
    <input type="submit" value="submit" />
    </div>
     
    );
  }
}
 
// Example Data
var tableData = {
  
 columns: ['Select','Service_Name', 'Cost/Unit'],
  rows: [{
    'Service_Name': 'airplan',
    'Cost/Unit': 50,
    'id': 1
   
  }, {
    'Service_Name': 'cat',
    'Cost/Unit': 50,
    'id': 2
  },{
    'Service_Name': 'fruits',
    'Cost/Unit': 50,
    'id': 5
  }, {
    'Service_Name': 'pool',
    'Cost/Unit': 50,
    'id': 4
  }]
};
 

ReactDOM.render(
  <TableComponent data = {tableData} />,
  document.getElementById('table-component')

);

Like a checkbox submit button can be added.

edited Apr 30, 2021 at 11:11

answered Apr 30, 2021 at 10:56

snehal gugale

1766 bronze badges

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

7 Comments

sneha Over a year ago

thanks for this and how to add one submit button outside table??

snehal gugale Over a year ago

@shivanipandey do you want submit button per row?

sneha Over a year ago

not per row outside the table i want one button only how can do that?@snehal

sneha Over a year ago

can u help me out ??

sneha Over a year ago

codepen.io/svpan/pen/NWdJvmX this is my code

|

Collectives™ on Stack Overflow

how to add check box in table using reactjs

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related