# 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/
## 4. Contributing
See [CONTRIBUTING.md :book:][link-contributing]
## 5. Changelog
See [Changelog.md :book:][link-changelog]
## 6. 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/c5/81/4ff4728b6059f0d4dadfb3cded04e2fc3825b1183aecabe43d69e7692085/dash_json_grid-0.5.0.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## 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",
"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.5.0",
"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": "8526c596e1d36e2340dfe5652f5bdc65f2b2f0ca79f9e094ee5c4746cbba9f00",
"md5": "cf224ab754240cb7917c8c1409a82bae",
"sha256": "e9204bc1092dd24e662fc4930f90c6460736f27485b96741fe77aebd29d8f462"
},
"downloads": -1,
"filename": "dash_json_grid-0.5.0-py3-none-any.whl",
"has_sig": false,
"md5_digest": "cf224ab754240cb7917c8c1409a82bae",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": ">=3.8",
"size": 58131,
"upload_time": "2024-11-28T04:32:44",
"upload_time_iso_8601": "2024-11-28T04:32:44.094532Z",
"url": "https://files.pythonhosted.org/packages/85/26/c596e1d36e2340dfe5652f5bdc65f2b2f0ca79f9e094ee5c4746cbba9f00/dash_json_grid-0.5.0-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": "",
"digests": {
"blake2b_256": "c5814ff4728b6059f0d4dadfb3cded04e2fc3825b1183aecabe43d69e7692085",
"md5": "f5945c4f5ed22639bc6686767d02e4e0",
"sha256": "3a849e9befb0390913263bf0486e2674a35d0f24cac8e99fb16cb111958130ff"
},
"downloads": -1,
"filename": "dash_json_grid-0.5.0.tar.gz",
"has_sig": false,
"md5_digest": "f5945c4f5ed22639bc6686767d02e4e0",
"packagetype": "sdist",
"python_version": "source",
"requires_python": ">=3.8",
"size": 362645,
"upload_time": "2024-11-28T04:32:46",
"upload_time_iso_8601": "2024-11-28T04:32:46.610694Z",
"url": "https://files.pythonhosted.org/packages/c5/81/4ff4728b6059f0d4dadfb3cded04e2fc3825b1183aecabe43d69e7692085/dash_json_grid-0.5.0.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2024-11-28 04:32:46",
"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
