Rich table view

Hello,

I am trying to create a “rich” table widget. The server code provides the data as a list of dicts (pandas dataframe to_dict). The tables are not too big, so we do not have to worry about large data challenges.

I want my Anvil webapp to render the table data in a “modern” style, e.g. alternating row colors, colored header, pages. I also want some basic table features that most users expect: csv download, column sorting and filtering.

Is there an feature-rich table widget that I can easily use, e.g. TableView(data=list_of_dicts)

I have tried creating my own table view. It is alright, but it looks a bit primitive. Styling and making it look nice would take time; it would be great if I can simply re-use an existing widget.

Thank you!

I use this, it is not fancy at all, but it allows sorting and other things without creating template forms: DataGridJson - A DataGrid with quick simple setup

But I think you will like this better: Tabulator v2 release

2 Likes

I had the same problem. If you are looking for a solution that you can easily populate witha data (that has different columns each time) than only Data Grid JSON from Stefano.

Tabulator is the closest good looking ready to use solution.

If you want to style the data grids you have to use CSS.

I have 3 data grids types. One based on the solution from Stefano to show the data from loaded excel files with only basic controls
and two for my databases (with expandable row and with option to expand beyond view width).
It took some time to add all the standard functions like sorting, filters, total number, page of pages, selected rows etc.

My temporal style is something like this. I still have some work to do on colors and maybe change some styles, but at the end it will be similar. On one thing I still need to work. Add column width resizing per drag & drop.:

You can even give an option to expand the row to show the form with the rest of the data to reduce the amount of columns. With the animations from Anvil Extras it look even better. With smooth expanding animations or augementation to make rows clickable etc…

Sadly without CSS you will get only some raw table. Use material design 3 as base. It already has a good base to start with, hide standard header row and page controls. Than design everything with custom buttons.

3 Likes