ReflexKR

Reflex公式ドキュメント

コンポーネント工房：Reflexライブラリ100

講座の概要

レイアウト

Box

Flex

Stack

Grid

Container

Section

Center

Spacer

Separator

Card

Inset

Aspect Ratio

Fragment

タイポグラフィ

Text

Heading

Link

Code

Markdown

Blockquote

Quote

Strong

Kbd

フォーム

Button

Input

Text Area

Checkbox

Switch

Radio Group

Select

Slider

Form

Upload

データ表示

Badge

Avatar

Icon

Callout

List

Data List

Code Block

Progress

Spinner

Scroll Area

Moment

開閉と切り替え

Tabs

Accordion

Segmented Control

オーバーレイ

Tooltip

Popover

Hover Card

Dialog

Alert Dialog

Drawer

Dropdown Menu

Context Menu

Toast

動的レンダリング

Cond

Match

Foreach

Auto Scroll

メディア

Image

Audio

Video

表とデータグリッド

Table

Data Table

Data Editor

チャート

Area Chart

Bar Chart

Line Chart

Composed Chart

Pie Chart

Radar Chart

Radial Bar Chart

Scatter Chart

Funnel Chart

Treemap

Sankey Chart

Error Bar

チャートの部品

Axis

Cartesian Grid

Chart Tooltip

Legend

Label

Reference

Brush

ほかのチャートライブラリ

Plotly

Pyplot

HTML要素

HTML

HTML Text

HTML Layout

HTML Forms

HTML Media

HTML Tables

SVG

そのほかの道具

Theme

Skeleton

Clipboard

Html Embed

Script

Memo

コンポーネント工房：Reflexライブラリ100

データ表示

Data List

rx.data_list.rootrx.data_list.itemrx.data_list.labelrx.data_list.value

公式ドキュメント

工房の注文書

注文詳細の画面に、状態、注文日、送り状番号、合計を「名前: 値」の形できれいに並べてください。

rx.data_listは名前と値のペアを並べて表示します。ユーザー情報、注文の詳細、ファイルの属性のようなメタデータを整理するのに向いています。rx.data_list.rootの中にrx.data_list.itemを入れ、各項目にlabel（名前）とvalue（値）を1つずつ置きます。

Status: Authorized
ID: U-474747

rx.data_list.root(
    rx.data_list.item(
        rx.data_list.label("Status"),
        rx.data_list.value("Authorized"),
    ),
    rx.data_list.item(
        rx.data_list.label("ID"),
        rx.data_list.value("U-474747"),
    ),
)

プロパティを変えてみる

orientation・size・trimはrootに、alignはitemに、color_schemeはlabelに渡します。

プロパティを変えてみる

Status: Authorized
Name: Developer Success
Email: success@reflex.dev

orientation

size

trim

align

label_color

rx.data_list.root(
    rx.data_list.item(
        rx.data_list.label("Status", color_scheme="gray"),
        rx.data_list.value(rx.badge("Authorized", radius="full")),
        align="center",
    ),
    rx.data_list.item(
        rx.data_list.label("Name", color_scheme="gray"),
        rx.data_list.value("Developer Success"),
        align="center",
    ),
    rx.data_list.item(
        rx.data_list.label("Email", color_scheme="gray"),
        rx.data_list.value(rx.link("success@reflex.dev", href="mailto:success@reflex.dev")),
        align="center",
    ),
    orientation="horizontal",
    size="2",
    trim="normal",
)

orientationをverticalにすると、名前が値の上に移ります。alignは項目の中での名前と値の縦方向の揃え方です。

パーツ	プロパティ	値	用途
`root`	`orientation`	`"horizontal"`（既定） `"vertical"`	名前と値を横に並べるか、上下に並べるか
`root`	`size`	`"1"` `"2"`（既定） `"3"`	文字の大きさと行の間隔
`root`	`trim`	`"normal"` `"start"` `"end"` `"both"`	最初の行の上・最後の行の下の文字の余白を詰める
`item`	`align`	`"start"` `"center"` `"end"` `"baseline"` `"stretch"`	名前と値の縦方向の揃え方
`label`	`width` `min_width` `max_width`	CSSの長さ	名前欄の幅
`label`	`color_scheme`	Radixの色名	名前の文字の色
`value`	（なし）		どんなコンポーネントでも子として受け取る

値の場所には何でも

valueには文字だけでなく、バッジ、コード、リンクのようなコンポーネントも入れられます。公式ドキュメントの例のようにカードの中に置けば、情報ボックスになります。バッジのように高さの違う値があるときは、その項目にalign="center"を渡して名前と中央を揃えます。

Status: Authorized
ID: U-474747
Name: Developer Success
Email: success@reflex.dev
Company: Reflex

rx.card(
    rx.data_list.root(
        rx.data_list.item(
            rx.data_list.label("Status"),
            rx.data_list.value(rx.badge("Authorized", variant="soft", radius="full")),
            align="center",
        ),
        rx.data_list.item(
            rx.data_list.label("ID"),
            rx.data_list.value(rx.code("U-474747")),
        ),
        rx.data_list.item(
            rx.data_list.label("Name"),
            rx.data_list.value("Developer Success"),
            align="center",
        ),
        rx.data_list.item(
            rx.data_list.label("Email"),
            rx.data_list.value(rx.link("success@reflex.dev", href="mailto:success@reflex.dev")),
        ),
        rx.data_list.item(
            rx.data_list.label("Company"),
            rx.data_list.value(rx.link("Reflex", href="https://reflex.dev", is_external=True)),
        ),
    ),
)

向き

orientationはrootに渡します。狭い画面では上下（vertical）のほうが読みやすくなります。3つ目のように、画面幅ごとに違う値を渡すこともできます（狭ければvertical、sm以上ならhorizontal）。

Plan: Pro
Seats: 12

Plan: Pro
Seats: 12

Plan: Pro
Seats: 12

rx.flex(
    rx.data_list.root(
        rx.data_list.item(rx.data_list.label("Plan"), rx.data_list.value("Pro")),
        rx.data_list.item(rx.data_list.label("Seats"), rx.data_list.value("12")),
        orientation="horizontal",
    ),
    rx.data_list.root(
        rx.data_list.item(rx.data_list.label("Plan"), rx.data_list.value("Pro")),
        rx.data_list.item(rx.data_list.label("Seats"), rx.data_list.value("12")),
        orientation="vertical",
    ),
    rx.data_list.root(
        rx.data_list.item(rx.data_list.label("Plan"), rx.data_list.value("Pro")),
        rx.data_list.item(rx.data_list.label("Seats"), rx.data_list.value("12")),
        orientation={"initial": "vertical", "sm": "horizontal"},
    ),
    spacing="6",
    wrap="wrap",
)

名前欄を整える

labelのwidthで名前欄の幅を固定すると、複数のリストで値が同じ位置から始まります。color_schemeは名前の文字の色を変えます。

Owner: Ada Lovelace
Repository: reflex-dev/reflex

rx.data_list.root(
    rx.data_list.item(
        rx.data_list.label("Owner", width="80px", color_scheme="indigo"),
        rx.data_list.value("Ada Lovelace"),
    ),
    rx.data_list.item(
        rx.data_list.label("Repository", width="80px", color_scheme="indigo"),
        rx.data_list.value("reflex-dev/reflex"),
    ),
)

データから項目を作る

項目がデータにあるなら、rx.foreachで1行ずつ作ります。公式ドキュメントのプロパティのプレビューもこの方式を使っています。

Status: Authorized
ID: U-474747
Name: Developer Success
Email: foo@reflex.dev

class DataListUserState(rx.State):
    fields: list[list[str]] = [
        ["Status", "Authorized"],
        ["ID", "U-474747"],
        ["Name", "Developer Success"],
        ["Email", "foo@reflex.dev"],
    ]


rx.data_list.root(
    rx.foreach(
        DataListUserState.fields,
        lambda f: rx.data_list.item(rx.data_list.label(f[0]), rx.data_list.value(f[1])),
    ),
)

注文書を仕上げる

注文番号を見出しにして、状態はバッジで、送り状番号はコードで、合計は太字で見せます。

Order #1024

Status: Shipped
Placed: 2026-10-20
Tracking: 1Z999AA10123456784
Total: $48.00

rx.card(
    rx.heading("Order #1024", size="4", margin_bottom="3"),
    rx.data_list.root(
        rx.data_list.item(
            rx.data_list.label("Status"),
            rx.data_list.value(rx.badge("Shipped", color_scheme="green", radius="full")),
            align="center",
        ),
        rx.data_list.item(rx.data_list.label("Placed"), rx.data_list.value("2026-10-20")),
        rx.data_list.item(rx.data_list.label("Tracking"), rx.data_list.value(rx.code("1Z999AA10123456784"))),
        rx.data_list.item(rx.data_list.label("Total"), rx.data_list.value(rx.text("$48.00", weight="bold"))),
    ),
    max_width="420px",
)

工房ノート

data_list.root > data_list.item > (data_list.label, data_list.value)という構造。
root: orientation · size · trim、item: align、label: width · color_scheme。
valueにはバッジ・コード・リンクなど、どんなコンポーネントでも入れられる。
データがリストなら、rx.foreachでitemを作る。

← 前へ

データ表示 · List

データ表示 · Code Block

新しい授業・講座のお知らせを受け取る

この講座に授業が追加されたり、続きの講座が公開されたりしたらメールでお知らせします。

質問と回答

この回について気になることを書き込んでください。すべての言語のページの質問がここに集まります。

ReflexKR

触って学ぶPythonとReflex。すべての例はReflex 0.10.0で実際に動かして確認しています。

ReflexKRはバナー広告なし・無料で運営しています。役に立ったら、コーヒー一杯で応援してください。 ☕ コーヒーで応援する

アフィリエイトと支援について

한국어 English 日本語简体中文 Español Deutsch

Built with Reflex