Skip to content

🟰  Row Layout

Submitted by Lukas Masuch

Summary

A multi-element horizontal container that places elements in a row.

Functions

row

Insert a multi-element, horizontal container into your app.

This function inserts a container into your app that can hold a number of elements as defined in the provided spec. Elements can be added to the returned container by calling methods directly on the returned object.

Parameters:

Name Type Description Default
spec SpecType

Controls the number and width of cells to insert in the row. Can be one of: * An integer specifying the number of cells. All cells will have equal width in this case. * An iterable of numbers (int or float) that specifies the relative width of each cell. For instance, [0.7, 0.3] creates two cells where the first one occupies 70% of the available width, and the second one occupies 30%. Or, [1, 2, 3] creates three cells where the second one is twice as wide as the first one, and the third one is three times that width.

 required
gap Optional[str]

"small", "medium", or "large" The size of the gap between cells, can be "small", "medium", or "large". This parameter specifies the visual space between the elements within the row. Defaults to "small".

 'small'
vertical_align Literal['top', 'center', 'bottom']

The vertical alignment of the cells in the row. It can be either "top", "center", or "bottom", aligning the contents of each cell accordingly. Defaults to "top".

 'top'

Returns:

Type Description
GridDeltaGenerator

grid.GridDeltaGenerator: RowContainer A row container object. Elements can be added to this row by calling methods directly on the returned object.
Source code in src/streamlit_extras/row/__init__.py 
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
@extra
def row(
    spec: SpecType,
    gap: Optional[str] = "small",
    vertical_align: Literal["top", "center", "bottom"] = "top",
) -> grid.GridDeltaGenerator:
    """
    Insert a multi-element, horizontal container into your app.

    This function inserts a container into your app that can hold
    a number of elements as defined in the provided spec. Elements can be added
    to the returned container by calling methods directly on the returned object.

    Args:
        spec (SpecType): Controls the number and width of cells to insert in the row. Can be one of:
            * An integer specifying the number of cells. All cells will have equal
            width in this case.
            * An iterable of numbers (int or float) that specifies the relative width of
            each cell. For instance, ``[0.7, 0.3]`` creates two cells where the first
            one occupies 70% of the available width, and the second one occupies 30%.
            Or, ``[1, 2, 3]`` creates three cells where the second one is twice
            as wide as the first one, and the third one is three times that width.
        gap (Optional[str], optional): "small", "medium", or "large"
            The size of the gap between cells, can be "small", "medium", or "large".
            This parameter specifies the visual space between the elements within the row.
            Defaults to "small".
        vertical_align (Literal["top", "center", "bottom"], optional): The vertical alignment
            of the cells in the row. It can be either "top", "center", or "bottom", aligning
            the contents of each cell accordingly. Defaults to "top".

    Returns:
        grid.GridDeltaGenerator: RowContainer
            A row container object. Elements can be added to this row by calling methods directly
            on the returned object.
    """
    container = stylable_container.stylable_container(
        key=f"row_{vertical_align}",
        css_styles=[
            """
div[data-testid="column"] > div {
height: 100%;
}
""",
            f"""
div[data-testid="column"] > div > div[data-testid="stVerticalBlock"] > div.element-container {{
    {"margin-top: auto;" if vertical_align in ["center", "bottom"] else ""}
    {"margin-bottom: auto;" if vertical_align == "center" else ""}
}}
""",
        ],
    )

    return grid.GridDeltaGenerator(parent_dg=container, spec=[spec], gap=gap)

Import:

from streamlit_extras.row import row # (1)!
  1. You should add this to the top of your .py file 🛠

Examples

example

def example():
    random_df = pd.DataFrame(np.random.randn(20, 3), columns=["a", "b", "c"])

    row1 = row(2, vertical_align="center")
    row1.dataframe(random_df, use_container_width=True)
    row1.line_chart(random_df, use_container_width=True)

    row2 = row([2, 4, 1], vertical_align="bottom")

    row2.selectbox("Select Country", ["Germany", "Italy", "Japan", "USA"])
    row2.text_input("Your name")
    row2.button("Send", use_container_width=True)
Output (beta)