plotly / dash-table

OBSOLETE: now part of https://github.com/plotly/dash
https://dash.plotly.com
MIT License
420 stars 74 forks source link

[Feature] Add interactive checkbox options in cells. #885

Open zach-morris opened 3 years ago

zach-morris commented 3 years ago

I've checked the options for datatable interactivity, and as far as I can tell, it's possilbe to add selections on a row (row_selectable='single' | 'multi') or column basis (column_selectable='single' | 'multi' and columns[i].selectable=True). I'm looking for the ability to add a checkbox in a cell of a datatable, and further be able to utilize call backs with it.

I've attempted to work around this issue using Markdown, as markdown is supported in datatables, but it doesn't appear that the markdown checkbox is supported.

Something along the lines of this: table_checkboxes_calculated_in_confluence1

ganly115 commented 2 years ago

Hi have you got this problem solved? I'm working on something like this too. T ^ T

zach-morris commented 2 years ago

I ended up using a dbc table and entering dbc checklist items in the cells to create a table like the one shown, then used pattern matching callbacks to capture which box(es) are checked. Try as I might, this doesn't seem to be possible with dash-table

skman07 commented 1 year ago

@zach-morris How did you use dbc checklist inside cells.Could you please help me ..I have got similiar scenario.

zach-morris commented 1 year ago

Here's an example:

import dash
from dash import html, Input, Output, ALL
import dash_bootstrap_components as dbc
import pandas as pd

df = pd.DataFrame.from_dict([{'col_{:01g}'.format(col):[dbc.Checklist(options=[{'label':'Col {:01g} Row {:01g}'.format(col,row),'value':'col_{:01g}_row_{:01g}'.format(col,row)}],id={'type':'checkboxes','index':'col_{:01g}_row_{:01g}'.format(col,row)}) for row in range(1,6)] for col in range(1,6)}])

app = dash.Dash(__name__,title='Checklist Test')

app.layout = html.Div([dbc.Table.from_dataframe(df, striped=True, bordered=True, hover=True,responsive=True),html.Div([],id='output_info')])

@app.callback(Output('output_info','children'),Input({'type': 'checkboxes', 'index': ALL}, 'value'))
def update_div(value_in):
    changed_values = [x[0] for x in value_in if isinstance(x,list) and len(x)>0]
    if len(changed_values)>0:
        return [','.join(changed_values)]
    else:
        return ['No Checkboxes']

if __name__ == '__main__':
    app.run_server(debug=True)

Outputs: example