ListView / Getting Started
material theme

Getting Started with KendoReact ListView

The KendoReact ListView enables you to display a custom layout of data items.

The ListView is ideally suited for displaying a list of items in a consistent manner. You can see commonplace examples of its use in the design structures of the Internet, search engine results, tweets from Twitter, Facebook updates, inbox items in Gmail, card lists in Instagram, and so on.

The ListView component is part of KendoReact, a professionally built commercial UI library. To try out this component you need to sign up for a 30-day trial, which gives you access to the full KendoReact library.

Start Free Trial

Basic Usage

The following example demonstrates the ListView in action.

import React from 'react';
import ReactDOM from 'react-dom';
import { ListView, ListViewHeader, ListViewFooter } from '@progress/kendo-react-listview';
import { Avatar } from '@progress/kendo-react-layout';

import contacts from './contacts.json';

const MyHeader = () => {
    return (
        <ListViewHeader style={{color: 'rgb(160, 160, 160)', fontSize: 14}} className='pl-3 pb-2 pt-2'>
            Contact list
        </ListViewHeader>
    );
}

const MyFooter = () => {
    return (
        <ListViewFooter style={{color: 'rgb(160, 160, 160)', fontSize: 14}} className='pl-3 pb-2 pt-2'>
            25 unread messages in total
        </ListViewFooter>
    );
}

const MyItemRender = props => {
    let item = props.dataItem;
    return (
        <div className='row p-2 border-bottom align-middle' style={{ margin: 0}}>
            <div className='col-2'>
                <Avatar shape='circle' type='img'>
                    <img src={`https://gist.github.com/simonssspirit/0db46d4292ea8e335eb18544718e2624/raw/2a595679acdb061105c80bd5eeeef58bb90aa5af/${item.image}-round-40x40.png`} />
                </Avatar>
            </div>
            <div className='col-6'>
                <h2 style={{fontSize: 14, color: '#454545', marginBottom: 0}} className="text-uppercase">{item.name}</h2>
                <div style={{fontSize: 12, color: "#a0a0a0"}}>{item.email}</div>
            </div>
            <div className='col-4'>
                <div className='k-chip k-chip-filled'>
                    <div className='k-chip-content'>
                        {item.messages} new messages
                    </div>
                </div>
            </div>
        </div>
    );
}

class App extends React.Component {
    render() {
        return (
            <div>
                <ListView
                    data={contacts}
                    item={MyItemRender}
                    style={{ width: "100%" }}
                    header={MyHeader}
                    footer={MyFooter}
                />
            </div>
        );
    }
}

ReactDOM.render(
    <React.Fragment>
        <App/>
        <style>
        {`.k-listview-footer {
            border-top-width: 0 !important;
        }`}
    </style>
    </React.Fragment>, document.querySelector('my-app')
);

Functionality and Features

Installation

  1. Download and install the package. Use Node.js v5.0.0 or later.

    npm install --save @progress/kendo-react-listview

  2. Once installed, import the package module.

    // ES2015 module syntax
import { ListView, ListViewHeader, ListViewFooter } from '@progress/kendo-react-listview';
    // CommonJS format
const { ListView, ListViewHeader, ListViewFooter } = require('@progress/kendo-react-listview');

  3. You are required to install one of the Kendo UI themes to style your components. For more information on how to add the styles, refer to the article on getting started.

Dependencies

The ListView package requires the following peer dependencies that have to be installed by your application:

  • react 16.8.2*
  • react-dom
  • @progress/kendo-react-common

Is this article helpful?

Not finding the help you need?

Contact Support