Multi column headers

[Dongjie_He]

Hi,
Is it anyway to implement streamlit aggrid like this?

Thanks

[Caroline]

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));
});

[Dongjie_He]

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)

[Erik_Candela_Rojas]

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)