CODEWITHSUNDEEP
javascriptreactjs
Daniel
Daniel

Reputation: 486

How can I integrate searching functionality on table?

At the moment, all the available flights that was received from API are successfully loaded on the page. However, I would like to enable the end user to search specific flight, let's say, by flight number and departure date. How can I integrate this searching functionality in the existing codes?

FlightPage.js

 render() {
    return (
      <>
        <h2>Flights</h2>
        {this.props.loading ? (
          <div>Loading...</div>
        ) : (
          <FlightList flights={this.props.flights} />
        )}
      </>
    );
  }
}

As you can see the bellow code, I have used table to present the results.I would like to show only one result or blank table when searching is applied. Can you help me to achieve this?

FlightList.js

const FlightList = ({ flights }) => (
  <table className="table">
    <thead>
      <tr>
        <th />
        <th>Date</th>
        <th>Provider</th>
        <th>Dest</th>
      </tr>
    </thead>
    <tbody>
      {flights.map((f, i) => {
        return (
          <tr key={i}>
            <td>
              <input type="checkbox" name="flightListCheckbox" />
            </td>
            <td>{f.date}</td>
            <td>{f.pnr}</td>
            <td>{f.flightNumber}</td>
          </tr>
        );
      })}
    </tbody>
  </table>
);

Upvotes: 1

Views: 97

Answers (4)

Giang Le
Giang Le

Reputation: 7089

You need an input for search and filter flights by value of input. Try this

class FlightPage extends React.Component {
  state = {
    keyword: '',
  }

  ...

  getFlights = () => {
    const { keyword } = this.state
    const { flights } = this.props

    return flights.filter(flight => flight.name.includes(keyword)) // name or something else
  }

  onInputChange = e => {
    this.setState({ keyword: e.target.value })
  }

  render () {
    return (
      <>
        <input onChange=(this.onInputChange) value={this.state.keyword} />
        <FlightList flights={this.getFlights()} />
      </>
    )
  }

}

Upvotes: 1

Antoni
Antoni

Reputation: 1453

You could use filter to create a searching functionality like I would at first add an input where I can insert my filter values

FlightPage.js

handleInput: (event) => {
  const { name, value } = event.target

  this.setState({ [name]: value })
}

render () {
  const { filter } = this.state
  return (
    <>
      <input onChange=(this.handleInput) value={filter} name='filter' />
      <FlightList flights={this.props.flights} filterValues={filter} />
    </>
  )
}

Then I would use my state to filter my Object like

FlightList.js


const FlightList = ({ flights, filterValue }) => {

const filterdFlights = flights.filter(flight => Object.values(flight).includes(filterValue))

return (
  <table className="table">
    <thead>
      <tr>
        <th />
        <th>Date</th>
        <th>Provider</th>
        <th>Dest</th>
      </tr>
    </thead>
    <tbody>
      {filterdFlights.map((f, i) => {
        return (
          <tr key={i}>
            <td>
              <input type="checkbox" name="flightListCheckbox" />
            </td>
            <td>{f.date}</td>
            <td>{f.pnr}</td>
            <td>{f.flightNumber}</td>
          </tr>
        );
      })}
    </tbody>
  </table>
)};

Upvotes: 2

pablo sanchez
pablo sanchez

Reputation: 1

You could try to use jquery datatable. It adds a lot of funcionality to tables easy to implement.

DataTable doc

Upvotes: -2

Lu&#239;s
Lu&#239;s

Reputation: 2853

You can filter your flights array using flights.filter or sort it using flights.sort.

Upvotes: 0

Related Questions