Hello,
I have a codesample from DashAgGridComponents, which works brilliant. My problem is that I dont know how to set the properties for the DMC.Button in the example. How can I set the topMargin for the Buttons, so that they have a distance to the top of the row in the example?
Thank you!
"""
styling with custom cell renderer
Note:
Custom components must be defined in the dashAgGridComponentFunctions.js in assets folder.
"""
import json
import dash_ag_grid as dag
from dash import Dash, html, dcc, Input, Output
import pandas as pd
import dash_mantine_components as dmc
import dash_iconify
data = {
"ticker": ["AAPL", "MSFT", "AMZN", "GOOGL"],
"company": ["Apple", "Microsoft", "Amazon", "Alphabet"],
"price": [154.99, 268.65, 100.47, 96.75],
"buy": ["Buy" for _ in range(4)],
"sell": ["Sell" for _ in range(4)],
"watch": ["Watch" for _ in range(4)],
}
df = pd.DataFrame(data)
columnDefs = [
{
"headerName": "Stock Ticker",
"field": "ticker",
},
{"headerName": "Company", "field": "company", "filter": True},
{
"headerName": "Last Close Price",
"type": "rightAligned",
"field": "price",
"valueFormatter": {"function": """d3.format("($,.2f")(params.value)"""},
},
{
"field": "buy",
"cellRenderer": "DMC_Button",
"cellRendererParams": {
"variant": "outline",
"leftIcon": "ic:baseline-shopping-cart",
"color": "green",
"radius": "xl"
},
},
{
"field": "sell",
"cellRenderer": "DMC_Button",
"cellRendererParams": {
"variant": "outline",
"leftIcon": "ic:baseline-shopping-cart",
"color": "red",
"radius": "xl"
},
},
{
"field": "watch",
"cellRenderer": "DMC_Button",
"cellRendererParams": {
"rightIcon": "ph:eye",
},
},
]
defaultColDef = {
"resizable": True,
"sortable": True,
"editable": False,
}
grid = dag.AgGrid(
id="custom-component-dmc-btn-grid",
columnDefs=columnDefs,
rowData=df.to_dict("records"),
columnSize="autoSize",
defaultColDef=defaultColDef,
)
app = Dash(__name__)
app.layout = html.Div(
[
dcc.Markdown("Example of cellRenderer with dash-mantine-components Button and DashIconify icons"),
grid,
html.Div(id="custom-component-dmc-btn-value-changed"),
],
style={"margin": 20},
)
@app.callback(
Output("custom-component-dmc-btn-value-changed", "children"),
Input("custom-component-dmc-btn-grid", "cellRendererData"),
)
def showChange(n):
return json.dumps(n)
if __name__ == "__main__":
app.run_server(debug=True)
"""
Put the following in the dashAgGridComponentFunctions.js file in the assets folder
---------------
var dagcomponentfuncs = window.dashAgGridComponentFunctions = window.dashAgGridComponentFunctions || {};
dagcomponentfuncs.DMC_Button = function (props) {
const {setData, data} = props;
function onClick() {
setData();
}
let leftIcon, rightIcon;
if (props.leftIcon) {
leftIcon = React.createElement(window.dash_iconify.DashIconify, {
icon: props.leftIcon,
});
}
if (props.rightIcon) {
rightIcon = React.createElement(window.dash_iconify.DashIconify, {
icon: props.rightIcon,
});
}
return React.createElement(
window.dash_mantine_components.Button,
{
onClick,
variant: props.variant,
color: props.color,
leftIcon,
rightIcon,
radius: props.radius,
style: {
margin: props.margin,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
},
},
props.value
);
};
"""
Here is a link:
Best Regards