Create mobile contact layout in React ListView component

23 Jan 202512 minutes to read

You can customize the ListView using the template property. Refer to the following steps to customize ListView as a mobile contact view with our ej2-avatar.

Render the ListView with dataSource that has avatar data. You can set avatar data as either text or class names. Refer to the following code:

 let dataSource = [
  {
    text: "Jenifer", contact: "(206) 555-985774", id: "1", avatar: "", pic: "pic01"
  },
  {
    text: "Amenda", contact: "(206) 555-3412", id: "2", avatar: "A", pic: ""
 }
];

Set avatar classes in ListView template to customize contact icon. In the following code, medium size avatar has been set using the class name e-avatar e-avatar-circle from data source.

 function listTemplate(data): JSX.Element {
  let letterAvatar = <span className='e-avatar e-avatar-circle'>{data.avatar}</span>
  let imageAvatar = <span className={`${data.pic} e-avatar e-avatar-circle`}></span>

   return (
      <div className='e-list-wrapper e-list-multi-line e-list-avatar'>
          {data.avatar !== "" ? (letterAvatar) : (imageAvatar)}
          <span className="e-list-content">{data.contact}</span>
      </div>
  );
}

Avatars can be set in different sizes in avatar classes. To learn more about avatar classes, refer to Avatar.

Sort the contact names using the sortOrder property of the ListView.
Enable the showHeader property, and set the headerTitle as Contacts.

index.jsx
index.tsx
index.css
index.html
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
import './index.css';

function App() {
    //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: 'Jenifer', pic: 'pic01', avatar: '' },
        { id: 's_03', text: 'Andrew', avatar: 'A', pic: '' },
        { id: 's_06', text: 'Margaret', pic: 'pic02', avatar: '' },
        { id: 's_07', text: 'Steven', pic: 'pic03', avatar: '' },
        { id: 's_08', text: 'Michael', avatar: 'M', pic: '' }
    ];
    let fields = { text: "Name" };
    function listTemplate(data) {
        let letterAvatar = <span className='e-avatar e-avatar-circle'>{data.avatar}</span>;
        let imageAvatar = <span className={`${data.pic} e-avatar e-avatar-circle`}></span>;
        return (<div className='e-list-wrapper e-list-avatar'>
            {data.avatar !== "" ? (letterAvatar) : (imageAvatar)}
            <span className="e-list-content">{data.text}</span>
        </div>);
    }
    return (<div>
        {/* ListView element */}
        <ListViewComponent id='list' dataSource={data} headerTitle='Contacts' showHeader={true} sortOrder="Ascending" width='350px' template={listTemplate} fields={fields} cssClass='e-list-template'></ListViewComponent>
    </div>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { ListViewComponent } from '@syncfusion/ej2-react-lists';

function App() {
    //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: 'Jenifer', pic: 'pic01', avatar: '' },
        { id: 's_03', text: 'Andrew', avatar: 'A', pic: '' },
        { id: 's_06', text: 'Margaret', pic: 'pic02', avatar: '' },
        { id: 's_07', text: 'Steven', pic: 'pic03', avatar: '' },
        { id: 's_08', text: 'Michael', avatar: 'M', pic: '' }
    ];

    let fields: any = { text: "Name" };

    function listTemplate(data: any): JSX.Element {
        let letterAvatar = <span className='e-avatar e-avatar-circle'>{data.avatar}</span>
        let imageAvatar = <span className={`${data.pic} e-avatar e-avatar-circle`}></span>

        return (
            <div className='e-list-wrapper e-list-avatar'>
                {data.avatar !== "" ? (letterAvatar) : (imageAvatar)}
                <span className="e-list-content">{data.text}</span>
            </div>
        );
    }

    return (
        <div>
            {/* ListView element */}
            <ListViewComponent id='list' dataSource={data} headerTitle='Contacts' showHeader={true}
                sortOrder="Ascending" width='350px' template={listTemplate as any}
                fields={fields as any} cssClass='e-list-template'></ListViewComponent>
        </div>

    );
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));
#container {
  visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  width: 30%;
  position: absolute;
  font-family: 'Helvetica Neue', 'calibiri';
  font-size: 14px;
  top: 45%;
  left: 45%;
}

#list {
  margin: 0 auto;
  font-size: 15px;
  border: 1px solid #ccc;
}

.pic01 {
  background-image: url("https://ej2.syncfusion.com/demos/src/grid/images/1.png");
}

.pic02 {
  background-image: url("https://ej2.syncfusion.com/demos/src/grid/images/3.png");
}

.pic03 {
  background-image: url("https://ej2.syncfusion.com/demos/src/grid/images/5.png");
}

.pic04 {
  background-image: url("https://ej2.syncfusion.com/demos/src/grid/images/2.png");
}

#list .e-list-item:nth-child(1) .e-avatar {
  background-color: #039be5;
}

#list .e-list-item:nth-child(2) .e-avatar {
  background-color: #e91e63;
}

#list .e-list-item:nth-child(6) .e-avatar {
  background-color: #009688;
}

#list .e-list-item:nth-child(8) .e-avatar {
  background-color: #0088;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React ListView</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/30.1.37/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-react-lists/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-layouts/styles/material.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='element' style="margin:0 auto; max-width:400px;">
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>