Hi,
Is it anyway to implement streamlit aggrid like this?
Thanks
Hey @Dongjie_He,
It looks like Aggrid supports “header group cells” – you might be able to get this to work with the streamlit-aggrid component.
const columnDefs = [
{
headerName: 'Athlete Details',
headerGroupComponent: CustomHeaderGroup,
children: [
{ field: 'athlete', width: 150 },
{ field: 'age', width: 90, columnGroupShow: 'open' },
{
field: 'country',
width: 120,
columnGroupShow: 'open',
},
],
},
{
headerName: 'Medal details',
headerGroupComponent: CustomHeaderGroup,
children: [
{ field: 'year', width: 90 },
{ field: 'date', width: 110 },
{
field: 'sport',
width: 110,
columnGroupShow: 'open',
},
{
field: 'gold',
width: 100,
columnGroupShow: 'open',
},
{
field: 'silver',
width: 100,
columnGroupShow: 'open',
},
{
field: 'bronze',
width: 100,
columnGroupShow: 'open',
},
{
field: 'total',
width: 100,
columnGroupShow: 'open',
},
],
},
];
const gridOptions = {
columnDefs: columnDefs,
rowData: null,
defaultColDef: {
width: 100,
resizable: true,
},
};
// setup the grid after the page has finished loading
document.addEventListener('DOMContentLoaded', function () {
var gridDiv = document.querySelector('#myGrid');
new agGrid.Grid(gridDiv, gridOptions);
fetch('https://www.ag-grid.com/example-assets/olympic-winners.json')
.then((response) => response.json())
.then((data) => gridOptions.api.setRowData(data));
});
Hi Caroline,
Thanks for your response. I tried define grid_options like aggrid, got error:
NameError: name ‘headerName’ is not defined
here is my sample code:
import streamlit as st
import pandas as pd
from st_aggrid import AgGrid
df = pd.DataFrame({“athlete”: [1, 2, 3], “age”: [4, 5, 6]})
grid_options = {
“columnDefs”: [
{
headerName: ‘Athlete Details’,
children: [
{ field: ‘athlete’ },
{ field: ‘age’ }
]
}
]
}
grid_return = AgGrid(df, grid_options)
new_df = grid_return[“data”]
st.write(new_df)
Your code works for me.
streamlit == 1.25.0
streamlit-aggrid == 0.3.4.post3
df = pd.DataFrame({"athlete": [1, 2, 3], "age": [4, 5, 6]})
grid_options = {
"columnDefs": [
{
"headerName": "Athlete Details",
"children": [
{ "field": "athlete" },
{ "field": "age" }
]
}
]
}
grid_return = AgGrid(df, grid_options)
These cookies are necessary for the website to function and cannot be switched off. They are usually only set in response to actions made by you which amount to a request for services, such as setting your privacy preferences, logging in or filling in forms.
These cookies allow us to count visits and traffic sources so we can measure and improve the performance of our site. They help us understand how visitors move around the site and which pages are most frequently visited.
These cookies are used to record your choices and settings, maintain your preferences over time and recognize you when you return to our website. These cookies help us to personalize our content for you and remember your preferences.
These cookies may be deployed to our site by our advertising partners to build a profile of your interest and provide you with content that is relevant to you, including showing you relevant ads on other websites.