承接part2，可以进行增删改后，再来就只剩下搜寻了！
而kendo本身就有搜寻排序相关的函数，因此实做起来非常的简单。

实作

更改src/dataTable.js

import { orderBy,filterBy } from '@progress/kendo-data-query';

{  sort: [], // 排序  filter: [] // 搜寻}

  <Grid    style={{ height: '400px', width: '970px' }}    data={filterBy(orderBy(this.state.gridData,this.state.sort),this.state.filter)}    onRowClick={this.rowEdit}    onItemChange={this.itemChange}    editField='inEdit'    resizable={true}    sortable={true}    sort={this.state.sort}    onSortChange={(e)=>{this.setState({sort: e.sort});}}    filterable    filter={this.state.filter}    onFilterChange={      (e) => {        this.setState({filter: e.filter});      }    }  >

<Column field='ProductID' title='ID' width='85px' editable={false} filterable={false}/><Column field='ProductName' title='Product Name' width='200px' /><Column field='UnitsInStock' title='Units In Stock' width='180px' editor='numeric' filter='numeric'/><Column field='Discontinued' width='180px' cell={this.booleanCell} filter='boolean' /><Column field='Category.CategoryName' title='CategoryName' width='200px' /><Column title="Edit"  width='120px' cell={this.onDeleteItem} filterable={false} />

执行npm start就可以看到我们的资料表了！
顺带附上github给大家参考

结轮

相对于上一篇需要自定义事件，使用kendo ui提供的搜寻排序功能，可以在短短几行内完成不同资料型别的排序与搜寻，加快开发速度。