For AI agents: the complete documentation index is at llms.txt. Markdown versions are available by appending .md or sending Accept: text/markdown.
Reflex Logo
Docs Logo
Library

/

Data Display

/

Data List

Data List

The DataList component displays key-value pairs and is particularly helpful for showing metadata.

A DataList needs to be initialized using rx.data_list.root() and currently takes in data list items: rx.data_list.item

Status
Authorized
ID
U-474747
Name
Developer Success
Company
Reflex
Expand

API Reference

rx.data_list.root

Root element for a DataList component.

Status
Authorized
ID
U-474747
Name
Developer Success
rx.data_list.root(
rx.foreach(
[["Status", "Authorized"], ["ID", "U-474747"], ["Name", "Developer Success"], ["Email", "[email protected]"]],
lambda item: rx.data_list.item(rx.data_list.label(item[0]), rx.data_list.value(item[1])),
),
orientation="horizontal",
size="1",
)
orientation
size

Props

PropTypeDescription
orientation
"horizontal""vertical"

The orientation of the data list item: "horizontal" | "vertical".

size
"1""2""3"

The size of the data list item: "1" | "2" | "3".

trim
"normal""start""end""both"

Trims the leading whitespace from the start or end of the text.

rx.data_list.item

An item in the DataList component.

Status
Authorized
Name

Developer Success

rx.data_list.root(
rx.data_list.item(
rx.data_list.label("Status"),
rx.data_list.value(rx.badge("Authorized", variant="soft", radius="full", size="2")),
align="start",
),
rx.data_list.item(
rx.data_list.label("Name"),
rx.data_list.value(rx.heading("Developer Success", size="4")),
align="start",
),
rx.data_list.item(
rx.data_list.label("Email"),
rx.data_list.value(rx.link("[email protected]", href="mailto:[email protected]")),
align="start",
),
)
align

Props

PropTypeDescription
align
"start""center""end""baseline""stretch"

The alignment of the data list item within its container.

rx.data_list.label

A label in the DataList component.

Status
Authorized
ID
U-474747
Name
Developer Success
rx.data_list.root(
rx.foreach(
[["Status", "Authorized"], ["ID", "U-474747"], ["Name", "Developer Success"], ["Email", "[email protected]"]],
lambda item: rx.data_list.item(rx.data_list.label(item[0],
color_scheme="tomato",
), rx.data_list.value(item[1])),
),
)
color_scheme

Props

PropTypeDescription
width
str

The width of the component.

min_width
str

The minimum width of the component.

max_width
str

The maximum width of the component.

color_scheme
"tomato""red""ruby""crimson""pink""plum""purple""violet""iris""indigo""blue""cyan""teal""jade""green""grass""brown""orange""sky""mint""lime""yellow""amber""gold""bronze""gray"

The color scheme for the DataList component.

rx.data_list.value

A value in the DataList component.

Props

No component specific props

Built with Reflex