Table display based on streamlit – the perfect solution

question

It is very practical to develop web apps with streamlit. But the table display of streamlit is very unfriendly, there are only two simple interface functions: st.table(df) and [st.dataframe] and [st.dataframe] (df).

It is quite unfriendly to display dataframes with slightly more fields.

st.table(df) will expand all fields, st.dataframe(df) will compress them together, and the field names are not clear.

The main limitations are:

  1. The width of each column cannot be controlled. Although there are two parameters of width and height in the interface, it is not very useful for personal testing.

  2. When there are many lines, they will always be arranged down on the page.

Here are a few comparisons:

It can be seen that if Chinese and English or numbers are mixed, Chinese will become one word per line.

The advantage is that there are scroll bars left and right and up and down, which looks neat. But the downside is that the column names and contents of long fields are abbreviated.

solve

Using the third-party installation package of streamlit-aggrid can perfectly solve the above problems.

pip install streamlit-aggrid

First look at the effect:

The aggrid way solves the problem perfectly. There is no abbreviation, the column width is set reasonably, and you can slide left and right, up and down.

code

from st_aggrid import AgGrid, DataReturnMode, GridUpdateMode, GridOptionsBuilder
options_builder = GridOptionsBuilder.from_dataframe(df)
options_builder.configure_default_column(groupable=True, value=True, enableRowGroup=True, aggFunc='sum', editable=True, wrapText=True, autoHeight=True)
options_builder.configure_column('col1',  pinned='left')
options_builder.configure_column('col2',  pinned='left')
grid_options = options_builder.build()
grid_return = AgGrid(df, grid_options, theme='blue')

Leave a Comment

Your email address will not be published. Required fields are marked *