Как добавить изображения в ячейку таблицы? - PullRequest
Новая
       6

Как добавить изображения в ячейку таблицы?

0 голосов
/ 19 января 2019

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

https://codesandbox.io/s/wkqjxk38z7

1 Ответ

0 голосов
/ 19 января 2019

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

  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
  };
Вам необходимо настроить функцию createData (добавлено img): 
function createData(name, calories, fat, carbs, protein, img) {
  counter += 1;
  return { id: counter, name, calories, fat, carbs, protein, img };
}
Вам необходимо добавить столбец в заголовок таблицы: 
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" }
];

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

Вам необходимо отобразить данные в содержании вашей таблицы: 
<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>

И это все ..

...