How do I automatically update data on Tables using setInterval

Interval events (Timing functions in JavaScript) allow the user to run APIs and DB queries periodically. You can configure these using the setInterval and clearInterval functions.

Say you want to update data on Table without re-running the API / or using a refresh button, you can use the setInterval function.

In this example, we’ll be using the switch widget (Switch1) to control this function and a table widget that uses the getData query.

Now on Switch1 widget’s onChange property, we use the following JS:

{{
(() => {
    if (Switch1.isSwitchedOn) {
        setInterval(() => getData.run(), 2000, "autoupdate");
    } else {
        clearInterval("autoupdate");
    }
})()
}}

Here, the setInterval function calls the getData query every 2 seconds when the switch widget is turned on, else, it removes the autoupdate (id) interval.

CleanShot 2022-04-04 at 15.59.42

More Docs: https://docs.appsmith.com/framework-reference/intervals-time-events#setinterval