Dash DataTable - Specify which columns should be editable

Hey,
It is possible to make only a particular column editable and rest to remain uneditable?

2 Likes

This isn’t possible right now but it would be a good addition to the code. Perhaps we could allow editable to be a dict that maps column names / IDs to the boolean editable like:

editable={'column 1': True, 'column 3': False}

or perhaps we could allow columns to be a list of dictionaries that have all of the column-level properties like:

columns=[{'name': 'Column 1', 'editable': True, 'sortable': False, 'width': 50}, ...]

I would accept a pull request that thought through these options and implemented them. Here is the code: https://github.com/plotly/dash-table-experiments/blob/master/src/components/DataTable.react.js

2 Likes

Hello,

I am using the Dash DataTable as both dynamic input and output fields. It would be really nice to have some way to specify which columns should/shouldn’t be editable in the way you suggested:

1 Like

Any updates on this feature? Thanks :slight_smile:

1 Like

Has this been added? I tried the dictionary, but does not seem to work, did you add it using different syntax, or do you still have to add it? - Thanks

Hello guys, is there some progress in this issue? I want to use “Dash data table”. I need to specify which columns could be editable. I have the same question like nelius. Thanks

Yes it is possible. See the editable reference in the Dash DataTable docs: https://dash.plot.ly/datatable/reference

1 Like

I just figured out and I was about to post it here! [this doc is very difficult to read compared to other]

Can you give a working example of only allowing certain columns being editable?

From the reference: particular columns can be made editable by setting editable to True inside the columns property.

I tried a dictionary but everything is still editable
e.g. editable = {‘Col1’: False,‘Col2’:False, ‘Col3’:True}

You need to specify it in the columns :
example
my dt= dash_table.DataTable(
id=‘id_table’,
columns=[
{‘name’: ‘columnNotEditable’, ‘id’: ‘index’, ‘editable’: False},
{‘name’: 'ColumnEditable ', ‘id’: ‘date’, ‘editable’: True},
]
# Other properties

,)

2 Likes

Hello Everyone,
how can I specify just a single row as “editable”

in the example above, I just want the row “dp” to be editable.

dp_table = dash_table.DataTable(data=dff.to_dict('records'),
                                        columns = [{"name": i, "id": i} for i in dff.columns],
                                        editable=True, style_header={
                                                            'backgroundColor': 'white',
                                                            'color': 'rgb(70, 70, 70)',
                                                            'fontWeight': 'bold'
                                                        },
                                                        style_data={
                                                            'backgroundColor': 'rgb(50, 50, 50)',
                                                            'color': 'white'
                                                        })

Hi @logisticregress

That’s not possible with DataTable, but you can do it with Dash AG Grid.

The example in the docs has only certain cells in one column editable (if the year=2012) you can find it here:

Here’s an example where all the columns in the last row is editable. So instead of defining which cells are editable on a single column, like the example in the docs, it’s defined in the defaultColDef so it applies to all columns.



import dash_ag_grid as dag
from dash import Dash, html, dcc
import plotly.express as px

app = Dash(__name__)

df = px.data.medals_wide()


app.layout = html.Div(
    [
        dcc.Markdown("This grid has editing enabled on all columns"),
        dag.AgGrid(
            columnDefs=[{"field": i} for i in df.columns],
            rowData=df.to_dict("records"),
            columnSize="sizeToFit",
            defaultColDef={"editable":  {"function": "params.data.nation == 'Canada'"}},
        ),
    ],
    style={"margin": 20},
)

if __name__ == "__main__":
    app.run_server(debug=False)


1 Like

The following works for me:

columns= [{'name': 'Feature', 'id': 'Feature'}, {'name': 'Weight', 'id': 'Weight'}, 
		{'name': 'new_Weight', 'id': 'new_Weight', 'editable': True, 'type': 'numeric'}]

Columns is just a list of dictionaries that you can generate with a function.

This is unrelated, it is an example of applying different styles depending on the column type, but you can do something similar to create your list of columns with different properties:

def create_conditional_style_full(df):
	PADDING = 24
	PIXEL_FOR_CHAR = 6
	style=[]
	for col in df.columns:
		if df[col].dtype == 'object':
			try:
				df[col] = pd.to_datetime(df[col])
			except ValueError:
				pass
		col_list = df[col].values.tolist()
		col_list = [s if type(s) is str else str(s) for s in col_list]
		col_list.append(col)
		name_length = len(max(col_list, key=len))
		pixel = PADDING + round(name_length*PIXEL_FOR_CHAR)
		pixel = str(pixel) + 'px'
		if pd.api.types.infer_dtype(df[col]) == 'string' or pd.api.types.infer_dtype(df[col]) == 'boolean' and not pd.api.types.is_datetime64_any_dtype(df[col]):
			style.append({'if': {'column_id': col}, 'minWidth': pixel, 'textAlign': 'left'})
		else: 		
			style.append({'if': {'column_id': col}, 'minWidth': pixel})
	return style

This worked perfectly! Thank you so much!

1 Like