Virtualization in React ListView component

04 Aug 2021 / 5 minutes to read

UI virtualization loads only viewable list items in a view port which will increase ListView performance on loading large number of data.

Module injection

In order to use UI Virtualization, we need to inject its virtualization service in the App. This modules should be injected into the ListView using the Inject directive as like the below code snippet.

import { ListViewComponent, Inject, Virtualization } from '@syncfusion/ej2-react-lists';

....
....

render() {
        return (
            // specifies the tag to render the ListView component
            <ListViewComponent id='ui-list' dataSource={this.listData} enableVirtualization={true} >
                <Inject services={[Virtualization]} />
            </ListViewComponent>
        );
    }

render();
{
    return (
    // specifies the tag to render the ListView component
    <ListViewComponent id='ui-list' dataSource={this.listData} enableVirtualization={true}>
                <Inject services={[Virtualization]}/>
            </ListViewComponent>);
}

Getting started

UI virtualization can be enabled in ListView by setting enableVirtualization property to true.

It has two type of scroller

Window scroll - This scroller is used in ListView by default.

Container scroll - This will be used, if the height property of ListView was set.

Source

Preview

index.tsx

index.html

index.css

index.jsx

import * as React from 'react';
import * as ReactDOM from "react-dom";
import { ListViewComponent, Inject, Virtualization } from '@syncfusion/ej2-react-lists';

export default class App extends React.Component<{}, {}> {
  // define the array of Json
  public listData: { [key: string]: string | object }[];

  constructor(props: any) {
    super(props);
    this.listData = [
      { text: "Nancy", id: "0" },
      { text: "Andrew", id: "1" },
      { text: "Janet", id: "2" },
      { text: "Margaret", id: "3" },
      { text: "Steven", id: "4" },
      { text: "Laura", id: "5" },
      { text: "Robert", id: "6" },
      { text: "Michael", id: "7" },
      { text: "Albert", id: "8" },
      { text: "Nolan", id: "9" }
    ];
    for (let i: number = 10; i <= 1010; i++) {
      let index: number = parseInt((Math.random() * 10).toString());
      this.listData.push({ text: this.listData[index].text, id: i.toString() });
    }
  }

  render() {
    return (
      // specifies the tag to render the ListView component
      <ListViewComponent id="ui-list" dataSource={this.listData} enableVirtualization={true}>
        <Inject services={[Virtualization]} />
      </ListViewComponent>
    );
  }
}

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="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>

#ui-list {
  display: block;
  max-width: 400px;
  margin: auto;
  border-radius: 3px;
  cursor: pointer;
}

import * as React from 'react';
import * as ReactDOM from "react-dom";
import { ListViewComponent, Inject, Virtualization } from '@syncfusion/ej2-react-lists';
export default class App extends React.Component {
    constructor(props) {
        super(props);
        this.listData = [
            { text: "Nancy", id: "0" },
            { text: "Andrew", id: "1" },
            { text: "Janet", id: "2" },
            { text: "Margaret", id: "3" },
            { text: "Steven", id: "4" },
            { text: "Laura", id: "5" },
            { text: "Robert", id: "6" },
            { text: "Michael", id: "7" },
            { text: "Albert", id: "8" },
            { text: "Nolan", id: "9" }
        ];
        for (let i = 10; i <= 1010; i++) {
            let index = parseInt((Math.random() * 10).toString());
            this.listData.push({ text: this.listData[index].text, id: i.toString() });
        }
    }
    render() {
        return (
        // specifies the tag to render the ListView component
        <ListViewComponent id="ui-list" dataSource={this.listData} enableVirtualization={true}>
        <Inject services={[Virtualization]}/>
      </ListViewComponent>);
    }
}
ReactDOM.render(<App />, document.getElementById('element'));

We can use template property to customize list items in UI virtualization.

Source

Preview

index.tsx

index.html

index.css

index.jsx

import * as React from 'react';
import * as ReactDOM from "react-dom";
import { ListViewComponent, Inject, Virtualization } from '@syncfusion/ej2-react-lists';

export default class App extends React.Component<{}, {}> {
    // define the array of Json
    public listData: { [key: string]: string | object }[];
    constructor() {
        super();
        this.listData = [
            { name: 'Nancy', icon: 'N', id: '0', },
            { name: 'Andrew', icon: 'A', id: '1' },
            { name: 'Janet', icon: 'J', id: '2' },
            { name: 'Margaret', imgUrl: './margaret.png', id: '3' },
            { name: 'Steven', icon: 'S', id: '4' },
            { name: 'Laura', imgUrl: './laura.png', id: '5' },
            { name: 'Robert', icon: 'R', id: '6' },
            { name: 'Michael', icon: 'M', id: '7' },
            { name: 'Albert', imgUrl: './albert.png', id: '8' },
            { name: 'Nolan', icon: 'N', id: '9' }
        ];
        for (let i: number = 10; i <= 1010; i++) {
            let index: number = parseInt((Math.random() * 10).toString());
            this.listData.push({ name: this.listData[index].name, icon: this.listData[index].icon, imgUrl: this.listData[index].imgUrl, id: i.toString() });
        }
    }

    public template: string = '<div class="list-container"><div id="icon" class="${$imgUrl ? \'img\' : $icon }">' +
        '<span class="${$imgUrl ? \'hideUI\' : \'showUI\' }"> ${icon}</span>' +
        '<img class="${$imgUrl ? \'showUI\' : \'hideUI\' }" width = 45 height = 45 src="${$imgUrl ?  $imgUrl : \' \' }" /></div><div class="name">${name}</div></div>';

    render() {
        return (
            // specifies the tag to render the ListView component
            <ListViewComponent id='ui-list' dataSource={this.listData} enableVirtualization={true} template={this.template} height={500} headerTitle="contacts" showHeader={true}>
                <Inject services={[Virtualization]} />
            </ListViewComponent>
        );
    }
}

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="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>

#ui-list {
  display: block;
  max-width: 400px;
  margin: auto;
  border: 1px solid #dddddd;
  border-radius: 3px;
  cursor: pointer;
}

button {
  float: right
}

#icon {
  width: 45px;
  height: 45px;
  text-align: center;
  line-height: 45px;
  border-radius: 50%;
  font-size: 20px;
  font-weight: 500;
  float: left;
  margin-top: 17px;
  margin-right: 35px;
}

img {
  border-radius: 50%;
  border: #ddd;
  border: 1px solid rgba(40, 40, 40, 0.12);
}

.R {
  background: purple;
}

.M {
  background: pink;
}

.A {
  background: green;
}

.S {
  background: lightskyblue;
}

.J {
  background: orange;
}

.N {
  background: blue;
}

#ui-list .e-list-item {
  height: 80px;
  border: #ddd;
  border: 1px solid rgba(184, 184, 184, 0.12);
}

.list-container {
  width: inherit;
  height: 100%;

}

.showUI {
  display: inline;
}

.hideUI {
  display: none;
}

.content {
  height: 100%;
  float: left;
}

.name {
  height: 100%;
  font-size: 20px;
  font-weight: 600;
  line-height: 78px;
}

import * as React from 'react';
import * as ReactDOM from "react-dom";
import { ListViewComponent, Inject, Virtualization } from '@syncfusion/ej2-react-lists';
export default class App extends React.Component {
    constructor() {
        super();
        this.template = '<div class="list-container"><div id="icon" class="${$imgUrl ? \'img\' : $icon }">' +
            '<span class="${$imgUrl ? \'hideUI\' : \'showUI\' }"> ${icon}</span>' +
            '<img class="${$imgUrl ? \'showUI\' : \'hideUI\' }" width = 45 height = 45 src="${$imgUrl ?  $imgUrl : \' \' }" /></div><div class="name">${name}</div></div>';
        this.listData = [
            { name: 'Nancy', icon: 'N', id: '0', },
            { name: 'Andrew', icon: 'A', id: '1' },
            { name: 'Janet', icon: 'J', id: '2' },
            { name: 'Margaret', imgUrl: './margaret.png', id: '3' },
            { name: 'Steven', icon: 'S', id: '4' },
            { name: 'Laura', imgUrl: './laura.png', id: '5' },
            { name: 'Robert', icon: 'R', id: '6' },
            { name: 'Michael', icon: 'M', id: '7' },
            { name: 'Albert', imgUrl: './albert.png', id: '8' },
            { name: 'Nolan', icon: 'N', id: '9' }
        ];
        for (let i = 10; i <= 1010; i++) {
            let index = parseInt((Math.random() * 10).toString());
            this.listData.push({ name: this.listData[index].name, icon: this.listData[index].icon, imgUrl: this.listData[index].imgUrl, id: i.toString() });
        }
    }
    render() {
        return (
        // specifies the tag to render the ListView component
        <ListViewComponent id='ui-list' dataSource={this.listData} enableVirtualization={true} template={this.template} height={500} headerTitle="contacts" showHeader={true}>
                <Inject services={[Virtualization]}/>
            </ListViewComponent>);
    }
}
ReactDOM.render(<App />, document.getElementById('element'));

Conditional rendering

We have also provided following conditional rendering support for template and groupTemplate.

Name	Syntax
conditional class	`<div class="${ $id % 2 === 0 ? 'even-list' : 'odd-list'}"></div>`
conditional attribute	`<div id="${ $id % 2 === 0 ? 'even-list' : 'odd-list'}"></div>`
conditional text content	`<div>${ $id % 2 === 0 ? 'even-list' : 'odd-list'}</div>`

In the below sample, we have applied light blue for even list and light coral for odd list based on the conditional class.

Source

Preview

index.tsx

index.html

index.css

index.jsx

import * as React from 'react';
import * as ReactDOM from "react-dom";
import { ListViewComponent, Inject, Virtualization } from '@syncfusion/ej2-react-lists';

export default class App extends React.Component<{}, {}> {
  // define the array of Json
  public listData: { [key: string]: string | object }[];

  constructor() {
    super({});
    this.listData = [
      { text: "Nancy", id: "0" },
      { text: "Andrew", id: "1" },
      { text: "Janet", id: "2" },
      { text: "Margaret", id: "3" },
      { text: "Steven", id: "4" },
      { text: "Laura", id: "5" },
      { text: "Robert", id: "6" },
      { text: "Michael", id: "7" },
      { text: "Albert", id: "8" },
      { text: "Nolan", id: "9" }
    ];
    for (let i: number = 10; i <= 1010; i++) {
      let index: number = parseInt((Math.random() * 10).toString());
      this.listData.push({ text: this.listData[index].text, id: i.toString() });
    }
  }

  public template: string =
    "<div id=\"list-container\" class=\"${ $id % 2 === 0 ? 'even-list' : 'odd-list' }\" > ${text} </div>";

  render() {
    return (
      // specifies the tag to render the ListView component
      <ListViewComponent
        id="ui-list"
        dataSource={this.listData}
        enableVirtualization={true}
        template={this.template}
        height={500}
      >
        <Inject services={[Virtualization]} />
      </ListViewComponent>
    );
  }
}

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="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>

#ui-list {
  display: block;
  max-width: 400px;
  margin: auto;
  border: 1px solid #dddddd;
  border-radius: 3px;
  cursor: pointer;
}

#list-container{
  height: inherit;
  width: inherit;
  padding-left: 30px;
}

#ui-list .e-list-item{
  padding: 0;
}

#ui-list .even-list{
  background-color: #cfd8dc;
}

#ui-list .odd-list{
  background-color: #eceff1;
}

import * as React from 'react';
import * as ReactDOM from "react-dom";
import { ListViewComponent, Inject, Virtualization } from '@syncfusion/ej2-react-lists';
export default class App extends React.Component {
    constructor() {
        super({});
        this.template = "<div id=\"list-container\" class=\"${ $id % 2 === 0 ? 'even-list' : 'odd-list' }\" > ${text} </div>";
        this.listData = [
            { text: "Nancy", id: "0" },
            { text: "Andrew", id: "1" },
            { text: "Janet", id: "2" },
            { text: "Margaret", id: "3" },
            { text: "Steven", id: "4" },
            { text: "Laura", id: "5" },
            { text: "Robert", id: "6" },
            { text: "Michael", id: "7" },
            { text: "Albert", id: "8" },
            { text: "Nolan", id: "9" }
        ];
        for (let i = 10; i <= 1010; i++) {
            let index = parseInt((Math.random() * 10).toString());
            this.listData.push({ text: this.listData[index].text, id: i.toString() });
        }
    }
    render() {
        return (
        // specifies the tag to render the ListView component
        <ListViewComponent id="ui-list" dataSource={this.listData} enableVirtualization={true} template={this.template} height={500}>
        <Inject services={[Virtualization]}/>
      </ListViewComponent>);
    }
}
ReactDOM.render(<App />, document.getElementById('element'));

Contents

Module injection
Getting started
Conditional rendering

Contents

Module injection
Getting started
Conditional rendering

Please provide additional information

Thank you for your feedback and comments.We will rectify this as soon as possible!