Section

The Section component is used to divide up the report into named regions. You can provide a title, an optional icon, as well as the ability to highlight the entire section.

Schema

Below are some examples of the schema required to define a Section.

{
    "type": "Section",
    "options": {
        "section_title": "Section One",
        "icon": "dashboard",
        "highlighted": true,
        "columns": null
    },
    "components": [...]
},
{
    "type": "Section",
    "options": {
        "section_title": "Section One",
        "icon": "dashboard",
        "columns": 2
    },
    "components": [...]
}

Description

Key	Type	Description
section_title	String	The title of the Section.
icon	String	Optional. The icon to place next to the value.
highlighted	Boolean	Optional. Highlight the section and its contents using an accented colour background.
columns	Number	Optional. The number of columns to divide the section up into. See below for more details.
width	String	Optional. The width of the component, when inside a Row component with their columns option set to null.
horizontal_margin	Number	Optional. Margin added horizontally to the element. Defaults to 3. Accepts any integer between 1 - 12, 14 or 16.
vertical_margin	Number	Optional. Margin added vertically to the element. Defaults to 1. Accepts any integer between 1 - 12, 14 or 16.
column_spacing	Number	Optional. Spacing between components rendered as columns. Defaults to 3. Accepts any integer between 1 - 12, 14 or 16.
$components	Array<Object>	Optional. The components to add within the Section.

Width

For details on the width key, please see here.

Components / extendable

This component is extendable, meaning it supports adding components within it. To add components inside, simply add the objects defining the components inside the components key.

Columns

For details on the columns key, please see here.

Icon

Icons are powered by the Tabler Icons package which provides over 1,250 different icons. Simply use the icon name provided on the Tabler Icons website in place of the icon key in your schema.

Highlighted background

By setting the highlighted key to true, this changes the background to an accent colour to help draw attention to the section. The colour chosen is dictated by the theme applied to your report. Refer to the Theming section for more details.

Example