Dropdown columns show their value and not their label when editable=False

[michaelbabyn]

If a table has a column that allows a user to edit the options from a dropdown but after a callback is fired that switches a column to being non-editable, the "value" from the column is displayed instead of the "label".

import dash
from dash.dependencies import Input, Output, State
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', 'NYC'])
]))


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

        editable=True,
        dropdown={
            'climate': {
                'options': [
                    {'label': 'label {}'.format(i), 'value': i}
                    for i in df['climate'].unique()
                ]
            },
            'city': {
                 'options': [
                    {'label': 'label {}'.format(i), 'value': i}
                    for i in df['city'].unique()
                ]
            }
        }
    ),
    html.Div(id='table-dropdown-container'),
    html.Button(id='button', children='Swap editable columns', n_clicks=0),
])

@app.callback(Output('table-dropdown', 'columns'),
              [Input('button', 'n_clicks')])
def swap_editable(n):
    if not n > 0:
        raise dash.exceptions.PreventUpdate
    if n % 2 == 0:
        return [
            {'id': 'climate', 'name': 'climate', 'presentation': 'dropdown', 'editable': False},
            {'id': 'temperature', 'name': 'temperature'},
            {'id': 'city', 'name': 'city', 'presentation': 'dropdown'},
        ]
    else:
        return [
            {'id': 'climate', 'name': 'climate', 'presentation': 'dropdown'},
            {'id': 'temperature', 'name': 'temperature'},
            {'id': 'city', 'name': 'city', 'presentation': 'dropdown', 'editable': False},
        ]


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