From b43c514e66cdcce0a5a6b072b7ffa36861ede9b5 Mon Sep 17 00:00:00 2001 From: Lendemor Date: Tue, 3 Dec 2024 13:26:23 +0100 Subject: [PATCH 1/3] use on_mount to load df data --- docs/library/tables-and-data-grids/ag_grid.md | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) diff --git a/docs/library/tables-and-data-grids/ag_grid.md b/docs/library/tables-and-data-grids/ag_grid.md index 57136d2ec..a2e7c4303 100644 --- a/docs/library/tables-and-data-grids/ag_grid.md +++ b/docs/library/tables-and-data-grids/ag_grid.md @@ -255,8 +255,12 @@ from reflex_ag_grid import ag_grid import pandas as pd class AGGridEditingState(rx.State): - _data_df = pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv") - data: list[dict] = _data_df.to_dict("records") + data: list[dict] = [] + + @rx.event + def load_data(self): + _df = pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv") + self.data = _df.to_dict("records") @rx.event def cell_value_changed(self, row, col_field, new_value): @@ -280,6 +284,7 @@ def ag_grid_simple_editing(): row_data=AGGridEditingState.data, column_defs=column_defs, on_cell_value_changed=AGGridEditingState.cell_value_changed, + on_mount=AGGridEditingState.load_data, width="100%", height="40vh", ) @@ -376,8 +381,12 @@ from reflex_ag_grid import ag_grid import pandas as pd class AGGridState2(rx.State): - _data_df = pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv") - data: list[dict] = _data_df.to_dict("records") + data: list[dict] = [] + + @rx.event + def load_data(self): + _df = pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv") + self.data = _df.to_dict("records") column_defs = [ ag_grid.column_def(field="country"), @@ -390,6 +399,7 @@ def ag_grid_state_2(): id="ag_grid_state_2", row_data=AGGridState2.data, column_defs=column_defs, + on_mount=AGGridState2.load_data, width="100%", height="40vh", ) From 71b41e0e7982a9bb3a2835e892678fbb366c49f9 Mon Sep 17 00:00:00 2001 From: Lendemor Date: Tue, 3 Dec 2024 13:54:54 +0100 Subject: [PATCH 2/3] fix some grids widths --- docs/library/tables-and-data-grids/ag_grid.md | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/docs/library/tables-and-data-grids/ag_grid.md b/docs/library/tables-and-data-grids/ag_grid.md index a2e7c4303..b34e8c2a7 100644 --- a/docs/library/tables-and-data-grids/ag_grid.md +++ b/docs/library/tables-and-data-grids/ag_grid.md @@ -604,10 +604,13 @@ def ag_grid_api_simple(): id="ag_grid_basic_row_selection", row_data=df.to_dict("records"), column_defs=column_defs, + width="100%", + height="40vh", ), rx.button("Select All", on_click=my_api.select_all()), rx.button("Deselect All", on_click=my_api.deselect_all()), spacing="4", + width="100%", ) ``` @@ -653,10 +656,13 @@ def ag_grid_api_simple2(): id="ag_grid_export_and_resize", row_data=df.to_dict("records"), column_defs=column_defs, + width="100%", + height="40vh", ), rx.button("Export", on_click=my_api.export_data_as_csv()), rx.button("Resize Columns", on_click=my_api.size_columns_to_fit()), spacing="4", + width="100%", ) ``` @@ -697,9 +703,12 @@ def ag_grid_api_argument(): id="ag_grid_get_data_as_csv", row_data=df.to_dict("records"), column_defs=column_defs, + width="100%", + height="40vh", ), rx.button("Get CSV data on backend", on_click=my_api.get_data_as_csv(callback=AGGridStateAPI.handle_get_data)), spacing="4", + width="100%", ) ``` From 7ae25d2412c7d8822a5b85a6e09043926abc2ccb Mon Sep 17 00:00:00 2001 From: Lendemor Date: Wed, 4 Dec 2024 02:25:01 +0100 Subject: [PATCH 3/3] delay columns definitions --- docs/library/tables-and-data-grids/ag_grid.md | 33 +++++++++++-------- 1 file changed, 20 insertions(+), 13 deletions(-) diff --git a/docs/library/tables-and-data-grids/ag_grid.md b/docs/library/tables-and-data-grids/ag_grid.md index b34e8c2a7..97495559e 100644 --- a/docs/library/tables-and-data-grids/ag_grid.md +++ b/docs/library/tables-and-data-grids/ag_grid.md @@ -416,21 +416,27 @@ import pandas as pd class AgGridState(rx.State): """The app state.""" - all_columns = [ - ag_grid.column_def(field="country"), - ag_grid.column_def(field="pop"), - ag_grid.column_def(field="continent"), - ag_grid.column_def(field="lifeExp"), - ag_grid.column_def(field="gdpPercap"), - ] - - two_columns = [ - ag_grid.column_def(field="country"), - ag_grid.column_def(field="pop"), - ] - column_defs = all_columns + all_columns: list = [] + + two_columns: list = [] + column_defs: list = all_columns n_clicks = 0 + @rx.event + def init_columns(self): + self.all_columns = [ + ag_grid.column_def(field="country"), + ag_grid.column_def(field="pop"), + ag_grid.column_def(field="continent"), + ag_grid.column_def(field="lifeExp"), + ag_grid.column_def(field="gdpPercap"), + ] + self.two_columns = [ + ag_grid.column_def(field="country"), + ag_grid.column_def(field="pop"), + ] + self.column_defs = self.all_columns + @rx.event def update_columns(self): self.n_clicks += 1 @@ -450,6 +456,7 @@ def ag_grid_simple_with_state(): id="ag_grid_basic_with_state", row_data=df.to_dict("records"), column_defs=AgGridState.column_defs, + on_mount=AgGridState.init_columns, width="100%", height="40vh", ),