微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

如何解决覆盖 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
   }}

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。