Dropdown filters are not showing all options after submit and the applied filters are going away from the...

Multi tool use
In my React Table multi-select I have a parent page and a child page I have a child page and a parent page. The parent page contains the data while the child page has the multi-select dropdowns.
I am able to filter properly but when I submit the filter and then open the filter again, the filters are not showing in the placeholder position as shown below. I am getting that selected option in the drop down, the other options are not showing. I need to have the selected option in the placeholder while all options in the drop down. This will be followed for all drop down selectors.
The above screenshot is when I select a particular column's filter checkbox
After submitting and trying to filter again I am getting this
This is the code of my Parent page (the page which has the data on which I am applying filter)
import React from "react";
import { render } from "react-dom";
import { makeData } from "./Utils"; // eslint-disable-line
// import matchSorter from "match-sorter";
// import Select from "react-select";
// import "react-select/dist/react-select.css";
import Child from './Child/Child'
import jsondata from './sample'
// Import React Table
import ReactTable from "react-table";
import "react-table/react-table.css";
class App extends React.Component {
constructor() {
super();
this.state = {
// data: makeData(),
data: jsondata,
dataDefault: jsondata,
filtered: ,
select2: null,
select3: null,
childOpen: false
};
this.openChild = this.openChild.bind(this);
this.applyFilter = this.applyFilter.bind(this);
this.showDefaultView = this.showDefaultView.bind(this);
}
applyFilter(filtered) {
console.log('Entering Apply Filter Function of Parent');
console.log('The filtered data in parent ' + JSON.stringify(filtered));
const currentStateChild = this.state.childOpen;
this.setState({
childOpen: !currentStateChild
}, () => {
console.log('Child is opened ' + this.state.childOpen);
});
const filterArray = filtered;
const apidata = this.state.data;
let filteredData = apidata.filter(item => // filter jsondata
filterArray.every( f => // so every member of filter array
f.value.includes(item[f.id])) ) // has a corresponding item[id] in value
console.log('The filtered rows are ' + JSON.stringify(filteredData));
this.setState({
data: filteredData
}, () => {
console.log('Manipulated rows ' + this.state.data);
});
}
openChild() {
const currentStateChild = this.state.childOpen;
this.setState({
childOpen: !currentStateChild
}, () => {
console.log('Child is opened ' + this.state.childOpen);
});
}
showDefaultView() {
const defaultDataParent = this.state.dataDefault;
this.setState({
data: defaultDataParent
}, () => {
console.log('Default rows ' + this.state.data);
});
}
render() {
const { data } = this.state;
return (
<div>
<div className='clickMeToOpenChild' onClick={this.openChild} > Click Me to Open Child</div>
<div className='clickMeToGetDefaultView' onClick={this.showDefaultView} > Click Me to show Default View</div>
<br />
<br />
<ReactTable
data={data}
filterable
filtered={this.state.filtered}
onFilteredChange={(filtered, column, value) => {
this.onFilteredChangeCustom(value, column.id || column.accessor);
}}
defaultFilterMethod={(filter, row, column) => {
const id = filter.pivotId || filter.id;
if (typeof filter.value === "object") {
return row[id] !== undefined
? filter.value.indexOf(row[id]) > -1
: true;
} else {
return row[id] !== undefined
? String(row[id]).indexOf(filter.value) > -1
: true;
}
}}
columns={[
{
Header: "Name",
columns: [
{
Header: "First Name",
accessor: "firstName"
},
{
Header: "Last Name",
id: "lastName",
accessor: d => d.lastName
}
]
},
{
Header: "Info",
columns: [
{
Header: "Age",
accessor: "age"
},
]
}
]}
defaultPageSize={10}
className="-striped -highlight"
/>
{this.state.childOpen &&
<Child
data={data}
applyFilter={this.applyFilter}
/>}
<br />
</div>
);
}
}
render(<App />, document.getElementById("root"));
This is the code of my child page (the page which has the multi select dropdowns - there are just 2 dropdowns at the moment, I will add more in future)
import React, { Component } from 'react'; // eslint-disable-line
import PropTypes from 'prop-types'; // eslint-disable-line
// import uniqBy from 'lodash';
// import _ from 'lodash';
import Select from 'react-select';
import 'react-select/dist/react-select.css';
// import { bindActionCreators } from 'redux';
// import { connect } from 'react-redux';
import './Child.css';
class Child extends Component {
constructor(props) {
super(props);
this.state = {
data: this.props.data,
filtered: ,
select2: null,
select3: null,
};
// this.findUnique = this.findUnique.bind(this);
this.getOptions = this.getOptions.bind(this);
}
getOptions(propertyName) {
return this.state.data.reduce((accum, elem, i) => {
const accumulator = [...accum];
if (!accumulator.some(e => e.value === elem[propertyName])) {
accumulator.push({
id: i,
value: elem[propertyName],
label: elem[propertyName]
});
}
return accumulator;
}, );
}
onFilteredChange(value, accessor) {
const { filtered } = this.state;
let insertNewFilter = 1;
if(filtered.length) {
filtered.forEach((filter, i) => {
if(filter.id === accessor) {
if(value === '' || !value.length) filtered.splice(i, 1);
else filter.value = value;// eslint-disable-line
insertNewFilter = 0;
}
});
}
if(insertNewFilter) {
filtered.push({ id: accessor, value });
}
this.setState({ filtered });
}
render() {
console.log('Entering Child Render Method');
const { data } = this.state; // eslint-disable-line
const { filtered } = this.state; // eslint-disable-line
console.log('filtered items in child ' + JSON.stringify(this.state.filtered));
// console.log('data in child ' + JSON.stringify(this.state.data));
return (
<div className='filter-child' >
<div className='submitChild' onClick={() => { this.props.applyFilter(filtered); }}> Click Me to Submit Child
</div>
<div>
Select First Name :{" "}
<Select
style={{ width: "50%", marginBottom: "20px" }}
onChange={entry => {
this.setState({ select2: entry });
this.onFilteredChange(
entry.map(o => {
return o.value;
}),
'firstName'
);
}}
value={this.state.select2}
multi={true}
options={this.getOptions("firstName")}
/>
Select Last Name :{" "}
<Select
style={{ width: "50%", marginBottom: "20px" }}
onChange={entry => {
this.setState({ select3: entry });
this.onFilteredChange(
entry.map(o => {
return o.value;
}),
"lastName"
);
}}
value={this.state.select3}
multi={true}
options={this.getOptions("lastName")}
/>
</div>
</div>
);
}
}
Child.propTypes = {
data: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
applyFilter: PropTypes.func.isRequired
};
Child.defaultProps = {
};
export default Child;
This is the sample json object file from where I am getting data
const jsonData = [
{
firstName: "Sam",
lastName: "Jones",
age: "10"
},
{
firstName: "Sam",
lastName: "Jones1",
age: "10"
},
{
firstName: "Sam2",
lastName: "Jones1",
age: "12"
},
{
firstName: "Sam3",
lastName: "Jones3",
age: "13"
},
{
firstName: "Sam4",
lastName: "Jones4",
age: "14"
},
{
firstName: "Sam5",
lastName: "Jones5",
age: "15"
},
{
firstName: "Sam",
lastName: "Jones11",
age: "16"
},
{
firstName: "Sam6",
lastName: "Jones6",
age: "17"
},
{
firstName: "Sam7",
lastName: "Jones7",
age: "18"
},
{
firstName: "Sam8",
lastName: "Jones8",
age: "19"
},
{
firstName: "Sam9",
lastName: "Jones9",
age: "20"
},
{
firstName: "Sam10",
lastName: "Jones10",
age: "21"
},
{
firstName: "Sam11",
lastName: "Jones11",
age: "22"
},
{
firstName: "Sam12",
lastName: "Jones12",
age: "23"
}
];
export default jsonData;
I need a generalized solution which can be applied to any number of dropdowns.
Even after submitting the child page (the page having the drop downs) my drop down should look like screenshot 1 but what I am getting is a look of screenshot 2. When I submit the filter and then open the filter again, the filters are not showing in the placeholder position as shown below. I am getting that selected option in the drop down, the other options are not showing. I need to have the selected option in the placeholder while all options in the drop down. This will be followed for all drop down selectors.
javascript reactjs react-table
add a comment |
In my React Table multi-select I have a parent page and a child page I have a child page and a parent page. The parent page contains the data while the child page has the multi-select dropdowns.
I am able to filter properly but when I submit the filter and then open the filter again, the filters are not showing in the placeholder position as shown below. I am getting that selected option in the drop down, the other options are not showing. I need to have the selected option in the placeholder while all options in the drop down. This will be followed for all drop down selectors.
The above screenshot is when I select a particular column's filter checkbox
After submitting and trying to filter again I am getting this
This is the code of my Parent page (the page which has the data on which I am applying filter)
import React from "react";
import { render } from "react-dom";
import { makeData } from "./Utils"; // eslint-disable-line
// import matchSorter from "match-sorter";
// import Select from "react-select";
// import "react-select/dist/react-select.css";
import Child from './Child/Child'
import jsondata from './sample'
// Import React Table
import ReactTable from "react-table";
import "react-table/react-table.css";
class App extends React.Component {
constructor() {
super();
this.state = {
// data: makeData(),
data: jsondata,
dataDefault: jsondata,
filtered: ,
select2: null,
select3: null,
childOpen: false
};
this.openChild = this.openChild.bind(this);
this.applyFilter = this.applyFilter.bind(this);
this.showDefaultView = this.showDefaultView.bind(this);
}
applyFilter(filtered) {
console.log('Entering Apply Filter Function of Parent');
console.log('The filtered data in parent ' + JSON.stringify(filtered));
const currentStateChild = this.state.childOpen;
this.setState({
childOpen: !currentStateChild
}, () => {
console.log('Child is opened ' + this.state.childOpen);
});
const filterArray = filtered;
const apidata = this.state.data;
let filteredData = apidata.filter(item => // filter jsondata
filterArray.every( f => // so every member of filter array
f.value.includes(item[f.id])) ) // has a corresponding item[id] in value
console.log('The filtered rows are ' + JSON.stringify(filteredData));
this.setState({
data: filteredData
}, () => {
console.log('Manipulated rows ' + this.state.data);
});
}
openChild() {
const currentStateChild = this.state.childOpen;
this.setState({
childOpen: !currentStateChild
}, () => {
console.log('Child is opened ' + this.state.childOpen);
});
}
showDefaultView() {
const defaultDataParent = this.state.dataDefault;
this.setState({
data: defaultDataParent
}, () => {
console.log('Default rows ' + this.state.data);
});
}
render() {
const { data } = this.state;
return (
<div>
<div className='clickMeToOpenChild' onClick={this.openChild} > Click Me to Open Child</div>
<div className='clickMeToGetDefaultView' onClick={this.showDefaultView} > Click Me to show Default View</div>
<br />
<br />
<ReactTable
data={data}
filterable
filtered={this.state.filtered}
onFilteredChange={(filtered, column, value) => {
this.onFilteredChangeCustom(value, column.id || column.accessor);
}}
defaultFilterMethod={(filter, row, column) => {
const id = filter.pivotId || filter.id;
if (typeof filter.value === "object") {
return row[id] !== undefined
? filter.value.indexOf(row[id]) > -1
: true;
} else {
return row[id] !== undefined
? String(row[id]).indexOf(filter.value) > -1
: true;
}
}}
columns={[
{
Header: "Name",
columns: [
{
Header: "First Name",
accessor: "firstName"
},
{
Header: "Last Name",
id: "lastName",
accessor: d => d.lastName
}
]
},
{
Header: "Info",
columns: [
{
Header: "Age",
accessor: "age"
},
]
}
]}
defaultPageSize={10}
className="-striped -highlight"
/>
{this.state.childOpen &&
<Child
data={data}
applyFilter={this.applyFilter}
/>}
<br />
</div>
);
}
}
render(<App />, document.getElementById("root"));
This is the code of my child page (the page which has the multi select dropdowns - there are just 2 dropdowns at the moment, I will add more in future)
import React, { Component } from 'react'; // eslint-disable-line
import PropTypes from 'prop-types'; // eslint-disable-line
// import uniqBy from 'lodash';
// import _ from 'lodash';
import Select from 'react-select';
import 'react-select/dist/react-select.css';
// import { bindActionCreators } from 'redux';
// import { connect } from 'react-redux';
import './Child.css';
class Child extends Component {
constructor(props) {
super(props);
this.state = {
data: this.props.data,
filtered: ,
select2: null,
select3: null,
};
// this.findUnique = this.findUnique.bind(this);
this.getOptions = this.getOptions.bind(this);
}
getOptions(propertyName) {
return this.state.data.reduce((accum, elem, i) => {
const accumulator = [...accum];
if (!accumulator.some(e => e.value === elem[propertyName])) {
accumulator.push({
id: i,
value: elem[propertyName],
label: elem[propertyName]
});
}
return accumulator;
}, );
}
onFilteredChange(value, accessor) {
const { filtered } = this.state;
let insertNewFilter = 1;
if(filtered.length) {
filtered.forEach((filter, i) => {
if(filter.id === accessor) {
if(value === '' || !value.length) filtered.splice(i, 1);
else filter.value = value;// eslint-disable-line
insertNewFilter = 0;
}
});
}
if(insertNewFilter) {
filtered.push({ id: accessor, value });
}
this.setState({ filtered });
}
render() {
console.log('Entering Child Render Method');
const { data } = this.state; // eslint-disable-line
const { filtered } = this.state; // eslint-disable-line
console.log('filtered items in child ' + JSON.stringify(this.state.filtered));
// console.log('data in child ' + JSON.stringify(this.state.data));
return (
<div className='filter-child' >
<div className='submitChild' onClick={() => { this.props.applyFilter(filtered); }}> Click Me to Submit Child
</div>
<div>
Select First Name :{" "}
<Select
style={{ width: "50%", marginBottom: "20px" }}
onChange={entry => {
this.setState({ select2: entry });
this.onFilteredChange(
entry.map(o => {
return o.value;
}),
'firstName'
);
}}
value={this.state.select2}
multi={true}
options={this.getOptions("firstName")}
/>
Select Last Name :{" "}
<Select
style={{ width: "50%", marginBottom: "20px" }}
onChange={entry => {
this.setState({ select3: entry });
this.onFilteredChange(
entry.map(o => {
return o.value;
}),
"lastName"
);
}}
value={this.state.select3}
multi={true}
options={this.getOptions("lastName")}
/>
</div>
</div>
);
}
}
Child.propTypes = {
data: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
applyFilter: PropTypes.func.isRequired
};
Child.defaultProps = {
};
export default Child;
This is the sample json object file from where I am getting data
const jsonData = [
{
firstName: "Sam",
lastName: "Jones",
age: "10"
},
{
firstName: "Sam",
lastName: "Jones1",
age: "10"
},
{
firstName: "Sam2",
lastName: "Jones1",
age: "12"
},
{
firstName: "Sam3",
lastName: "Jones3",
age: "13"
},
{
firstName: "Sam4",
lastName: "Jones4",
age: "14"
},
{
firstName: "Sam5",
lastName: "Jones5",
age: "15"
},
{
firstName: "Sam",
lastName: "Jones11",
age: "16"
},
{
firstName: "Sam6",
lastName: "Jones6",
age: "17"
},
{
firstName: "Sam7",
lastName: "Jones7",
age: "18"
},
{
firstName: "Sam8",
lastName: "Jones8",
age: "19"
},
{
firstName: "Sam9",
lastName: "Jones9",
age: "20"
},
{
firstName: "Sam10",
lastName: "Jones10",
age: "21"
},
{
firstName: "Sam11",
lastName: "Jones11",
age: "22"
},
{
firstName: "Sam12",
lastName: "Jones12",
age: "23"
}
];
export default jsonData;
I need a generalized solution which can be applied to any number of dropdowns.
Even after submitting the child page (the page having the drop downs) my drop down should look like screenshot 1 but what I am getting is a look of screenshot 2. When I submit the filter and then open the filter again, the filters are not showing in the placeholder position as shown below. I am getting that selected option in the drop down, the other options are not showing. I need to have the selected option in the placeholder while all options in the drop down. This will be followed for all drop down selectors.
javascript reactjs react-table
add a comment |
In my React Table multi-select I have a parent page and a child page I have a child page and a parent page. The parent page contains the data while the child page has the multi-select dropdowns.
I am able to filter properly but when I submit the filter and then open the filter again, the filters are not showing in the placeholder position as shown below. I am getting that selected option in the drop down, the other options are not showing. I need to have the selected option in the placeholder while all options in the drop down. This will be followed for all drop down selectors.
The above screenshot is when I select a particular column's filter checkbox
After submitting and trying to filter again I am getting this
This is the code of my Parent page (the page which has the data on which I am applying filter)
import React from "react";
import { render } from "react-dom";
import { makeData } from "./Utils"; // eslint-disable-line
// import matchSorter from "match-sorter";
// import Select from "react-select";
// import "react-select/dist/react-select.css";
import Child from './Child/Child'
import jsondata from './sample'
// Import React Table
import ReactTable from "react-table";
import "react-table/react-table.css";
class App extends React.Component {
constructor() {
super();
this.state = {
// data: makeData(),
data: jsondata,
dataDefault: jsondata,
filtered: ,
select2: null,
select3: null,
childOpen: false
};
this.openChild = this.openChild.bind(this);
this.applyFilter = this.applyFilter.bind(this);
this.showDefaultView = this.showDefaultView.bind(this);
}
applyFilter(filtered) {
console.log('Entering Apply Filter Function of Parent');
console.log('The filtered data in parent ' + JSON.stringify(filtered));
const currentStateChild = this.state.childOpen;
this.setState({
childOpen: !currentStateChild
}, () => {
console.log('Child is opened ' + this.state.childOpen);
});
const filterArray = filtered;
const apidata = this.state.data;
let filteredData = apidata.filter(item => // filter jsondata
filterArray.every( f => // so every member of filter array
f.value.includes(item[f.id])) ) // has a corresponding item[id] in value
console.log('The filtered rows are ' + JSON.stringify(filteredData));
this.setState({
data: filteredData
}, () => {
console.log('Manipulated rows ' + this.state.data);
});
}
openChild() {
const currentStateChild = this.state.childOpen;
this.setState({
childOpen: !currentStateChild
}, () => {
console.log('Child is opened ' + this.state.childOpen);
});
}
showDefaultView() {
const defaultDataParent = this.state.dataDefault;
this.setState({
data: defaultDataParent
}, () => {
console.log('Default rows ' + this.state.data);
});
}
render() {
const { data } = this.state;
return (
<div>
<div className='clickMeToOpenChild' onClick={this.openChild} > Click Me to Open Child</div>
<div className='clickMeToGetDefaultView' onClick={this.showDefaultView} > Click Me to show Default View</div>
<br />
<br />
<ReactTable
data={data}
filterable
filtered={this.state.filtered}
onFilteredChange={(filtered, column, value) => {
this.onFilteredChangeCustom(value, column.id || column.accessor);
}}
defaultFilterMethod={(filter, row, column) => {
const id = filter.pivotId || filter.id;
if (typeof filter.value === "object") {
return row[id] !== undefined
? filter.value.indexOf(row[id]) > -1
: true;
} else {
return row[id] !== undefined
? String(row[id]).indexOf(filter.value) > -1
: true;
}
}}
columns={[
{
Header: "Name",
columns: [
{
Header: "First Name",
accessor: "firstName"
},
{
Header: "Last Name",
id: "lastName",
accessor: d => d.lastName
}
]
},
{
Header: "Info",
columns: [
{
Header: "Age",
accessor: "age"
},
]
}
]}
defaultPageSize={10}
className="-striped -highlight"
/>
{this.state.childOpen &&
<Child
data={data}
applyFilter={this.applyFilter}
/>}
<br />
</div>
);
}
}
render(<App />, document.getElementById("root"));
This is the code of my child page (the page which has the multi select dropdowns - there are just 2 dropdowns at the moment, I will add more in future)
import React, { Component } from 'react'; // eslint-disable-line
import PropTypes from 'prop-types'; // eslint-disable-line
// import uniqBy from 'lodash';
// import _ from 'lodash';
import Select from 'react-select';
import 'react-select/dist/react-select.css';
// import { bindActionCreators } from 'redux';
// import { connect } from 'react-redux';
import './Child.css';
class Child extends Component {
constructor(props) {
super(props);
this.state = {
data: this.props.data,
filtered: ,
select2: null,
select3: null,
};
// this.findUnique = this.findUnique.bind(this);
this.getOptions = this.getOptions.bind(this);
}
getOptions(propertyName) {
return this.state.data.reduce((accum, elem, i) => {
const accumulator = [...accum];
if (!accumulator.some(e => e.value === elem[propertyName])) {
accumulator.push({
id: i,
value: elem[propertyName],
label: elem[propertyName]
});
}
return accumulator;
}, );
}
onFilteredChange(value, accessor) {
const { filtered } = this.state;
let insertNewFilter = 1;
if(filtered.length) {
filtered.forEach((filter, i) => {
if(filter.id === accessor) {
if(value === '' || !value.length) filtered.splice(i, 1);
else filter.value = value;// eslint-disable-line
insertNewFilter = 0;
}
});
}
if(insertNewFilter) {
filtered.push({ id: accessor, value });
}
this.setState({ filtered });
}
render() {
console.log('Entering Child Render Method');
const { data } = this.state; // eslint-disable-line
const { filtered } = this.state; // eslint-disable-line
console.log('filtered items in child ' + JSON.stringify(this.state.filtered));
// console.log('data in child ' + JSON.stringify(this.state.data));
return (
<div className='filter-child' >
<div className='submitChild' onClick={() => { this.props.applyFilter(filtered); }}> Click Me to Submit Child
</div>
<div>
Select First Name :{" "}
<Select
style={{ width: "50%", marginBottom: "20px" }}
onChange={entry => {
this.setState({ select2: entry });
this.onFilteredChange(
entry.map(o => {
return o.value;
}),
'firstName'
);
}}
value={this.state.select2}
multi={true}
options={this.getOptions("firstName")}
/>
Select Last Name :{" "}
<Select
style={{ width: "50%", marginBottom: "20px" }}
onChange={entry => {
this.setState({ select3: entry });
this.onFilteredChange(
entry.map(o => {
return o.value;
}),
"lastName"
);
}}
value={this.state.select3}
multi={true}
options={this.getOptions("lastName")}
/>
</div>
</div>
);
}
}
Child.propTypes = {
data: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
applyFilter: PropTypes.func.isRequired
};
Child.defaultProps = {
};
export default Child;
This is the sample json object file from where I am getting data
const jsonData = [
{
firstName: "Sam",
lastName: "Jones",
age: "10"
},
{
firstName: "Sam",
lastName: "Jones1",
age: "10"
},
{
firstName: "Sam2",
lastName: "Jones1",
age: "12"
},
{
firstName: "Sam3",
lastName: "Jones3",
age: "13"
},
{
firstName: "Sam4",
lastName: "Jones4",
age: "14"
},
{
firstName: "Sam5",
lastName: "Jones5",
age: "15"
},
{
firstName: "Sam",
lastName: "Jones11",
age: "16"
},
{
firstName: "Sam6",
lastName: "Jones6",
age: "17"
},
{
firstName: "Sam7",
lastName: "Jones7",
age: "18"
},
{
firstName: "Sam8",
lastName: "Jones8",
age: "19"
},
{
firstName: "Sam9",
lastName: "Jones9",
age: "20"
},
{
firstName: "Sam10",
lastName: "Jones10",
age: "21"
},
{
firstName: "Sam11",
lastName: "Jones11",
age: "22"
},
{
firstName: "Sam12",
lastName: "Jones12",
age: "23"
}
];
export default jsonData;
I need a generalized solution which can be applied to any number of dropdowns.
Even after submitting the child page (the page having the drop downs) my drop down should look like screenshot 1 but what I am getting is a look of screenshot 2. When I submit the filter and then open the filter again, the filters are not showing in the placeholder position as shown below. I am getting that selected option in the drop down, the other options are not showing. I need to have the selected option in the placeholder while all options in the drop down. This will be followed for all drop down selectors.
javascript reactjs react-table
In my React Table multi-select I have a parent page and a child page I have a child page and a parent page. The parent page contains the data while the child page has the multi-select dropdowns.
I am able to filter properly but when I submit the filter and then open the filter again, the filters are not showing in the placeholder position as shown below. I am getting that selected option in the drop down, the other options are not showing. I need to have the selected option in the placeholder while all options in the drop down. This will be followed for all drop down selectors.
The above screenshot is when I select a particular column's filter checkbox
After submitting and trying to filter again I am getting this
This is the code of my Parent page (the page which has the data on which I am applying filter)
import React from "react";
import { render } from "react-dom";
import { makeData } from "./Utils"; // eslint-disable-line
// import matchSorter from "match-sorter";
// import Select from "react-select";
// import "react-select/dist/react-select.css";
import Child from './Child/Child'
import jsondata from './sample'
// Import React Table
import ReactTable from "react-table";
import "react-table/react-table.css";
class App extends React.Component {
constructor() {
super();
this.state = {
// data: makeData(),
data: jsondata,
dataDefault: jsondata,
filtered: ,
select2: null,
select3: null,
childOpen: false
};
this.openChild = this.openChild.bind(this);
this.applyFilter = this.applyFilter.bind(this);
this.showDefaultView = this.showDefaultView.bind(this);
}
applyFilter(filtered) {
console.log('Entering Apply Filter Function of Parent');
console.log('The filtered data in parent ' + JSON.stringify(filtered));
const currentStateChild = this.state.childOpen;
this.setState({
childOpen: !currentStateChild
}, () => {
console.log('Child is opened ' + this.state.childOpen);
});
const filterArray = filtered;
const apidata = this.state.data;
let filteredData = apidata.filter(item => // filter jsondata
filterArray.every( f => // so every member of filter array
f.value.includes(item[f.id])) ) // has a corresponding item[id] in value
console.log('The filtered rows are ' + JSON.stringify(filteredData));
this.setState({
data: filteredData
}, () => {
console.log('Manipulated rows ' + this.state.data);
});
}
openChild() {
const currentStateChild = this.state.childOpen;
this.setState({
childOpen: !currentStateChild
}, () => {
console.log('Child is opened ' + this.state.childOpen);
});
}
showDefaultView() {
const defaultDataParent = this.state.dataDefault;
this.setState({
data: defaultDataParent
}, () => {
console.log('Default rows ' + this.state.data);
});
}
render() {
const { data } = this.state;
return (
<div>
<div className='clickMeToOpenChild' onClick={this.openChild} > Click Me to Open Child</div>
<div className='clickMeToGetDefaultView' onClick={this.showDefaultView} > Click Me to show Default View</div>
<br />
<br />
<ReactTable
data={data}
filterable
filtered={this.state.filtered}
onFilteredChange={(filtered, column, value) => {
this.onFilteredChangeCustom(value, column.id || column.accessor);
}}
defaultFilterMethod={(filter, row, column) => {
const id = filter.pivotId || filter.id;
if (typeof filter.value === "object") {
return row[id] !== undefined
? filter.value.indexOf(row[id]) > -1
: true;
} else {
return row[id] !== undefined
? String(row[id]).indexOf(filter.value) > -1
: true;
}
}}
columns={[
{
Header: "Name",
columns: [
{
Header: "First Name",
accessor: "firstName"
},
{
Header: "Last Name",
id: "lastName",
accessor: d => d.lastName
}
]
},
{
Header: "Info",
columns: [
{
Header: "Age",
accessor: "age"
},
]
}
]}
defaultPageSize={10}
className="-striped -highlight"
/>
{this.state.childOpen &&
<Child
data={data}
applyFilter={this.applyFilter}
/>}
<br />
</div>
);
}
}
render(<App />, document.getElementById("root"));
This is the code of my child page (the page which has the multi select dropdowns - there are just 2 dropdowns at the moment, I will add more in future)
import React, { Component } from 'react'; // eslint-disable-line
import PropTypes from 'prop-types'; // eslint-disable-line
// import uniqBy from 'lodash';
// import _ from 'lodash';
import Select from 'react-select';
import 'react-select/dist/react-select.css';
// import { bindActionCreators } from 'redux';
// import { connect } from 'react-redux';
import './Child.css';
class Child extends Component {
constructor(props) {
super(props);
this.state = {
data: this.props.data,
filtered: ,
select2: null,
select3: null,
};
// this.findUnique = this.findUnique.bind(this);
this.getOptions = this.getOptions.bind(this);
}
getOptions(propertyName) {
return this.state.data.reduce((accum, elem, i) => {
const accumulator = [...accum];
if (!accumulator.some(e => e.value === elem[propertyName])) {
accumulator.push({
id: i,
value: elem[propertyName],
label: elem[propertyName]
});
}
return accumulator;
}, );
}
onFilteredChange(value, accessor) {
const { filtered } = this.state;
let insertNewFilter = 1;
if(filtered.length) {
filtered.forEach((filter, i) => {
if(filter.id === accessor) {
if(value === '' || !value.length) filtered.splice(i, 1);
else filter.value = value;// eslint-disable-line
insertNewFilter = 0;
}
});
}
if(insertNewFilter) {
filtered.push({ id: accessor, value });
}
this.setState({ filtered });
}
render() {
console.log('Entering Child Render Method');
const { data } = this.state; // eslint-disable-line
const { filtered } = this.state; // eslint-disable-line
console.log('filtered items in child ' + JSON.stringify(this.state.filtered));
// console.log('data in child ' + JSON.stringify(this.state.data));
return (
<div className='filter-child' >
<div className='submitChild' onClick={() => { this.props.applyFilter(filtered); }}> Click Me to Submit Child
</div>
<div>
Select First Name :{" "}
<Select
style={{ width: "50%", marginBottom: "20px" }}
onChange={entry => {
this.setState({ select2: entry });
this.onFilteredChange(
entry.map(o => {
return o.value;
}),
'firstName'
);
}}
value={this.state.select2}
multi={true}
options={this.getOptions("firstName")}
/>
Select Last Name :{" "}
<Select
style={{ width: "50%", marginBottom: "20px" }}
onChange={entry => {
this.setState({ select3: entry });
this.onFilteredChange(
entry.map(o => {
return o.value;
}),
"lastName"
);
}}
value={this.state.select3}
multi={true}
options={this.getOptions("lastName")}
/>
</div>
</div>
);
}
}
Child.propTypes = {
data: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
applyFilter: PropTypes.func.isRequired
};
Child.defaultProps = {
};
export default Child;
This is the sample json object file from where I am getting data
const jsonData = [
{
firstName: "Sam",
lastName: "Jones",
age: "10"
},
{
firstName: "Sam",
lastName: "Jones1",
age: "10"
},
{
firstName: "Sam2",
lastName: "Jones1",
age: "12"
},
{
firstName: "Sam3",
lastName: "Jones3",
age: "13"
},
{
firstName: "Sam4",
lastName: "Jones4",
age: "14"
},
{
firstName: "Sam5",
lastName: "Jones5",
age: "15"
},
{
firstName: "Sam",
lastName: "Jones11",
age: "16"
},
{
firstName: "Sam6",
lastName: "Jones6",
age: "17"
},
{
firstName: "Sam7",
lastName: "Jones7",
age: "18"
},
{
firstName: "Sam8",
lastName: "Jones8",
age: "19"
},
{
firstName: "Sam9",
lastName: "Jones9",
age: "20"
},
{
firstName: "Sam10",
lastName: "Jones10",
age: "21"
},
{
firstName: "Sam11",
lastName: "Jones11",
age: "22"
},
{
firstName: "Sam12",
lastName: "Jones12",
age: "23"
}
];
export default jsonData;
I need a generalized solution which can be applied to any number of dropdowns.
Even after submitting the child page (the page having the drop downs) my drop down should look like screenshot 1 but what I am getting is a look of screenshot 2. When I submit the filter and then open the filter again, the filters are not showing in the placeholder position as shown below. I am getting that selected option in the drop down, the other options are not showing. I need to have the selected option in the placeholder while all options in the drop down. This will be followed for all drop down selectors.
javascript reactjs react-table
javascript reactjs react-table
asked Jan 3 at 3:50
tommy123tommy123
12118
12118
add a comment |
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54016115%2fdropdown-filters-are-not-showing-all-options-after-submit-and-the-applied-filter%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54016115%2fdropdown-filters-are-not-showing-all-options-after-submit-and-the-applied-filter%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
uw7Vpic,i,XZjSUzLdbJxWjWX37yIJnpqlQkJbveE,iA,nWRJr,kh h28MOOi4 b66Y0vsHxmr9Ejv,biFZ2vYEuK88zx