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
options.section_title String The title of the Section.
options.icon String Optional. The icon to place next to the value.
options.highlighted Boolean Optional. Highlight the section and its contents using an accented colour background.
options.columns Number Optional. The number of columns to divide the section up into. See below for more details.
option.width String Optional. The width of the component, when inside a Row component with their columns option set to null.
components Array<Object> Optional. The components to add within the Section.

Width

The width key supports defining the width using a fraction specified as a string e.g. 1/3. The values for the denominator supported are 2, 3, 4, 5, 6 and 12, whilst the numerator can be any value up to the value of the denominator.

If the width key is set to null, then the component will attempt to fill all the available horizontal space.

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

If options.columns is set to null, all the components inside will stack horizontally together, automatically adjusting their widths to attempt to fit. In this mode, you can use the width option for the child components, to control their widths more precisely. For example, one component can be set to span 1/3 the width, and the other to be 2/3 the width.

Note If too many components are added, they may spill off the page out of view.

If a number is provided, the section is divided into as many columns, and each child component spans exactly one column by default.

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

Missing something?

Hybiscus is continuously improving and adding new features. If you think we are missing a critical feature, please do not hesitate to contact us and offer your feedback at info@hybiscus.dev