Dash data_table, entering text into cells is clunky -- can I change that?

Dash Python
1

I have been playing around with using data_table with some mixed data that includes notes. I’ve noticed two problems with this and am wondering if there are good workarounds:

  1. no cursor
  2. very difficult to get newlines in

It makes it overall clunky to edit the notes. It displays them fine.

It would be nice if the table cell itself just operated similarly to what you see in social media apps where pressing shift+enter gets you a newline. Is this doable with a data_table or maybe via css/bootstrap/etc (disclaimer: I’m not a web dev)? Can I hijack keypresses like that and give it shift+enter capability? And is there a way to get a cursor to appear? I saw a bug report about this but nothing else.

2

Hi @graymalk

Try Dash AG Grid - it has some fantastic built-in text editors:

3

Thank you I will give that one a try.

4

@graymalk

Here is an example that will display the new lines after editing. Try editing the last column.


import dash_ag_grid as dag
from dash import Dash, html, dcc

app = Dash(__name__)


columnDefs = [
    {
        "headerName": "Text Editor",
        "field": "task",
        "cellEditor": "agTextCellEditor",
        "cellEditorParams": {
            "maxLength": 20,
        },
    },
    {
        "headerName": "Select Editor",
        "field": "color",
        "cellEditor": "agSelectCellEditor",
        "cellEditorParams": {
            "values": ["red", "yellow", "green"],
        },
    },
    {
        "headerName": "Large Text Editor",
        "field": "description",
        "cellEditorPopup": True,
        "cellEditor": "agLargeTextCellEditor",
        "cellStyle": {'white-space': 'pre'},
        "autoHeight": True,
        "flex": 2,
    },
]


descriptiion = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
rowData = [
    {"task": "task 1", "color": "green", "description": descriptiion},
    {"task": "task 2", "color": "yellow", "description": descriptiion},
    {"task": "task 3", "color": "red", "description": descriptiion},
]


app.layout = html.Div(
    [
        dcc.Markdown(
            "This grid has a regular text editor, select dropdown, and a large textarea editor."
        ),
        dag.AgGrid(
            id="cell-editor-grid",
            columnDefs=columnDefs,
            rowData=rowData,
            columnSize="sizeToFit",
            defaultColDef={"editable": True, "sortable": True},
        ),    
    ],
    style={"margin": 20},
)


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

I had managed to get myself most of the way there and was just short of (and googling) this part when I saw your reply. :joy:

Thanks for this. This seems to be giving me what I was looking for.

1 Like