Can you help a noob by showing your beautiful Ag-Grid table?
I am having trouble finding beautiful Ag-Grid examples, so I decided to create this topic
My tips for noobs like me
What is GridOptionsBuilder and how to use it?
When you create Aggrid component, gridOptions is a Dictionary with the options that you selected, as in the example:
Important: GridOptions is optional, You can still change things manually
Step 1: This will load your column names so you can modify it more easily
builder = GridOptionsBuilder.from_dataframe(dataframe)
Step 2: My dataframe has column named “User Name”, so I can modify how aggrid will display it by using the builder method
builder.configure_column(“User Name”, maxWidth = 150, minWidth = 50, pinned = ‘left’)
Step 3: use the builder.build() to create the dictionary
gridOptions = builder.build()
Step 4: create your AgGrid element using the options
AgGrid(dataframe, gridOptions=gridOptions)
OPTIONAL
Problem 1: I wanted to separate quarters from years, but I had a lot of trouble working with column headers multiIndex in agGrid.
I had data like this: [(“2015-12-31”, “quarter”)] and [(“2015-12-31”, “year”)].
So I decided to flatten the index so it became “2015-12-31_quarter” “2015-12-31_year”.
Then I created a Column Group by creating a dictionary dates_dict {“quarter”: “2015-12-31_quarter”, “year”: “2015-12-31_year”}.
I then used normal code, not gridOptions to create my dictionary like this.
for group_name, group_cols in dict_groups_of_columns.items():
children = []
sorted_cols = sorted(group_cols)
for col in sorted_cols:
headerName = col.split('_')[0]
children.append({'field': col, 'headerName': headerName})
column_defs.append({'headerName': group_name.title(), 'children': children})
I also set theme to ‘alpine’, and now my aggrid table is looking like this: