Skip to content

Grid Component (DEPRECATED)

Overview

DEPRECATED. Please use GridV2 for all new reports.

A Grid component is useful for arranging other component in a grid layout. The Grid is made of of a series of rows and columns. Columns are pre-defined using the columns element. The number of Rows is configured dynamically based on the components in the grid. The height of each row is adjusted to fit the components in that row.

Each component in the grid can be placed in an exact location and can span multiple rows and columns if desired.

Schemas

Grid

key type required description
type string required A string defining the component type as a Grid.
columns GridColumn[] required An array of GridColumns describing the column layout of the grid.
components GridComponent[] required An array of components that will be rendered inside the grid.
gridRow integer optional The grid row to place the component. Only applicable when inside a GridV2 component.
gridColumn integer optional The grid column to place the component. Only applicable when inside a GridV2 component.
gridRowSpan integer optional The number of rows to span inside the grid. Only applicable when inside a GridV2 component. Default value is 1.
gridColumnSpan integer optional The number of columns to span inside the grid. Only applicable when inside a GridV2 component. Default value is 1.
rowWidth float optional A fixed width for the component inside the row. Only applicable when inside a RowV2 component.
rowRelativeWidth float optional A proportional width for the component inside the row. Only applicable when inside a RowV2 component.
sectionName string optional Marks the component, its contents, and any sub-components as a named section in the report. A section can span multiple pages. The first, last and page count of a section can be inserted into the report using tokens: e.g. $(SECTION_BEGIN_[section-name]), $(SECTION_END_[section-name]) and $(SECTION_COUNT_[section-name]).
sectionLink string optional If defined, the entire component will become a link to a named section in the report. The link will redirect the user to the beginning of the named section in the report.
debug DebugOptions optional Enables highlighting of this component in the report. Useful for debugging layout issues.
style string or Style optional Either a style identifier or a style object used to define the layout/styling options for the component. Any textOptions in the style are ignored for this component. For a more detailed explanation of the style system, see Styles.
condition Conditional optional The component will not be rendered in the report if a condition is present and it evaluates to false. For more information on conditions, see Conditionals.

GridColumn

key type required description
width number optional A fixed width for the grid column. Not allowed if relativeWidth is present.
relativeWidth number optional A relative width for the grid column. Not allowed if width is present

GridComponent

key type required description
row integer required The row location in the grid to place the component.
column integer required The column location in the grid to place the component.
rowSpan integer optional The number of rows that the component will span. Default is 1.
columnSpan integer optional The number of columns that the component will span. Default is 1.
component Component required A component that will be rendered inside the grid cell(s).

Example

An example of a grid:

{
    "type": "Grid",
    "columns": [{},{},{}],
    "components": [
        {
            "row": 1,
            "column": 1,
            "component":
            {
                "type": "Text",
                "text": "$($DATE)"
            }
        },
        {
            "row": 2,
            "column": 2,
            "component":
            {
                "type": "Text",
                "text": "Sales Report"
            }
        },
        {
            "row": 3,
            "column": 3,
            "component":
            {
                "type": "Text",
                "text": "8/22/2022"
            }
        }
    ]
}

The component defined above renders as in the following image: !Grid Example