Example applications
Example for dash
users
When the package dash_json_grid
is installed, users can test the following example
application:
This application provides the following features:
- An input box for searching and highlighting the keywords in the data.
- A dropdown menu (selecting box) for change the themes.
- By selecting a part of the data, the selected path and value will be catched and shown.
- If a number is selected, make that number value increased by
1
.
The other features are already mentioned in the usage guides.
Besides, this demo application provides an example of catching and updating the
selected value by using the selected_path
from the callback.
...
@callback(
Output("selected-path", "children"),
Output("selected-val", "children"),
Output("viewer", "data"),
Input("viewer", "selected_path"),
State("viewer", "data"),
)
def display_output(route, data):
if not route:
return None, None, dash.no_update
sel_data = dash_json_grid.DashJsonGrid.get_data_by_route(data, route)
if isinstance(sel_data, (int, float)):
sel_data_new = sel_data + 1
dash_json_grid.DashJsonGrid.update_data_by_route(data, route, sel_data_new)
return str(route), str(sel_data_new), data
return str(route), str(sel_data), dash.no_update
...
where get_data_by_route
and
update_data_by_route
are class
methods. They are used for locating the specific part of the data
by route
, and
updating the part located by route
, respectively.
Class methods like get_data_by_route
are provided by this dash component implmentaion exclusively. In other words, if you
are using react-json-grid
, you need to
implement the logics of getting or updating values by yourself.
More examples
We provide more examples in the API document. Check that part to view some useful code snippets.
Example purely based on React
This example can be only used when you are developing the source project. In other words, the React version is a developer-only example.
To launch this example, please ensure that the following dependencies are available
After that, clone the project and run the demo by:
git clone https://github.com/cainmagi/dash-json-grid
cd dash-json-grid
python -m pip install -r requirements.txt -r tests/requirements.txt
yarn install
yarn start
Overall, this example has most features of the usage.py
demo. However, since it is
purely implemented React, in this example, we do not provide the features of getting
and updating the selected value.
For somehow, the demo in the Introduction section is the same thing of this example. However, due to the limitation of the document, the live demo in this document is always synchronized with the newest version even if you choose an older version of the document. If you want to check the exact behavior of the legacy version, it is better to run the demo.