Dash Table Editable more friendly?

Dash Python
1

I have a dash table where I want one column to be editable. However the editable functionality isn’t super friendly. I was wondering if there was a fairly simple way to change it?

For example, if they edit the table, the only way the change stays if they hit enter. If they click off of it, it doesn’t stay. It just doesn’t seem super intuitive.

Here is my table:

dash_table.DataTable(
        id={
            'type': 'table',
            'index': 'modal-point-table-right'
        },
        data=[],
        columns=[{'id': 'Selections', 'name': 'Selections'},
                 {'id': 'Scale Factor', 'name': 'Scale Factor', 
                  'editable': True}],
        style_cell_conditional=[
            {'if': {'column_id': 'Selections'},
             'width': '75%'},
            {'if': {'column_id': 'Scale Factor'},
             'width': '25%'}
        ],
        style_cell={'text-align': 'left',
                    'border': '1px solid rgb(200,200,200)',
                    'maxHeight': '8px', 'padding-left': '5px',
                    'font-family': 'Arial'},
        style_table={'height': '400px', 'width': '450px',
                     'border': '1px solid grey'},
        style_data={
            'font-size': '12px',
            'whiteSpace': 'normal',
            'height': '10px',
            'lineHeight': '10px',
            'color': 'black',
            'backgroundColor': 'white',
        },
    )
2

Have you looked into AG Grid for this?

1 Like
3

I have, I just didn’t want to start over :joy: so just checking to see if there was a way with dash tables or not.

4

We did try to make it easy to switch from dash_table to AG Grid.

Most of the things translate well, and things like cellStyle (style_cell_conditional) are included directly in the columnDefs section.

1 Like
5

Okay I’ll check it out!

1 Like
6

Check out the documentation:

1 Like