Material UI : Place the avatar and text next to each other in the first column of the table

Question

I have this project and there is this interface in it, and as it appears in the picture in the first column I want the user name to be placed with the user’s picture and next to some, but as it appears in the picture, the user’s name is placed and the user’s picture is above it.

How can I solve this problem?

And this is a file in which the table is designed and the head and body are passed.

import React from 'react';
import {makeStyles} from '@material-ui/core/styles';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableContainer from '@material-ui/core/TableContainer';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';
import Card from '@material-ui/core/Card';
import Box from '@material-ui/core/Box';
import Avatar from '@material-ui/core/Avatar';

const useStyles = makeStyles({
    table: {
        minWidth: 640
    },
});

function createData(name: string, email: string, role: string, settings: number) {
    return {name, email, role, settings};
}

const rows = [
    createData('Frozen yoghurt', 'hhhhhh', 'kjhi', 24),
    createData('Frozen yoghurt', 'hhhhhh', 'kjhi', 24),
    createData('Frozen yoghurt', 'hhhhhh', 'kjhi', 24),
    createData('Frozen yoghurt', 'hhhhhh', 'kjhi', 24),
    createData('Frozen yoghurt', 'hhhhhh', 'kjhi', 24),
];

export default function BasicTable() {
    const classes = useStyles();

    return (
        <Card>

                <TableContainer component={Paper}>
                    <Box sx={{ p:5 }}>
                    <Table className={classes.table} aria-label="simple table">
                        <TableHead>
                            <TableRow >
                                <TableCell style={{fontSize:'1.3rem'}}>NAME</TableCell>
                                <TableCell  style={{fontSize:'1.3rem'}} align="left">EMAIL</TableCell>
                                <TableCell  style={{fontSize:'1.3rem'}} align="center">ROLE</TableCell>
                                <TableCell  style={{fontSize:'1.3rem'}} align="right">SETTINGS</TableCell>
                            </TableRow>
                        </TableHead>
                        <TableBody>
                            {rows.map((row) => (
                                <TableRow style={{fontSize: '4rem'}} key={row.name}>

                                        <TableCell   align="left" component="th" scope="row">
                                            <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
                                            {row.name}
                                        </TableCell>


                                    {/*<TableCell align="right">{row.name}</TableCell>*/}
                                    <TableCell align="left">{row.email}</TableCell>
                                    <TableCell align="center">{row.role}</TableCell>
                                    <TableCell align="right">{row.settings}</TableCell>
                                </TableRow>
                            ))}
                        </TableBody>
                    </Table>
                    </Box>
                </TableContainer>


        </Card>

    );
}

Answer 1

Let the CardHeader component handle this for you. Simply put this component in the first TableCell.

<CardHeader
  avatar={
    <Avatar
      alt="Remy Sharp"
      src="/static/images/avatar/1.jpg"
    />
  }
  title={row.name}
/>

Output: