覆盖 React 材料表中的搜索功能

问题描述

我想覆盖材料表的搜索功能，但我很困惑，因为我不知道我将使用什么正确的道具？数据？数据管理器？哪一个？

<MaterialTable
                columns={columns}
                data={certificates}
                components = {{
                    Toolbar: props => (console.log(props),(<MTabletoolbar {...props}/>
                        ))
                }}
            />

我想改变，因为它在前端搜索，但我有一个搜索功能，我想使用它。

解决方法

// Create a state
constructor() {
  super();
  this.state = {
    searchQuery: [],tableQuery: '',}
  this.tableRef = React.createRef();
}

/**
 * Function to fetch all Data based on search query
 * Keep in mind **query** is the default parameter for tableData element. Which returns an array with required search      * values.
 */
fetchData(clientId,query) {
  query.search = this.state.searchQuery;
  this.setState({ tableQuery: query });
  return authenticationService.getAllNotifications(clientId,query)
    .then((result) => {
      const tableData = {
        data: result.data.data.records,page: result.config.params.page - 1,totalCount: result.data.data.count,};
      return tableData;
    });
}

<Table tableData={query => this.fetchData(authenticationService.currentData.source._value.clientId,query)}
   columns={this.state.columns}
   myRef={(ref) => { this.tableRef = ref; return true; }}
   options={{
     actionsColumnIndex: -1,pageSize: 10,showTitle: false,isLoading: true,debounceInterval: 500,search: true
   }}

material-table reactjs reactjs