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
64
65
66
67
68
69
70
71
"""


"""
import dash_mantine_components as dmc
from dash import Dash, html, dcc, _dash_renderer
import dash
# print(dash.__version__)

import dash_ag_grid as dag
import pandas as pd
import datetime


app = Dash(__name__, external_stylesheets=dmc.styles.ALL,
external_scripts=["https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"])

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
})

cols = [{'field': col} for col in df.columns]
cols[1]['cellEditor'] = {'function': 'DMC_Select'}
cols[1]['cellEditorParams'] = {'array': ['A', 'B', 'C', 'D', 'E', 'F']}
cols[1]['cellEditorPopup'] = True

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[-1]['cellRendererParams'] = {'component': dcc.Dropdown(multi=True, options=['rawr', 'testing'])}
cols[-1]['cellRenderer'] = 'AllComponentRenderers'

cols[-2]['cellEditor'] = {'function': 'AllComponentEditors'}
cols[-2]['cellEditorParams'] = {'component': dmc.DateInput(highlightToday=True)}
cols[-2]['cellEditorPopup'] = True
cols[-2]['headerName'] = 'dmc.DateInput'
# cols[-2]['cellRenderer'] = 'AllComponentRenderers'
# cols[-2]['cellRendererParams'] = {'component': dmc.DateInput(highlightToday=True)}

grid = html.Div([
    html.H1('Grid Page'),
    dag.AgGrid(
        id='grid_id',
        columnDefs=cols,
        columnSize="autoSize",
        rowData=df.to_dict('records'),
        defaultColDef={'editable': True},
        dashGridOptions=dict(
            enterMovesDown=True,
            stopEditingWhenCellsLoseFocus=True,
        ),
        enableEnterpriseModules=True
    ),

])


app.layout = dmc.MantineProvider(grid)

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

dash-ag-grid-mantine-app

Dash AG Grid with Mantine Components
