{"id":15111300,"url":"https://github.com/cainmagi/dash-json-grid","last_synced_at":"2025-10-23T04:31:19.339Z","repository":{"id":256910750,"uuid":"856794016","full_name":"cainmagi/dash-json-grid","owner":"cainmagi","description":"Dash porting version of the react project React JSON Grid. Provide structured and nested grid table view of complicated JSON objects/arrays.","archived":false,"fork":false,"pushed_at":"2024-10-27T00:19:31.000Z","size":648,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-10-29T23:21:00.198Z","etag":null,"topics":["dash","data-visualization","json","json-table","json-viewer","plotly-dash","python","python-dash","python-libary","python3"],"latest_commit_sha":null,"homepage":"https://cainmagi.github.io/dash-json-grid/","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/cainmagi.png","metadata":{"files":{"readme":"README.md","changelog":"Changelog.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-09-13T08:07:59.000Z","updated_at":"2024-10-26T07:59:59.000Z","dependencies_parsed_at":"2024-09-13T21:28:02.854Z","dependency_job_id":"51ab18ce-73f3-46fa-b0dc-10467bdb6d01","html_url":"https://github.com/cainmagi/dash-json-grid","commit_stats":{"total_commits":57,"total_committers":1,"mean_commits":57.0,"dds":0.0,"last_synced_commit":"418593b55c0e2c22b2034c66417688e118e8566b"},"previous_names":["cainmagi/dash-json-grid"],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cainmagi%2Fdash-json-grid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cainmagi%2Fdash-json-grid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cainmagi%2Fdash-json-grid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cainmagi%2Fdash-json-grid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cainmagi","download_url":"https://codeload.github.com/cainmagi/dash-json-grid/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":237780122,"owners_count":19365129,"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":["dash","data-visualization","json","json-table","json-viewer","plotly-dash","python","python-dash","python-libary","python3"],"created_at":"2024-09-26T00:03:07.635Z","updated_at":"2025-10-23T04:31:18.939Z","avatar_url":"https://github.com/cainmagi.png","language":"Python","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Dash JSON Grid\n\n\u003cp\u003e\u003cimg alt=\"Banner\" src=\"https://repository-images.githubusercontent.com/856794016/fe6159c5-0ca5-4f8e-83d5-816a36e64ce2\"\u003e\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/cainmagi/dash-json-grid/releases/latest\"\u003e\u003cimg alt=\"GitHub release (latest SemVer)\" src=\"https://img.shields.io/github/v/release/cainmagi/dash-json-grid?logo=github\u0026sort=semver\u0026style=flat-square\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/cainmagi/dash-json-grid/releases\"\u003e\u003cimg alt=\"GitHub all releases\" src=\"https://img.shields.io/github/downloads/cainmagi/dash-json-grid/total?logo=github\u0026style=flat-square\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/cainmagi/dash-json-grid/blob/main/LICENSE\"\u003e\u003cimg alt=\"GitHub\" src=\"https://img.shields.io/github/license/cainmagi/dash-json-grid?style=flat-square\u0026logo=opensourceinitiative\u0026logoColor=white\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://pypi.org/project/dash-json-grid\"\u003e\u003cimg alt=\"PyPI - Downloads\" src=\"https://img.shields.io/pypi/dm/dash-json-grid?style=flat-square\u0026logo=pypi\u0026logoColor=white\u0026label=pypi\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/cainmagi/dash-json-grid/actions/workflows/python-package.yml\"\u003e\u003cimg alt=\"GitHub Actions (Build)\" src=\"https://img.shields.io/github/actions/workflow/status/cainmagi/dash-json-grid/python-package.yml?style=flat-square\u0026logo=githubactions\u0026logoColor=white\u0026label=build\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/cainmagi/dash-json-grid/actions/workflows/python-publish.yml\"\u003e\u003cimg alt=\"GitHub Actions (Release)\" src=\"https://img.shields.io/github/actions/workflow/status/cainmagi/dash-json-grid/python-publish.yml?style=flat-square\u0026logo=githubactions\u0026logoColor=white\u0026label=release\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nDash JSON Grid is a Dash component library.\n\nDash porting version of the react project [React JSON Grid :link:][git-react-json-grid]. Provide structured and nested grid table view of complicated JSON objects/arrays.\n\nThe following two figures compare the demos of the original React version and the ported Dash version. Since this project is just a dash component wrapper on the original React component, the performance is the same.\n\n|        React JSON Grid        |       Dash JSON Grid        |\n| :---------------------------: | :-------------------------: |\n| ![demo-react][pic-demo-react] | ![demo-dash][pic-demo-dash] |\n\n## 1. Install\n\nIntall the **latest released version** of this package by using the PyPI source:\n\n``` sh\npython -m pip install dash-json-grid\n```\n\nOr use the following commands to install **the developing version** from the GitHub Source when you have already installed [Git :hammer:][tool-git], [NodeJS :hammer:][tool-nodejs], and [Yarn :hammer:][tool-yarn]:\n\n```bash\ngit clone https://github.com/cainmagi/dash-json-grid\ncd dash-json-grid\npython -m pip install -r requirements-dev.txt\nyarn install\nyarn build\npython -m pip install .\n```\n\n## 2. Usages\n\nThe following codes provide a minimal example of using this component:\n\n```python\nimport dash\nimport dash_json_grid as djg\n\n\napp = dash.Dash(\"demo\")\napp.layout = djg.DashJsonGrid(\n    data={\n        \"id\": \"0001\",\n        \"type\": \"donut\",\n        \"name\": \"Cake\",\n        \"ppu\": 1111.55,\n        \"batters\": {\n            \"batter\": [\n                {\"id\": \"1001\", \"type\": \"Regular\"},\n                {\"id\": \"1002\", \"type\": \"Chocolate\"},\n                {\"id\": \"1003\", \"type\": \"Blueberry\"},\n                {\"id\": \"1004\", \"type\": \"Devil's Food\"},\n            ]\n        },\n        \"topping\": [\n            {\"id\": \"5001\", \"type\": \"None\"},\n            {\"id\": \"5002\", \"type\": \"Glazed\"},\n            {\"id\": \"5005\", \"type\": \"Sugar\"},\n            {\"id\": \"5007\", \"type\": \"Powdered Sugar\"},\n            {\"id\": \"5006\", \"type\": \"Chocolate with Sprinkles\"},\n            {\"id\": \"5003\", \"type\": \"Chocolate\"},\n            {\"id\": \"5004\", \"type\": \"Maple\"},\n        ],\n    }\n)\n\nif __name__ == \"__main__\":\n    app.run()\n```\n\n## 3. Documentation\n\nCheck the documentation to find more details about the examples and APIs.\n\nhttps://cainmagi.github.io/dash-json-grid/\n\n## 4. Contributing\n\nSee [CONTRIBUTING.md :book:][link-contributing]\n\n## 5. Changelog\n\nSee [Changelog.md :book:][link-changelog]\n\n## 6. Acknowledgements\n\n- [RedHeadphone/react-json-grid :link:][git-react-json-grid]: The original React component implementation of this project.\n- [jsongrid.com :link:][link-json-grid]: Grid design and styles.\n- [kevincobain2000/json-to-html-table :link:][git-json-to-html]: React Component and project structure\n\n[git-react-json-grid]:https://github.com/RedHeadphone/react-json-grid\n[git-json-to-html]:https://github.com/kevincobain2000/json-to-html-table\n[link-json-grid]:https://jsongrid.com/json-grid\n[dash-pmcallback]:https://dash.plotly.com/pattern-matching-callbacks\n[tool-git]:https://git-scm.com/downloads\n[tool-nodejs]:https://nodejs.org/en/download/package-manager\n[tool-yarn]:https://yarnpkg.com/getting-started/install\n\n[pic-demo-react]:https://raw.githubusercontent.com/cainmagi/dash-json-grid/main/display/demo-react.png\n[pic-demo-dash]:https://raw.githubusercontent.com/cainmagi/dash-json-grid/main/display/demo-dash.png\n\n[link-contributing]:https://github.com/cainmagi/dash-json-grid/blob/main/CONTRIBUTING.md\n[link-changelog]:https://github.com/cainmagi/dash-json-grid/blob/main/Changelog.md\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcainmagi%2Fdash-json-grid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcainmagi%2Fdash-json-grid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcainmagi%2Fdash-json-grid/lists"}