Question:
How do I correctly update the view of the data in the table after the underlying collection data changes?
Product:
wix-dataset, table repeaters
What are you trying to achieve:
I have a table repeater wired up to a CMS collection. I would like to refresh the data in the table after certain events (mostly after closing lightboxes that add rows to (or edit rows in) the dataset, but I also added a button with an onClick to the same function.)
I figured that I’d need to refresh the dataset as well (though I strongly suspect that’s also the cause of my issue), here’s my function:
export function refreshData(event) {
return $w("#volunteerReadWrite").refresh().then(() => $w("#timeTable").refresh());
}
When I click the “Refresh Data” button (calling that function), it doubles up the data. I would expect nothing to change since the underlying collection has not changed.
Before:
After:
What have you already tried:
I thought I might work around this oddity by deleting the rows in the table before refreshing it. Unsurprisingly, this removes the old records, but the .refresh() doesn’t add the new version(s).
export function refreshData(event) {
return $w("#volunteerReadWrite").refresh().then(() => {
const table = $w("#timeTable");
// Not sure why I need to clear out old values, but it is definitely doubling up
table.rows = [];
return table.refresh();
});
}
And finally, I tried just updating the table itself, without updating the underlying dataset, and that didn’t do anything, as expected.
export function refreshData(event) {
return table.refresh();
}
I’m at a loss to figure out what I should be doing differently from what I am doing.
Additional information:
This is for a dashboard page for admins to add records to the collection to be used in backend reporting tasks that are working already.
The collection is fairly straightforward:
The Member column field is a Reference to the Members/FullData collection.
Obviously, the doubling is in display only, the data in the collection is not doubled up.