承接part2，可以進行增刪改後，再來就只剩下搜尋了！
而kendo本身就有搜尋排序相關的函數，因此實做起來非常的簡單。

實作

更改src/dataTable.js

• 引入外部模組

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

• 新增state元素

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

• 修改Grid屬性

  <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屬性

<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提供的搜尋排序功能，可以在短短幾行內完成不同資料型別的排序與搜尋，加快開發速度。