Join the Webstudio community

Updated 2 months ago

How can I number dynamic results?

At a glance

The community member is using a collection to display a list in table form, and they want to number the list so that each record has a unique number (e.g., 1-10 for 10 results). They have tried adding a text area to the collection, but the number is the same for every item. The community members suggest a workaround of creating a collection with numbers 0-3 and using those as both the number and the keys to access the data. They also mention a demo project that demonstrates this approach. Another community member suggests using CSS counters as a better solution, and provides a tutorial link for that approach. The community member who posted the original question says they were able to use the first demo to number both the top 3 and a list of about 20 items.

Useful resources
I am using a collection to display a list in table form where each record is on its own row. How can I number the list so the number is different for each record? Eg if there are 10 results, they will be numbered 1 - 10. Whenever I try to add a text area in the collection that is not bound to dynamic text (eg rank number), it is the same for every item. Is it possible to output the record number/index position dynamically?
J
C
6 comments
This issue would enable that.. you should vote up https://github.com/webstudio-is/webstudio/issues/3465

For now, I suppose you can create a collection and manually enter [0,1,2,3]

And use those as both the number (it would be collection item + 1) and the keys to access your array in data e.g myData.collectionItem
Ah thank you so much for the demo, that helped explain it to me. I think I would be able to use that workaround at least for now.
great. yeah not very ideal tbh but gets the job done for now... although actually i think i have a better recommendation.. this is possible with CSS
I will look into the tutorial - thanks for sharing. Using the first demo I was able to number both the top3 and the list of about 20 that will be at the bottom
Attachment
image.png
Add a reply
Sign up and join the conversation on Discord