Streamlitでデータ編集可能なテーブルGUIを実現！st.data_editorの使い方完全ガイド

こんにちは、JS2IIUです。

Streamlitのst.data_editorは、データをインタラクティブな編集可能テーブル形式で表示できる機能です。本記事では、st.data_editorのすべてのパラメータを解説し、実際に使えるサンプルコードを提供します。

st.data_editorの概要

st.data_editorを使うと、DataFrameや類似データ構造を次のような特徴を持つテーブルとして表示・編集できます。

セルの直接編集
データ変更後のリアルタイム取得
編集の無効化や制限
列の順序・名前・型の設定
選択可能な行編集のモード

公式のシグネチャは次の通りです：

Python

st.data_editor(
    data=None,
    *,
    num_rows="dynamic",
    column_order=None,
    column_config=None,
    hide_index=None,
    use_container_width=False,
    disabled=False,
    key=None
)

各パラメータの詳細

1. data

概要: 編集可能なデータ（必須）。
タイプ: Pandas DataFrame, NumPy 配列, Python リストなど。
例:

Python

import pandas as pd
df = pd.DataFrame({"名前": ["Alice", "Bob"], "得点": [85, 90]})
st.data_editor(df)

2. num_rows

概要: 行数を固定または動的に設定。
タイプ: "fixed", "dynamic" または None（デフォルト: "dynamic"）。
例:

Python

st.data_editor(df, num_rows="fixed")

3. column_order

概要: 表示する列の順序を指定。
タイプ: list または None。
例:

Python

st.data_editor(df, column_order=["得点", "名前"])

4. column_config

概要: 列の名前やフォーマット、編集可能性を設定。
タイプ: dict または None。
例:

Python

st.data_editor(
    df,
    column_config={
        "得点": {"name": "スコア", "editable": False},
        "名前": {"name": "氏名", "type": "text"}
    }
)

5. hide_index

概要: インデックス列を非表示に設定。
タイプ: bool または None（デフォルト: None）。
例:

Python

st.data_editor(df, hide_index=True)

6. use_container_width

概要: テーブルを親コンテナの幅にフィットさせるか。
タイプ: bool（デフォルト: False）。
例:

Python

st.data_editor(df, use_container_width=True)

7. disabled

概要: テーブル全体を編集不可にするか。
タイプ: bool（デフォルト: False）。
例:

Python

st.data_editor(df, disabled=True)

8. key

概要: セッション内で一意にするためのキー。
タイプ: str または None。
例:

Python

st.data_editor(df, key="unique_table")

実用例：サンプルコード集

例1: 基本的な編集可能テーブルの表示

Python

import pandas as pd
import streamlit as st

data = {"名前": ["Alice", "Bob", "Charlie"], "得点": [88, 92, 85]}
df = pd.DataFrame(data)

st.title("編集可能なテーブル")
edited_df = st.data_editor(df)
st.write("編集後のデータフレーム:")
st.write(edited_df)

プログラムの解説

ライブラリのインポート

pandas：データフレーム操作用のライブラリ。
streamlit：Webアプリケーションを作成するためのライブラリ。

データの準備

辞書形式でデータを定義し、pandas.DataFrameを使用してデータフレーム (df) を作成。
データ構造：
- 名前列：文字列型の名前データ。
- 得点列：整数型のスコアデータ。

アプリのタイトルを設定

st.title("編集可能なテーブル")を使用して、アプリのページにタイトルを表示。

st.data_editorで編集可能なテーブルを表示

st.data_editor(df)を使って、ユーザーが直接データフレームを編集できるインタラクティブなテーブルを表示。
編集内容は、edited_dfとして保存される。

編集後のデータフレームを表示

st.write("編集後のデータフレーム:")で説明テキストを表示。
st.write(edited_df)で、編集結果を反映したデータフレームを画面に出力。

動作のポイント

編集機能
- ユーザーは、テーブル内の値を直接変更でき、結果がリアルタイムでedited_dfに反映されます。
シンプルな構造
- 基本的なStreamlitの使い方を示しており、特別なオプションは使用していません。カスタマイズの基礎として適しています。
用途
- 小規模データの編集。
- 入力データの確認や変更を必要とするアプリケーションで活用可能。

例2: 行を追加可能なテーブルの表示

Python

import pandas as pd
import streamlit as st

data = {"名前": ["Alice", "Bob", "Charlie"], "得点": [88, 92, 85]}
df = pd.DataFrame(data)

st.title("行を追加可能なテーブル")
# num_rows="dynamic" を指定して、行の追加を可能に
edited_df = st.data_editor(df, num_rows="dynamic")
st.write("編集後のデータフレーム:")
st.write(edited_df)

プログラムの解説

ライブラリのインポート

pandas：データの管理や操作に使用されるライブラリ。
streamlit：Pythonで簡単にWebアプリケーションを作成できるライブラリ。

データの準備

辞書形式でデータを定義し、pandas.DataFrameを使ってデータフレーム (df) を作成。
データ構造：
- 名前列：名前データ（文字列）。
- 得点列：スコアデータ（整数）。

アプリのタイトルを設定

st.title("行を追加可能なテーブル")で、アプリのタイトルを画面上に表示。

st.data_editorで行を追加可能なテーブルを作成

st.data_editorを使用して、編集可能なデータフレームを表示。
num_rows="dynamic"を指定することで、ユーザーがテーブルに新しい行を追加できる設定を有効化。
例えば、空行を追加して新しいデータを入力可能。

編集後のデータフレームを表示

st.write("編集後のデータフレーム:")で説明文を表示。
st.write(edited_df)を使用して、編集後のデータをリアルタイムで表示。

動作のポイント

行追加機能 (num_rows="dynamic")
- ユーザーがデータを編集するだけでなく、新しい行を追加してデータを拡張できるようになります。
- データ入力に柔軟性を持たせたい場合に非常に便利。
編集内容の保持
- ユーザーが編集した結果は edited_df に反映され、以降の処理に利用できます。
用途
- ユーザーが独自のデータを入力する必要があるシナリオ（例: フォームデータ入力、カスタム設定）。
- 小規模データの管理や修正。

実行例

初期データが以下のように表示されます：

名前	得点
Alice	88
Bob	92
Charlie	85

編集後にユーザーが新しい行を追加して「David, 95」を入力すると、以下のように更新されます：

名前	得点
Alice	88
Bob	92
Charlie	85
David	95

カスタマイズ可能な拡張案

列名変更: column_configで列名をカスタマイズ可能。
初期空データ: 空のデータフレームを渡して、ユーザーが全データを手動入力するよう設定可能。
データ型制限: 必要に応じて特定の列のデータ型を制限するオプションを追加。

例3: LineChartColumnを表示するテーブル

Python

import pandas as pd
import streamlit as st

data = {
    "名前": ["Alice", "Bob", "Charlie"],
    "得点": [88, 92, 85],
    "月別スコア": [[10, 20, 30], [25, 30, 35], [40, 45, 50]],
}
df = pd.DataFrame(data)

st.title("LineChartColumnを使用したテーブル")
edited_df = st.data_editor(
    df,
    column_config={
        "月別スコア": st.column_config.LineChartColumn(
            "月別スコアの推移",
            y_min=0,
            y_max=50,
        ),
        "得点": {"name": "スコア", "editable": False},
    },
    use_container_width=True,
)
st.write("編集後のデータフレーム:")
st.write(edited_df)

プログラムの解説

ライブラリのインポート

pandas：データ操作を簡単に行うためのライブラリ。
streamlit：Webアプリケーションの作成を容易にするライブラリ。

データの準備

辞書形式でデータを定義し、pandas.DataFrameを用いてデータフレーム (df) を作成。
データ構造：
- 名前列：名前データ（文字列）。
- 得点列：スコアデータ（整数）。
- 月別スコア列：リスト形式のデータ（各ユーザーの月ごとのスコア）。

アプリのタイトルを設定

st.title("LineChartColumnを使用したテーブル")でアプリのタイトルを表示。

st.data_editorを使用してインタラクティブなテーブルを作成

column_configを使用して、特定の列の表示方法をカスタマイズ。
カラム設定の詳細：
- 月別スコア列:
- st.column_config.LineChartColumnを利用して、リスト形式のデータを折れ線グラフで可視化。
- パラメータ：
  - name: 列のラベルを「月別スコアの推移」に変更。
  - y_minとy_max: グラフのY軸の最小値と最大値を指定（0～50）。
- 得点列:
- name: 列名を「スコア」に変更。
- editable=False: 編集を不可に設定。
use_container_width=Trueでテーブルを親コンテナの幅にフィット。

編集後のデータフレームを表示

st.write("編集後のデータフレーム:")で説明文を表示。
st.write(edited_df)で編集後のデータを画面に出力。

動作のポイント

LineChartColumnの利用
- リスト形式のデータを折れ線グラフとして表示することで、ユーザーがデータの傾向を視覚的に把握可能。
- 各行の「月別スコア」のデータが、その行内でグラフ化されます。
- グラフはインタラクティブに表示され、Y軸の範囲を指定することで見やすさを向上。
列ごとのカスタマイズ
- column_configを使うことで、列ごとに以下を柔軟に設定可能：
  - 表示名変更
  - 編集の可否
  - 特定のビジュアル（例: 折れ線グラフ、棒グラフ）を適用。
編集後のデータフレームの取得
- ユーザーがテーブルを編集した結果は、edited_dfに反映されます。

実行例

初期テーブルが以下のように表示されます：

名前	スコア	月別スコア
Alice	88	折れ線グラフ（10,20,30）
Bob	92	折れ線グラフ（25,30,35）
Charlie	85	折れ線グラフ（40,45,50）

得点列は編集できません。
月別スコア列は折れ線グラフとして表示され、編集も可能です。

カスタマイズ可能な拡張案

他の列のビジュアル化

他の列に対して、棒グラフやカラースケールなどの設定を適用可能。

グラフの動的範囲設定

データに基づいてy_minとy_maxを自動設定する仕組みを追加。

フィルタリング機能

ユーザーが特定の条件でデータをフィルタリング可能に。

まとめ

st.data_editorは、データのインタラクティブな編集を簡単に実現するための強力なツールです。この記事で解説した各パラメータを活用し、データ管理を効率化してみてください。

詳細な情報は、公式ドキュメントをご覧ください。

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

最後に、書籍のPRです。
24年9月に出版された「ハイパーモダンPython-信頼性の高いワークフローを構築するモダンテクニック」、Claudio Jolowicz著、嶋田、鈴木訳。開発環境の構築、プロジェクトの管理、テストに関して実践的な内容でとても参考になる一冊です。ぜひ手に取ってみてください。

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

月	火	水	木	金	土	日
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30