Create mobile contact layout from listview in React Listview component
28 Mar 202310 minutes to read
You can customize the ListView using the template property. Refer to the following steps to customize ListView as 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 codes.
let dataSource = [ { text: "Jenifer", contact: "(206) 555-985774", id: "1", avatar: "", pic: "pic01" }, { text: "Amenda", contact: "(206) 555-3412", id: "2", avatar: "A", pic: "" } ];
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 codes, medium size avatar has been set using the class namee-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> ); }
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-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 know more about avatar classes, refer to Avatar.
-
Sort the contact names using the
sortOder
property of ListView. -
Enable the
showHeader
property, and set theheaderTitle
asContacts
.
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 = [
{ 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'));