Sorting in React Mention component

2 Feb 20239 minutes to read

You can display the suggestion list items in a specific order. It has possible types as Ascending, Descending, and None in the sortOrder property.

  • None - The data source is not sorted.
  • Ascending - The data source is sorted in ascending order.
  • Descending - The data source is sorted in descending order.

In the following sample, the popup list data is rendered in Descending order.

[Class-component]

import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from "react-dom";
export default class App extends React.Component {
    mentionTarget = '#mentionElement';
    sportData = [
        { ID: "game1", Game: "Badminton" },
        { ID: "game2", Game: "Football" },
        { ID: "game3", Game: "Tennis" },
        { ID: "game4", Game: "Hockey" },
        { ID: "game5", Game: "Basketball" },
        { ID: "game6", Game: "Cricket" }
    ];
    fields = { text: 'Game' };
    render() {
        return (<div id='mention_default'>
        <table>
          <tr>
            <td>
              <label id="comment">Comments</label>
              <div id="mentionElement" placeholder='Type @ and tag sport'></div>
            </td>
          </tr>
        </table>
        <MentionComponent target={this.mentionTarget} dataSource={this.sportData} fields={this.fields} sortOrder={"Descending"}></MentionComponent>
      </div>);
    }
}
ReactDOM.render(<App />, document.getElementById('sample'));
import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from "react-dom";

export default class App extends React.Component<{}, {}> {
  private mentionTarget: string = '#mentionElement';
  private sportData: { [key: string]: Object }[] = [
    { ID : "game1" ,Game : "Badminton"},
    { ID : "game2" ,Game : "Football" },
    { ID : "game3" ,Game : "Tennis"},
    { ID : "game4" ,Game : "Hockey"},
    { ID : "game5" ,Game : "Basketball"},
    { ID : "game6" ,Game : "Cricket"}
  ];
  private fields: Object = {text:'Game'};

  public render() {
    return (
      <div id='mention_default'>
        <table>
          <tr>
            <td>
              <label id="comment">Comments</label>
              <div id="mentionElement" placeholder='Type @ and tag sport' ></div>
            </td>
          </tr>
        </table>
        <MentionComponent target={this.mentionTarget} dataSource={this.sportData} fields={this.fields} sortOrder={"Descending"} ></MentionComponent>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('sample'));

[Functional-component]

import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from "react-dom";
function App() {
    let mentionTarget = '#mentionElement';
    let sportData = [
        { ID: "game1", Game: "Badminton" },
        { ID: "game2", Game: "Football" },
        { ID: "game3", Game: "Tennis" },
        { ID: "game4", Game: "Hockey" },
        { ID: "game5", Game: "Basketball" },
        { ID: "game6", Game: "Cricket" }
    ];
    let fields = { text: 'Game' };
    return (<div id='mention_default'>
        <table>
          <tr>
            <td>
              <label id="comment">Comments</label>
              <div id="mentionElement" placeholder='Type @ and tag sport'></div>
            </td>
          </tr>
        </table>
        <MentionComponent target={mentionTarget} dataSource={sportData} fields={fields} sortOrder={"Descending"}></MentionComponent>
      </div>);
}
ReactDOM.render(<App />, document.getElementById('sample'));
import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from "react-dom";

function App (){
  let mentionTarget: string = '#mentionElement';
  let sportData: { [key: string]: Object }[] = [
    { ID : "game1" ,Game : "Badminton"},
    { ID : "game2" ,Game : "Football" },
    { ID : "game3" ,Game : "Tennis"},
    { ID : "game4" ,Game : "Hockey"},
    { ID : "game5" ,Game : "Basketball"},
    { ID : "game6" ,Game : "Cricket"}
  ];
  let fields: Object = {text:'Game'};

  return (
      <div id='mention_default'>
        <table>
          <tr>
            <td>
              <label id="comment">Comments</label>
              <div id="mentionElement" placeholder='Type @ and tag sport' ></div>
            </td>
          </tr>
        </table>
        <MentionComponent target={mentionTarget} dataSource={sportData} fields={fields} sortOrder={"Descending"} ></MentionComponent>
      </div>
  );
}

ReactDOM.render(<App />, document.getElementById('sample'));