CODEWITHSUNDEEP
javascriptreactjs
Snehal
Snehal

Reputation: 35

Filter table data on dropdown selection React

I have created a table which is already populated by some data. Now I want to filter the results in the table based on a selection in a dropdown value. How Could I do this in React? Can someone guide or provide a sample code to showcase the result?

Below is my code sample:

Dropdown:

 <table>
                <tbody>
                    <tr> <td>
                        <label className="col-form-label"> Auditee </label> </td>
                        <td className="td-padding td-space">
                            <select className="form-control dpwidth" onChange={this.optionSelected.bind(this)}>
                            <option>Select</option>
                            {this.renderAuditee()}
                            </select>
                        </td>

                        <td> <label className="col-form-label lbl-space"> SME </label></td>
                        <td className="td-padding">
                            <select className="form-control dpwidth" onChange={this.optionSelected.bind(this)}>
                            <option>Select</option>
                            {this.renderSME()}
                            </select>
                        </td>

                        <td> <label className="col-form-label lbl-space"> Year </label></td>
                        <td className="td-padding">
                            <select className="form-control dpwidth" name="Year" onChange={this.handlePeriodChange.bind(this,this)} disabled={this.state.isChecked}>
                            <option>Select</option>
                            {this.renderYear()}
                            </select>
                        </td>
</tr>
</tbody>
</table>

Data in Table:

  <table className="table table-striped table-highlight">
            <span className="head">Review2</span>
          <tbody>
          <tr>
            <th> Project ID </th>
            <th> Project Name </th>
            <th> SME </th>
            <th> Auditor </th>
            <th> EEECPM</th>
            <th> WorldArea </th>
            <th> Country </th>
            <th> FY Year </th>
            <th> FY Period </th>
            <th> Review1 Date </th>
            <th> No. of Obs. </th>
            <th> Total Recom. </th>
            <th> Accepted Recom.</th>
            </tr>
             {
               filteredData.length? this.renderTableData(filteredData) : this.renderTableData(data) 
             }
          </tbody>
        </table>

Upvotes: 0

Views: 3350

Answers (2)

Manoj
Manoj

Reputation: 2085

You can have a sample code in my repo, please check code in development branch.

https://github.com/upretim/react-data-filter

It is bit refined and updated to functional components version of official text, you can check it here:

https://reactjs.org/docs/thinking-in-react.html

Primarily you need to do this:

  1. Create a parent component above, table and drop down.
  2. Update state of parent component, when dropdown is selected.
  3. Pass the value of filter and table data as prop in table component.

So parent of table and dropdown would be a stateful component and table and dropdown would be functional components, receiving props from parent's state

Upvotes: 0

Yasser Zubair
Yasser Zubair

Reputation: 406

As component is rerndered everytime state changes, you should put your filteredData in a state, and update this state with filtered data via setState every time the filter dropdown is clicked. More code will help. I cannot comment so answering here

Upvotes: 2

Related Questions