Table

The table component allows you to add tables within your report.

Schema

Below is an example of the schema required to define a table.

{
    "type": "Table",
    "options": {
        "title": "Title for table",
        "headings": ["Heading one", "Heading Two", "Heading Three"],
        "rows": [
            ["Content", "Content", "Content"],
            ["Content", "Content", "Content"],
            ["Content", "Content", "Content"]
        ]
    }
}

Description

Key	Description
title	The title of the table. Optional.
headings	Optional. The headings of the table. If absent, table headings will be omitted. Elements in the list maybe strings, integers or floats.
width	Optional. The width of the component. Only applies when inside a Section or Row component whose columns option is set to null.
rows	The rows of the table. A list of lists, with each sub-list (a row) having the same number of elements. Number of elements in the sub-list should be equal to the number of headers / headings in the table. Elements of the sub-lists maybe strings, integers or floats.
striped	Optional. Enables alternate background colours on the rows of the table. Defaults to false.
table_border	Optional. Whether to draw a border around the table. Defaults to true.
horizontal_margin	Optional. Margin added horizontally to the element. Defaults to 0.
vertical_margin	Optional. Margin added vertically to the element. Defaults to 1.
col_border	Optional. Defaults to false. Enables column borders in the table.
col_align	Optional. Defaults to left. Alignment of the text within the column, including header row. Accepts either left, right or centre. To set the alignment for only one column, simply set all values to null, except the column you wish to manually set their alignment for.
col_width	Optional. List of integers, with same length as number of columns. The percentages of the table width the columns should occupy. Takes an integer with any value between 0 and 100. To set the width for only one column, simply set all values to null, except the column you wish to manually set their width to.
col_bg	Optional. List of strings, with same length as number of columns, that sets the background colour for the rows of the column (excluding the header row). Each string should be one of the named colour theme variables. Refer to themes for more details. To skip setting a colour for a given column, set the value to null, instead of a string.

Formatting

Text within the cells of the table can be formatted using basic HTML. The following is supported:

• <b>Text</b> to make your text bold
• <i>Text</i> to make your text italicised
• <span style='color: #HEX;'>Text</i> set a custom hex colour value for your text
• </br> to create a new line
• <a href='URL'>Text</a> to create a hyperlink

Cell level control

Hybiscus can also give you opt-in control of the text alignment, width, column span, and background (only for cells of rows) of individual cells in the rows and headings. To enable this behaviour, simply replace your string for each cell with an object of the following format:

{
    "content": "Text to put inside cell",
    "col_span": 3,
    "col_bg": "accent",
    "col_align": "center"
}

This means in rows and headings, you can selectively control the appearance of a single cell, allowing you to override the global styling set in the top level keys (options.col_bg, options.col_width, options.col_align). The allowed values and types for these keys are also identical to their counterparts in the top level option keys, e.g. col_bg only accepts colour theme variable names. Also note, setting options at the cell level takes precedence over the top level options keys, and thus will override those values.

The below schema (try copying it straight into the Cloud Editor):

{
    "type": "Table",
    "options": {
        "table_border": true,
        "vertical_margin": 6,
        "col_borders": true,
        "headings": [
            "Lorem ipsum",
            "Vestibulum auctor",
            {
                "content": "Vivamus vestibulum ntulla nec",
                "col_span": "2",
                "col_align": "center"
            }
        ],
        "col_bg": [null, null, "background-faded", "background-faded"],
        "col_align": ["left", "left", "right", "right"],
        "col_width": [null, 50],
        "rows": [
            ["Risus id metus", "Tristique elit", "54", "67"],
            ["Praesent placerat", "Fusce pellentesque", "91", "32"],
            [
                "",
                {
                    "content": "Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate.",
                    "col_span": 3,
                    "col_bg": "accent",
                    "col_align": "right"
                }
            ]
        ]
    }
}

will generate the following output:

Width

For details on the width key, please see here.

Example