Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/cainmagi/dash-json-grid
Dash porting version of the react project React JSON Grid. Provide structured and nested grid table view of complicated JSON objects/arrays.
https://github.com/cainmagi/dash-json-grid
dash data-visualization json json-table json-viewer plotly-dash python python-dash python-libary python3
Last synced: 7 days ago
JSON representation
Dash porting version of the react project React JSON Grid. Provide structured and nested grid table view of complicated JSON objects/arrays.
- Host: GitHub
- URL: https://github.com/cainmagi/dash-json-grid
- Owner: cainmagi
- License: mit
- Created: 2024-09-13T08:07:59.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2024-10-27T00:19:31.000Z (4 months ago)
- Last Synced: 2024-10-29T23:21:00.198Z (4 months ago)
- Topics: dash, data-visualization, json, json-table, json-viewer, plotly-dash, python, python-dash, python-libary, python3
- Language: Python
- Homepage: https://cainmagi.github.io/dash-json-grid/
- Size: 633 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: Changelog.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
README
# Dash JSON Grid
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