2

Hello everyone i want to make server side search using debounce method the and when i create a ref to the table and i logged it i found this method onSearchChangeDebounce but i didn't know how to use it, any ideas i'll be appreciated. here is my code 

<MaterialTable
    tableRef={ref => this.tableRef = ref}
    title={title}
    data={data}
    isLoading={store.loading}
    options={this.options}
    actions={this.actions}
    localization={this.localization}
    columns={this.columns}
    components={this.components}
    icons={this.icons}
    detailPanel={this.rowDetailsPanel}
    onChangeRowsPerPage={pageSize => this.handleChangePageSize(pageSize)}
    onSearchChange={data => this.handleServerSideSearch(data)}
/>

handleServerSideSearch(dataToSearch) {
    console.log(dataToSearch);
    // call api here after debounce
}

Thanks in advance.

Naor Levi
  • 1,713
  • 1
  • 13
  • 27
Mohammed Saber
  • 50
  • 6

1 Answers1

1

You can set the debounce inteval with the debounceInterval prop in options like this:

<MaterialTable
    tableRef={ref => this.tableRef = ref}
    title={title}
    data={data}
    isLoading={store.loading}
    options={{...this.options, debounceInterval: 1000}}
    actions={this.actions}
    localization={this.localization}
    columns={this.columns}
    components={this.components}
    icons={this.icons}
    detailPanel={this.rowDetailsPanel}
    onChangeRowsPerPage={pageSize => this.handleChangePageSize(pageSize)}
    onSearchChange={data => this.handleServerSideSearch(data)}
/>

handleServerSideSearch(dataToSearch) {
    console.log(dataToSearch);
    // call api here after debounce
}

This will call handleServerSideSearch 1 second after the last user search interaction.

halfer
  • 19,824
  • 17
  • 99
  • 186
Domino987
  • 8,475
  • 2
  • 15
  • 38
  • thanks a lot it worked fine, but is there is any way to customize this behavior ? i want debounce only work for search Field which we enable it in options by `search: true ` – Mohammed Saber Jan 19 '20 at 13:00
  • Can you elaborate on your exact usecase? – Domino987 Jan 19 '20 at 13:33
  • please check this https://stackoverflow.com/questions/59810657/how-to-use-server-side-pagination-with-client-filtration – Mohammed Saber Jan 19 '20 at 13:52
  • Hi Domino. I wonder if I could trouble you to refrain from adding "hope this helps" or other similar sentiments in your answers. Undoubtedly everyone hopes their work helps, but it is redundant, and we surely do not want to add it to all 25M answers on the site. There is something of an expectation here that, since the site is not a discussion forum, that we use technical writing standards if we can. Thanks! – halfer Jan 22 '20 at 23:49