React grid Pagination & filtering

Hi,

 

In my grid I have both the options filtering and pagination. When I went to page 2 and type something in filter to search it will show filtered record in page 1 but in the pagination I can still see page 1 and page 2. Please find attached screenshot for same. 

 

Scrrenshot 1 (Seact-grid-Pagination-1.png)

I have list of records in gridI

Scrrenshot 2 (React-grid-Pagination-2.png)

I moved to page 2 and try to search record present in page 1 (for example : Parag)I

Scrrenshot 3 (React-grid-Pagination-3.png)

Filtration works and I can see result in page 1 but still I can see page 1 and page 2 both. Please help

//Code

pageChange = (event) => {
this.setState({
skip: event.page.skip,
take: event.page.take
});
}

<Grid
data=
{filterBy(this.state.data, this.state.filter)
.slice(this.state.skip, this.state.take + this.state.skip)
}
skip={this.state.skip}
take={this.state.take}
total={this.state.data.length}
onPageChange={this.pageChange}
pageable={true}
resizable
onItemChange={this.itemChange}
editField="inEdit"
filterable
filter={this.state.filter}
onFilterChange={(e) => {
this.setState({
filter: e.filter
});
}}
>
<GridToolbar>
<button
title="Add new"
className="k-button k-primary"
onClick={this.enterInsert}
>Add new
</button>
  {
this.state.data.filter(p => p.inEdit).length > 0 && (
<button
title="Cancel current changes"
className="k-button"
onClick={() => this.setState({ data: sampleList.slice() })}
>Cancel current changes
</button>
)}
</GridToolbar>
<GridColumn field="Id" title="Id" width="50px" editable={false} filterable={false} />
<GridColumn field="FullName" title="Full Name" cell={DropDownCell} />
<GridColumn field="EmployeeId" title="Employee Id" editor="numeric" format="{0:#####}" filter="numeric" />
<GridColumn field="BirthDate" title="BirthDate" editor="date" format="{0:d}" filter="date" editable={true}/>
<GridColumn field="FirstName" title="First Name" cell={firstNameCell} />
<GridColumn field="MiddleName" title="Middle Name" />
<GridColumn field="LastName" title="Last Name" cell={lastNameCell} />
<GridColumn cell={this.CommandCell} filterable={false} />
</Grid>