Streamlitでリストを並び替えよう

はじめに

リストを画面上で簡単に並び替えることができる外部ライブラリ、streamlit-sortablesを紹介します。

なにができるの？

1つのコンテナの中でデータの並び替えができます。
また、複数のコンテナの間でデータを並び替えつつ移動させることもできます。この機能は実装も簡単で凄く便利だと思います。
たとえば、AチームとBチームのメンバーがいて、そのメンバーを画面上で入れ替えるというような時に使用できます。

まずは設定

ライブラリのインストール

pipでライブラリをインストールします。

pip install streamlit-sortables

プログラムの作成

プログラムコード

プログラムコード (単一コンテナ)

import streamlit as st
from streamlit_sortables import sort_items

st.subheader('リストのソート')
original_items = list('ABCDEFG')
sorted_items  = sort_items(original_items)
 
st.write('---')
st.write(f'並び変え前: {original_items}')
st.write(f'並び変え後: {sorted_items}')
st.write('---')

プログラムコード (複数コンテナ)

import streamlit as st
from streamlit_sortables import sort_items

st.subheader('メンバー表作成')
original_items = [
    {'header': '選抜メンバー1：', 'items' : ['森田']},
    {'header': '選抜メンバー2：', 'items' : ['花田']},
    {'header': '選抜メンバー3：', 'items' : ['稲田']},
    {'header': '候補メンバー：',
        'items': ['田原', '鈴木', '田中', '森', '林', '伊藤', '阿部', '田口', '木村']}
]
sorted_items = sort_items(original_items, multi_containers=True, direction='vertical')
st.write('---')
for container in sorted_items:
    st.write(container["header"])
    for member in container["items"]:
       st.write(member)

パラメータ

ラベル	説明
使い方	sort_items(items、multi_containers=None, direction=None)
items	multi_containers=False(デフォルト)の場合は、リストを１つ指定します。 multi_containers=Trueの場合は、リストを複数指定します。
multi_containers	コンテナが1つの場合はFalse (デフォルト)を指定します。コンテナが複数の場合はTrueを指定します。
direction	コンテナの中のリストを縦に表示する場合はverticalを指定します。

主なパラメータ

実行画面

実行画面 (単一コンテナ)

ソート前。AからGの順に並んでいます。

ソート後。ドラッグ＆ドロップで任意の順番に並べ替えた後です。リストの順番も並び替えた順に変更となっています。

実行画面 (複数コンテナ)

ソート前。コンテナ内のアイテムの並びが縦のパターン (direction=’vertical’)。

ソート後。　候補メンバーのアイテム(メンバー)をそれぞれのコンテナ(選抜メンバー)に移動しました。それぞれのコンテナも表示順に並び替えが行われています。

コンテナ内のアイテムの並びが横のパターン。

おわりに

コンテナが複数のパターンは、オプションの選択や、メンバー割り振りなどの機能など、いろいろな場面で使えるのではないかと思います。
編集後の各リストをそのままデータベースに保存するようなロジックにすれば便利ではないでしょうか。

参考にさせていただいたもの

PyPi