Skip to main content
Layout widgets provide flexible ways to arrange other widgets in your notebook interface. They help you create complex, responsive layouts by combining multiple widgets together.

Supported Layout Widget Types

Below is a comprehensive list of supported layout widget types.
The Row layout widget arranges widgets horizontally in a single row.
from lplots.widgets.row import w_row
from lplots.widgets.select import w_select
import plotly.express as px

# Get the iris dataset
df = px.data.iris()

# Get numeric columns for axis selection
numeric_cols = df.select_dtypes(include=['float64', 'int64']).columns.tolist()

# Create a column of select widgets with defaults set to first two columns
x_axis = w_select(
    label="X-axis",
    options=numeric_cols,
    default=numeric_cols[0]
)
y_axis = w_select(
    label="Y-axis",
    options=numeric_cols,
    default=numeric_cols[1]
)

w_row(items=[x_axis, y_axis])

Widget Parameters

key: string optional unique identifier for the widgetitems: list[BaseWidget] list of widgets to arrange horizontally
The Column layout widget arranges widgets vertically in a single column.
from lplots.widgets.column import w_column
from lplots.widgets.select import w_select
import plotly.express as px

# Get the iris dataset
df = px.data.iris()

# Get numeric columns for axis selection
numeric_cols = df.select_dtypes(include=['float64', 'int64']).columns.tolist()

# Create a column of select widgets with defaults set to first two columns
x_axis = w_select(
    label="X-axis",
    options=numeric_cols,
    default=numeric_cols[0]
)
y_axis = w_select(
    label="Y-axis",
    options=numeric_cols,
    default=numeric_cols[1]
)

w_column(items=[x_axis, y_axis])

Widget Parameters

key: string optional unique identifier for the widgetitems: list[BaseWidget] list of widgets to arrange vertically
The Grid layout widget allows you to create a grid-based layout where widgets can span multiple rows and columns.
from lplots.widgets.grid import w_grid
from lplots.widgets.plot import w_plot
import plotly.express as px

# Create some plots
df = px.data.iris()
fig1 = px.scatter(df, x="sepal_width", y="sepal_length", color="species")
fig2 = px.box(df, x="species", y="petal_length", color="species")
fig3 = px.histogram(df, x="petal_width", color="species")

plot1 = w_plot(source=fig1)
plot2 = w_plot(source=fig2)
plot3 = w_plot(source=fig3)

# Create a grid with 3 columns
with w_grid(columns=3) as g:
    # Add plots to the grid with different spans
    g.add(item=plot1, col_span=2)  # Spans 2 columns
    g.add(item=plot2, col_span=1)  # Spans 1 column
    g.add(item=plot3, col_span=3)  # Spans all columns

Widget Parameters

key: string optional unique identifier for the widgetcolumns: int number of columns in the gridrows: int optional number of rows in the grid. If not specified, rows will be created as needed.

Grid Item Parameters

When adding items to a grid using the add() method:item: BaseWidget the widget to add to the gridcol_span: int number of columns the item should span (default: 1)row_span: int number of rows the item should span (default: 1)

Layout Widget Nesting

Layout widgets can be nested to create complex arrangements. For example, you can place a row of widgets inside a grid cell, or create a column of rows.
from lplots.widgets.grid import w_grid
from lplots.widgets.column import w_column
from lplots.widgets.select import w_select
from lplots.widgets.plot import w_plot
import plotly.express as px

# Get the iris dataset
df = px.data.iris()

# Get numeric columns for axis selection
numeric_cols = df.select_dtypes(include=['float64', 'int64']).columns.tolist()

# Create a column of select widgets with defaults set to first two columns
x_axis = w_select(
    label="X-axis",
    options=numeric_cols,
    default=numeric_cols[0]
)
y_axis = w_select(
    label="Y-axis",
    options=numeric_cols,
    default=numeric_cols[1]
)
plot_color = w_select(
    label="Color",
    options=["blue", "red", "green"],
    default="blue"
)

# Create column layout for widgets
column = w_column(items=[x_axis, y_axis, plot_color])

# Create scatter plot
fig1 = px.scatter(
    df,
    x=x_axis.value,
    y=y_axis.value,
    template="simple_white"
)

# Update marker color
fig1.update_traces(marker=dict(color=plot_color.value))

# Render the plot
plot1 = w_plot(source=fig1)

# Add the column and plot to the grid
with w_grid(columns=12) as grid:
    grid.add(item=column, col_span=3)
    grid.add(item=plot1, col_span=9)

Layout Widget Reactivity

Layout widgets are reactive to changes in their child widgets. When a child widget is updated, the layout will automatically adjust to accommodate the changes while maintaining the specified arrangement.
I