====== JSON Table Demo ======
This is example for the [[https://www.dokuwiki.org/plugin:jsontable|JSON Table Plugin]].
===== Simple example =====
[
["2017", "Honda", 10],
["2018", "Toyota", 20],
["2019", "Nissan", 30]
]
[
["2017", "Honda", 10],
["2018", "Toyota", 20],
["2019", "Nissan", 30]
]
===== Advanced example =====
==== Table data definition ====
Add som data into JSON_database.cars:
[
["BMW", 2017, {"color": {"chassis": "white", "bumper": "white"}}],
["Renault", 2015, {"color": {"chassis": "yellow", "bumper": "black"}}],
["Tesla", 2018, {"color": {"chassis": "red"}}]
]
[
["BMW", 2017, {"color": {"chassis": "white", "bumper": "white"}}],
["Renault", 2015, {"color": {"chassis": "yellow", "bumper": "black"}}],
["Tesla", 2018, {"color": {"chassis": "red"}}]
]
==== Table options definition ====
Table options are basically JSON data and can be defined separately:
{
"colHeaders": ["Car", "Year", "Chassis color", "Bumper color"],
"columns": [
{},
{"type": "numeric"},
{
"data": "2.color.chassis"
},
{
"data": "2.color.bumper",
"width": 100,
"editor": "select",
"selectOptions": ["yellow", "red", "black", "white"]
}
],
"search": true
}
{
"colHeaders": ["Car", "Year", "Chassis color", "Bumper color"],
"columns": [
{},
{"type": "numeric"},
{
"data": "2.color.chassis"
},
{
"data": "2.color.bumper",
"width": 100,
"editor": "select",
"selectOptions": ["yellow", "red", "black", "white"]
}
],
"search": true
}
===== Table =====
%%%% element is first handled by [[https://www.dokuwiki.org/plugin:json|JSON Data Plugin]]. Attributes 'options' and 'save' are specific. Here is description for all elements:
* ''id'' attribute is necessary, if we want to store changed data into dokuwiki document. This is handled by json plugin via safe ajax call.
* ''path'' attribute sets data source for table to previously generated data in JSON_database.cars.
* ''display'' attribute displays all tabs, just for info here.
* ''//inline_data//'' are json data, which are combined with 'original_data'. 'original_data' are already defined on path by previous %%%% elements or by 'src' attribute. We can say, 'inline_data' overrides 'original_data'. 'combined_data' are 'inline_data' combined with 'original_data' and is passed to the table as initial value. In the example below, chassis.color is set to green for second car. Please note, that here we access array elements with object notation.
* ''save'' attribute specifies, how data are stored into ''//inline_data//''. If set to ''all'', then all 'combined_data' will be stored into 'inline_data' on table change. Otherwise only the difference form 'original data' will be saved. This is the default behavior.
* ''options'' attribute is a JSON string directly passed into [[https://handsontable.com/docs/6.2.2/Options.html|Handsontable options]].
{"1":{"2":{"color":{"chassis":"green"}}}}
{"1":{"2":{"color":{"chassis":"green"}}}}