{"id":14959617,"url":"https://github.com/ohtaman/streamlit-sortables","last_synced_at":"2025-05-16T18:09:43.014Z","repository":{"id":39834548,"uuid":"481363921","full_name":"ohtaman/streamlit-sortables","owner":"ohtaman","description":"An Streamlit component to provide sortable items.","archived":false,"fork":false,"pushed_at":"2025-01-21T09:09:29.000Z","size":1228,"stargazers_count":116,"open_issues_count":11,"forks_count":12,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-05-13T05:25:35.719Z","etag":null,"topics":["streamlit-component"],"latest_commit_sha":null,"homepage":"","language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ohtaman.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-04-13T20:24:20.000Z","updated_at":"2025-04-29T08:10:01.000Z","dependencies_parsed_at":"2024-05-11T05:22:50.141Z","dependency_job_id":"741e3143-1fa6-4be8-8e77-6feee32fa889","html_url":"https://github.com/ohtaman/streamlit-sortables","commit_stats":{"total_commits":23,"total_committers":3,"mean_commits":7.666666666666667,"dds":0.08695652173913049,"last_synced_commit":"a67f723168c0b791a04fb8f22ba6ed6e05c9331b"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ohtaman%2Fstreamlit-sortables","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ohtaman%2Fstreamlit-sortables/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ohtaman%2Fstreamlit-sortables/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ohtaman%2Fstreamlit-sortables/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ohtaman","download_url":"https://codeload.github.com/ohtaman/streamlit-sortables/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254582907,"owners_count":22095518,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["streamlit-component"],"created_at":"2024-09-24T13:20:14.869Z","updated_at":"2025-05-16T18:09:42.994Z","avatar_url":"https://github.com/ohtaman.png","language":"Python","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Streamlit Sortables\n\nStreamlit Sortables is a component for Streamlit applications that allows users to create sortable lists. This component enhances the interactivity of your Streamlit apps by enabling users to sort lists of strings in the UI.\n\nhttps://user-images.githubusercontent.com/329750/163662202-ce292fc4-2882-46ac-8c2c-ca4b9df675d2.mp4\n\n## Features\n\n- **Sortable Lists**: Easily sort lists of strings or dictionaries.\n- **Multiple Containers**: Support for sorting items across multiple containers.\n- **Custom Styling**: Apply custom CSS styles to match your application's theme.\n\n## Installation\n\nInstall the package via pip:\n\n```bash\npip install streamlit-sortables\n```\n\n## Usage\n\n### Sorting a List of Strings\n\nUse the `sort_items` method to sort a list of strings. The return value is the sorted list.\n\n```python\nimport streamlit as st\nfrom streamlit_sortables import sort_items\n\noriginal_items = ['A', 'B', 'C']\nsorted_items = sort_items(original_items)\n\nst.write(f'Original items: {original_items}')\nst.write(f'Sorted items: {sorted_items}')\n```\n\n### Sorting with Multiple Containers\n\nYou can pass a list of dictionaries with `multi_containers=True` to sort items across multiple containers.\n\n```python\nimport streamlit as st\nfrom streamlit_sortables import sort_items\n\noriginal_items = [\n    {'header': 'First Container',  'items': ['A', 'B', 'C']},\n    {'header': 'Second Container', 'items': ['D', 'E', 'F']}\n]\n\nsorted_items = sort_items(original_items, multi_containers=True)\n\nst.write(f'Original items: {original_items}')\nst.write(f'Sorted items: {sorted_items}')\n```\n\n### Theme Customization\n\nHere's a simple example of how to customize the theme by changing the background color and font size, and numbering the items. By default, styles are defined in [SortableComponent.css](streamlit_sortables/frontend/src/SortableComponent.css):\n\n```python\nimport streamlit as st\nfrom streamlit_sortables import sort_items\n\noriginal_items = [\n    {'header': 'Container', 'items': ['Item 1', 'Item 2', 'Item 3']}\n]\n\nsimple_style = \"\"\"\n.sortable-component {\n    background-color:rgb(0, 225, 255);\n    font-size: 16px;\n    counter-reset: item;\n}\n.sortable-item {\n    background-color: black;\n    color: white;\n}\n\"\"\"\n\nsorted_items = sort_items(original_items, multi_containers=True, custom_style=simple_style)\n\nst.write(f'Original items: {original_items}')\nst.write(f'Sorted items: {sorted_items}')\n```\n\nThis example changes the background color to a light blue, sets the font size to 16px, and numbers the items.\n\n### Advanced CSS Customization\n\nThis example demonstrates advanced CSS customization, including theme customization and item numbering. Apply custom CSS styles using the `custom_style` option.\n\n```python\nimport streamlit as st\nfrom streamlit_sortables import sort_items\n\noriginal_items = [\n    {'header': 'First Container',  'items': ['A', 'B', 'C']},\n    {'header': 'Second Container', 'items': ['D', 'E', 'F']}\n]\n\ncustom_style = \"\"\"\n.sortable-component {\n    border: 3px solid #6495ED;\n    border-radius: 10px;\n    padding: 5px;\n}\n.sortable-container {\n    background-color: #F0F0F0;\n    counter-reset: item;\n}\n.sortable-container-header {\n    background-color: #FFBFDF;\n    padding-left: 1rem;\n}\n.sortable-container-body {\n    background-color: #F0F0F0;\n}\n.sortable-item, .sortable-item:hover {\n    background-color: #6495ED;\n    font-color: #FFFFFF;\n    font-weight: bold;\n}\n.sortable-item::before {\n    content: counter(item) \". \";\n    counter-increment: item;\n}\n\"\"\"\nsorted_items = sort_items(original_items, multi_containers=True, custom_style=custom_style)\n\nst.write(f'Original items: {original_items}')\nst.write(f'Sorted items: {sorted_items}')\n```\n\n![Styling Example](imgs/styling.png)\n\n## Contributing\n\nContributions are welcome! Please submit issues or pull requests for any bugs or feature requests.\n\n## License\n\nThis project is licensed under the Apache License 2.0. See the [LICENSE](LICENSE) file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fohtaman%2Fstreamlit-sortables","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fohtaman%2Fstreamlit-sortables","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fohtaman%2Fstreamlit-sortables/lists"}