I noticed my ag grids where all only using part of the screen so I looked into resizing the grid. Is there a better standard way to do this? It would be awesome to have a handle at the bottom to drag the grid bigger and smaller. I have not seen anything like that. I came up with 2 buttons to increase and decrease the size. It is better than nothing. It is more natural to have the buttons at the bottom but I hate it when buttons move that may be clicked multiple times. There is probably a better graphic for the buttons to indicate increasing and decreasing the height.
#!/usr/bin/env python3
"""Minimal dash program."""
import dash_ag_grid as dag
from dash import callback, ctx, Dash, dcc, Input, no_update, Output, State
import dash_bootstrap_components as dbc
import pandas as pd
app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP], suppress_callback_exceptions=True)
dataframe = pd.DataFrame({'product_id': ['XYZ083-02ABC', 'NYZ082-02ABC', 'XYZ083-05ABC'],
'column_2_data': [2, 4, 6], 'column_3_data': [2, 4, 6], 'column_4_data': [2, 4, 6],
'column_5_data': [2, 4, 6], 'column_6_data': [2, 4, 6], 'column_7_data': [2, 4, 6],
'column_8_data': [2, 4, 6], 'column_9_data': [2, 4, 6], 'column_10_data': [2, 4, 6]},
)
col_defs = [{'field': 'product_id', 'editable': False, 'type': None, 'pinned': 'left'},
{'field': 'column_2_data', 'editable': True, 'type': 'numericColumn', 'filter': 'agNumberColumnFilter',
'cellEditor': {'function': 'NumberInput'}, 'cellEditorParams': {'placeholder': 'Enter a number'}},
{'field': 'column_3_data', 'editable': True, 'type': 'numericColumn'},
{'field': 'column_4_data', 'editable': True, 'type': 'numericColumn'},
{'field': 'column_5_data', 'editable': True, 'type': 'numericColumn'},
{'field': 'column_6_data', 'editable': True, 'type': 'numericColumn'},
{'field': 'column_7_data', 'editable': True, 'type': 'numericColumn'}]
datatable = dag.AgGrid(id='datatable',
rowData=dataframe.to_dict('records'),
columnDefs=col_defs,
dashGridOptions={'undoRedoCellEditing': True, 'rowSelection': 'single'},
suppressDragLeaveHidesColumns=False,
persistence=True,
defaultColDef={'filter': True,
'floatingFilter': True,
'resizable': True,
'sortable': True,
'editable': False,
'minWidth': 125,
'wrapHeaderText': True,
'autoHeaderHeight': True},
)
grid_size = dbc.Row(dbc.Col(dbc.ButtonGroup([dbc.Button(id='less', n_clicks=0, children='<'),
dbc.Button(id='more', n_clicks=0, children='>')]),
width={'size': 1, 'offset': 5}))
app.layout = dbc.Container(dbc.Card(dbc.CardBody([grid_size,
dcc.Loading(children=[dbc.Tabs([dbc.Tab(datatable,
label='Product Detail')])],
fullscreen=True)])), fluid=True)
@callback(Output('datatable', 'style'),
Input('less', 'n_clicks'),
Input('more', 'n_clicks'),
State('datatable', 'style'),
prevent_initial_call=True)
def size_grid(less_clicks, more_clicks, grid_style):
"""Change the size of the grid."""
ret_style = no_update
if ctx.triggered_id == 'less' and less_clicks > 0:
try:
if grid_style['height'] > 250:
ret_style = grid_style
try:
ret_style['height'] -= 50
except TypeError:
ret_style = {'height': 350, 'width': '100%'}
except TypeError:
ret_style = {'height': 350, 'width': '100%'}
elif ctx.triggered_id == 'more' and more_clicks > 0:
ret_style = grid_style
try:
ret_style['height'] += 50
except TypeError:
ret_style = {'height': 450, 'width': '100%'}
return ret_style
if __name__ == '__main__':
app.run_server(debug=True, threaded=False, use_reloader=False)
