PyCafe - Dash - Dash AG Grid with Mantine Components

assets/
app.py
requirements.txt
app.py
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
"""
Example from https://py.cafe/BSd3v./dash-ag-grid-mantine-app

"""
"""


"""
import dash_mantine_components as dmc
from dash import Dash, html, dcc, _dash_renderer
_dash_renderer._set_react_version("18.2.0")
import dash_ag_grid as dag
import pandas as pd
import datetime

app = Dash(__name__, external_stylesheets=dmc.styles.ALL)

now = datetime.datetime.now()


df = pd.DataFrame({
    'Column 1': [1, 2, 3, 4, 5, 6],
    'Column 2': ['A', 'B', 'C', 'D', 'E', 'F'],
    'Column 3': [now, now,
     now, now, now, now],
    'Column 4': [['testing']] *6
})
print(df)

cols = [{'field': col} for col in df.columns]
cols[-1]['cellEditor'] = {'function': 'AllComponentEditors'}
cols[-1]['cellEditorParams'] = {'component': dcc.Dropdown(multi=True, options=['rawr', 'testing'])}
cols[-1]['cellEditorPopup'] = True
cols[-1]['headerName'] = 'dcc.Dropdown(multi)'

cols[-2]['cellEditor'] = {'function': 'AllFunctionalComponentEditors'}
cols[-2]['cellEditorParams'] = {'component': dmc.DateInput()}
cols[-2]['cellEditorPopup'] = True
cols[-2]['headerName'] = 'dmc.DateInput'

grid = html.Div([
    html.H1('Grid Page'),
    dag.AgGrid(
        id='grid_id',
        columnDefs=cols,
        columnSize="autoSize",
        rowData=df.to_dict('records'),
        defaultColDef={'editable': True},
        className="ag-theme-alpine-dark",

    ),

])


app.layout = dmc.MantineProvider(
    grid,
    forceColorScheme="dark"
    )

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