Search results

Sorting in React Mention component

01 Feb 2023 / 2 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]

Source
Preview
index.jsx
index.html
styles.css
index.tsx
Copied to clipboard
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 {
    constructor() {
        super(...arguments);
        this.mentionTarget = '#mentionElement';
        this.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" }
        ];
        this.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'));
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>Syncfusion React AutoComplete</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="//cdn.syncfusion.com/ej2/20.4.48/ej2-base/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-buttons/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-popups/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-list/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-dropdowns/styles/bootstrap5.css" rel="stylesheet" />
    <link href="./styles.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%;
        }
        #sample {
            position: absolute;
            top: 15%;
            left: 10%;
        }
    </style>
</head>

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>
Copied to clipboard
#mentionElement{
  min-height: 100px;
  border: 1px solid #D7D7D7; 
  border-radius: 4px; 
  padding: 8px; 
  font-size: 14px; 
  width: 600px;
}
#comment{
  font-size: 15px; 
  font-weight: 600;
}
div#mentionElement[placeholder]:empty:before {
  content: attr(placeholder);
}
Copied to clipboard
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]

Source
Preview
index.jsx
index.html
styles.css
index.tsx
Copied to clipboard
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'));
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>Syncfusion React AutoComplete</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="//cdn.syncfusion.com/ej2/20.4.48/ej2-base/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-buttons/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-popups/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-list/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-dropdowns/styles/bootstrap5.css" rel="stylesheet" />
    <link href="./styles.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%;
        }
        #sample {
            position: absolute;
            top: 15%;
            left: 10%;
        }
    </style>
</head>

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>
Copied to clipboard
#mentionElement{
  min-height: 100px;
  border: 1px solid #D7D7D7; 
  border-radius: 4px; 
  padding: 8px; 
  font-size: 14px; 
  width: 600px;
}
#comment{
  font-size: 15px; 
  font-weight: 600;
}
div#mentionElement[placeholder]:empty:before {
  content: attr(placeholder);
}
Copied to clipboard
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'));