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 ?