Contents

HTMLTable

The component for adding tables with HTML data.

Declaration

object HTMLTable

Properties

NameTypeDescription
html Requiredstring

The HTML for the table. This HTML must begin with <table> and end with </table>.

role Requiredstring

Always htmltable for this component.

anchorAnchor

An object that defines vertical alignment with another component.

animation(ComponentAnimation | string("none"))

An object that defines an animation to be applied to the component.

The none value is used for conditional design elements. Adding it here has no effect.

behavior(Behavior | string("none"))

An object that defines behavior for a component, like Parallax or Springy.

The none value is used for conditional design elements. Adding it here has no effect.

conditional(ConditionalComponent | [ConditionalComponent])

An instance or array of component properties that can be applied conditionally.

hiddenboolean

A Boolean value that determines whether the component is hidden.

identifierstring

An optional unique identifier for this component. If used, this identifier must be unique across the entire document. You will need an identifier for your component if you want to anchor other components to it.

layout(ComponentLayout | string)

An inline ComponentLayout object that contains layout information, or a string reference to a ComponentLayout object that is defined at the top level of the document.

If layout is not defined, size and position will be based on various factors, such as the device type, the length of the content, and the role of this component.

style(ComponentStyle | string | string("none"))

An inline ComponentStyle object that defines the appearance of this component, or a string reference to a ComponentStyle object that is defined at the top level of the document.

The none value is used for conditional design elements. Adding it here has no effect.

Discussion

To add a table with HTML data, create a component with a role of htmltable. The required html property holds all the data and tags for an HTML table.

Example

{
  "components": [
    {
      "role": "htmltable",
      "html": "<table><tr><th>Name</th><th>Occupation</th></tr><tr><td><strong>Grace Hopper</strong></td><td>Computer Scientist</td></tr><tr><td><strong>Amelia Earhart</strong></td><td>Pilot</td></tr></table>",
      "style": {
        "tableStyle": {
          "rows": {
            "backgroundColor": "#fff",
            "conditional": [
              {
                "selectors": [
                  {
                    "odd": true
                  }
                ],
                "backgroundColor": "#f7f7f7"
              }
            ]
          }
        }
      }
    }
  ]
}

See Also

Tables with HTML Data