My idea was to get some JSON from a API (I can do this part using pyfetch) which I would pass back to a HTML Table and render the data in table rows dynamically.
I can’t join the dots though on how you do this. I’ve seen examples where elements can be updated from within pyscript e.g. text but not table rows. Any ideas?
Rendering a table from JSON or other data structures is a typical backend application.
No matter which, backend or client, some piece of code outputs the HTML statements to display a table.
I wrote a simple Python class that will take formatted input and build an HTML table. If interested, I can post this on GitHub.
Yes please sharing that example on GitHub would be great, thank you. I was going to consider rendering some html element using a jinja template outputting raw html but have just seen that is not possible since the tags cannot be escaped.
I posted the example on GitHub:
I did not include documentation (no time today). If you have questions, post them here and I will try to create suitable documentation to help you.
Look at the code in example.py. That calls the Python class in jhanley_html.py.
Thank you John for taking the time, I cloned the repo and it works perfectly (screenshot attached). I think would be very useful as an in-built library which you could just call since I expect a requirement for doing this would be quite common. I am starting to understand more thanks to your great blog and also working examples like this one.
Yes, we need libraries like my example. The reason I have not published this code before is I expect that there are some talented developers working on solutions in this area. I can envision a framework being released that makes PyScript applications easier to develop with great interfaces.
The example I posted on GitHub is from an example project I am writing that has a Python AWS S3 interface completely in the browser. The table code handles the XML returned from S3 (XML → JSON → HTML Table).
Rendering client-side is a goal of PyScript, so you’re asking a good question. The todo example does this in an interesting way:
If anyone is still interested in immediate HTML table rendering, take a look at my live examples (here or here) based on simply printing a pandas
df (with a little CSS to make it prettier).
If you would like to add sorting take a look at all the JS libraries you could simply add on your page automatically enabling sorting for any HTML table on your page.
Else, the pandas function
pandas.DataFrame.to_html or even
pandas.DataFrame.to_markdown if you are writing a blog might come in handy as well!