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.

​
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.