Material-table: Table flashes and delete words when searching in remote data table

[terapepo]

Describe the bug
After implementing the remote data table as the example provided, if the user types on the search input, the table flashes for every word typed and sometimes if you type really fast, it will delete some of the words you typed, I would recommend to implement a debounce or throttling for the search input. Also and I know it's a already reported bug, but the filters state also reset #491 .

[mbrn]

Hi @terapepo

This is not a bug. You used columns directly. I advise you to use them in parent components' state. So tableData of columns will not be disappear when you setState in data function.

[mbrn]

Actually it has a debounce. It is default 200ms. You can change it with options.debounceInterval

[GDnsk]

Hi @terapepo

This is not a bug. You used columns directly. I advise you to use them in parent components' state. So tableData of columns will not be disappear when you setState in data function.

Hi @mbrn

How can i achieve it? Do i have to declare columns in the parent component?

<MaterialTable
        style={{ width:'100%'}}
        title={<Typography style={{ fontSize:'calc(10px + .5vw)' }}>Title</Typography>}
        columns={[
          { title: 'Id', field: 'id' },
          { title: 'Nome', field: 'name' },
          { title: 'E-mail', field: 'email' },
          { title: 'Role', field: 'roles[0]', sorting: false },
        ]}
        options={{ 
            search: true,
            debounceInterval:1000
          }}
        data={query => tableService.searchUsers(query)

        }/>

Thank You.

[ambr89]

Hi @mbrn ,
do you have resolve?

When I try to update data, the values of filter disappears.

Thanks in advance.

[jaggaer-npasic]

debounceInterval:1000
It's not working.