Integrate Avatar into ListView in React Avatar component
7 Oct 202511 minutes to read
The Avatar component seamlessly integrates with ListView to create rich, visually appealing list interfaces commonly used in contact applications, user directories, and messaging platforms. This integration enhances the user experience by providing immediate visual identification of list items through profile images, initials, or icons.
The xsmall Avatar size provides the ideal balance between visual impact and space efficiency within ListView items. This sizing ensures consistent alignment with text content and maintains the overall list structure without overwhelming the interface.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
import "./index.css";
function ReactApp() {
//Define an array of JSON data
let data = [
{ id: 's_01', text: 'Robert', avatar: '', pic: 'pic04' },
{ id: 's_02', text: 'Nancy', avatar: 'N', pic: '' },
{ id: 's_05', text: 'John', pic: 'pic01', avatar: '' },
{ id: 's_03', text: 'Andrew', avatar: 'A', pic: '' },
{ id: 's_06', text: 'Margaret', avatar: 'M', pic: 'pic02' },
{ id: 's_07', text: 'Steven', pic: 'pic03', avatar: '' },
{ id: 's_08', text: 'Michael', pic: 'pic02', avatar: '' }
];
function template(data) {
let letterAvatar = <span className='e-avatar e-avatar-small e-avatar-circle'>{data.avatar}</span>;
let imageAvatar = <span className={`${data.pic} e-avatar e-avatar-small e-avatar-circle`}></span>;
return (<div className='listWrapper'>
{data.avatar !== "" ? (letterAvatar) : (imageAvatar)}
<span className='text'>{data.text}</span>
</div>);
}
return (<div>
<div className="sample_container listview">
{/* ListView element */}
<ListViewComponent cssClass='letterAvatarList' dataSource={data} headerTitle='Contacts' showHeader={true} sortOrder="Ascending" template={template}></ListViewComponent>
</div>
</div>);
}
export default ReactApp;
ReactDOM.render(<ReactApp />, document.getElementById("element"));import * as React from "react";
import * as ReactDOM from "react-dom";
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
function ReactApp() {
//Define an array of JSON data
let data: { [key: string]: Object }[] = [
{ id: 's_01', text: 'Robert', avatar: '', pic: 'pic04' },
{ id: 's_02', text: 'Nancy', avatar: 'N', pic: '' },
{ id: 's_05', text: 'John', pic: 'pic01', avatar: '' },
{ id: 's_03', text: 'Andrew', avatar: 'A', pic: '' },
{ id: 's_06', text: 'Margaret', avatar: 'M', pic: 'pic02' },
{ id: 's_07', text: 'Steven', pic: 'pic03', avatar: '' },
{ id: 's_08', text: 'Michael', pic: 'pic02', avatar: '' }
];
function template(data: any): JSX.Element {
let letterAvatar = <span className='e-avatar e-avatar-small e-avatar-circle'>{data.avatar}</span>
let imageAvatar = <span className={`${data.pic} e-avatar e-avatar-small e-avatar-circle`}></span>
return (
<div className='listWrapper'>
{data.avatar !== "" ? (letterAvatar) : (imageAvatar)}
<span className='text'>{data.text}</span>
</div>
);
}
return (
<div>
<div className="sample_container listview">
{/* ListView element */}
<ListViewComponent cssClass='letterAvatarList' dataSource={data} headerTitle='Contacts' showHeader={true}
sortOrder="Ascending" template={template as any}></ListViewComponent>
</div>
</div>
);
}
export default ReactApp;
ReactDOM.render(<ReactApp/>, document.getElementById("element"));<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion EJ2 React Avatar Sample</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-layouts/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-lists/styles/material.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<link rel="stylesheet" href="index.css">
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='element'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
width: 30%;
position: absolute;
font-family: 'Helvetica Neue','calibiri';
font-size: 14px;
top: 45%;
left: 45%;
}
#element {
width: 400px;
margin: auto;
border-radius: 3px;
justify-content: center;
}
/* Listview Customization */
.letterAvatarList {
max-width: 350px;
margin: auto;
border: 1px solid #dddddd;
border-radius: 3px;
}
.letterAvatarList .listWrapper {
width: inherit;
height: inherit;
position: relative;
}
.letterAvatarList .e-list-header {
height: 54px;
}
.e-listview:not(.e-list-template) .e-list-item {
cursor: pointer;
height: 50px;
line-height: 50px;
border: 0;
}
/* Badge Positioning */
.letterAvatarList .e-badge {
margin-top: 12px;
}
.letterAvatarList .listWrapper .text {
width: 60%;
display: inline-block;
vertical-align: middle;
margin: 0 50px;
}
/* Avatar Positioning */
.letterAvatarList .listWrapper .e-avatar {
position: absolute;
top: calc(100% - 40px);
font-size: 10px;
left: 5px;
}
/* Avatar Background Customization */
.letterAvatarList .e-list-item:nth-child(1) .e-avatar {
background-color: #039BE5;
}
.letterAvatarList .e-list-item:nth-child(3) .e-avatar {
background-color: #E91E63;
}
.letterAvatarList .e-list-item:nth-child(5) .e-avatar {
background-color: #009688;
}
/* Avatar images using 'background-image' property */
.pic01 {
background-image: url(https://ej2.syncfusion.com/demos/src/grid/images/2.png);
}
.pic02 {
background-image: url(https://ej2.syncfusion.com/demos/src/grid/images/5.png);
}
.pic03 {
background-image: url(https://ej2.syncfusion.com/demos/src/grid/images/7.png);
}
.pic04 {
background-image: url(https://ej2.syncfusion.com/demos/src/grid/images/6.png);
}