Grouping in React Listview component

30 Jan 20234 minutes to read

ListView supports to wrap the nested element into a group based on category.

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

In below sample, Cars are grouped based on its category using groupBy field.

index.jsx

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'));

index.tsx

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'));

Customization

The grouping header can be customized by using groupTemplate property for both inline and fixed group header.