The ListView component is designed to customize list items, group title and header title.
The ListView header can be customized with the help of headerTemplate
property.
To customize header template in your application, Declare a custom react elements within the function which returns JSX.Element
and assign it to headerTemplate
property along with showHeader
property as true
to display the ListView header.
headerTemplate(data): JSX.Element {
return (
<div className="header-content">
<span>Header</span>
</div>
)};
render() {
return (
<ListViewComponent id='list'
dataSource={this.listData}
headerTemplate= {this.headerTemplate}
showHeader = {true} >
</ListViewComponent>
)
}
headerTemplate(data);
JSX.Element;
{
return (<div className="header-content">
<span>Header</span>
</div>);
}
;
render();
{
return (<ListViewComponent id='list' dataSource={this.listData} headerTemplate={this.headerTemplate} showHeader={true}>
</ListViewComponent>);
}
In the below example, we have rendered Listview with customized header which contains search, add and sort buttons.
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
export default class App extends React.Component {
constructor() {
super(...arguments);
//Define an array of JSON data
this.fruitsData = [
{ text: 'Date', id: '1', imgUrl: './dates.jpg' },
{ text: 'Fig', id: '2', imgUrl: './fig.jpg' },
{ text: 'Apple', id: '3', imgUrl: './apple.png' },
{ text: 'Apricot', id: '4', imgUrl: './apricot.jpg' },
{ text: 'Grape', id: '5', imgUrl: './grape.jpg' },
{ text: 'Strawberry', id: '6', imgUrl: './strawberry.jpg' },
{ text: 'Pineapple', id: '7', imgUrl: './pineapple.jpg' },
{ text: 'Melon', id: '8', imgUrl: './melon.jpg' },
{ text: 'Lemon', id: '9', imgUrl: './lemon.jpg' },
{ text: 'Cherry', id: '10', imgUrl: './cherry.jpg' },
];
}
headerTemplate(data) {
return (<div className="headerContainer">
<span className="fruitHeader">Fruits</span>
<ButtonComponent id="search" cssClass="e-small e-round" isPrimary={true} iconCss="e-icons e-search-icon"/>
<ButtonComponent id="add" cssClass="e-small e-round" isPrimary={true} iconCss="e-icons e-add-icon"/>
<ButtonComponent id="sort" cssClass="e-small e-round" isPrimary={true} iconCss="e-icons e-sort-icon"/>
</div>);
}
render() {
return (<ListViewComponent id="list" dataSource={this.fruitsData} showHeader={true} headerTemplate={this.headerTemplate}/>);
}
}
ReactDOM.render(<App />, document.getElementById('element'));
<!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="//cdn.syncfusion.com/ej2/20.1.55/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-react-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-react-buttons/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>
</head>
<body>
<div id='element'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
#loader {
color: #008cff;
height: 40px;
width: 30%;
position: absolute;
font-family: 'Helvetica Neue','calibiri';
font-size: 14px;
top: 45%;
left: 45%;
}
#list {
display: block;
max-width: 353px;
margin: auto;
border: 1px solid #dddddd;
border-radius: 3px;
}
#list .e-list-header {
padding: 0;
}
#list .headerContainer {
width: 350px;
height: 48px;
line-height: 48px;
background: rgb(2, 120, 215);
color: white;
margin-bottom: 3px;
}
.headerContainer .fruitHeader {
margin-left: 20px;
font-weight: 500;
font-size: 22px;
}
.headerContainer #add,
.headerContainer #sort,
.headerContainer #search {
float: right;
margin-right: 15px;
margin-top: 7px;
background: white;
color: black
}
.headerContainer .e-search-icon::before {
content: '\e961';
color: lightslategray;
}
.headerContainer .e-add-icon::before {
content: '\e823';
}
.headerContainer .e-sort-icon::before {
content: '\e840';
}
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
export default class App extends React.Component<{}, {}> {
//Define an array of JSON data
public fruitsData: { [key: string]: Object }[] = [
{ text: 'Date', id: '1', imgUrl: './dates.jpg' },
{ text: 'Fig', id: '2', imgUrl: './fig.jpg' },
{ text: 'Apple', id: '3', imgUrl: './apple.png' },
{ text: 'Apricot', id: '4', imgUrl: './apricot.jpg' },
{ text: 'Grape', id: '5', imgUrl: './grape.jpg' },
{ text: 'Strawberry', id: '6', imgUrl: './strawberry.jpg' },
{ text: 'Pineapple', id: '7', imgUrl: './pineapple.jpg' },
{ text: 'Melon', id: '8', imgUrl: './melon.jpg' },
{ text: 'Lemon', id: '9', imgUrl: './lemon.jpg' },
{ text: 'Cherry', id: '10', imgUrl: './cherry.jpg' },
];
headerTemplate(data: any): JSX.Element {
return (
<div className="headerContainer">
<span className="fruitHeader">Fruits</span>
<ButtonComponent
id="search"
cssClass="e-small e-round"
isPrimary={true}
iconCss="e-icons e-search-icon"
/>
<ButtonComponent
id="add"
cssClass="e-small e-round"
isPrimary={true}
iconCss="e-icons e-add-icon"
/>
<ButtonComponent
id="sort"
cssClass="e-small e-round"
isPrimary={true}
iconCss="e-icons e-sort-icon"
/>
</div>
);
}
render() {
return (
<ListViewComponent
id="list"
dataSource={this.fruitsData}
showHeader={true}
headerTemplate={this.headerTemplate as any}
/>
);
}
}
ReactDOM.render(<App />, document.getElementById('element'));
The ListView items can be customized with the help of template
property.
To customize list items in your application, Declare a custom react elements within the function which returns JSX.Element
and assign it to template
property.
template(data): JSX.Element {
return (
<div className="list-tem">
<span>{data.text}</span>
</div>
)};
render() {
return (
<ListViewComponent id='list'
dataSource={this.listData}
template= {this.template} >
</ListViewComponent>
)
}
template(data);
JSX.Element;
{
return (<div className="list-tem">
<span>{data.text}</span>
</div>);
}
;
render();
{
return (<ListViewComponent id='list' dataSource={this.listData} template={this.template}>
</ListViewComponent>);
}
We provided the following built-in CSS classes to customize the list-items. Refer to the following table.
CSS class | Description |
---|---|
e-list-template, e-list-wrapper | These classes are used to differentiate normal and template rendering, which are mandatory for template rendering. The e-list-template class should be added to the root of the ListView element and e-list-wrapper class should be added to the template element wrapper <ListViewComponent cssClass="e-list-template" template={this.template}> </ListViewComponent> template(data): JSX.Element { return ( <div className="e-list-wrapper"></div> )}; |
e-list-content | This class is used to align list content and it should be added to the content element template(data): JSX.Element { return ( <div className="e-list-wrapper"> <span className="e-list-content">ListItem</span> </div> )}; |
e-list-avatar | This class is used for avatar customization. It should be added to the template element wrapper. After adding it, we can customize our element with Avatar classes template(data): JSX.Element { return ( <div className="e-list-wrapper e-list-avatar"> <span className="e-avatar e-avatar-circle">MR</span> <span className="e-list-content">ListItem</span> </div> )}; |
e-list-avatar-right | This class is used to align avatar to right side of the list item. It should be added to the template element wrapper. After adding it, we can customize our element with Avatar classes <div className="e-list-wrapper``e-list-avatar-right``"> <span className="e-list-content">ListItem</span> <span className="e-avatar e-avatar-circle">MR</span> </div> |
e-list-badge | This class is used for badge customization .It should be added to the template element wrapper. After adding it, we can customize our element with Badge classes template(data): JSX.Element { return ( <div className="e-list-wrapper e-list-avatar-right"> <span className="e-list-content">ListItem</span> <span className="e-avatar e-avatar-circle">MR</span> </div> )}; |
e-list-multi-line | This class is used for multi-line customization. It should be added to the template element wrapper. After adding it, we can customize List item’s header and description template(data): JSX.Element { return ( <div className="e-list-wrapper e-list-multi-line"> <span className="e-list-content">ListItem</span> </div> )}; |
e-list-item-header | This class is used to align a list header and it should be added to the header element along with the multi-line class template(data): JSX.Element { return ( <div className="e-list-wrapper e-list-multi-line"> <span className="e-list-item-header">ListItem Header</span> <span className="e-list-content">ListItem</span> </div> )}; |
Avatar
in ListView templates, we need to add Layouts
component’s styles as given below in src/App.css
file@import "../node_modules/@syncfusion/ej2-layouts/styles/material.css";
In the below example, we have customized list items like Contact
app with our avatar component.
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
export default class App extends React.Component {
constructor() {
super(...arguments);
//Define an array of JSON data
this.data = [
{
text: "Jenifer",
contact: "(206) 555-985774",
id: "1",
avatar: "",
pic: "pic01"
},
{ text: "Amenda", contact: "(206) 555-3412", id: "2", avatar: "A", pic: "" },
{
text: "Isabella",
contact: "(206) 555-8122",
id: "4",
avatar: "",
pic: "pic02"
},
{
text: "William ",
contact: "(206) 555-9482",
id: "5",
avatar: "W",
pic: ""
},
{
text: "Jacob",
contact: "(71) 555-4848",
id: "6",
avatar: "",
pic: "pic04"
},
{ text: "Matthew", contact: "(71) 555-7773", id: "7", avatar: "M", pic: "" },
{
text: "Oliver",
contact: "(71) 555-5598",
id: "8",
avatar: "",
pic: "pic03"
},
{
text: "Charlotte",
contact: "(206) 555-1189",
id: "9",
avatar: "C",
pic: ""
}
];
this.fields = { text: "Name" };
}
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-item-header">{data.text}</span>
<span className="e-list-content">{data.contact}</span>
</div>);
}
render() {
return (<div>
<ListViewComponent id='list' dataSource={this.data} headerTitle='Contacts' showHeader={true} sortOrder="Ascending" width='350px' template={this.listTemplate} fields={this.fields} cssClass='e-list-template'></ListViewComponent>
</div>);
}
}
ReactDOM.render(<App />, document.getElementById('element'));
<!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="//cdn.syncfusion.com/ej2/20.1.55/ej2-react-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/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>
</head>
<body>
<div id='element' style="margin:0 auto; max-width:400px;">
<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%;
}
#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;
}
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
export default class App extends React.Component<{}, {}> {
//Define an array of JSON data
public data: { [key: string]: Object }[] = [
{
text: "Jenifer",
contact: "(206) 555-985774",
id: "1",
avatar: "",
pic: "pic01"
},
{ text: "Amenda", contact: "(206) 555-3412", id: "2", avatar: "A", pic: "" },
{
text: "Isabella",
contact: "(206) 555-8122",
id: "4",
avatar: "",
pic: "pic02"
},
{
text: "William ",
contact: "(206) 555-9482",
id: "5",
avatar: "W",
pic: ""
},
{
text: "Jacob",
contact: "(71) 555-4848",
id: "6",
avatar: "",
pic: "pic04"
},
{ text: "Matthew", contact: "(71) 555-7773", id: "7", avatar: "M", pic: "" },
{
text: "Oliver",
contact: "(71) 555-5598",
id: "8",
avatar: "",
pic: "pic03"
},
{
text: "Charlotte",
contact: "(206) 555-1189",
id: "9",
avatar: "C",
pic: ""
}
];
public fields: any = { text: "Name" };
public 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-multi-line e-list-avatar'>
{data.avatar !== "" ? (letterAvatar) : (imageAvatar)}
<span className="e-list-item-header">{data.text}</span>
<span className="e-list-content">{data.contact}</span>
</div>
);
}
render() {
return (
<div>
<ListViewComponent id='list' dataSource={this.data} headerTitle='Contacts' showHeader={true}
sortOrder="Ascending" width='350px' template={this.listTemplate as any}
fields={this.fields as any} cssClass='e-list-template'></ListViewComponent>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('element'));
The ListView group header can be customized with the help of groupTemplate
property.
To customize the group template in your application, Declare a custom react elements within the function which returns JSX.Element
and assign it to groupTemplate
property.
groupTemplate(data: any): JSX.Element {
return(
<div>
<span className='category'>{data.items[0].category}</span>
<span className="count"> {data.items.length} Item(s)</span>
</div>
);
}
render() {
return (
<ListViewComponent id='list'
dataSource={this.listData}
groupTemplate= {this.groupTemplate} >
</ListViewComponent>
)
}
groupTemplate(data, any);
JSX.Element;
{
return (<div>
<span className='category'>{data.items[0].category}</span>
<span className="count"> {data.items.length} Item(s)</span>
</div>);
}
render();
{
return (<ListViewComponent id='list' dataSource={this.listData} groupTemplate={this.groupTemplate}>
</ListViewComponent>);
}
In the below example, we have grouped Listview based on the category. The category of each list item should be mapped with [groupBy
] field of the data. We have also displayed grouped list items count in the group list header.
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
export default class App extends React.Component {
constructor() {
super(...arguments);
//Define an array of JSON data
this.data = [
{ Name: 'Nancy', contact: '(206) 555-985774', id: '1', image: 'https://ej2.syncfusion.com/demos/src/grid/images/1.png', category: 'Experience' },
{ Name: 'Janet', contact: '(206) 555-3412', id: '2', image: 'https://ej2.syncfusion.com/demos/src/grid/images/3.png', category: 'Fresher' },
{ Name: 'Margaret', contact: '(206) 555-8122', id: '4', image: 'https://ej2.syncfusion.com/demos/src/grid/images/4.png', category: 'Experience' },
{ Name: 'Andrew ', contact: '(206) 555-9482', id: '5', image: 'https://ej2.syncfusion.com/demos/src/grid/images/2.png', category: 'Experience' },
{ Name: 'Steven', contact: '(71) 555-4848', id: '6', image: 'https://ej2.syncfusion.com/demos/src/grid/images/5.png', category: 'Fresher' },
{ Name: 'Michael', contact: '(71) 555-7773', id: '7', image: 'https://ej2.syncfusion.com/demos/src/grid/images/6.png', category: 'Experience' },
{ Name: 'Robert', contact: '(71) 555-5598', id: '8', image: 'https://ej2.syncfusion.com/demos/src/grid/images/7.png', category: 'Fresher' },
{ Name: 'Laura', contact: '(206) 555-1189', id: '9', image: 'https://ej2.syncfusion.com/demos/src/grid/images/8.png', category: 'Experience' },
];
this.fields = { text: 'Name', groupBy: 'category' };
}
//Set customized list template
listTemplate(data) {
return (<div className="e-list-wrapper e-list-multi-line e-list-avatar">
<img className="e-avatar e-avatar-circle" src={data.image}/>
<span className="e-list-item-header">{data.Name}</span>
<span className="e-list-content">{data.contact}</span>
</div>);
}
//Set customized group-header template
groupTemplate(data) {
return (<div>
<span className='category'>{data.items[0].category}</span>
<span className="count"> {data.items.length} Item(s)</span>
</div>);
}
render() {
return (<div>
<ListViewComponent id='list' dataSource={this.data} fields={this.fields} template={this.listTemplate} groupTemplate={this.groupTemplate} width='350px' cssClass='e-list-template'>
</ListViewComponent>
</div>);
}
}
ReactDOM.render(<App />, document.getElementById('element'));
<!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="//cdn.syncfusion.com/ej2/20.1.55/ej2-react-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/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>
</head>
<body>
<div id='element' style="margin:0 auto; max-width:400px;">
<div id='loader'>Loading....</div>
</div>
</body>
</html>
#list {
display: block;
margin: auto;
font-size: 15px;
border: 1px solid;
border-color: #ccc;
border-color: #0000001f;
width: 350px;
}
#list .e-list-group-item {
height: 56px;
line-height: 56px;
}
#list .count {
float: right;
}
#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.e-list-wrapper .e-avatar-circle {
background: #BCBCBC;
}
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
export default class App extends React.Component<{}, {}> {
//Define an array of JSON data
private data: { [key: string]: Object }[] = [
{ Name: 'Nancy', contact:'(206) 555-985774', id: '1', image: 'https://ej2.syncfusion.com/demos/src/grid/images/1.png', category: 'Experience'},
{ Name: 'Janet', contact: '(206) 555-3412', id: '2', image: 'https://ej2.syncfusion.com/demos/src/grid/images/3.png', category: 'Fresher' },
{ Name: 'Margaret', contact:'(206) 555-8122', id:'4', image: 'https://ej2.syncfusion.com/demos/src/grid/images/4.png', category: 'Experience' },
{ Name: 'Andrew ', contact:'(206) 555-9482', id: '5', image: 'https://ej2.syncfusion.com/demos/src/grid/images/2.png', category: 'Experience'},
{ Name: 'Steven', contact:'(71) 555-4848', id: '6', image: 'https://ej2.syncfusion.com/demos/src/grid/images/5.png', category: 'Fresher' },
{ Name: 'Michael', contact:'(71) 555-7773', id: '7', image: 'https://ej2.syncfusion.com/demos/src/grid/images/6.png', category: 'Experience' },
{ Name: 'Robert', contact:'(71) 555-5598', id: '8', image: 'https://ej2.syncfusion.com/demos/src/grid/images/7.png', category: 'Fresher' },
{ Name: 'Laura', contact:'(206) 555-1189', id: '9', image: 'https://ej2.syncfusion.com/demos/src/grid/images/8.png', category: 'Experience' },
];
private fields: object = { text: 'Name', groupBy: 'category' };
//Set customized list template
listTemplate(data: any): JSX.Element {
return(
<div className="e-list-wrapper e-list-multi-line e-list-avatar">
<img className="e-avatar e-avatar-circle" src={data.image} />
<span className="e-list-item-header">{data.Name}</span>
<span className="e-list-content">{data.contact}</span>
</div>
);
}
//Set customized group-header template
groupTemplate(data: any): JSX.Element {
return(
<div>
<span className='category'>{data.items[0].category}</span>
<span className="count"> {data.items.length} Item(s)</span>
</div>
);
}
render() {
return (
<div>
<ListViewComponent id='list' dataSource={this.data} fields={this.fields} template={this.listTemplate as any}
groupTemplate={this.groupTemplate as any} width='350px' cssClass='e-list-template'>
</ListViewComponent>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('element'));