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.