(Apache) [закрытая] программа изящного форматирования Журнала ошибок

Что вы пытались достичь?

1. Вам необходимо добавить изображение в список данных, например, (см. замороженный йогурт):

state = {
    order: "asc",
    orderBy: "calories",
    selected: [],
    data: [
      createData("Cupcake", 305, 3.7, 67, 4.3),
      createData("Donut", 452, 25.0, 51, 4.9),
      createData("Eclair", 262, 16.0, 24, 6.0),
      createData("Frozen yoghurt", 159, 6.0, 24, 4.0, "http://images6.fanpop.com/image/photos/38900000/-Frozen-Yoghurt-frozen-yogurt-38904380-289-300.jpg"),
      createData("Gingerbread", 356, 16.0, 49, 3.9),
      createData("Honeycomb", 408, 3.2, 87, 6.5),
      createData("Ice cream sandwich", 237, 9.0, 37, 4.3),
      createData("Jelly Bean", 375, 0.0, 94, 0.0),
      createData("KitKat", 518, 26.0, 65, 7.0),
      createData("Lollipop", 392, 0.2, 98, 0.0),
      createData("Marshmallow", 318, 0, 81, 2.0),
      createData("Nougat", 360, 19.0, 9, 37.0),
      createData("Oreo", 437, 18.0, 63, 4.0)
    ],
    page: 0,
    rowsPerPage: 5
  };

2. Вам нужно настроить функцию createData (добавлено img):

function createData(name, calories, fat, carbs, protein, img) {
  counter += 1;
  return { id: counter, name, calories, fat, carbs, protein, img };
}

3. Вам нужно чтобы добавить столбец в заголовок таблицы:

const rows = [
  {
    id: "name",
    numeric: false,
    disablePadding: true,
    label: "Dessert (100g serving)"
  },
  { id: "calories", numeric: true, disablePadding: false, label: "Calories" },
  { id: "fat", numeric: true, disablePadding: false, label: "Fat (g)" },
  { id: "carbs", numeric: true, disablePadding: false, label: "Carbs (g)" },
  { id: "protein", numeric: true, disablePadding: false, label: "Protein (g)" },
  { id: "img", numeric: true, disablePadding: false, label: "Img" }
];

(Кстати, это столбцы, а не строки.:))

4. Вам необходимо отобразить данные в содержание вашей таблицы:

<TableRow
                      hover
                      onClick={event => this.handleClick(event, n.id)}
                      role="checkbox"
                      aria-checked={isSelected}
                      tabIndex={-1}
                      key={n.id}
                      selected={isSelected}
                    >
                      <TableCell padding="checkbox">
                        <Checkbox checked={isSelected} />
                      </TableCell>
                      <TableCell component="th" scope="row" padding="none">
                        {n.name}
                      </TableCell>
                      <TableCell align="right">{n.calories}</TableCell>
                      <TableCell align="right">{n.fat}</TableCell>
                      <TableCell align="right">{n.carbs}</TableCell>
                      <TableCell align="right">{n.protein}</TableCell>
                      <TableCell align="right"><img src={n.img} alt={n.name} width="50" /></TableCell>
                    </TableRow>

И это все ..