Custom DropDown using for filter react-table in Reactjs

  1. install npm react-table6
import React, {Component} from 'react';
import ReactTable from 'react-table-6';
import { Form} from 'react-bootstrap';
import 'react-table-6/react-table.css';
class CustomFilter extends Component{
constructor(props) {
super(props);
this.state = {
data=[],
subtype:'',
};
}
componentDidMount() {
fetch(`http://api.livingwatersmuseum.org:8080/stories/resources`)
.then(res => res.json())
.then(
result => {
this.setState({

data: result.data,
});
},
error => {CustomFilter
this.setState({

error,
});
}
);
}
render(){
return(
<div> <Form.Control as="select" name="data"
value={this.state.subtype}
onChange={(event) =>
this.setState({subtype:event.target.value})}>
<option value =''>employee_name</option>
<option value='books'> employee_age </option>
<option value='films'>employee_salary</option>

</Form.Control>
<ReactTable
loading={false}
defaultPageSize={10}
data={this.state.stories}
filtered={[{
id: 'subType',
value: this.state.subtype,
}]}
columns={[
{
Header: 'Name',
accessor: 'employee_name',
style: {whiteSpace: 'unset'},
},
{
Header: 'Age',
accessor: 'employee_age',
style: {whiteSpace: 'unset'},
},
{
Header:'Salary',
accessor:'employee_salry'
} ]}
/>
</div>)
}
export default CustomFilter

--

--

--

Mern Stack Developer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

All you need to know about Big-O (using JavaScript)

An in-depth look into Big-O Time Complexity

What’s New for the Angular Ecosystem (Ng-Conf 21 Update)

Easier Error Handling Using Async/Await

10 Takeaways Developers to Consider While React Native App Development

Code Splitting with Parcel Web App Bundler

I am going to pin this story. it will be pinned

Create Custom Context Menu in Angular

Banner image for the article

Bixby for Beginners: Structs

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Pramod Ray

Pramod Ray

Mern Stack Developer

More from Medium

Custom Image Deployment with Docker

Node.js core contributing playbook

RUDRA Navigation Stack

How does Node.js work?