サイトアイコン アマチュア無線局JS2IIU

【Streamlit】便利なStreamlit Components紹介：streamlit-aggrid

JS2IIU

こんにちは、JS2IIUです。
Streamlitでは簡単にPandasのDataFrame型のデータを表示することができます。また、表示するための方法がいくつかあり、今回はインタラクティブなデータグリッド表示を可能にするstreamlit-aggrid について紹介します。今回もよろしくお願いします。

1. はじめに

Streamlit は、Python で簡単に Web アプリケーションを作れる人気のフレームワークです。特に、データサイエンスや業務用ツールの GUI アプリを作る場面で多く活用されています。

その中でも「表形式のデータを編集したい」「ユーザーが行を選択できるようにしたい」といった要望に応えてくれるのが、今回紹介するコンポーネント streamlit-aggrid です。

この記事では、streamlit-aggrid を使って以下のようなことを実現する方法を、ステップバイステップで解説していきます。

2. streamlit-aggrid のインストール方法

まず最初に、streamlit-aggrid をインストールしましょう。Python の仮想環境を使っている場合は、仮想環境を有効にした上で以下のコマンドを実行してください。

Bash
pip install streamlit-aggrid

これだけで準備は完了です。

3. 基本の使い方：データフレームを表示する

最初に、Pandas の DataFrame をそのままグリッド表示する基本的な方法を見てみましょう。

📌 ステップ 1：必要なライブラリをインポート

Python
import streamlit as st
import pandas as pd
from st_aggrid import AgGrid

📌 ステップ 2：サンプルデータを作成

Python
df = pd.DataFrame({
    "名前": ["佐藤", "鈴木", "高橋"],
    "年齢": [25, 30, 35],
    "職業": ["エンジニア", "デザイナー", "マネージャー"]
})

📌 ステップ 3：AgGrid で表示する

Python
AgGrid(df)

✅ 実行結果

このコードを streamlit run ファイル名.py で実行すると、表がインタラクティブな形で表示されます。列名で並び替えができたり、列ごとにフィルターが表示されたりと、すぐに実用的な表が完成します。

コード全体

Python
import streamlit as st
import pandas as pd
import st_aggrid

df = pd.DataFrame({
    "名前": ["佐藤", "鈴木", "高橋"],
    "年齢": [25, 30, 35],
    "職業": ["エンジニア", "デザイナー", "マネージャー"]
})


st.title("st_aggridのサンプルアプリ")
st.write("以下はst_aggridを使用したデータフレームの表示例です。")
st_aggrid.AgGrid(df)

st.write("以下はst.data_editorを使用したデータフレームの表示例です。")
st.data_editor(df)

4. 行の選択を可能にする

次は、ユーザーが行をクリックして選択できるようにしてみましょう。これはデータ選択や確認などにとても便利です。

📌 ステップ 1：GridOptions を構築する

Python
from st_aggrid import GridOptionsBuilder

gb = GridOptionsBuilder.from_dataframe(df)
gb.configure_selection('single')  # 単一行選択
grid_options = gb.build()

📌 ステップ 2：選択機能付きのグリッド表示

Python
grid_response = AgGrid(df, gridOptions=grid_options)

📌 ステップ 3：選択された行を表示

Python
selected_rows = grid_response['selected_rows']
st.write("選択された行:", selected_rows)

✅ 実行結果

表の中の任意の行をクリックすると、その行のデータが下に表示されます。たとえば、「鈴木さん」の行を選択すると、対応する辞書データが表示されます。

コード全体

Python
import streamlit as st
import pandas as pd
from st_aggrid import AgGrid, GridOptionsBuilder

df = pd.DataFrame({
    "名前": ["佐藤", "鈴木", "高橋"],
    "年齢": [25, 30, 35],
    "職業": ["エンジニア", "デザイナー", "マネージャー"]
})


st.title("st_aggridのサンプルアプリ")

gb = GridOptionsBuilder.from_dataframe(df)
gb.configure_selection('single')  # 単一行選択
grid_options = gb.build()

grid_response = AgGrid(df, gridOptions=grid_options)

selected_rows = grid_response['selected_rows']
st.write("選択された行:", selected_rows)

5. セルの編集を可能にする

次に、表示された表の中の値をユーザーが編集できるようにしましょう。

📌 ステップ 1：すべての列を編集可能にする設定

Python
gb.configure_default_column(editable=True)

※この設定は、先ほどの GridOptionsBuilder のコードのあとに追加してください。

📌 ステップ 2：編集されたデータの取得

AgGrid の戻り値から、編集後のデータを取得できます。

Python
grid_response = AgGrid(df, gridOptions=gb.build(), editable=True)
edited_data = grid_response['data']
st.write("編集されたデータ:", edited_data)

✅ 実行結果

セルをクリックして直接編集できます。たとえば、年齢を「40」に書き換えると、変更後の内容が st.write() で表示されます。

コード全体

Python
import streamlit as st
import pandas as pd
from st_aggrid import AgGrid, GridOptionsBuilder

# サンプルデータの作成
df = pd.DataFrame({
    "名前": ["佐藤", "鈴木", "高橋"],
    "年齢": [25, 30, 35],
    "職業": ["エンジニア", "デザイナー", "マネージャー"]
})

st.title("AgGridによるデータ編集")

# GridOptionsBuilderを使ってグリッドのオプションを設定
gb = GridOptionsBuilder.from_dataframe(df)

# 全カラムの編集を有効化
gb.configure_default_column(editable=True)

# グリッドオプションを作成
grid_options = gb.build()

# AgGridでデータ表示（編集モード有効）
grid_response = AgGrid(
    df,
    gridOptions=grid_options,
    update_mode="VALUE_CHANGED",  # セルの値が変わったときに更新
    enable_enterprise_modules=False,
    allow_unsafe_jscode=True,
    fit_columns_on_grid_load=True
)

# 編集後のデータの取得
edited_df = grid_response["data"]

# 編集後のデータを表示
st.subheader("編集後のデータ")
st.dataframe(edited_df)

6. 実用的な活用例

ここでは、よくある活用ケースを簡単に紹介します。

✅ CSV ファイルの読み込みと編集

アップロードされた CSV ファイルを編集できるツールを作るのも簡単です。

Python
uploaded_file = st.file_uploader("CSVファイルをアップロード", type="csv")

if uploaded_file:
    df = pd.read_csv(uploaded_file)
    gb = GridOptionsBuilder.from_dataframe(df)
    gb.configure_default_column(editable=True)
    grid_response = AgGrid(df, gridOptions=gb.build(), editable=True)
    st.write("編集後のデータ", grid_response['data'])

7. 注意点・制限事項

8. まとめ

streamlit-aggrid を使えば、Streamlit アプリ内で簡単にインタラクティブなデータグリッドを作成できます。データの表示・選択・編集といった処理がすべて数行のコードで実現できるため、業務ツールやプロトタイピングにも最適です。

ぜひ、あなたのアプリにも取り入れてみてください！

9. 参考リンク

本ブログ内の記事も参考にしてください。

最後に書籍のPRです。
24年11月に第3版が発行された「scikit-learn、Keras、TensorFlowによる実践機械学習 第3版」、Aurélien Géron 著。下田、牧、長尾訳。機械学習のトピックスについて手を動かしながら網羅的に学べる書籍です。ぜひ手に取ってみてください。

最後まで読んでいただきありがとうございます。

モバイルバージョンを終了