How to Filter list items in the ListView in React ListView component

React

Search results

24 Jun 2022 / 2 minutes to read

The filtered data can be displayed in the ListView component depending upon on user inputs using the DataManager. Refer to the following steps to render the ListView with filtered data.

Render a textbox to get input for filtering data.
Render ListView with dataSource, and set the sortOrder property.
Bind the keyup event for textbox to perform filtering operation. To filter list data, pass the list data source to the DataManager, manipulate the data using the executeLocal method, and then update filtered data as ListView dataSource.

Source

Preview

App.jsx

index.jsx

index.html

index.css

App.tsx

index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { DataManager, Query } from "@syncfusion/ej2-data";
import { ListViewComponent } from "@syncfusion/ej2-react-lists";
export default class App extends React.Component {
    constructor(props) {
        super(props);
        this.list = [
            { text: "Hennessey Venom", id: "list-01" },
            { text: "Bugatti Chiron", id: "list-02" },
            { text: "Bugatti Veyron Super Sport", id: "list-03" },
            { text: "SSC Ultimate Aero", id: "list-04" },
            { text: "Koenigsegg CCR", id: "list-05" },
            { text: "McLaren F1", id: "list-06" }
        ];
        this.fields = { text: "text", id: "id" };
        this.state = { listData: this.list };
    }
    onKeyUp(e) {
        let value = e.target.value;
        let data = new DataManager(this.state.listData).executeLocal(new Query().where("text", "startswith", value, true));
        if (!value) {
            this.setState({
                listData: this.list
            });
        }
        else {
            this.setState({
                listData: data
            });
        }
    }
    render() {
        return (<div id="sample">
    <input className="e-input" type="text" id="textbox" placeholder="Filter" onKeyUp={this.onKeyUp.bind(this)} title="Type in a name"/>
    <ListViewComponent id="list" dataSource={this.state.listData} fields={this.fields} sortOrder="Ascending"/>
  </div>);
    }
}
ReactDOM.render(<App />, document.getElementById("element"));

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React ListView</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.1.58/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-react-lists/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="index.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%;
        }
    </style>
</head>

<body>
    <div id='element' style="margin:0 auto; max-width:400px;">
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>

#container {
  visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  width: 30%;
  position: absolute;
  font-family: "Helvetica Neue", "calibiri";
  font-size: 14px;
  top: 45%;
  left: 45%;
}

#list {
  box-shadow: 0 1px 4px #ddd;
  border-bottom: 1px solid #ddd;
}
#sample {
  height: 220px;
  margin: 0 auto;
  display: table;
}

import * as React from "react";
import * as ReactDOM from "react-dom";
import { DataManager, Query, ODataV4Adaptor } from "@syncfusion/ej2-data";
import { ListViewComponent } from "@syncfusion/ej2-react-lists";

interface MyState {
  listData: any[];
}

export default class App extends React.Component<{}, MyState> {
  constructor(props: any) {
super(props);
this.state = { listData: this.list };
  }
  public list: any[] = [
{ text: "Hennessey Venom", id: "list-01" },
{ text: "Bugatti Chiron", id: "list-02" },
{ text: "Bugatti Veyron Super Sport", id: "list-03" },
{ text: "SSC Ultimate Aero", id: "list-04" },
{ text: "Koenigsegg CCR", id: "list-05" },
{ text: "McLaren F1", id: "list-06" }
  ];

  public fields: Object = { text: "text", id: "id" };

  public onKeyUp(e: any) {
let value = e.target.value;
let data = new DataManager(this.state.listData).executeLocal(
  new Query().where("text", "startswith", value, true)
);
if (!value) {
  this.setState({
    listData: this.list
  });
} else {
  this.setState({
    listData: data
  });
}
  }

  render() {
return (
  <div id="sample">
    <input
      className="e-input"
      type="text"
      id="textbox"
      placeholder="Filter"
      onKeyUp={this.onKeyUp.bind(this)}
      title="Type in a name"
    />
    <ListViewComponent
      id="list"
      dataSource={this.state.listData}
      fields={this.fields}
      sortOrder="Ascending"
    />
  </div>
);
  }
}
ReactDOM.render(<App />, document.getElementById("element"));

In this demo, data has been filtered with starting character of the list items. You can also filter list items with ending character by passing the endswith in where clause instead of startswith.