DataTable - toggle row visibility

Dash Python
1

I have a DataTable with ~20 rows styled in groups of 5, where the first row of each group is styled like a subheading (bold type, different background). I would like to be able to toggle the visibility of each group of table rows, preferably by clicking on the “heading row”.

it could behave similarly to the html.Details() element.

is this possible? I’d like to avoid creating 4 “mini tables”.

2

You could show/hide based on the selected_rows property. For example:


app.layout = dash_table.DataTable(
    # ... 
    row_selectable='multi'
)

@app.callback(
    Output('my-table', 'style_cell_conditional'),
    [Input('my-table', 'selected_row_ids')]
)
def show_hide_cells(selected_rows):
    conditional_styling = []
    if selected_rows is not None:
        for selected_row in selected_rows:

            # get all of the rows that have `selected_row` as a header
            rows_to_hide = ...

            conditional_styling += [{
                'if': {'row_index': i},
                'display': 'none'
            } for i in rows_to_hide]

    return conditional_styling

This would allow for all of the rows to be selectable, though.

3

This works to make the rows not show content. However, they are still taking up space in the dom since it’s the inidividual TDs that are set to display: none; while the TR is still there. Or am I missing something?

Is there any way to change the styling on the TR to display: none; ?