CODEWITHSUNDEEP
javascripthtmlcssreactjs
Skipper Lin
Skipper Lin

Reputation: 75

How to make one element span the whole cell in React Table

Hi I want to make my td element tag occupy the whole cell belongs to that column. This the output I got so far:enter image description here

Basically, I want the "Independent Study" to occupy the first column. This is my code so far:

                   <Table striped bordered hover>
                        <thead>
                            <tr>
                                <th>{`Courses Taught By ${this.state.professorname}`}</th>
                                <th>{`Comments on Course`}</th>
                            </tr>
                        </thead>

                        <tr>
                            {this.state.courses.map((course, i) => (
                            <tr>
                                <td key={course._id}>
                                    <Link to={`/${this.state.id}/${course._id}`}>{course.name}</Link>
                                </td>
                                {this.state.comments[i].map((comment, j) => (
                                    <td key={j}>
                                        <p>{this.state.comments[i][j]}</p>
                                    </td>
                                ))}
                            </tr>
                            ))}
                        </tr>
                    </Table>

I would really appreciate some help, since this one troubled me for so long. Thanks.

Upvotes: 1

Views: 3468

Answers (4)

Xzigraz
Xzigraz

Reputation: 103

You basically have a two columns table, but your logic is to not render the second column if there's no comment. All you need to do is to move the second out of your map. That way you retain the table cell if it's empty. You also nested tr > tr which is invalid, I changed the wrapping tr to tbody. Lastly, the key should be on the tr for the row, not on the first column's td. Hope this helps.

<Table striped bordered hover>
         <thead>
               <tr>
                   <th>{`Courses Taught By ${this.state.professorname}`}</th>
                   <th>{`Comments on Course`}</th>
               </tr>
         </thead>
         <tbody>
               {this.state.courses.map((course, i) => (
                   <tr key={course._id}>
                        <td>
                             <Link to={`/${this.state.id}/${course._id}`}>{course.name</Link>                  
                        </td>
                        <td>
                        {this.state.comments[i].map((comment, j) => (
                             <p key={j}>{this.state.comments[i][j]}</p>
                        ))}
                        </td>
                   </tr>
                ))}
         </tbody>
    </Table>

Upvotes: 1

tiborK
tiborK

Reputation: 385

Fixing the nested tr

<Table striped bordered hover>
    <thead>
        <tr>
            <th>{`Courses Taught By ${this.state.professorname}`}</th>
            <th>{`Comments on Course`}</th>
        </tr>
    </thead>
        {this.state.courses.map((course, i) => (
            <tr>
                <td key={course._id}>
                    <Link to={`/${this.state.id}/${course._id}`}>{course.name}</Link>
                </td>
                <td>
                    <table>
                        <tr>
                            {this.state.comments[i].map((comment, j) => (
                                <td key={j}>
                                    <p>{this.state.comments[i][j]}</p>
                                </td>
                            ))}
                        </tr>
                    </table>
                 </td>
             </tr>
         ))}
     </tr>
 </Table>

There are other options as well using a colspan or just add the comments into the td as p tags and style it in css Here is the other solution using p tags:

replace this:

<table>
    <tr>
        {this.state.comments[i].map((comment, j) => (
            <td key={j}>
                <p>{this.state.comments[i][j]}</p>
            </td>
         ))}
     </tr>
</table>

to this:

{this.state.comments[i].map((comment, j) => (
    <p key={j}>{this.state.comments[i][j]}</p>
))}

and just use css to style it

Upvotes: 1

Shubham Verma
Shubham Verma

Reputation: 5054

It's because of extra tr inside the map loop. I created one playground. Code : 

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React',
      tableData : ["testing1","testing12"]

    };
  }

  render() {
    return (
      <div>
        <Table>
              <thead>
                <tr>
                  <th>Test-1</th>
                  <th>Test-2</th>
                </tr>
              </thead>
              <tbody>
                {
            this.state.tableData.map(data => {
              return(
                <tr>
            <td>{data}</td>

          </tr>
              )
            })
          }
              </tbody>
        </Table>
      </div>
    );
  }
}

LIVE DEMO : https://stackblitz.com/edit/react-ueqvy6

Upvotes: 0

Mihail Minkov
Mihail Minkov

Reputation: 2633

to achieve this you need to use the colspan attribute of the td element.

For example if you have the following structure:

<table>
  <tr>
    <td>Name</td>
    <td>Last Name</td>
    <td>Actions</td>
  </tr>
  <tr>
    <td colspan="2">John Doe</td>
    <td></td>
  </tr>
</table>

The John Doe td would occupy the 2 columns the previous td elements create.

Upvotes: 0

Related Questions