Skip to main content
Prefab provide several components purpose-built for displaying data. This guide covers the most common patterns: tables for structured rows, dynamic iteration for lists, tabbed and collapsible layouts for organizing content, multi-step views, and progress indicators.

​
DataTable for Structured Data

When you have rows-and-columns data, DataTable handles sorting, search, and pagination automatically. Define your columns once, pass your rows, and the renderer takes care of the rest. For server-fetched data, use interpolation so the rows resolve from client state at render time: 
from prefab_ui.components import DataTable, DataTableColumn

DataTable(
    columns=[
        DataTableColumn(key="name", header="Name", sortable=True),
        DataTableColumn(key="status", header="Status"),
    ],
    rows="{{ items }}",
    searchable=True,
)

​
ForEach for Dynamic Lists

ForEach renders its children once per item in a data list. Each item’s fields become the interpolation context for that iteration, so {{ field }} placeholders resolve to the current item’s values. For scalar lists (strings, numbers), each value is available as {{ $item }}: 
from prefab_ui.components import Badge, ForEach, Row

with Row(gap=2):
    with ForEach("tags"):
        Badge("{{ $item }}", variant="outline")

​
Tabs for Categorized Content

Tabs organize related data into switchable panels. Users click a tab trigger to reveal its content, keeping everything on one screen without clutter.

​
Accordion for Expandable Sections

Accordions work well when you have many items that benefit from progressive disclosure. Each section collapses to a title, and users expand only the sections they care about. Set accordion_type="multiple" to allow more than one section open at a time.

​
Pages for Multi-Step Views

Pages provides a multi-page layout where only the active page renders. Combined with SetState, it creates step-by-step navigation for wizards, onboarding flows, or any multi-stage display.

​
Progress Indicators

Progress bars show completion or loading status. The value prop supports interpolation, so you can bind it to server-provided data that updates over time.