Components allow you to add data visualization to your reports.

​
Syntax

Components are defined using special curly braces {% and %} tags. 
{% table                         # component name
    data="demo_order_details"    # attributes
/%}
Bring up a list of available components by typing a / at the start of a line.

​
Component Names

Component names are:
  • Declarative: they describe what type of UI element will be rendered
  • Snake case: they are written in snake_case
  • Validated: if you type an invalid component name, the editor will underline it in red

​
Attributes

Attributes define the configuration of the component. Attbutes are:
  • Required or Optional: For a given component
  • Typed:
    • String data="demo_order_details"
    • Number limit=20
    • Boolean stacked=true
    • Object x_axis_options={title='Date'}
  • Auto-completed: When you hit enter or space, the editor will show a list of available attributes
  • Validated: if you type an invalid attribute name, or provide an invalid value, the editor will underline it in red, and provider detailed error messages on hover

​
Self Closing Components

Some components contain content. 
{% callout %}
This is a note
{% /callout %}
Others do not. 
{% table
    data="demo_order_details"
/%}
This is equivalent to: 
{% table data="demo_order_details" %}
{% /table %}
Note the / at the end of the first example replaces the {% /table %} tag. Only components that do not require content can be self closed.