React
Demos
Support
Forum
Download
Search results

Customizing Templates

The ListView component is designed to customize list items, group title and header title.

Header template

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.

Source
Preview
index.tsx
index.html
index.css
index.jsx
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'));
<!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/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-lists/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/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 {
    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'));

Template

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>
)};
  • If you are using 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.

Source
Preview
index.tsx
index.html
index.css
index.jsx
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'));
<!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/ej2-react-lists/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/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 {
    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'));

Group template

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.

Source
Preview
index.tsx
index.html
index.css
index.jsx
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'));
<!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/ej2-react-lists/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/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 {
    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'));
Previous
Next