Importing React components in dashAgGridComponentFunctions

[salam-abdul]

Hi,

I am trying to create a custom component button for the DashAgGrid. To have it match the styling of the rest of the site, it would be ideal to create it as a Mantine button or a Material button. Since the dashAgGridComponentFunctions.js is not a module I cannot do the following:

import Button from '@material-ui/core/Button';

dagcomponentfuncs.CustomButton = function (props) {
    ...
    return React.createElement( Button ...)
}

Is there some way of achieving this? Any help would be appreciated. Thank you!

[BSd3v]

Hello @salam-abdul,

Yes, this is possible.

Here is a JS demonstration:

/static/mymodule.js

import 'https://unpkg.com/@material-ui/core@4.11.0/umd/material-ui.production.min.js';

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

const Button = window.MaterialUI.Button

dagcomponentfuncs.CustomButton = function (props) {
    return React.createElement(Button, {onClick: ((e) => console.log(props.value))}, props.value)
}

//Unnecessary to import in a module, as this is already available if using DMC
const DMC_Button = window.dash_mantine_components.Button

dagcomponentfuncs.DMC_Button = function (props) {
    return React.createElement(DMC_Button, {onClick: ((e) => console.log(props.value))}, props.value)
}

And then the app:

import dash_ag_grid as dag
import dash
from dash import Input, Output, html, dcc, no_update
import pandas as pd
import json
import dash_mantine_components as dmc

app = dash.Dash(__name__, external_scripts=[{'src': '../static/mymodule.js', 'type':'module'}])

raw_data = {"id": [], "name": []}
for i in range(0, 300):
    raw_data["id"].append(i)
    raw_data["name"].append(f"{i * 3 % 5}-{i * 7 % 15}-{i % 8}")

df = pd.DataFrame(data=raw_data)

app.layout = html.Div(
    [
        dag.AgGrid(
            id="grid",
            rowData=df.to_dict("records"),
            columnSize="sizeToFit",
            columnDefs=[{"field": "id", 'filter': 'agNumberColumnFilter', 'cellRenderer': 'CustomButton'},
                        {"field": "name", "cellRenderer": "DMC_Button"}],
            defaultColDef={"sortable": True, "filter": True, "floatingFilter": True},
            dashGridOptions={
                "rowSelection": "multiple",
            }
        )
    ]
)

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

[AnnMarieW]

@salam-abdul - Great question!

Please see the docs for more examples: https://dashaggrid.pythonanywhere.com/components/cell-renderer

If you have more questions, please ask on the Dash Community Forum

[salam-abdul]

Thank you @BSd3v and @AnnMarieW! You guys are awesome!