Material-table: Remote data fetching on every search/filter keystroke

[ulrichdahl]

When implementing the example for remote data and doing a search, it sends the query for every keystroke in the search or any filter input

Is there a way to set a timer for to wait after a keystroke before trickering the query for remote data?

[ankursehdev]

You can use JS Debouncing technique to tackle that.

function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};

and then fire this on KEYUP event for the search box.

var myEfficientFn = debounce(function() {
    // All the taxing stuff you do, after 2 seconds
}, 2000);

<inputFieldREF>.addEventListener('keyup', myEfficientFn);

[watchsteve]

You can set the debounceInterval within in the options attribute of the MaterialTable Component.

<MaterialTable
    options={{...this.options, debounceInterval: 1000}}
    .
    .
    .

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. You can reopen it if it required.