Application search feature for data table. Basic stage.

merge-requests/7/head
Menaka Jayawardena 7 years ago
parent e32b6d167c
commit 89b4e6dc10

@ -111,14 +111,27 @@ class ApplicationListing extends Component {
componentWillMount() { componentWillMount() {
//Fetch all the applications from backend and create application objects. //Fetch all the applications from backend and create application objects.
this.setState({data: this.data});
} }
/** /**
* Handles the search action. * Handles the search action.
* When typing in the search bar, this method will be invoked. * When typing in the search bar, this method will be invoked.
* */ * */
_searchApplications(word) { _searchApplications(event, word) {
let searchedData = []; let searchedData;
if (word){
searchedData = this.data.filter((dataItem) => {
return dataItem.applicationName.includes(word);
});
} else {
console.log("no")
console.log(this.data)
searchedData = this.data;
}
this.setState({data: searchedData}, console.log("Searched data ", this.state.data));
} }
/** /**
@ -155,7 +168,7 @@ class ApplicationListing extends Component {
</CardActions> </CardActions>
<DataTable headers={this.headers} <DataTable headers={this.headers}
data={this.data} data={this.state.data}
handleRowClick={this._onRowClick.bind(this)} handleRowClick={this._onRowClick.bind(this)}
noDataMessage={{type: 'button', text: 'Create Application'}}/> noDataMessage={{type: 'button', text: 'Create Application'}}/>
</Card> </Card>

@ -63,6 +63,12 @@ class DataTable extends Component {
this.setState({data: this.props.data, headers: this.props.headers}) this.setState({data: this.props.data, headers: this.props.headers})
} }
shouldComponentUpdate(nextProps, nextState) {
console.log("next Props", nextProps.data);
this.setState({data: nextProps.data});
return true;
}
/** /**
* Triggers when user click on table row. * Triggers when user click on table row.
* This method invokes the parent method handleRowClick, which is passed via props. * This method invokes the parent method handleRowClick, which is passed via props.
@ -75,6 +81,8 @@ class DataTable extends Component {
render() { render() {
const {data, headers} = this.state; const {data, headers} = this.state;
console.log(data);
let noDataContent = null; let noDataContent = null;
if (this.props.noDataMessage.type === 'button') { if (this.props.noDataMessage.type === 'button') {

Loading…
Cancel
Save