How to render dynamic table in React

Question

How will I do this kind of table in react? In each projects, there are employees and they have their corresponding positions. But in the project name (Column), on the second row, the 'Project A' should not be displayed.

Should not be like the second picture, where the 2nd and 3rd row still contains the project name. I want to exclude it and leave it blank.

Let say I sent a request from the server and it returned this json structure

[
    {
        "name": "Project A",
        "employees": [
            {
                "emp_name": "Employee 1",
                "emp_pos": "Position 1"
            },
            {
                "emp_name": "Employee 2",
                "emp_pos": "Position 2"
            }
        ]
    },

    {
        "name": "Project B",
        "employees": [
            {
                "emp_name": "Employee 5",
                "emp_pos": "Position 2"
            },
            {
                "emp_name": "Employee 3",
                "emp_pos": "Position 4"
            
            }
        ]
    }
]

I'm not sure, if the structure of my json file is correct.

You want to skip the first project name? Can you be more clear on what you are trying to achieve and what is the issue you trying to solve. If you provide some code in codesandbox that would be great. — c0m1t
– c0m1t, Commented Jan 11, 2021 at 14:42

DBS · Accepted Answer · 2021-01-11 14:58:40Z

2

I would break it down into three parts:

The table (with header row)
The project rows
The employee rows

These could either be separate components or just nested functionality, something like this:

<table>
    <thead>
        <tr>
            <th>Project NAME</th>
            <th>Employee</th>
            <th>Position</th>
        </tr>
    </thead>
    <tbody>
        { data.map(p => 
            {/* This fragment contains the "top" row of each project and maps it's employees */}
            <Fragment>
                <tr>
                    <td>{ p.name }</td>
                    <td>{ p.employees[0].emp_name }</td>
                    <td>{ p.employees[0].emp_pos}</td>
                </tr>
                {/* We have already included the first employee, so slice the array and map the remaining employees */}
                { p.employees.slice(1).map(e => 
                    <tr>
                        <td></td>
                        <td>{ e.emp_name }</td>
                        <td>{ e.emp_pos }</td>
                    </tr>
                ) }
                {/* Include an empty row after each complete project */}
                <tr><td></td><td></td><td></td></tr>
            </Fragment>
        ) }
    </tbody>
</table>

edited Jan 11, 2021 at 14:58

answered Jan 11, 2021 at 14:48

DBS

10.1k4 gold badges40 silver badges61 bronze badges

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

4 Comments

c0m1t Over a year ago

I think do this by checkin if in the loop index is 0 or not then render name conditionally: { index === 0 ? p.name : null}. That would look cleaner imo.

DBS Over a year ago

@c0m1t That is another valid option, though that way makes adding the blank line after each project a little more complex. I personally feel this way is more flexible, but it is definitely another good way to do it.

c0m1t Over a year ago

Yes it's just personal preferences. You can add the empty row outside of the inner loop and inside of the fragment so that would not add to the complexity I suppose. Also you can use colspan instead of writing down several empty td elements. <tr><td colspan={3}/></tr>.

Clark Over a year ago

@c0m1t would you like to show your solution? It would be great!

c0m1t · Accepted Answer · 2021-01-11 15:21:07Z

This answer is based on DBS answer with some modifications:

        <tbody>
          {data.map((project, projectIndex) => {
            return (
              <Fragment>
                {project.employees.map((employee, employeeIndex) => (
                  <tr>
                    <td>{employeeIndex === 0 ? project.name : null}</td>
                    <td>{employee.emp_name}</td>
                    <td>{employee.emp_pos}</td>
                  </tr>
                ))}
                {/* You can use projectIndex to skip the last empty row */}
                {data.length - 1 === projectIndex ? null : (
                  <tr>
                    <td colspan={3}>&nbsp;</td>
                  </tr>
                )}
              </Fragment>
            );
          })}
        </tbody>
      </table>

Codesandbox link

Collectives™ on Stack Overflow

How to render dynamic table in React

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related