Sorting and grouping in React List box component

21 Feb 20268 minutes to read

Sorting

The ListBox supports sorting list items in alphabetical order, either ascending or descending. Configure sorting using the sortOrder property with values: None, Ascending, or Descending.

In the following example, SortOrder is set to Ascending:

index.jsx

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

index.tsx

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 groups nested elements based on category. Map the category for each list item using the groupBy field in the data table.

In the following example, vegetables are grouped by category:

index.jsx

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

index.tsx

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