epic: Support interactivity for HTML output

[kszlim]

Prework

• [X] Read and abide by the great_tables code of conduct and contributing guidelines.
• [X] Search for duplicates among the existing issues (both open and closed).

Proposal

Support interactivity for html output of great tables. This might be a big ask, I don't know how technically involved it would be, but it would be great to allow basic interactivity like sorting by column, filtering.

I think you'd then want to support a new param in as_raw_html with interactive=True which would then enable these features. Or perhaps it could be a bunch of method calls on table to enable piecemeal interactivity.

This would be a killer feature personally.

Some inspiration could be the level of interactivity of https://docs.datapane.com/blocks/display-blocks/#tables-and-data

[ctdunc]

I have also been meditating on the fact that this would be an incredible feature. Assuming this is running on a webserver, the interactivity would be at least somewhat tied to the framework that a user chooses (e.g. Flask or Django).

One interesting possibility I've daydreamed about is to provide htmx attributes to different table components that correspond to actions to be performed on the dataframe. This way, great-tables has to incorporate very little (if any) JS and can instead rerender the parts of the table updated by the change using the already existing layout framework.

I would be interested in helping to make this a reality :)

[kszlim]

I think this should theoretically be doable without a webserver, in fact, I think I wouldn't want this feature if it required a webserver.

It should be all doable clientside. Even supporting SQL theoretically can be done clientside (though I think some minimal interactivity is usually all that's needed).

[machow]

Thanks for opening this--we're definitely eager to support something like this! Right now, we're syncing with the shiny team (cc @schloerke) on potentially...

1. enabling the range of great tables structure and styling on their Data Grid component.
2. eventually trying to pull out the DataGrid into it's own library, so Great Tables could generate these tables without the need for a web server backend.

AFAIK they're using the tanstack table.

Building on the tanstack table

The R version of Great Tables (gt) uses a wrapper around the tanstack table, called reactable, to generate interactive tables. If we could create a similar wrapper in python, it shouldn't be too hard to wire up Great Tables to it.

Here are some examples of the gt packages interactive tables.

Building on something else

If anyone knows of something better, we're open to it! I know there are a lot of interactive table tools out there that we've probably overlooked!

Potential requirements

1. Doesn't require a webserver (but could have hooks to optionally wire one up; e.g. shiny, django, fastapi)
2. Easy to use from things like jupyter lab and VS Code
3. Clear table building interface Great Tables plugs into

[jrycw]

I've seen an example from Panel a few months ago that might be a potential solution for our use case.

[machow]

Oh cool! Here's the panel Tabulator page, which seems to be similar to reactable

[machow]

We are still wrapping this piece up, but now have a draft of interactive tables using a package called reactable-py

• https://machow.github.io/reactable-py/demos/
• https://machow.github.io/reactable-py/demos/great-tables.html

[kszlim]

Looks pretty cool, curious if it's possible to make it work with a static html? I think having an interactive table that can work without any backend would be a killer feature.

Even better if you can "sidecar" a parquet file or something that is the source of the data.

[machow]

Oh shoot -- I think it might not be too crazy to remove the pieces that are not self-contained. It looks like some of the javascript pieces are currently downloaded via CDN.

Opened an issue to track on the repo:

• https://github.com/machow/reactable-py/issues/14

[jrycw]

I'm considering whether it might be possible to implement the interactivity request using HTMX. The examples provided are impressive, and it seems like you just need to include the JS file in the header to get started.

[mayurankv]

The reachable examples are brilliant! Just wondering what they currently lack which would make this feature complete? (Curious to understand the current shortcomings of the approach).

[Kvit]

@jrycw, @machow +1 . I believe the reactivity can be solved if it becomes possible to add custom HTML attributes to rows (cells, columns) in the table. Then we can use declarative reactive frameworks like Datastar or HTMX to send selection to server using onclick event. Example of such custom HTML attribute with Datastar framework (and FastHTML): data_on_click="@post('/selected/row_id')" More Datastar Python examples

[Kvit]

@machow @jrycw Here is implementation of reactivity in Great Tables using the DataStar reactive framework and FastHTML for server-side processing. I had to use beautifulsoup to inject reactive attributes into HTML elements after the HTML table is generated, but it would be very nice to have an option to add attributes to HTML elements in as_raw_html() function instead of post-processing generated HTML.