Sorting and grouping in React List box component

2 Feb 20238 minutes to read

Sorting

The ListBox supports sorting of available items in the alphabetical order that can be either ascending or descending. This can achieved using
sortOrder property. Sort order can be None, Ascending or Descending.

In the following example, the SortOrder is set as Ascending.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ListBoxComponent } from '@syncfusion/ej2-react-dropdowns';
function App() {
    let data = [
        { "Name": "Australia", "Code": "AU" },
        { "Name": "Bermuda", "Code": "BM" },
        { "Name": "Canada", "Code": "CA" },
        { "Name": "Cameroon", "Code": "CM" },
        { "Name": "Denmark", "Code": "DK" },
        { "Name": "France", "Code": "FR" },
        { "Name": "Finland", "Code": "FI" },
        { "Name": "Germany", "Code": "DE" },
        { "Name": "Hong Kong", "Code": "HK" }
    ];
    let fields = { text: "Name" };
    return (<ListBoxComponent dataSource={data} sortOrder="Ascending" fields={fields}/>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ListBoxComponent } from '@syncfusion/ej2-react-dropdowns';

function App() {
  let data: { [key: string]: Object }[] = [
    { "Name": "Australia", "Code": "AU" },
    { "Name": "Bermuda", "Code": "BM" },
    { "Name": "Canada", "Code": "CA" },
    { "Name": "Cameroon", "Code": "CM" },
    { "Name": "Denmark", "Code": "DK" },
    { "Name": "France", "Code": "FR" },
    { "Name": "Finland", "Code": "FI" },
    { "Name": "Germany", "Code": "DE" },
    { "Name": "Hong Kong", "Code": "HK" }
  ];
  let fields:object = { text:"Name" };

  return (
    <ListBoxComponent dataSource={data} sortOrder="Ascending" fields={fields}/>
  );
}
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));

Grouping

The ListBox supports to wrap the nested element into a group based on its category. The category of each list item can be mapped with
groupBy field in the data table.

In the following example, vegetables are grouped based on its category.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ListBoxComponent } from '@syncfusion/ej2-react-dropdowns';
function App() {
    let data = [
        { "Vegetable": "Cabbage", "Category": "Leafy and Salad", "Id": "item1" },
        { "Vegetable": "Spinach", "Category": "Leafy and Salad", "Id": "item2" },
        { "Vegetable": "Wheat grass", "Category": "Leafy and Salad", "Id": "item3" },
        { "Vegetable": "Yarrow", "Category": "Leafy and Salad", "Id": "item4" },
        { "Vegetable": "Pumpkins", "Category": "Leafy and Salad", "Id": "item5" },
        { "Vegetable": "Chickpea", "Category": "Beans", "Id": "item6" },
        { "Vegetable": "Green bean", "Category": "Beans", "Id": "item7" },
        { "Vegetable": "Horse gram", "Category": "Beans", "Id": "item8" },
        { "Vegetable": "Garlic", "Category": "Bulb and Stem", "Id": "item9" },
        { "Vegetable": "Nopal", "Category": "Bulb and Stem", "Id": "item10" },
        { "Vegetable": "Onion", "Category": "Bulb and Stem", "Id": "item11" }
    ];
    let fields = { text: "Vegetable", groupBy: "Category", value: "Id" };
    return (<ListBoxComponent dataSource={data} fields={fields}/>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ListBoxComponent } from '@syncfusion/ej2-react-dropdowns';

function App() {
  let data: { [key: string]: Object }[] = [
    { "Vegetable": "Cabbage", "Category": "Leafy and Salad", "Id": "item1" },
    { "Vegetable": "Spinach", "Category": "Leafy and Salad", "Id": "item2" },
    { "Vegetable": "Wheat grass", "Category": "Leafy and Salad", "Id": "item3" },
    { "Vegetable": "Yarrow", "Category": "Leafy and Salad", "Id": "item4" },
    { "Vegetable": "Pumpkins", "Category": "Leafy and Salad", "Id": "item5" },
    { "Vegetable": "Chickpea", "Category": "Beans", "Id": "item6" },
    { "Vegetable": "Green bean", "Category": "Beans", "Id": "item7" },
    { "Vegetable": "Horse gram", "Category": "Beans", "Id": "item8" },
    { "Vegetable": "Garlic", "Category": "Bulb and Stem", "Id": "item9" },
    { "Vegetable": "Nopal", "Category": "Bulb and Stem", "Id": "item10" },
    { "Vegetable": "Onion", "Category": "Bulb and Stem", "Id": "item11" }
  ];
  let fields:object = { text:"Vegetable", groupBy:"Category", value:"Id" };

  return (
    <ListBoxComponent dataSource={data} fields={fields}/>
  );
}
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));