Skip to content

Layout Blocks

Layout blocks take other blocks as parameters and lay them out. Interactive layout blocks (such as tabs and selects) don't require a backend server and can be used in standalone HTML reports.

This includes columns:

dp.Group(
    dp.BigNumber(heading="Left", value="1234"),
    dp.BigNumber(heading="Middle", value="4321"),
    dp.BigNumber(heading="Right", value="2314"),
    columns=3,
)

Interactive tabs:

dp.Select(
    blocks=[
        dp.Text("Hello World 1", label="Page 1"),
        dp.Text("Hello World 2", label="Page 2"),
        dp.Text("Hello World 3", label="Page 3"),
    ]
)

And many other supported layout blocks.

Nesting

Layout blocks can be arbitrarily nested, allowing you to create complex user interfaces.

dp.Group(
    dp.Text("This is the left side of a two-column layout"),
    dp.Group(
        dp.Text("This is the right side of a two-column layout"),
        dp.Text("Below we have three tabs with different content"),
        dp.Select(
            blocks=[
                dp.Text("Hello World 1", label="Page 1"),
                dp.Text("Hello World 2", label="Page 2"),
                dp.Text("Hello World 3", label="Page 3"),
            ]
        ),
    ),
    columns=2,
)

Available Blocks

Check out more layout block examples in the API Reference: