Grid with selectable cells

Using Streamlit
1

Hey!

I want to create a 3x3 grid where I can click on the cells and select them. It would be the best if I could access them in a simple way: for example when I click on the 2, 3 and 5 cells, then the corresponding c2, c3 and c5 variables should be set to True.
(The image is just an illustration, I don’t want to color the cells.)

PicStream01
PicStream011138×393 7.04 KB

I tried to find solutions, but all of them I found, were only focusing on selecting rows of a table, not cells.

Is it possible to do this in streamlit?

Thanks!
József

2

Hi @Jozsef_Pinter, you could:

  1. Using st.columns, create 3 rows having 3 columns each
  2. Have your numbers as square images of 1…9 (unclicked states)
  3. Then use components such as image select / image grid / click detector to display your number pictures - just search them on this forum and decide which one works best for you.
  4. decide to use st.empty() before writing the image to each cell, so that you can toggle between a number image’s clicked / unclicked state - these would be 2 images for any given number (white for unclicked; green for clicked)
  5. Decide on using a main container (st.container) before point #1 to encapsulate all the cells, if required

Give it a try. Cheers.

2 Likes
3

This sounds really nice, I will try it!

4

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.