Hi!
I’ve been checking out the new dash Ag grid feature which soon will come to the “free” part of Dash (not only enterprise). The tables are really good looking and feels good BUT I’ve tried to create a Ag grid table where one column is checkboxes that holds a boolean True/False value without success.
Here’s a example showing what I want:
Is there a way of doing this? In Javascript you can use the “cellRenderer:” from what I’ve understood. Will this function be available for us dash users?
Hello @Mackan,
Yes, the goal is to allow for things like this. Hopefully, we will be able to do so.
We are working hard to make sure that the application is as secure as possible. 
Yes, thats great. We are looking forward to it 
Hi @Mackan
We are working toward adding more components and/or making it easier to add custom components. In the meantime, a workaround might be to use the row selection feature. Note that the checkboxs can be in any column:
If you clone dash-ag-grid and run docs/app.py, you will find this app in the “Selections” section
import dash
import dash_ag_grid as dag
from dash import Dash, html, dcc, Input, Output
import requests
app = Dash(__name__)
data = requests.get(
r"https://www.ag-grid.com/example-assets/olympic-winners.json"
).json()
columnDefs = [
{"field": "athlete", "checkboxSelection": True, "headerCheckboxSelection": True},
{"field": "age"},
{"field": "country"},
{"field": "year"},
{"field": "date"},
{"field": "sport"},
{"field": "gold"},
{"field": "silver"},
{"field": "bronze"},
{"field": "total"},
]
app.layout = html.Div(
[
dcc.Markdown("This grid has multi-select rows with checkboxes."),
dag.AgGrid(
id="selection-checkbox-grid",
columnDefs=columnDefs,
rowData=data,
columnSize="sizeToFit",
defaultColDef={"resizable": True, "sortable": True, "filter": True},
rowSelection="multiple",
),
html.Div(id="selections-checkbox-output"),
],
style={"margin": 20},
)
@app.callback(
Output("selections-checkbox-output", "children"),
Input("selection-checkbox-grid", "selectionChanged"),
)
def selected(selected):
if selected:
selected_athlete = [s["athlete"] for s in selected]
return f"You selected athletes: {selected_athlete}"
return "No selections"
if __name__ == "__main__":
app.run_server(debug=True)
RowMenu Component
I know it’s not what you looking for exactly, but just so you know it’s available:
import dash_ag_grid as dag
import dash
from dash import Input, Output, html, dcc
app = dash.Dash(__name__)
row_menu_example = html.Div(
[
dcc.Markdown(
"Custom menus can be added to rows by specifying menu options with labels & values. Row metadata and the selected option from a menu are accessible in callbacks."
),
dag.AgGrid(
id="cell-renderer-table",
columnSize="sizeToFit",
columnDefs=[
{"headerName": "Make", "field": "make", "sortable": True},
{"headerName": "Model", "field": "model"},
{"headerName": "Price", "field": "price"},
{"headerName": "Menu", "field": "menu", "cellRenderer": "rowMenu"},
],
rowData=[
{
"make": "Toyota",
"model": "Celica",
"price": 35000,
"menu": [
{"label": "Option 1", "value": 1},
{"label": "Option 2", "value": 2},
{"label": "Option 3", "value": 3},
],
},
{
"make": "Ford",
"model": "Mondeo",
"price": 32000,
"menu": [
{"label": "Option 4", "value": 4},
{"label": "Option 5", "value": 5},
{"label": "Option 6", "value": 6},
],
},
{
"make": "Porsche",
"model": "Boxter",
"price": 72000,
"menu": [
{"label": "Option 7", "value": 7},
{"label": "Option 8", "value": 8},
{"label": "Option 9", "value": 9},
],
},
],
),
html.P(id="click-data"),
html.Hr(),
]
)
app.layout = html.Div(
row_menu_example,
style={"flexWrap": "wrap"},
)
@app.callback(
Output("click-data", "children"),
Input("cell-renderer-table", "clickData"),
)
def show_click_data(clickData):
if clickData:
return "You selected option {} from the row with make {}, model {}, and price {}.".format(
clickData["value"],
clickData["data"]["make"],
clickData["data"]["model"],
clickData["data"]["price"],
)
return "No menu item selected."
if __name__ == "__main__":
app.run_server(debug=True)