Tables

Tables should have the following structure:

• table | table-scrollable
• 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"
          }
        }
      ]
    }
  ]
}