I have this app which uses two external filters before returning back an agGrid. I have custom css to control some of the styling to reduce the white space however if i adjust the filters the styling resets…
on load (as expected):
when i add a new country:
when i add a new sport:
at the end of the day im just trying to get the styling to minimize all white space, and center the column titles and values to make it look clean … im struggling to figure out how to control this, any suggestions?
import dash_ag_grid as dag
from dash import Dash, dcc, html, callback, Input, Output
import pandas as pd
app = Dash(__name__)
df = pd.read_csv(
"https://raw.githubusercontent.com/plotly/datasets/master/ag-grid/olympic-winners.csv"
)
country_data = {}
for country in df['country'].unique():
country_data[country] = df[df['country']==country]
countries = df['country'].unique()
sports = df['sport'].unique()
app.layout = html.Div(
[
html.Label("Select Countries:"),
dcc.Dropdown(
countries,
value=['United States','Russia','Germany','China'], #setting default regions I want to see
multi=True,
style={"marginBottom": 5},
id="dd-external-country-filter",
),
html.Label("Select Sports:"),
dcc.Dropdown(
sports,
value=[sports[0]],
multi=True,
style={"marginBottom": 5},
id="dd-external-sport-filter",
),
html.Label("Select Medal Type:"),
dcc.Dropdown(
['gold','silver','bronze','total'],
value='gold',
style={"marginBottom": 5},
id="dd-external-medal-filter",
),
html.Div(id="grid-output",children=[])
]
)
@callback(Output("grid-output", "children"),
Input("dd-external-country-filter", "value"),
Input("dd-external-sport-filter", "value"),
Input("dd-external-medal-filter", "value"),
)
def update_grid(countries,sports,medal):
all_data = []
print (sports)
for country in countries:
data = country_data[country].groupby(['year','sport'])[medal].sum().reset_index()
df = data.pivot(index='year',values=medal,columns='sport')
filtered_df = df[df.columns.intersection(sports)]
filtered_df.columns = [f'{country} {col}' for col in filtered_df.columns]
all_data.append(filtered_df)
grid_df = pd.concat(all_data,axis=1).reset_index()
return dag.AgGrid(columnDefs=[{"field": i,"resizable":True} for i in grid_df.columns],
className = "ag-theme-alpine ag-theme-olympics",
rowData=grid_df.to_dict("records"),
defaultColDef={"sortable": True},
columnSize = "autoSize",
dashGridOptions={"animateRows": False,
"rowHeight": 25}
)
if __name__ == "__main__":
app.run(debug=True)
css:
.ag-theme-alpine.ag-theme-olympics {
--ag-header-background-color: silver;
--ag-header-cell-hover-background-color: #c7c4bf;
--ag-cell-horizontal-padding: 3px;
--ag-grid-size:3px;
}
.ag-theme-alpine.ag-theme-olympics .ag-pinned-left-cols-container, .ag-theme-olympics .ag-pinned-right-cols-container {
--ag-odd-row-background-color: rgb(250, 250, 250);
--ag-background-color: rgb(230, 230, 230);
}