Создание таблицы с использованием материала интерфейса

Question

У меня есть набор данных Dynami c, например:

a=[{name:'test',values['a','b','c']},{name:'test2',values['a1','b1','c1']}]

, и я хочу построить таблицу Dynami c, для этого случая:

test   test2
a        a1
b        b1
c        c1

с использованием материала UI,

      <Table className={classes.table} aria-label="simple table">
        <TableHead>
          <TableRow>
            {a.map((header, index) => (
              <TableCell align="right" key={index}>{header.name}</TableCell>
            ))}
          </TableRow>
        </TableHead>
        <TableBody>
          {submissions.map((column, index) => {
            return a.inputData.map((row, index) => {
              return (
                <TableRow key={index}>
                  <TableCell align="right">{row}</TableCell>
                </TableRow>
              );
            });
          })}
        </TableBody>
      </Table>

но я не могу найти решение, это лучшее, что я получил, у кого-нибудь есть идея?

Answer 1

Учитывая ваше описание набора данных, это может быть возможным решением:

<Table>
  <TableHead>
    <TableRow>
      {a.map((column, index) => (
        <TableCell key={index}>{column.name}</TableCell>
      ))}
    </TableRow>
  </TableHead>
  <TableBody>
    {a[0].values.map((_, rowIndex) => (
      <TableRow key={rowIndex}>
        {a.map((row, colIndex) => (
          <TableCell key={colIndex}>
            {row.values[rowIndex]}
          </TableCell>
        ))}
      </TableRow>
    ))}
  </TableBody>
</Table>

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

В основном для каждого ряда требуется число ожидаемых значений из длины списка значения первого элемента в вашем наборе данных. Это кажется мне очень подозрительным и, скорее всего, недостатком вашей концепции. Таблицы основаны на строках, а количество строк должно соответствовать количеству записей в вашем списке.