Skip to content

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"
                }
              }
            ]
          }
        ]
      }