Как отобразить динамическую таблицу в React

#reactjs

Вопрос:

Как я буду создавать такую таблицу в react? В каждом проекте есть сотрудники, и у них есть соответствующие должности. Но в названии проекта (столбец), во второй строке, «Проект A» не должен отображаться.

Не должно быть похоже на второе изображение, где 2-я и 3-я строки по-прежнему содержат название проекта. Я хочу исключить ее и оставить пустой.

Допустим, я отправил запрос с сервера, и он вернул эту структуру json

 [
    {
        "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"
            
            }
        ]
    }
]

Я не уверен, правильна ли структура моего файла json.

1. Вы хотите пропустить первое название проекта? Можете ли вы более четко указать, чего вы пытаетесь достичь и какую проблему вы пытаетесь решить. Если вы предоставите некоторый код в codesandbox, это было бы здорово.

Ответ №1:

Я бы разбил ее на три части:

Таблица (со строкой заголовка)
Строки проекта
Строки сотрудника

Это могут быть либо отдельные компоненты, либо просто вложенные функции, что-то вроде этого:

 <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>

1. Я думаю, сделайте это, проверив, равен ли в индексе цикла 0 или нет, а затем отобразите имя условно : { index === 0 ? p.name : null} . Это выглядело бы чище, imo.

2. @c0m1t Это еще один допустимый вариант, хотя это немного усложняет добавление пустой строки после каждого проекта. Я лично считаю, что этот способ более гибкий, но это определенно еще один хороший способ сделать это.

3. Да, это просто личные предпочтения. Вы можете добавить пустую строку вне внутреннего цикла и внутри фрагмента, чтобы, я полагаю, это не добавляло сложности. Также вы можете использовать colspan вместо записи несколько пустых td элементов. <tr><td colspan={3}/></tr> .

4. @c0m1t хотите показать свое решение? Было бы здорово!

Ответ №2:

Этот ответ основан на ответе DBS с некоторыми изменениями:

         <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}>amp;nbsp;</td>
                  </tr>
                )}
              </Fragment>
            );
          })}
        </tbody>
      </table>

Ссылка на Codesandbox