Cell-level editable DataTable

Dash Python
1

Hi all,

I am trying to make only specific cells editable in a Dash DataTable instead of a whole column, is there any way to achieve this? Many thanks! , e.g.

style_cell_conditional=[
                    {
                        'if': {'row_index': 2, 'column_id': "col-1"},
                        'backgroundColor': 'rgb(220, 230, 241)',
                        "editable": True
                    }
                ]
1 Like
2

Any tip how that might be possible (if possible currently)?

Thanks!

3

By setting editable = True in setyle_cell_conditional, I assume that you want to make some cells not editable.

In columns, when defining the attributes of each cell you can set editable to False. See Example:
columns = [
{‘name’: [’’, ‘Date’],
‘id’ : ‘Date’,
‘editable’ : False
},

4

Hi PBK,

Thanks for the response. I agree with will make the column editable (or non-editable). But I haven’t found a way to do that cell-wise, so the code I posted above is ‘fake’ when it comes to the editable: True part.

5

hi PBK, stathis,
its been a couple of years. Is there a good workaround for this or has dash changed in this area?

At the moment I have the callback just making sure the value can’t change but it leaves a lot to be desired in the styling and usability.

Regards
Phil

1 Like
6

Hi @phil96

This functionality is still not supported. Your workaround sounds like a good solution.

For some use cases a dropdown might also work. The non-editable cells could have a single option.

Here is an example - Rainy is the only option for Seattle :umbrella:
rainyseattle

import dash
import dash_html_components as html
import dash_table
import pandas as pd
from collections import OrderedDict


app = dash.Dash(__name__)

df = pd.DataFrame(OrderedDict([
    ('climate', ['Sunny', 'Snowy', 'Sunny', 'Rainy']),
    ('temperature', [13, 43, 50, 30]),
    ('city', ['NYC', 'Montreal', 'Miami', 'Seattle'])
]))


app.layout = html.Div([
    dash_table.DataTable(
        id='table-dropdown',
        data=df.to_dict('records'),
        columns=[
            {'id': 'city', 'name': 'city'},
            {'id': 'climate', 'name': 'climate', 'presentation': 'dropdown'},
            {'id': 'temperature', 'name': 'temperature'},
        ],

        editable=True,
        dropdown={
            'climate': {
                'options': [
                    {'label': i, 'value': i}
                    for i in df['climate'].unique()
                ]
            },
        },
        dropdown_conditional=[{
            'if': {
                'column_id': 'climate',
                'filter_query': '{city} eq "Seattle"'
            },
            'options': [{'label': "Rainy", 'value': "Rainy"}]
        }],
    ),
    html.Div(id='table-dropdown-container')
])


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

That’s a nice idea. Now we have two workarounds we are lucky :wink: Thanks for you help.

1 Like