Attempt at Dynamic Data Grid Very Slow

Anvil Q&A
1

I’m trying to create a dynamic content usage viewer from data stored elsewhere. This data is probably not shareable so I’ve mocked up this section of my app here, with some dummy data.

The user will be able to select the content they are interested in and a column to sort the results by (the attributes vary depending on content), along with how many they want to see. The dummy data shows how two of them might be constructed.

All of this is working fine. The column headings and number of results change accordingly, the right data is returned. No problem. Except if I choose a large number of results from the list it becomes unworkably slow, or crashes completely. By large I mean 50 or 100, so not very large at all.

I have used an approach I found elsewhere on the forum:
create the grid in code
create a data row panel for the headers
create a data row panel for each row of data

Apart from the slowness I notice that the data in the last row is shunted over to the right and don’t know why.

Also when I specified the grid columns I inadvertently created the “id” keys without surrounding quotes, though it seemed to work fine. When I put the quotes in, however, it was very wrong, with all the column names in the first column and a very tall header row!

I have created everything here in the client, for convenience, and it demonstrates the problems just fine. Naturally, the real data comes from server code.

2

Can you share a clone link for the demo you posted?
I’ll see if I can see anything obviously wrong.

3

Hi David, thanks very much. Apologies for that, not done this before. I hope this is what you need.

https://anvil.works/build#clone:GYOEU3CIJV4Y6UDU=22UDOHPO2OF2Y2TJ25BITEWU

1 Like
4

I’ve not added data rows like that before. Here’s how I do it (and it seems to be much faster).

Swap out this :

for row in row_data:
  drp = DataRowPanel(item=row)
  grid.add_component(drp)

for this :

rp = RepeatingPanel(item_template=DataRowPanel)        
rp.items = row_data
grid.add_component(rp)

and it loads 100 rows in a second or so.

Let me know if that works for you.

reference :
https://anvil.works/docs/client/components/data-grids#manipulating-data-grids-using-code

edit
I don’t see the issue with the last row on the cloned app; can’t help with that one.

1 Like
5

That’s way better, thanks David. I did try a repeating panel in my travels but must have missed something as it returned nothing at all, so I reverted back. With your syntax it works a treat though. The strange last row problem has disappeared too!

I really appreciate your time.

Cheers.

1 Like
6

This solution works nice-and-fast as far as you accept its “drawback”: all columns will be labels.
If you ever need to have custom components for dynamically-built datagrids then you’ll have to build each row with a DataRowPanel, just like @Callipygean was doing.
Or - at least - this is my comprehension of this thing and I couldn’t find a better way to do that.

So, selfishly (I admit :smiling_imp:), I leverage this post to revive an unanswered post of mine dated aug 14th about a similar quesiton and post again the proof of concept clone-app link.

If there’s a better way to do that, I’d be happy to learn it.

BR

7

I have updated the app here with David’s suggestion. There is still an issue with data being squeezed over to the right. It now occurs when you switch the page on the grid.

https://anvil.works/build#clone:GYOEU3CIJV4Y6UDU=22UDOHPO2OF2Y2TJ25BITEWU