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)