{"id":20399872,"url":"https://github.com/kitware/trame-grid-layout","last_synced_at":"2025-04-12T13:42:29.971Z","repository":{"id":59265928,"uuid":"534814820","full_name":"Kitware/trame-grid-layout","owner":"Kitware","description":"Bring grid-layout widgets to trame ","archived":false,"fork":false,"pushed_at":"2025-01-09T21:08:25.000Z","size":78,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-26T08:22:41.302Z","etag":null,"topics":["trame","trame-maintenance-program"],"latest_commit_sha":null,"homepage":"","language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Kitware.png","metadata":{"files":{"readme":"README.rst","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.rst","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-09-09T21:44:30.000Z","updated_at":"2025-01-09T21:08:29.000Z","dependencies_parsed_at":"2024-11-15T12:17:03.808Z","dependency_job_id":null,"html_url":"https://github.com/Kitware/trame-grid-layout","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kitware%2Ftrame-grid-layout","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kitware%2Ftrame-grid-layout/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kitware%2Ftrame-grid-layout/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kitware%2Ftrame-grid-layout/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Kitware","download_url":"https://codeload.github.com/Kitware/trame-grid-layout/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248408193,"owners_count":21098613,"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":["trame","trame-maintenance-program"],"created_at":"2024-11-15T04:34:45.411Z","updated_at":"2025-04-12T13:42:29.960Z","avatar_url":"https://github.com/Kitware.png","language":"Python","funding_links":[],"categories":[],"sub_categories":[],"readme":".. |pypi_download| image:: https://img.shields.io/pypi/dm/trame-grid-layout\n\nGrid Layout widgets for trame |pypi_download|\n====================================================================\n\ntrame-grid-layout extend trame **widgets** with components that can be used to create some dynamic grid layout containers.\nIt leverage [vue-grid-layout](https://github.com/jbaysolutions/vue-grid-layout) which is a grid layout system, like \n[Gridster](http://dsmorse.github.io/gridster.js/), for Vue.js. Heavily inspired by [React-Grid-Layout](https://github.com/react-grid-layout/react-grid-layout).\n\n\nInstalling\n-----------------------------------------------------------\n\ntrame-grid-layout can be installed with `pip \u003chttps://pypi.org/project/trame-grid-layout/\u003e`_:\n\n.. code-block:: bash\n\n    pip install --upgrade trame-grid-layout\n\n\nUsage\n-----------------------------------------------------------\n\nThe `Trame Tutorial \u003chttps://kitware.github.io/trame/docs/tutorial.html\u003e`_ is the place to go to learn how to use the library and start building your own application.\n\nThe `API Reference \u003chttps://trame.readthedocs.io/en/latest/index.html\u003e`_ documentation provides API-level documentation.\n\n\nLicense\n-----------------------------------------------------------\n\ntrame-grid-layout is made available under the MIT License License. For more details, see `LICENSE \u003chttps://github.com/Kitware/trame-grid-layout/blob/master/LICENSE\u003e`_\nThis license has been chosen to match the one use by `vue-grid-layout \u003chttps://github.com/react-grid-layout/react-grid-layout/blob/master/LICENSE\u003e`_ which can be exposed via this library.\n\n\nCommunity\n-----------------------------------------------------------\n\n`Trame \u003chttps://kitware.github.io/trame/\u003e`_ | `Discussions \u003chttps://github.com/Kitware/trame/discussions\u003e`_ | `Issues \u003chttps://github.com/Kitware/trame/issues\u003e`_ | `RoadMap \u003chttps://github.com/Kitware/trame/projects/1\u003e`_ | `Contact Us \u003chttps://www.kitware.com/contact-us/\u003e`_\n\n.. image:: https://zenodo.org/badge/410108340.svg\n    :target: https://zenodo.org/badge/latestdoi/410108340\n\n\nEnjoying trame?\n-----------------------------------------------------------\n\nShare your experience `with a testimonial \u003chttps://github.com/Kitware/trame/issues/18\u003e`_ or `with a brand approval \u003chttps://github.com/Kitware/trame/issues/19\u003e`_.\n\n\nDevelopment: Grabbing client before push to PyPI\n-----------------------------------------------------------\n\nTo update the client code, run the following command line while updating the targeted version\n\n.. code-block:: console\n\n    mkdir -p ./trame_grid_layout/module/serve\n    curl https://unpkg.com/vue-grid-layout@2.4.0 -Lo ./trame_grid_layout/module/serve/vue-grid-layout.js\n\nSimple example\n-----------------------------------------------------------\n\n.. code-block:: python\n\n    from trame.app import get_server\n    from trame.ui.vuetify import SinglePageLayout\n    from trame.widgets import vuetify, grid\n\n    server = get_server()\n    state = server.state\n\n    LAYOUT = [\n        {\"x\": 0, \"y\": 0, \"w\": 2, \"h\": 2, \"i\": \"0\"},\n        {\"x\": 2, \"y\": 0, \"w\": 2, \"h\": 4, \"i\": \"1\"},\n        {\"x\": 4, \"y\": 0, \"w\": 2, \"h\": 5, \"i\": \"2\"},\n        {\"x\": 6, \"y\": 0, \"w\": 2, \"h\": 3, \"i\": \"3\"},\n        {\"x\": 8, \"y\": 0, \"w\": 2, \"h\": 3, \"i\": \"4\"},\n        {\"x\": 10, \"y\": 0, \"w\": 2, \"h\": 3, \"i\": \"5\"},\n        {\"x\": 0, \"y\": 5, \"w\": 2, \"h\": 5, \"i\": \"6\"},\n        {\"x\": 2, \"y\": 5, \"w\": 2, \"h\": 5, \"i\": \"7\"},\n        {\"x\": 4, \"y\": 5, \"w\": 2, \"h\": 5, \"i\": \"8\"},\n        {\"x\": 6, \"y\": 3, \"w\": 2, \"h\": 4, \"i\": \"9\"},\n        {\"x\": 8, \"y\": 4, \"w\": 2, \"h\": 4, \"i\": \"10\"},\n        {\"x\": 10, \"y\": 4, \"w\": 2, \"h\": 4, \"i\": \"11\"},\n        {\"x\": 0, \"y\": 10, \"w\": 2, \"h\": 5, \"i\": \"12\"},\n        {\"x\": 2, \"y\": 10, \"w\": 2, \"h\": 5, \"i\": \"13\"},\n        {\"x\": 4, \"y\": 8, \"w\": 2, \"h\": 4, \"i\": \"14\"},\n        {\"x\": 6, \"y\": 8, \"w\": 2, \"h\": 4, \"i\": \"15\"},\n        {\"x\": 8, \"y\": 10, \"w\": 2, \"h\": 5, \"i\": \"16\"},\n        {\"x\": 10, \"y\": 4, \"w\": 2, \"h\": 2, \"i\": \"17\"},\n        {\"x\": 0, \"y\": 9, \"w\": 2, \"h\": 3, \"i\": \"18\"},\n        {\"x\": 2, \"y\": 6, \"w\": 2, \"h\": 2, \"i\": \"19\"},\n    ]\n\n    with SinglePageLayout(server) as layout:\n        layout.title.set_text(\"Grid layout\")\n        with layout.content:\n            with grid.GridLayout(\n                layout=(\"layout\", LAYOUT),\n                row_height=20,\n            ):\n                grid.GridItem(\n                    \"{{ item.i }}\",\n                    v_for=\"item in layout\",\n                    key=\"item.i\",\n                    v_bind=\"item\",\n                    classes=\"pa-4\",\n                    style=\"border: solid 1px #333; background: rgba(128, 128, 128, 0.5);\",\n                )\n\n    if __name__ == \"__main__\":\n        server.start()\n\n\nJavaScript dependency\n-----------------------------------------------------------\n\nThis Python package bundle the ``vue-grid-layout@2.4.0`` JavaScript library. If you would like us to upgrade it, `please reach out \u003chttps://www.kitware.com/trame/\u003e`_.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkitware%2Ftrame-grid-layout","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkitware%2Ftrame-grid-layout","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkitware%2Ftrame-grid-layout/lists"}