【Streamlit】データテーブルのソートと検索機能を追加

Streamlit
この記事は約8分で読めます。

こんにちは、JS2IIUです。
これまでにst.dataframeについてはいくつかの記事で解説してきました。今回はデータテーブルでソートや検索により操作する方法を説明していきます。今回もよろしくお願いします。

1. はじめに

Pythonで作成したデータを表（テーブル）で表示したいとき、便利なのが Streamlit の st.dataframe 関数です。この記事では、st.dataframe を使ってデータを表示する基本から、検索やソート機能を追加してインタラクティブに操作できる方法まで、初心者にもわかりやすくステップバイステップで解説していきます。

「名前で検索したい」「年齢で絞り込みたい」そんなニーズに応える実践的な例もご紹介しますので、ぜひ最後まで読んでみてください！

2. 基本のデータ表示：st.dataframe

まずは、最もシンプルな使い方から見ていきましょう。

ステップ①：必要なライブラリをインポートする

Python
import streamlit as st
import pandas as pd

streamlit と pandas をインポートします。pandas はデータの表形式（DataFrame）を扱うために使用します。

ステップ②：サンプルデータを作成する

Python
data = pd.DataFrame({
    '名前': ['田中', '佐藤', '鈴木', '高橋'],
    '年齢': [25, 30, 22, 28],
    '職業': ['エンジニア', 'デザイナー', 'マーケター', 'エンジニア']
})

このようにして、名前・年齢・職業の3列からなるデータを用意します。

ステップ③：データを表示する

Python
st.dataframe(data)

これだけで、テーブル形式でデータを表示できます。表の上部の列名をクリックすれば、並び替え（ソート）も可能です。

3. 検索機能の追加（簡易的な方法）

データが多くなると、特定の行を探すのが大変になります。そんなときに便利なのが検索機能です。

ここでは、名前で部分一致検索をする方法をご紹介します。

ステップ①：検索ボックスを追加

Python
search = st.text_input("名前で検索")

ユーザーが検索したい名前を入力できるように、テキスト入力ボックスを表示します。

ステップ②：入力に応じてフィルタリング

Python
if search:
    filtered_data = data[data['名前'].str.contains(search)]
    st.dataframe(filtered_data)
else:
    st.dataframe(data)

str.contains() を使って、入力された文字を含む名前だけを抽出します。空欄の場合は元のデータを表示します。

4. 複数条件でのフィルタリング（列ごとの検索）

次に、複数の条件を使って絞り込む方法をご紹介します。

ステップ①：年齢で絞り込むスライダーを追加

Python
age_min = st.slider("最小年齢", min_value=20, max_value=40, value=20)

これで、ユーザーが年齢の下限を選べるようになります。

ステップ②：職業で絞り込むセレクトボックスを追加

Python
job = st.selectbox("職業で絞り込み", options=["すべて"] + list(data['職業'].unique()))

リストから選択できるようにし、”すべて” を選んだ場合はフィルタしないようにします。

ステップ③：条件に応じてデータをフィルタリング

Python
filtered = data[data['年齢'] >= age_min]
if job != "すべて":
    filtered = filtered[filtered['職業'] == job]

st.dataframe(filtered)

これで、「年齢が〇歳以上で、職業が〇〇の人」といった複雑な検索が簡単にできます。

5. 機能拡張：st.data_editorを使ってみよう

Streamlit バージョン 1.22 以降では、st.data_editor という便利な関数も登場しました。

これは、st.dataframe に加えて、編集機能や自動フィルタ機能などが利用できる強力なツールです。

使い方の例：

Python
st.data_editor(data)

上記コードだけで、データを編集したり、検索窓を表示したりするインターフェースが使えます。

さらに細かく制御したい場合は、column_config を使って列ごとに表示形式をカスタマイズすることもできます。

過去にcolumn_configに関しての記事を書いていますので、こちらも参考にしていただけたら幸いです。

6. より高機能な検索・ソートを行いたい場合

Streamlit 標準の機能だけでもかなり便利ですが、より複雑なテーブル機能が必要な場合は、以下の方法も検討できます。

外部ライブラリの活用（概要のみ）

  • Ag-Grid（streamlit-aggrid）
    ソート・検索・編集・ページネーションなど高機能。
  • DataTables.js + Streamlit Components
    JavaScriptの表ライブラリを組み込みたい場合に有用。

これらはやや上級者向けですが、より柔軟なUIが必要な場合におすすめです。

7. まとめ

本記事では、Streamlit で表を扱う際の以下の機能を順を追って紹介しました：

  • st.dataframe を使った基本的なデータ表示と並び替え
  • st.text_input を使った名前検索機能
  • st.slider や st.selectbox を使った複数条件フィルタリング
  • st.data_editor による高度な編集・検索機能
  • Ag-Gridなど外部ライブラリの概要

Streamlitは、少しのコードで強力なインターフェースを作れる便利なツールです。今回ご紹介した方法を活用して、自分のアプリケーションに合わせたデータ閲覧機能を作ってみてください！

8. 参考リンク

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

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

コメント

タイトルとURLをコピーしました