React
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Show items count in Group Header in React ListView component

02 Feb 2023 / 2 minutes to read

The ListView component supports wrapping list items into a group based on the category. The category of each list item can be mapped with groupBy field of the data source. You can display grouped list items count in the list-header using the group header template. Refer to the following code sample to display grouped list item count.

Source
Preview
index.jsx
index.html
index.css
index.tsx
Copied to clipboard
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
function App() {
    //Define an array of JSON data
    let 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' },
    ];
    let fields = { text: 'Name', groupBy: 'category' };
    //Set customized list template
    function 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
    function groupTemplate(data) {
        return (<div><span className='category'>{data.items[0].category}</span><span className="count"> {data.items.length} Item(s)</span></div>);
    }
    return (<div>
            <ListViewComponent id='list' dataSource={data} fields={fields} template={listTemplate} groupTemplate={groupTemplate} cssClass='e-list-template'></ListViewComponent>
        </div>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));
Copied to clipboard
<!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.4.48/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-lists/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/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>
Copied to clipboard
#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;
}
Copied to clipboard
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { ListViewComponent } from '@syncfusion/ej2-react-lists';

function App() {

        //Define an array of JSON data
    let 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' },
    ];

    let fields: object =  { text: 'Name', groupBy: 'category' };
     //Set customized list template
    function 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
    function 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>
        );
    }
    return (
        <div>
            <ListViewComponent id='list' dataSource={data} fields={fields} template={listTemplate as any} groupTemplate={groupTemplate as any} cssClass='e-list-template'></ListViewComponent>
        </div>
    );
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));
Previous
Next