# Dash JSON Grid
<p><img alt="Banner" src="https://repository-images.githubusercontent.com/856794016/fe6159c5-0ca5-4f8e-83d5-816a36e64ce2"></p>
<p align="center">
<a href="https://github.com/cainmagi/dash-json-grid/releases/latest"><img alt="GitHub release (latest SemVer)" src="https://img.shields.io/github/v/release/cainmagi/dash-json-grid?logo=github&sort=semver&style=flat-square"></a>
<a href="https://github.com/cainmagi/dash-json-grid/releases"><img alt="GitHub all releases" src="https://img.shields.io/github/downloads/cainmagi/dash-json-grid/total?logo=github&style=flat-square"></a>
<a href="https://github.com/cainmagi/dash-json-grid/blob/main/LICENSE"><img alt="GitHub" src="https://img.shields.io/github/license/cainmagi/dash-json-grid?style=flat-square&logo=opensourceinitiative&logoColor=white"></a>
<a href="https://pypi.org/project/dash-json-grid"><img alt="PyPI - Downloads" src="https://img.shields.io/pypi/dm/dash-json-grid?style=flat-square&logo=pypi&logoColor=white&label=pypi"></a>
</p>
<p align="center">
<a href="https://github.com/cainmagi/dash-json-grid/actions/workflows/python-package.yml"><img alt="GitHub Actions (Build)" src="https://img.shields.io/github/actions/workflow/status/cainmagi/dash-json-grid/python-package.yml?style=flat-square&logo=githubactions&logoColor=white&label=build"></a>
<a href="https://github.com/cainmagi/dash-json-grid/actions/workflows/python-publish.yml"><img alt="GitHub Actions (Release)" src="https://img.shields.io/github/actions/workflow/status/cainmagi/dash-json-grid/python-publish.yml?style=flat-square&logo=githubactions&logoColor=white&label=release"></a>
</p>
Dash JSON Grid is a Dash component library.
Dash 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.
The 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.
| React JSON Grid | Dash JSON Grid |
| :---------------------------: | :-------------------------: |
| ![demo-react][pic-demo-react] | ![demo-dash][pic-demo-dash] |
## 1. Install
Intall the **latest released version** of this package by using the PyPI source:
``` sh
python -m pip install dash-json-grid
```
Or 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]:
```bash
git clone https://github.com/cainmagi/dash-json-grid
cd dash-json-grid
python -m pip install -r requirements-dev.txt
yarn install
yarn build
python -m pip install .
```
## 2. Usages
The following codes provide a minimal example of using this component:
```python
import dash
import dash_json_grid as djg
app = dash.Dash("demo")
app.layout = djg.DashJsonGrid(
data={
"id": "0001",
"type": "donut",
"name": "Cake",
"ppu": 1111.55,
"batters": {
"batter": [
{"id": "1001", "type": "Regular"},
{"id": "1002", "type": "Chocolate"},
{"id": "1003", "type": "Blueberry"},
{"id": "1004", "type": "Devil's Food"},
]
},
"topping": [
{"id": "5001", "type": "None"},
{"id": "5002", "type": "Glazed"},
{"id": "5005", "type": "Sugar"},
{"id": "5007", "type": "Powdered Sugar"},
{"id": "5006", "type": "Chocolate with Sprinkles"},
{"id": "5003", "type": "Chocolate"},
{"id": "5004", "type": "Maple"},
],
}
)
if __name__ == "__main__":
app.run()
```
## 3. Documentation
Check the documentation to find more details about the examples and APIs.
https://cainmagi.github.io/dash-json-grid/
## 6. Contributing
See [CONTRIBUTING.md :book:][link-contributing]
## 7. Changelog
See [Changelog.md :book:][link-changelog]
## 8. Acknowledgements
- [RedHeadphone/react-json-grid :link:][git-react-json-grid]: The original React component implementation of this project.
- [jsongrid.com :link:][link-json-grid]: Grid design and styles.
- [kevincobain2000/json-to-html-table :link:][git-json-to-html]: React Component and project structure
[git-react-json-grid]:https://github.com/RedHeadphone/react-json-grid
[git-json-to-html]:https://github.com/kevincobain2000/json-to-html-table
[link-json-grid]:https://jsongrid.com/json-grid
[dash-pmcallback]:https://dash.plotly.com/pattern-matching-callbacks
[tool-git]:https://git-scm.com/downloads
[tool-nodejs]:https://nodejs.org/en/download/package-manager
[tool-yarn]:https://yarnpkg.com/getting-started/install
[pic-demo-react]:https://raw.githubusercontent.com/cainmagi/dash-json-grid/main/display/demo-react.png
[pic-demo-dash]:https://raw.githubusercontent.com/cainmagi/dash-json-grid/main/display/demo-dash.png
[link-contributing]:https://github.com/cainmagi/dash-json-grid/blob/main/CONTRIBUTING.md
[link-changelog]:https://github.com/cainmagi/dash-json-grid/blob/main/Changelog.md
Raw data
{
"_id": null,
"home_page": null,
"name": "dash-json-grid",
"maintainer": null,
"docs_url": null,
"requires_python": ">=3.8",
"maintainer_email": "Yuchen Jin <cainmagi@gmail.com>",
"keywords": "python, python3, python-library, dash, plotly-dash, python-dash, json, json-viewer, json-table, data-visualization",
"author": null,
"author_email": "Yuchen Jin <cainmagi@gmail.com>",
"download_url": "https://files.pythonhosted.org/packages/f7/f2/13fb4855bec9ea66ed1234f6ff817b6def23b78ea6eb339c4b7d6cd35cbc/dash_json_grid-0.4.1.tar.gz",
"platform": null,
"description": "# Dash JSON Grid\n\n<p><img alt=\"Banner\" src=\"https://repository-images.githubusercontent.com/856794016/fe6159c5-0ca5-4f8e-83d5-816a36e64ce2\"></p>\n\n<p align=\"center\">\n <a href=\"https://github.com/cainmagi/dash-json-grid/releases/latest\"><img alt=\"GitHub release (latest SemVer)\" src=\"https://img.shields.io/github/v/release/cainmagi/dash-json-grid?logo=github&sort=semver&style=flat-square\"></a>\n <a href=\"https://github.com/cainmagi/dash-json-grid/releases\"><img alt=\"GitHub all releases\" src=\"https://img.shields.io/github/downloads/cainmagi/dash-json-grid/total?logo=github&style=flat-square\"></a>\n <a href=\"https://github.com/cainmagi/dash-json-grid/blob/main/LICENSE\"><img alt=\"GitHub\" src=\"https://img.shields.io/github/license/cainmagi/dash-json-grid?style=flat-square&logo=opensourceinitiative&logoColor=white\"></a>\n <a href=\"https://pypi.org/project/dash-json-grid\"><img alt=\"PyPI - Downloads\" src=\"https://img.shields.io/pypi/dm/dash-json-grid?style=flat-square&logo=pypi&logoColor=white&label=pypi\"></a>\n</p>\n<p align=\"center\">\n <a href=\"https://github.com/cainmagi/dash-json-grid/actions/workflows/python-package.yml\"><img alt=\"GitHub Actions (Build)\" src=\"https://img.shields.io/github/actions/workflow/status/cainmagi/dash-json-grid/python-package.yml?style=flat-square&logo=githubactions&logoColor=white&label=build\"></a>\n <a href=\"https://github.com/cainmagi/dash-json-grid/actions/workflows/python-publish.yml\"><img alt=\"GitHub Actions (Release)\" src=\"https://img.shields.io/github/actions/workflow/status/cainmagi/dash-json-grid/python-publish.yml?style=flat-square&logo=githubactions&logoColor=white&label=release\"></a>\n</p>\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## 6. Contributing\n\nSee [CONTRIBUTING.md :book:][link-contributing]\n\n## 7. Changelog\n\nSee [Changelog.md :book:][link-changelog]\n\n## 8. 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",
"bugtrack_url": null,
"license": "MIT License",
"summary": "Dash porting version of the react project React JSON Grid. Provide structured and nested grid table view of complicated JSON objects/arrays.",
"version": "0.4.1",
"project_urls": {
"Changelog": "https://github.com/cainmagi/dash-json-grid/blob/main/Changelog.md",
"Documentation": "https://cainmagi.github.io/dash-json-grid/",
"Homepage": "https://github.com/cainmagi/dash-json-grid",
"Issues": "https://github.com/cainmagi/dash-json-grid/issues",
"Repository": "https://github.com/cainmagi/dash-json-grid.git"
},
"split_keywords": [
"python",
" python3",
" python-library",
" dash",
" plotly-dash",
" python-dash",
" json",
" json-viewer",
" json-table",
" data-visualization"
],
"urls": [
{
"comment_text": "",
"digests": {
"blake2b_256": "bf0c6c751e724b93054c7b34318eea40d566c12ed30c7192f835a54df397ad36",
"md5": "2eccdd86fb977924e02b50d5f4210f65",
"sha256": "2ad51d8df7d4302e01bb1712d1f5da2fe7077e75703eaac96b808e0db5a1fdc0"
},
"downloads": -1,
"filename": "dash_json_grid-0.4.1-py3-none-any.whl",
"has_sig": false,
"md5_digest": "2eccdd86fb977924e02b50d5f4210f65",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": ">=3.8",
"size": 49092,
"upload_time": "2024-10-27T00:12:06",
"upload_time_iso_8601": "2024-10-27T00:12:06.768877Z",
"url": "https://files.pythonhosted.org/packages/bf/0c/6c751e724b93054c7b34318eea40d566c12ed30c7192f835a54df397ad36/dash_json_grid-0.4.1-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": "",
"digests": {
"blake2b_256": "f7f213fb4855bec9ea66ed1234f6ff817b6def23b78ea6eb339c4b7d6cd35cbc",
"md5": "8d9b2f704d7d3799c74deca86eb7bef0",
"sha256": "811dfc2ed6e8b0f3641bddd87ff3706f51e54ef8068d454bb3baefdd34f219fb"
},
"downloads": -1,
"filename": "dash_json_grid-0.4.1.tar.gz",
"has_sig": false,
"md5_digest": "8d9b2f704d7d3799c74deca86eb7bef0",
"packagetype": "sdist",
"python_version": "source",
"requires_python": ">=3.8",
"size": 346104,
"upload_time": "2024-10-27T00:12:08",
"upload_time_iso_8601": "2024-10-27T00:12:08.331578Z",
"url": "https://files.pythonhosted.org/packages/f7/f2/13fb4855bec9ea66ed1234f6ff817b6def23b78ea6eb339c4b7d6cd35cbc/dash_json_grid-0.4.1.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2024-10-27 00:12:08",
"github": true,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"github_user": "cainmagi",
"github_project": "dash-json-grid",
"travis_ci": false,
"coveralls": false,
"github_actions": true,
"requirements": [
{
"name": "dash",
"specs": [
[
">=",
"2.7.0"
]
]
},
{
"name": "typing-extensions",
"specs": []
}
],
"lcname": "dash-json-grid"
}
JSON
