New Component: Display DataFrames as interactive DataTables with ITables

Show the Community!
, ,
1

ITables is a Python package that renders Pandas DataFrames as interactive HTML tables, using the datatables.net Javascript library.

Both ITables and DataTables are open source and completely free to use (no community vs entreprise edition, no watermark - only MIT licences). ITables has been developed by myself since 2019, while DataTables has been developed by Allan Jardine since 2009.

Using the Streamlit Component of ITables is as simple as e.g.

from itables.streamlit import interactive_table

interactive_table(df)

Many options like caption, selected rows etc are available - see the documentation or start with this example:

interactive_table(df,
                  caption='Countries',
                  select=True,
                  selected_rows=[0, 1, 2, 100, 207],
                  buttons=['copyHtml5', 'csvHtml5', 'excelHtml5', 'colvis'])

ITables is not limited to Streamlit. You can also use it to get good looking tables in Jupyter Notebook, in VS Code, in Google Colab, in notebooks exported to HTML etc, and the options are the same in all these contexts.

Uses that have specific questions can have a look at

If you don’t find the answer there, please create an issue on the github project page: GitHub - mwouts/itables: Pandas DataFrames as Interactive DataTables

Question for streamlit admins: could I please get ITables listed at Components • Streamlit ? Thanks.

3 Likes
2

Thats awesome, i am trying to figure out if there is a way to at a st.button per row somehow, so i could trigger a st.dialog from it. That would make it the best component ever :smiley:

3

Looking Great! What are potential use cases for this component?

4

Curious about what you would do with a button per row?

FYI ITables and the underlying datatables both support HTML in cells so you can have HTML buttons (see javascript - How do I add button on each row in datatable? - Stack Overflow in the context of datatables, but porting that to ITables could be challenging). However I am not sure re st.buttons.

5

Thanks! Well the most common use case is to get a table that is easy to explore thanks to pagination and search.

Then you can fine tune the table appearance - start with a caption, add export options (CSV, Excel), etc.

Last but not least you can also make other parts of your streamlit app react to the rows that the user selects in the table.

6

@mwouts the component is very good, and as mentioned in the limitations in your documentation the lengthMenuis kind of an issue. by default that lengthMenu is enabled, so someone “clicking” it will result in a “broken” component.

also the styling is slightly off, the text is a bit cut off at the bottom

image
image2471Ă—623 69.7 KB

I would like to use the component if the lenghtmenu for now would be just disabled by default. The following fixes the text cutoff for me.

st.html("""<style>
    .stCustomComponentV1 { height:475px; } 
</style>""")

i’d love to contribute but i am really BAD when it comes to UI components / html / React.

I hope my feedback helps you to improve a very very promissing component further

7

image
image2558Ă—1277 127 KB

@mwouts Really big shout out for this GREAT component. Just for you to see how i got implemented in my application. I love it

1 Like
8

Thank you @Jan3 for your feedback!

To deactivate the menu length you can modify the table layout.

You can remove the length component for one table with:

interactive_table(df, layout = {"topStart":None})

The following will remove the length component for all the tables in your app:

import itables
itables.options.layout['topStart'] = None

Yes the height of the component is computed when the component is created initially and I have not figured out yet whether it could be adjusted dynamically. That’s a problem that we do not have in Jupyter - I will think about that and see if I can do anything about it!