Is it possible to make the first row of a dash_table to be dropdowns?

Dash Python
1

hey hey hey.
so I am trying to achieve something like this:

WhatsApp Image 2022-12-16 at 14.45.26
WhatsApp Image 2022-12-16 at 14.45.261599×899 78.7 KB

the data is random but I need to have different values in the dropdowns
Is there a way to achieve this using dash_table?

2

Hey @Matan,

I don’t think there is a way with one table. But with two you might be able to accomplish this. :upside_down_face:

1 Like
3

hey @Matan

In addition to @jinnyzor 's good suggestion, if you don’t mind having the dropdowns outside the table, you might be able to create 3 dropdowns that align directly above the Table’s columns.

1 Like
4

Hey @jinnyzor and @adamschroeder
Right now I am using two tables and I have the dropdowns above the dash_table with the information
The problem is to align the dropdowns to be the same size as the cells below them, I can’t give them a fixed width because it’s a responsive table that changes every time I upload a different excel.
Do you guys know a way to do this?

5

@Matan,

Could try a clientside callback:

app.clientside_callback(
    """function setWidths(d) {
        cell_data = $("#table2")[0].rows[0].cells
        if (!$("#table1 > colgroup")[0]) {
            $("#table1").append(<colgroup></colgroup>)
        }
        $("#table1 > colgroup").empty()
        for (x=0; x<cell_data.length; x++) {
            $("#table1 > colgroup").append(<col span="1" style="width: 50px"></col>)
            $("#table1 > colgroup > col")[x].style.width = cell_data[x].getBoundingClientRect().width()
        }
        return window.dash_clientside.no_update
    }"""
    Output('table1','id'),
    Input('table2','id'))

I havent tested this. :stuck_out_tongue:

2 Likes
6

Hi, thanks for answering.
two problems:

  1. call me stubborn but I try my best to avoid adding any js to my code I try to solve most things using python and CSS, and only if I am absolutely sure there’s no way I will use js.

  2. I need to output to the table in another callback so I can’t use it otherwise I will have a duplicate output error.

7

Other way would be to fix the widths. :wink:

Pick something else that you can output to in the clientside callback, something that you’ll never touch. :slight_smile:

You are outputting to the id prop of the table, I was thinking that you’d never touch that.

1 Like
8

I am thinking about the design now I might do something else I will update what I did in the end!

thanks for helping!