Как вывести вложенные данные в виде таблицы с объединёнными ячейками?

Question

[Влад]

Есть массив следующего вида:

"clouds": [{
      "cloud": "cloud",
      "shards": [{
          "repository_size_gb": 3071,
          "repository": "VBR",
          "jobs": [{
              "job": "VBR1",
              "job_description": "Каждый день инкремент, хранить 6 точек",
              "backup_name": "VBR-NORD-152-Getblogger01",
              "backup_size_gb": 616,
            },{
              "job": "VBR2",
              "job_description": "Каждый день инкремент, хранить 6 точек",
              "backup_name": "VBR-NORD-152-Getblogger01",
              "backup_size_gb": 616,
            },{
              "job": "VBR3",
              "job_description": "Каждый день инкремент, хранить 6 точек",
              "backup_name": "VBR-NORD-152-Getblogger01",
              "backup_size_gb": 616,
            }]
        }]
    }]

Надо отобразить его содержимое в виде таблицы:


Всё, что пришло в голову на данный момент - это:

return (
  <table>
    <tbody>
      <tr>
        {header.map((el, i) => <th key={i}> <FormattedMessage id={el.title}/> </th>)}
      </tr>
    </tbody>
    <tbody>
      {this.props['vmBackup'].map((el, i) => (
        <tr key={i}>
          {header.map((col, j) => (
            <td className={col.right ? cellClsRight : cellCls} key={i + ':' + j}>
              <span> {el[col.col]} </span>
            </td>
          ))}
        </tr>
      ))}
    </tbody>
  </table>
)

И выводится:

Comments

[theuser]

rowspan в помощь

[Влад]

theuser, как вывести данные в таблицу

[Андрей]

Структуру стоит описать отдельно, а поля и строки отдельно.

1. Описать для каждого типа поля свой рендер
2. Описать в структуре строки поля, как то
2.1. название поля
2.2. тип поля (см. п. 1)
2.3. лейбл поля
2.4. ширину поля

данные формировать соответственно структуре из п. 2

далее все просто - отрисовываешь шапку используя ширину и лейбл, можно еще центровку от типа сделать
проходишь циклом по строкам данных, внутри циклом по структуре, получаешь тип поля, из строки данных достаешь по названию поля значение, и вызываешь рендерер соответстующего типа. профит.

если сильно надо заморочиться с пагинацией, сортировками и пр., то это, разумеется, достаточно обширное повествование, не для тостера. :)

Answer 1

[0xD34F]

Вариант раз - для обработки каждого из уровней вложенности пишем отдельный цикл, объединённые ячейки создаются в зависимости от равенства индексов элементов вложенных массивов нулю:

const tableData = useMemo(() => (
  DATA.flatMap(({ cloud, shards }) =>
  shards.flatMap((shard, iShard) =>
  shard.jobs.map((job, iJob) => [
    {
      rowspan: !iShard && !iJob && shards.reduce((acc, n) => acc + n.jobs.length, 0),
      text: cloud,
    },
    {
      rowspan: !iJob && shard.jobs.length,
      text: shard.repository,
    },
    {
      rowspan: !iJob && shard.jobs.length,
      text: shard.repository_size_gb,
    },
    { text: job.job },
    { text: job.job_description },
    { text: job.backup_name },
    { text: job.backup_size_gb },
  ])))
), [ DATA ]);

<tbody>{tableData.map(row => (
  <tr>{row.map(({ text, rowspan }) => (rowspan !== false &&
    <td rowSpan={rowspan}>
      {text}
    </td>))}
  </tr>))}
</tbody>

Вариант два - в описания столбцов, после которых строка таблицы должна разделиться, добавляем свойство, указывающее откуда брать вложенные данные, получаем их посредством рекурсии:

const tableData = useMemo(() => (
  (function createTableData(arr, iCol) {
    return arr.flatMap(n => {
      const row = [];

      for (let i = iCol; i < HEADERS.length; i++) {
        const header = HEADERS[i];

        row.push({ text: n[header.key] });

        if (header.split) {
          const innerRows = createTableData(n[header.split], i + 1);
          row.forEach(cell => cell.rowspan = innerRows.length);
          return [ row.concat(innerRows.shift()), ...innerRows ];
        }
      }

      return [ row ];
    });
  })(DATA, 0)
), [ DATA, HEADERS ]);

<tbody>{tableData.map(row => (
  <tr>{row.map(({ text, rowspan }) => (
    <td rowSpan={rowspan}>
      {text}
    </td>))}
  </tr>))}
</tbody>

Answer 2

[Mikhail Osher]

- напишите функцию, которая перегонит данную структуру в нормальную матрицу
- отрендерите простую таблицу без лишней логики
- оберните транфсормацию в useMemo, если будут проседания по производительности (optional)

Посыл в том, что UI layer не должен страдать из-за того, что данные не в том формате.

Comments

[Влад]

Спасибо, попробуем. А можно как-то обойтись без первого пункта?

[Mikhail Osher]

Влад, можно, только если не использовать таблицы. А, например, css grid или css flex. При использовании таблицы 100% придётся возиться с данными.

Answer 3

[szubtsovskiy]

Вам поможет rowSpan. В примере я засунул данные в state, но вы продолжайте брать из props:

render() {
    return (
      <table>
        <tbody>
          <tr>
            {new Array(8).fill(0).map((el, i) => <th key={i}>TEXT</th>)}
          </tr>
        </tbody>
        <tbody>
          {this.state['vmBackup']['clouds'].flatMap(cloud => {
            return cloud.shards.map(shard => {
              const jobCount = shard['jobs'].length;
              return shard['jobs'].map((job, i) => {
                if (i == 0) {
                  return (
                    <tr key={i}>
                      <td rowSpan={jobCount}>{cloud['cloud']}</td>
                      <td rowSpan={jobCount}>{shard['repository']}</td>
                      <td rowSpan={jobCount}>{shard['repository_size_gb']}</td>
                      <td>{job['job']}</td>
                      <td>{job['job_description']}</td>
                      <td>{job['backup_name']}</td>
                      <td>{job['backup_size_gb']}</td>
                      <td>5</td>
                    </tr>
                  )
                } else {
                  return (
                    <tr key={i}>
                      <td>{job['job']}</td>
                      <td>{job['job_description']}</td>
                      <td>{job['backup_name']}</td>
                      <td>{job['backup_size_gb']}</td>
                      <td>5</td>
                    </tr>
                  )
                }              	
              })
            })
          })}
        </tbody>
      </table>
    )
  }

Comments

[Амир Алимжанов]

<thead>

Answer 4

[Mikhail Rerberg]

Можно воспользоваться <template>. Создаете 'компонент', потом уже с помощью js подставляете данные

Answer 5

[AShvejnov]

Есть куча готовых jQuery плагинов/компонентов, которые рисуют всевозможные таблички. Большинство из них как раз на входе умеют принимать данные в JSON-е, то бишь, в виде массива как у вас. Поищите просто наиболее подходящее готовое решение (гугл -> "jQuery data grids") и не тратьте время на изобретение велосипеда.