Filter list items in the ListView in React ListView component

23 Jan 20259 minutes to read

The filtered data can be displayed in the ListView component depending on user inputs using the DataManager. Follow these steps to render the ListView with filtered data:

  • Render a textbox to get input for filtering data.

  • Render the ListView with dataSource, and set the sortOrder property.

  • Bind the keyup event to the textbox to perform filtering operation. To filter list data:

    1. Pass the list data source to the DataManager.
    2. Manipulate the data using the executeLocal method.
    3. Update the filtered data as the ListView’s dataSource.
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";
function App() {
    let 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" }
    ];
    let fields = { text: "text", id: "id" };
    const [state, SetState] = React.useState({ listData: list });
    function onKeyUp(e) {
        let value = e.target.value;
        let data = new DataManager(state.listData).executeLocal(new Query().where("text", "startswith", value, true));
        if (!value) {
            SetState({
                listData: list
            });
        }
        else {
            SetState({
                listData: data
            });
        }
    }
    return (<div id="sample">
        <input className="e-input" type="text" id="textbox" placeholder="Filter" onKeyUp={onKeyUp.bind(this)} title="Type in a name" />
        <ListViewComponent id="list" dataSource={state.listData} fields={fields} sortOrder="Ascending" />
    </div>);
}
export default App;
ReactDOM.render(<App />, document.getElementById("element"));
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";

function App() {
  let 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" }
  ];
  let fields: Object = { text: "text", id: "id" };
  const [state, SetState] = React.useState({ listData: list });
  function onKeyUp(e: any) {
    let value = e.target.value;
    let data = new DataManager(state.listData).executeLocal(
      new Query().where("text", "startswith", value, true)
    );
    if (!value) {
      SetState({
        listData: list
      });
    } else {
      SetState({
        listData: data
      });
    }
  }

  return (
    <div id="sample">
      <input
        className="e-input"
        type="text"
        id="textbox"
        placeholder="Filter"
        onKeyUp={onKeyUp.bind(this)}
        title="Type in a name"
      />
      <ListViewComponent
        id="list"
        dataSource={state.listData}
        fields={fields}
        sortOrder="Ascending"
      />
    </div>
  );
}
export default App;
ReactDOM.render(<App />, document.getElementById("element"));
#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;
}
<!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="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-react-lists/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

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

</html>

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