New component: streamlit-condition-tree, an elegant way to filter a DataFrame & build a query

Hi everyone,

I created a component that allows users to build condition trees (nested and/or conditions) that can be used, for example, to filter a dataframe or build a query.

Example app:

Please try it out and don’t hesitate to give me your feedback !



1 Like

This is really awesome, @Cedric



This is so strange that it was in my todo list for my app of Squirrel Bot - Unofficed and I was about to start on it right now.

You created a beautiful builder which will be appreciated for generations to come

1 Like

Glad you like it :smiling_face:

I just released the version 0.1.2, which allows the filtering of a DataFrame only with a few lines :

config = config_from_dataframe(df)
query_string = condition_tree(config)
df = df.query(query_string)

I updated the demo, hope you will find it useful.


Hello, thank you for very useful component.
I have a question:
Is it possible to set a default tree within your component? I noticed in the demo that some default conditions are already set. Could you please provide a code example that demonstrates how to achieve this?

Awesome job on this component, @Cedric!! :raised_hands:

Shared it internally.

Best wishes,

Thanks for your feedbacks, I appreciate.

@Javidan, I’ve incorporated the default tree feature into the demonstration. I hope it’s more clear.

Hello @Cedric,
Great Job, but i was asking if this component can be used to create to return a json object like this example :

“title”: “abc”,
“type”: “node”,
“children”: [
“title”: “dddd”,
“type”: “leaf”
“title”: “fffffff”,
“type”: “node”,

Good afternoon @w3hbi, I think what you are looking for is the condition tree.
Once you have defined a key for the component, the tree is accessible through st.session_state[key] (cf readme & demo).

Hello @Cedric, thanks a lot for your replay,

I made a simple script that takes tree result from session_state[key] and make changes to create a new tree that can be displayed on a graph using st_echart i found this is a good solution for me.

This is a great component for Streamlit.

I’m using it in a form and am getting an issue with the form cutting off the lower half of the top level buttons upon first load. This issue goes away after interacting with the page.

I’ve posted the issue here. The result looks like this:

Is anyone else using it in a form and seeing this issue?


Hi all,

I just updated the component, adding an option always_show_buttons to force the buttons rendering even when they are not being hovered.

It also solved @aumisb issue mentioned above.