How to correctly data type & input in Dash AG GRID? and other issues

Dash Python
2

Hi @kabure

You certainly picked a very advanced use-case for your first dash-ag-grid. :sweat_smile:
Just so you know, this would be much easier with AG Grid Enterprise - it has a built-in pivot mode:

If you don’t want to buy a license, it’s still possible to do this with the community version, it will just take a little more coding.

For the truncated values, you have lots of options.

For different data types by row, set the cellDataType to False so the inference is turned off. For more info see Cell Data Types | Dash for Python Documentation | Plotly.

You can set different cell editors per line. See Provided Cell Editors | Dash for Python Documentation | Plotly. and also React Data Grid: Cell Editors

               {
                    "field": c,
                    "valueFormatter": {"function": "FormatNumbersByRow(params)"},
                    "cellEditorSelector": {"function": "cellEditorSelector(params)"},        
                    'cellDataType': False
                }




dagfuncs.cellEditorSelector = function(params) {
    if (params.data["Val ID"] == "Text Col") {
        return {
            component: "agTextCellEditor",
        }
    }
    if (["Hours Col", "Values Col"].includes(params.data["Val ID"])) {
        return {
            component: "agNumberCellEditor",
        }
    }
    if (params.data["Val ID"] == "Bool Col") {
        return {
          component: 'agSelectCellEditor',
          params: {
            values: ['Yes', 'No'],
          },
          popup: true,
        };
    }
    return undefined;
}

You could have actual boolean values instead of the select editor, and it could render as a checkbox. If you can change the date format to yyyy-mm-dd you could also easily add a date editor component.

Here’s a post on how to highlight edited values Dash AG Grid single cell styling after cell edit - #2 by jinnyzor

3 Likes