Как распечатать сетку данных Mui с изображением внутри renderCell

Question

Я использую сетку данных Mui для отображения данных с помощью renderCell. Я хочу распечатать свою сетку данных и увидеть изображение из первого renderCell.

          const columns: GridColDef[] = [
    {
        field: 'picture',
        headerName: 'Picture',
        flex: 1,
        headerAlign: 'center',
        align: 'center',        
        renderCell: (params) => <Box component="img"
            sx={{
                height: 56,
                width: 56,
            }}
            src={params.value}
        />,
    },
    {
        field: 'id',
        headerName: 'ID',
        flex: 1,
        headerAlign: 'center',
        align: 'center',
    }
];

Я не нашел ни одного поста, показывающего, как это сделать.

Answer 1

добавьте следующее поле

      {
  field: "print",
  headerName: "Print",
  headerAlign: "center",
  align: "center",
  flex: 1,
  renderCell: ({ row }) => {
    return (
      <Box>
        <Tooltip color="success" title="View Calendar Info" arrow>
          <Button onClick={() => handlePrint(row)}>
           <Print/>
          </Button>
        </Tooltip>
      </Box>
    );
  },
},

Затем определите функцию, которая получает данные из строки, и, наконец, распечатайте нужные данные... если вы хотите реализоватьhandlePrint()свяжитесь со мной