https://github.com/tk42/streamlit-draggable-list

A Streamlit wrapper component on react-smooth-dnd
https://github.com/tk42/streamlit-draggable-list

react streamlit-component

Last synced: 4 months ago
JSON representation

A Streamlit wrapper component on react-smooth-dnd

• Host: GitHub
• URL: https://github.com/tk42/streamlit-draggable-list
• Owner: tk42
• License: mit
• Created: 2022-09-01T23:07:07.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2024-02-15T11:52:07.000Z (over 2 years ago)
• Last Synced: 2025-04-04T12:51:28.098Z (about 1 year ago)
• Topics: react, streamlit-component
• Language: TypeScript
• Homepage: https://pypi.org/project/streamlit-draggable-list/
• Size: 835 KB
• Stars: 19
• Watchers: 1
• Forks: 5
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# streamlit-draggable-list

![Support Python 3.10+](https://img.shields.io/badge/Python-3.10+-green)

A Streamlit wrapper component on react-smooth-dnd

### Exmple

```python

import streamlit as st

from st_draggable_list import DraggableList

st.title("DraggableList")

data = [

    {"id": "oct", "order": 10, "name": "Oct"},

    {"id": "nov", "order": 11, "name": "Nov"},

    {"id": "dec", "order": 12, "name": "Dec"},

    {"id": "jan", "order": 1, "name": "Jan"},

    {"id": "feb", "order": 2, "name": "Feb"},

    {"id": "mar", "order": 3, "name": "Mar"},

    {"id": "apr", "order": 4, "name": "Apr"},

    {"id": "may", "order": 5, "name": "May"},

    {"id": "jun", "order": 6, "name": "Jun"},

    {"id": "jul", "order": 7, "name": "Jul"},

    {"id": "aug", "order": 8, "name": "Aug"},

    {"id": "Sep", "order": 9, "name": "Sep"},

]

slist = DraggableList(data, width="100%")

st.write(slist)

```

![draggable_list](./draggable_list.png)

### Component value

![component_value](./component_value.png)

### Install

```

pip install streamlit-draggable-list

```