Text filter search issue

[samashok12005]

Hi,

The text filter is not working properly.
Steps to reproduce.

1. Search randomly using text filter in the table.
   2.First couple of searches gives the result properly.
2. Then another search produces some random results in table.

Is there a way to fix it?

Thanks
Ashok S.

[samashok12005]

Fixed this issue using onFilter method. But column filter with pagination not working as expected.

[AllenFang]

@samashok12005 would you please show me your code via codesandbox, here is an example you can take.

In addition, give me more information as you can, let will easier for me to help you, thanks

[samashok12005]

Hi Allen,
Thanks for the reply.
I have more records(700) and it's a project. So i can't share everything.But try with multiple columns search and pagination with more records.
Step1: I have two column text filters.
Step2: I do the search and finish, it's working. And click on the pagination go to page 5 or 6.
Stesp: Search again on column filter. It gives wrong results.

Try with more number of records.
Please find the screen

[AllenFang]

hello, @samashok12005 you can just extract part of code to codesandbox.. at least a simple and minimal code for me to reproduce your issue, you dont need to create 700 records, just 12 or any numbers are enough for me to reproduce this issue.

if you really can not share a example code to me for reproducing purpose, at least you should show me your configuration for filter, search and pagination. In addition do u enable remote mode? Please give me enough information so that I can help you. I will reopen this issue until I can identify this issue is a truly bug. Thanks

[samashok12005]

Hi Allen,
Please find the pagination and search configuration.
Pagination config:

export const paginationOptions = {
paginationSize: 100,
pageStartIndex: 1,
firstPageText: "First",
prePageText: "Back",
nextPageText: "Next",
lastPageText: "Last",
nextPageTitle: "First page",
prePageTitle: "Pre page",
firstPageTitle: "Next page",
lastPageTitle: "Last page",
showTotal: true,
sizePerPageList: [{
text: "100", value: 100
}, {
text: "150", value: 150
}, {
text: "200", value: 200
}],
hidePageListOnlyOnePage: true
};

search config:

{
dataField: [constants.REQ_BODY_NOMENCLATURE],
text: [constants.LABEL_NOMENCLATURE],
headerClasses: [constants.LABEL_THEAD_DESIGN],
filter: textFilter({
style: {
width: "80%",
fontSize: "11px"
},
onFilter: (value) => {
if (value.length === 0) {
this.setState({ scheduleData: [] });
this.setState({ scheduleData: this.state.originalScheduleData });
} else if (value.length > 0) {
const filterRecords = this.state.originalScheduleData.filter((row) => { return row.nomenclature; });
this.setState({ scheduleData: [] });
this.setState({ scheduleData: filterRecords });
}
}
}),
style: (cell, row, rowIndex, colIndex) => {
return {
whiteSpace: "nowrap",
textOverflow: "ellipsis",
overflow: "hidden",
maxWidth: "150px"
};
},
events: {
onMouseEnter: (e, column, columnIndex, row, rowIndex) => {
e.target.style.whiteSpace = "normal";
},
onMouseLeave: (e, column, columnIndex, row, rowIndex) => {
e.target.style.whiteSpace = "nowrap";
}
}
}
And the table below.
<BootstrapTable keyField='id.cDT' width='100' height='250' noDataIndication={"No data available"} scrollTop={"Bottom"} data={scheduleData} columns={this.scheduleDataColumns}
filter={filterFactory()} pagination={paginationFactory(utility.paginationOptions)} striped="true" />.

Thanks, Please let me know, if it's sufficient. And i did not use remote mode.

[AllenFang]

I think there's nothing special for me, I mean you code look good and I can not reproduce any issue in my side. However, i probably will suggest you not to call setState in onFilter to avoid some side effects.