Groups and Grid layouts¶

`Group` ¶

If you pass a list of blocks (such as Plot and Table) to an app, they are -- by default -- laid out in a single column with a row per block.

If you would like to customize the rows and columns, Datapane provides a Group block which takes a list of blocks and a number of columns and lays them out in a grid.

Tip

As Group blocks are blocks themselves, they are composable, and you can create more custom layers of nested blocks, for instance nesting 2 rows in the left column of a 2 column layout

Parameters:

Name	Type	Description	Default
`*arg_blocks`	`BlockOrPrimitive`	Group to add to report	`()`
`blocks`	`List[BlockOrPrimitive]`	Allows providing the report blocks as a single list	`None`
`name`	`BlockId`	A unique id for the blocks to aid querying (optional)	`None`
`label`	`Optional[str]`	A label used when displaying the block (optional)	`None`
`widths`	`Optional[List[Union[int, float]]]`	A list of numbers representing the proportion of vertical space given to each column (optional)	`None`
`valign`	`VAlign`	The vertical alignment of blocks in the Group (default = VAlign.TOP)	`TOP`
`columns`	`int`	Display the contained blocks, e.g. Plots, using n columns (default = 1), setting to 0 auto-wraps the columns	`1`

Note

Group can be passed using either arg parameters or the blocks kwarg, e.g. dp.Group(plot, table, columns=2) or dp.Group(blocks=[plot, table], columns=2).

¶

Simple 2 column grid¶

dp.Group(dp.Text("⬅️ Left side"), dp.Text("➡️ Right side"), columns=2)

Plot and DataTable in a 2 column grid¶

import altair as alt
from vega_datasets import data

df = data.iris()
plot = (
    alt.Chart(df)
    .mark_point()
    .encode(x="petalLength:Q", y="petalWidth:Q", color="species:N")
)

dp.Group(dp.Plot(plot), dp.DataTable(df), columns=2)

Populating a grid with a list of Blocks¶

If you're generating your plots programmatically or have a lot of plots, you can pass them into the Group block as a list, using the blocks parameter. We can rewrite the previous example as follows:

import altair as alt
from vega_datasets import data

df = data.iris()
plot = (
    alt.Chart(df)
    .mark_point()
    .encode(x="petalLength:Q", y="petalWidth:Q", color="species:N")
)

# You could also generate these in a loop/function
my_plots = [dp.Plot(plot), dp.DataTable(df)]

dp.Group(blocks=my_plots, columns=2)