Dash AG Grid: Select Component with Icon + Single-Click Editing

Dash Python
1

For people transitioning from DataTable to Dash AG Grid, here is an example of how to make the AG Grid Select component work similar to the DataTable Dropdown.

It enable singleClickEdit so the user does not have to double click on the cell to start editing. It also uses a custom cell renderer to add an icon to the cell to indicate that the cell is a Select component.

With Dash AG Grid, you can improve the select editor by enabling one click edit.

AgGrid(
      dashGridOptions = { "singleClickEdit": True}
)

image

Here’s a complete example:

from dash import Dash,  html
import pandas as pd
from dash_ag_grid import AgGrid


app = Dash( external_stylesheets=["https://use.fontawesome.com/releases/v5.15.4/css/all.css"])

df = pd.DataFrame(dict([
    ('climate', ['Sunny', 'Snowy', 'Sunny', 'Rainy']),
    ('temperature', [13, 43, 50, 30]),
    ('city', ['NYC', 'Montreal', 'Miami', 'NYC'])
]))


columnDefs = [
    {
        "field": "climate",
        "cellEditor": "agSelectCellEditor",
        "cellEditorParams": {
            "values": df['climate'].unique()
        },
        "cellRenderer": "cellEditorIcon",
        "cellRendererParams": {
            "icon": "fas fa-caret-down",
        },
    },
    { "field": "temperature"},
    {
        "field": "city",
        "cellEditor": "agSelectCellEditor",
        "cellEditorParams": {
            "values": df['city'].unique()
        },
        "cellRenderer": "cellEditorIcon",
        "cellRendererParams": {
            "icon": "fas fa-caret-down",
        },
    },
]

app.layout =  html.Div([
    AgGrid(
        rowData=df.to_dict('records'),
        columnDefs=columnDefs,
        defaultColDef={'editable': True},
        dashGridOptions = {
            "stopEditingWhenCellsLoseFocus": True,
            "singleClickEdit": True,
        }
    )
])



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

Add this to a .js file in the /assets folder

var dagcomponentfuncs = window.dashAgGridComponentFunctions = window.dashAgGridComponentFunctions || {};


// adds a right aligned icon to a cell
dagcomponentfuncs.cellEditorIcon = function (props) {
  return React.createElement(
    'span',
    {
      style: {
        width: '100%',
        height: '100%',
        display: 'flex',
        alignItems: 'center',
      },
    },
    props.value,
    React.createElement('i', {
      className: props.icon,
      style: { marginLeft: 'auto' },
    })
  );
}
3 Likes
2

The addition of the caret icon is great to indicate to users that the cell is a dropdown!
Is it possible to use DashIconify or other icons (e.g. from Iconify) for the dropdown icon?

UPDATE: FIgured it out. On Iconify, you can find download the css defintion for an icon. Add this to a .css file in your assets/ folder and use the instructions on the Iconfiy page under “Usage in HTML” to figure out how to refer to it in "cellRendererParams": {"icon": <class_goes_here>}

1 Like
3

That’s a great solution @svdl

Another way is to update the .js file to use Dash Iconify like this:


var dagcomponentfuncs = window.dashAgGridComponentFunctions = window.dashAgGridComponentFunctions || {};

// adds a right-aligned DashIconify to a cell
dagcomponentfuncs.cellEditorIcon = function (props) {
  return React.createElement(
    'span',
    {
      style: {
        width: '100%',
        height: '100%',
        display: 'flex',
        alignItems: 'center',
      },
    },
    props.value,
    React.createElement(window.dash_iconify.DashIconify, {
      icon: props.icon,
      style: { marginLeft: 'auto' },
    })
  );
};

Then in your app, be sure to add

import dash_iconify

Then you can use any of the icon names:


"cellRendererParams": {
            "icon": "mdi:keyboard-arrow-down",
        },
2 Likes