Tables
Tables should have the following structure:
table
table-row
table-cell
table-cell
etc.
table-row
etc.
Table cells can have a child or be a text node.
- table
- styles supported
- cellPadding
- borderRadius
- border | borderLeft | borderRight | borderTop | borderBottom
- verticalInside
- horizontalInside
- tableWidths - Array of strings
- flex:N, fixed:N, fractional:N%, intrinsic
Example
{
"component": "table",
"kind": "table",
"styles": {
"horizontalInside": "1px solid #aaaaaa",
"borderBottom": "1px solid #aaaaaa",
"borderTop": "1px solid #aaaaaa",
"cellPadding": "10px 15px"
},
"children": [
{
"component": "table-row",
"children": [
{
"component": "table-cell",
"text": "Weight",
"_id": "134"
},
{
"component": "table-cell",
"text": "{$source.measurements.tracking.weight|convert:mass}",
"styles": {
"textAlign": "right"
},
"_id": "135"
}
],
"description": "Weight"
},
{
"component": "table-row",
"children": [
{
"component": "table-cell",
"text": "Weight at intake"
},
{
"component": "table-cell",
"text": "{$source.measurements.intake.weight|convert:mass}",
"styles": {
"textAlign": "right"
}
}
],
"description": "Intake weight"
},
{
"component": "table-row",
"children": [
{
"component": "table-cell",
"text": "Height"
},
{
"component": "table-cell",
"text": "{$source.measurements.intake.height|convert:length}",
"styles": {
"textAlign": "right"
}
}
],
"description": "Height"
},
{
"component": "table-row",
"description": "BMI",
"condition": {
"rule": "$source.measurements.tracking.bmi exists"
},
"children": [
{
"component": "table-cell",
"text": "BMI"
},
{
"component": "table-cell",
"text": "{$source.measurements.tracking.bmi}",
"styles": {
"textAlign": "right"
}
}
]
}
]
}