I’ve implemented a pretty full-featured data table in my app. Unfortunately I can’t share the code but I can describe the basic principles.

I’ve broken it down into three pieces of data.

First I have what I call the “model”. It contains the URL of the endpoint that can fetch me a page of data and data about how to render each column. Next is the “view state”, which contains things the user can change: sort column and order, page size, current page index, etc. Finally, there’s the “content” that comes back from the endpoint, which contains the row data for the current page and a count of the total number of rows.

I put the model in a CLJC file and the other two in app DB. I made the decision to only have one data table per page so that my data is always at a known path, which simplifies all my event handlers.

For each data table in my app I create an endpoint that accepts the view state and returns a new content structure. I just POST the view state, but you could just as well serialize the state into a query parameter and do a GET.

I pass the model to the view component. It subscribes to the view state and content and renders accordingly.

When I first display a page containing a data table, I dispatch the event that posts to my endpoint and populates the content slot on successful return.

When the user interacts with the data table, e.g. clicking a header to change the sort order or clicking to view the next page, I dispatch an event to update the view state, then re-do the call to the endpoint to refresh the content.

That’s the essence of it. You can add stuff around that, e.g. showing a spinner while data is being loaded, adding filters to your view state, etc., but it’s all just expanding on those ideas.

Hope this helps.

@U0DTSCAUU Thanks for the info. Will chew on that. We’re using graphql/aws appsync for the backend, but it sounds like the style you are describing should work similarly.

Would still love to see code on how others have approached this in re-frame

The main GitHub page of the project:

Thanks, i created an issue. We'll fix it.