Breaking News: Grepper is joining You.com. Read the official announcement!

material ui picture in data grid

Pleasant Pheasant answered on July 30, 2022 Popularity 1/10 Helpfulness 1/10

answer material ui picture in data grid

material ui picture in data grid

Comment

import React from "react";
import { DataGrid } from "@mui/x-data-grid";
import Avatar from "@mui/material/Avatar";

export default function UserList() {
  const columns = [
    { field: "id", headerName: "ID", width: 70 },
    {
      field: "user",
      headerName: "User",
      width: 200,
      renderCell: (params) => {
        console.log(params);
        return (
          <>
            <Avatar src={params.value.avatar} />
            {params.value.username}
          </>
        );
      }
    },
    { field: "email", headerName: "E-mail", width: 130 },
    {
      field: "status",
      headerName: "Status",
      width: 90
    },
    {
      field: "transaction",
      headerName: "Transaction",
      width: 100
    }
  ];

  const rows = [
    {
      id: 1,
      user: {
        username: "Harry Potter",
        avatar:
          "https://assets.materialup.com/uploads/bebad102-7f40-4941-99cd-54366113003e/avatar-08.png"
      },
      email: "Harry@gmail.com",
      status: "Active",
      transaction: "$120"
    }
  ];

  return (
    <>
      <DataGrid
        autoHeight
        rows={rows}
        columns={columns}
        pageSize={5}
        rowsPerPageOptions={[5]}
        checkboxSelection
      />
    </>
  );
}

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: stackoverflow.com

Tags: grid javascript material-ui

Link to this answer
Share Copy Link