Grouping in React ListView component

23 Jan 20256 minutes to read

ListView supports wrapping nested elements into groups based on categories.

The category of each list item can be mapped using the groupBy field in the data table, which also supports single-level navigation.

In the sample below, cars are grouped based on their categories using the groupBy field.

import * as React from 'react';
import * as ReactDOM from "react-dom";
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
function App() {
    // define the array of Json
    let arts = [
        {
            'text': 'Audi A4',
            'id': '9bdb',
            'category': 'Audi'
        },
        {
            'text': 'Audi A5',
            'id': '4589',
            'category': 'Audi'
        },
        {
            'text': 'BMW 501',
            'id': 'f849',
            'category': 'BMW'
        },
        {
            'text': 'BMW 502',
            'id': '7aff',
            'category': 'BMW'
        }
    ];
    let fields = { groupBy: 'category', tooltip: 'text' };
    return (
        // specifies the tag to render the ListView component
        <ListViewComponent id='list' dataSource={arts} fields={fields}></ListViewComponent>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { ListViewComponent } from '@syncfusion/ej2-react-lists';

function App() {
  // define the array of Json
  let arts: { [key: string]: string }[] = [
    {
      'text': 'Audi A4',
      'id': '9bdb',
      'category': 'Audi'
    },
    {
      'text': 'Audi A5',
      'id': '4589',
      'category': 'Audi'
    },
    {
      'text': 'BMW 501',
      'id': 'f849',
      'category': 'BMW'
    },
    {
      'text': 'BMW 502',
      'id': '7aff',
      'category': 'BMW'
    }
  ];

  let fields = { groupBy: 'category', tooltip: 'text' };
  return (
    // specifies the tag to render the ListView component
    <ListViewComponent id='list' dataSource={arts} fields={fields} ></ListViewComponent>
  );
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));
#list {
  display: block;
  max-width: 400px;
  margin: auto;
  border: 1px solid #dddddd;
  border-radius: 3px;
}
<!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="https://cdn.syncfusion.com/ej2/28.2.3/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='element' style="margin:0 auto; max-width:400px;">
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>

Customization

The grouping header can be customized using the groupTemplate property for both inline and fixed group headers. The complete customization description and explanation, along with an example, are given in the following link.

Group Template