While I have come across similar questions like this and this, my issue presents a unique challenge. I am polling data for a table every second from my REST Api using axios. Despite this, I want the user to be able to freely manipulate (e.g. order, sort, and select) the rows even when the data updates. Typically, when there is a data update, all selections are cleared, and orders are lost.
To address this, I have created a local store with my data which I pass as a reference to my table. The update process looks like this:
setStrategies(newStrategies) {
if (this.state.strategies.length == 0) {
newStrategies.forEach(strategy => {
this.state.strategies.push(strategy)
});
} else {
this.state.strategies.forEach(strategy => {
var newStrategy = newStrategies.find(x => x.strategyName === strategy.strategyName);
strategy.status = newStrategy.status;
strategy.lastPingTime = newStrategy.lastPingTime;
});
}
While this solution is functional, I believe it may be overly complex. Hence, I am seeking advice on the best approach or a table component that could handle the binding automatically. Any suggestions?