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.
JavaScript and PyScript Python applications can easily take JSON and then output an HTML table with headers, rows, columns, etc.
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.
Hi Gary,
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.
Hi Gary,
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!
