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

KeyDescription
titleThe title of the table. Optional.
headingsOptional. The headings of the table. If absent, table headings will be omitted.
widthOptional. The width of the component, when inside a Section or Row component with their columns option set to null.
rowsThe 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.
stripedEnables alternate background colours on the rows of the table. Optional.
horizontal_marginOptional. Margin added horizontally to the element. Defaults to 0.
vertical_marginOptional. Margin added vertically to the element. Defaults to 1.
col_borderOptional. Defaults to false. Enables column borders in the table.
col_alignOptional. 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_widthOptional. 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_bgOptional. 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

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.

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