Issues on AgGrid when it comes to multi-index column. Any alternative solutions?

Custom Components streamlit-aggrid
1

I got error on using streamlit-aggrid when it comes to multi-index column

here is the code and dummy data

import streamlit as st
import pandas as pd
import numpy as np
from st_aggrid import AgGrid

# Create some dummy data
data = {
    'Rek_Android': [1, 2, 3, 4],
    'Rek_iOS': [5, 6, 7, 8],
    'HP_Android': ['A', 'B', 'C', 'D'],
    'HP_iOS': ['E', 'F', 'G', 'H'],
    'Provider_Android': ['Telkomsel', 'XL', 'tri', 'Indosat'],
    'Provider_iOS': ['Telkomsel', 'XL', 'tri', 'Indosat'],
    'Eksekusi Android': pd.to_datetime(['2024-10-09', '2024-10-10', '2024-10-11', '2024-10-12']).date,
    'Eksekusi iOS': pd.to_datetime(['2024-10-13', '2024-10-14', '2024-10-15', '2024-10-16']).date,
    'Passed Android': pd.to_datetime(['2024-11-09', '2024-11-10', '2024-11-11', '2024-11-12']).date,
    'Passed iOS': pd.to_datetime(['2024-11-13', '2024-11-14', '2024-11-15', '2024-11-16']).date
}
df = pd.DataFrame(data)

# Set multi-index
d = {
    'Rek_Android': 'Rekening Sumber', 'Rek_iOS': 'Rekening Sumber',
    'HP_Android': 'Tipe Device HP', 'HP_iOS': 'Tipe Device HP',
    'Provider_Android': 'Telko Provider HP', 'Provider_iOS': 'Telko Provider HP',
    'Eksekusi Android': 'Tanggal Eksekusi', 'Eksekusi iOS': 'Tanggal Eksekusi',
    'Passed Android': 'Tanggal Passed', 'Passed iOS': 'Tanggal Passed'
}
df.columns = pd.MultiIndex.from_tuples([*zip(map(d.get, df), df)])

# Reset the multi-index to make it compatible with AgGrid
df.reset_index(drop=True, inplace=True)

# Display the dataframe using AgGrid
st.title("Multi-index AgGrid Example")
AgGrid(df)

and got this error said
AttributeError: module 'streamlit.components.v1' has no attribute 'components'

Do I really need to flatten the multi-index column first? how to handle this? Do you guys have any alternative solution if I really need to get the multi-index work ?

2

I wrote these functions to easily flatten a multi-index DF

def flatten_multi_index(index: pd.MultiIndex | pd.Index, seperator="|") -> list:
    """
    Take a MultiIndex and combine the index level values into a string seperated by the seperator. For a single
    level index will just return that index unchanged. The result of this function can be assigned to a DataFrame
    to turn a MultiIndex into single Index DataFrame, df. columns = flatten_multi_index(df.columns)

    :param index: Index of MultiIndex
    :param seperator: seperator to use between column levels
    :return: list of flattened column names
    """
    if isinstance(index, pd.MultiIndex):
        return [seperator.join(col).strip() for col in index.values]
    else:
        return [x for x in index.values]


def flatten_df(df: pd.DataFrame, seperator="|") -> pd.DataFrame:
    """
    Convenience wrapper around flatten_multi_index to flatten the column MultiIndex and return the DataFrame with
    the new column labels
    :param df: pd.DataFrame
    :param seperator: seperator to use between column levels
    :return: pd.DataFrame
    """
    _df = df.copy()
    _df.columns = flatten_multi_index(_df.columns, seperator=seperator)
    return _df