Accessor for a column which depends on a component
In our app we have a concept of a "run", and I need to sort a table column "duration".
1. If the run is finished, back-end returns
createdAt and finishedAt for which an accessor function is easy to write: calculateDuration(finishedAt, createdAt).
2. The problem is, when the run is ongoing, finishedAt is undefined, and in the table cell, we use a React component which calculates currentTime inside a useEffect and shows the duration differently, using createdAt and currentTime. At no point is currentTime exposed outside this cell component.
How to write an accessor function for case 2, so the "duration" column can be sorted by run duration, taking into account both finished and unfinished runs?3 Replies
flat-fuchsia•10mo ago
Have you considered doing the duration calculation where you fetch the data from with a refreshInterval on that query? Instead of having dynamic data in the accessor and cell components. How real time is the product requirement. Are we talking seconds or minutes?
vicious-goldOP•10mo ago
Seconds.
flat-fuchsia•10mo ago
If the table data is using react query. Get the data with queryClient.getQueryData().
I've done this quite a bit with data that's calculated in realtime for sorting and filtering.
If the table is rendering you can assume the data is in cache.
Or sorry, reading this again I should be more exact.
Your table cell can be a component that uses use query and runs the function. Pass in info.row.original from the column definition.
Then later if you need a sorting function on it, you can get the data from getQueryData, calculate, and sort against cached data