Column selection in the dashboard

[fruitzebra]

I have datasets with more than 80 columns. In the dashboard, I would like to deselect columns or select columns in a similar way in the snapshots attached. What streamlit tools can I use to achieve this effect, especially the deselect function, since there are too many columns to select.

[mathcatsand]

Does this match what you are looking for?

import pandas as pd
import streamlit as st


data = {}
for i in range(20):
    col = f'col{i}'
    data[col]= range(10)
df = pd.DataFrame(data)

columns = st.multiselect("Columns:",df.columns)
filter = st.radio("Choose by:", ("inclusion","exclusion"))

if filter == "exclusion":
    columns = [col for col in df.columns if col not in columns]

df[columns]

[fruitzebra]

Thanks very much for your answer! That can basically do what I want. I was wondering if there are tools available in streamlit to generate a similar user interface in the snapshots.

[mathcatsand]

You can certainly introduce a more complicated arrangement of elements to get closer to what you have in the screenshots. The multiselect widget is the easiest thing out of the box that does the function of multiple selections. You could instead generate a bunch of checkboxes within a 2-column structure, moving them into a right column when selected (and back to the left when unchecked) but it would be more lines of code.

You can implement a search box for your columns using a text input and filtering on the columns displayed. I’m less sure about the “Enable columns order” as a drag and drop mechanism. You could do something with a “move up/move down” click action, but it would be a manually created mechanic. The multiselect widget (as in my code example) maintains the order that selections are made, so there is a built-in ordering the user can create with that widget.

What are the key features you really hope to recreate? You can inject custom css/javascript to change some styling beyond what you get out of the box. You can create a custom component if Streamlit doesn’t directly have what you are looking for, too. The trade off is that it will introduce much more code complexity.

[fruitzebra]

Thanks very much for your comments! Checkboxes within a 2-column structure is exactly what I was looking for. I’m a bit struggling with coding… Specifically, after implementing st.checkbox() part, I’m struggling with “moving them into a right column when selected (and back to the left when unchecked)”.

Are there any similar cases with codes that I can study? Or what set of st functions I should use to achieve that effect?

[mathcatsand]

There are a few quirks to smooth out and plenty of room for beautification, but basically:

import streamlit as st
import pandas as pd



def initialize():
    if 'df' not in st.session_state:
        data = {}
        for i in range(20):
            col = f'col{i}'
            data[col]= range(10)
        st.write('initializing')
        df = pd.DataFrame(data)
        st.session_state.df = df
        st.session_state.columns = list(df.columns)

initialize()

df = st.session_state.df
columns = st.session_state.columns

def move_column(col, state):
    if state:
        st.session_state[col] = True
        st.session_state.columns.remove(col)
    else:
        st.session_state[col] = False
        st.session_state.columns.append(col)


configure = st.columns(2)
with configure[0]:
    included = st.expander('Included', expanded=True)
    with included:
        st.write('')
    
with configure[1]:
    excluded = st.expander('Excluded', expanded=True)
    with excluded:
        st.write('')


for col in df.columns:
    if col in st.session_state.columns:
        with included:
            st.checkbox(col,key=col, value=False, on_change=move_column, args=(col,True))
    else:
        with excluded:
            st.checkbox(col, key=col, value=True, on_change=move_column, args=(col,False))     

df[columns]

st.markdown('''<style>[data-testid="stExpander"] ul [data-testid="stVerticalBlock"] 
               {overflow-y:scroll; max-height:400px;} </style>''', unsafe_allow_html=True)

[fruitzebra]

Thanks a lot! Really appreciate your help!