ReflexKR

コンポーネント工房：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

表とデータグリッド

Table

rx.table.rootrx.table.headerrx.table.rowrx.table.column_header_cellrx.table.bodyrx.table.cellrx.table.row_header_cell

公式ドキュメント

工房の注文書

チーム管理画面にメンバー一覧の表を作ってください。各行にアバター、名前のリンク、メールアドレス、役割のバッジが入ります。

rx.tableは、ヘッダー行、行、セルを自分で組み立てて作る表です。セルの中にアバター、リンク、ボタンなどどんなコンポーネントでも入れられるので、見た目を自由に決めたい一覧に向いています。並べ替え・検索・ページ分けが最初から付いた表が必要なら、Data Tableのほうが早いかもしれません。

table.root：表全体です。
table.header：ヘッダー部分（<thead>）です。中にtable.rowとtable.column_header_cell（列見出しのセル）を置きます。
table.body：本体（<tbody>）です。中にtable.rowを置きます。
table.row：1行です。
table.row_header_cell：その行を代表する最初のセル（太字で表示される行見出し）です。
table.cell：ふつうのセルです。

Full name	Email	Group
Danilo Sousa	danilo@example.com	Developer
Zahra Ambessa	zahra@example.com	Admin
Jasper Eriks	jasper@example.com	Developer

rx.table.root(
    rx.table.header(
        rx.table.row(
            rx.table.column_header_cell("Full name"),
            rx.table.column_header_cell("Email"),
            rx.table.column_header_cell("Group"),
        ),
    ),
    rx.table.body(
        rx.table.row(
            rx.table.row_header_cell("Danilo Sousa"),
            rx.table.cell("danilo@example.com"),
            rx.table.cell("Developer"),
        ),
        rx.table.row(
            rx.table.row_header_cell("Zahra Ambessa"),
            rx.table.cell("zahra@example.com"),
            rx.table.cell("Admin"),
        ),
        rx.table.row(
            rx.table.row_header_cell("Jasper Eriks"),
            rx.table.cell("jasper@example.com"),
            rx.table.cell("Developer"),
        ),
    ),
    width="100%",
)

表はwidthで、入れ物の箱に合わせておくのがおすすめです。列が多くてはみ出すなら、rx.box(rx.table.root(...), overflow_x="auto", width="100%")のように包んで、ページではなく表だけが横にスクロールするようにします。

プロパティを変えてみる

variantとsizeはtable.rootに、セル内の内容の横方向のそろえ方justifyは各セルに指定します。数値の列はふつう右（end）にそろえます。

プロパティを変えてみる

Item	Qty	Price
Coffee beans	2	$24.00
Paper filters	1	$5.50

variant

size

justify

rx.table.root(
    rx.table.header(
        rx.table.row(
            rx.table.column_header_cell("Item"),
            rx.table.column_header_cell("Qty", justify="end"),
            rx.table.column_header_cell("Price", justify="end"),
        ),
    ),
    rx.table.body(
        rx.table.row(
            rx.table.row_header_cell("Coffee beans"),
            rx.table.cell("2", justify="end"),
            rx.table.cell("$24.00", justify="end"),
        ),
        rx.table.row(
            rx.table.row_header_cell("Paper filters"),
            rx.table.cell("1", justify="end"),
            rx.table.cell("$5.50", justify="end"),
        ),
    ),
    variant="ghost",
    size="2",
    width="100%",
)

variant="surface"は表に枠線と背景を付け、"ghost"は罫線だけを残します。sizeはセルの余白です。

パーツ	プロパティ	値	用途
`root`	`variant`	`"surface"` `"ghost"`	枠線・背景のある表、罫線だけの表
`root`	`size`	`"1"` `"2"` `"3"`	セルの余白と文字の大きさ
`root`	`align` · `summary`	`"left"` `"center"` `"right"` · 文字列	表の配置、表の要約（HTML属性）
`row`	`align`	`"start"` `"center"` `"end"` `"baseline"`	行内のセルの縦方向のそろえ方
`column_header_cell` · `cell` · `row_header_cell`	`justify`	`"start"` `"center"` `"end"`	セル内の内容の横方向のそろえ方
3種のセルすべて	`col_span` · `row_span`	整数	複数の列・行を結合したセル
3種のセルすべて	`min_width` · `max_width`	CSSの長さ	列幅の最小・最大
`cell` · `row_header_cell`	`p` `px` `py` `pt` `pr` `pb` `pl`	`"0"` ~ `"9"`	セルの内側の余白（テーマの間隔の段階）
`column_header_cell` · `row_header_cell`	`scope`	`"col"` `"row"`など	見出しセルが指す範囲（HTML属性）

headerとbodyには固有のプロパティはありません。セルのalignはHTMLの古いalign属性で、Radixでのそろえ方にはjustifyを使います。

セルの結合と縦のそろえ方

col_span=2はセル1つで2列を、row_span=2は2行を占めるようにします。行のalignは、その行のセルの縦位置を決めます。

Day	Morning	Afternoon
Mon	Workshop
Tue	Review	Demo
Wed	Review	Q&A

rx.table.root(
    rx.table.header(
        rx.table.row(
            rx.table.column_header_cell("Day"),
            rx.table.column_header_cell("Morning"),
            rx.table.column_header_cell("Afternoon"),
        ),
    ),
    rx.table.body(
        rx.table.row(
            rx.table.row_header_cell("Mon"),
            rx.table.cell("Workshop", col_span=2, justify="center"),
        ),
        rx.table.row(
            rx.table.row_header_cell("Tue"),
            rx.table.cell("Review", row_span=2),
            rx.table.cell("Demo"),
            align="center",
        ),
        rx.table.row(
            rx.table.row_header_cell("Wed"),
            rx.table.cell("Q&A"),
        ),
    ),
    variant="surface",
    width="100%",
)

Stateのデータを表示する：foreach

表の中身が変わるなら、データをStateに置いてrx.foreachで行を描きます。1行を描く関数を別に用意しておくと、表のコードが短くなります。行のデータはリストの代わりにdictやdataclassにしてもかまいません（dataclassならperson.emailのように名前で取り出せます）。

Full name	Email	Group
Danilo Sousa	danilo@example.com	Developer
Zahra Ambessa	zahra@example.com	Admin
Jasper Eriks	jasper@example.com	Developer

class TableForEachState(rx.State):
    people: list[list[str]] = [
        ["Danilo Sousa", "danilo@example.com", "Developer"],
        ["Zahra Ambessa", "zahra@example.com", "Admin"],
        ["Jasper Eriks", "jasper@example.com", "Developer"],
    ]


def table_person_row(person: list):
    return rx.table.row(
        rx.table.cell(person[0]),
        rx.table.cell(person[1]),
        rx.table.cell(person[2]),
    )


rx.table.root(
    rx.table.header(
        rx.table.row(
            rx.table.column_header_cell("Full name"),
            rx.table.column_header_cell("Email"),
            rx.table.column_header_cell("Group"),
        ),
    ),
    rx.table.body(rx.foreach(TableForEachState.people, table_person_row)),
    width="100%",
)

並べ替えと検索

メモリ上のデータなら、Pythonのsorted()とリスト内包表記で並べ替え・検索します。元データは_peopleのようにアンダースコアで始まるバックエンド専用の変数に置いてブラウザへ送らず、画面に出す一覧は計算変数current_peopleで作ります。cache=Trueなので、並べ替えの値か検索語が変わったときだけ再計算されます。検索欄のon_changeには.debounce(300)を付けて、1文字打つたびではなく入力が止まったときにイベントを送ります。

Full name	Email	Group
Danilo Sousa	danilo@example.com	Developer
Zahra Ambessa	zahra@example.com	Admin
Jasper Eriks	zjasper@example.com	B-Developer
Alice Brown	alice@example.com	Admin

class TableSearchState(rx.State):
    _people: list[dict[str, str]] = [
        {"full_name": "Danilo Sousa", "email": "danilo@example.com", "group": "Developer"},
        {"full_name": "Zahra Ambessa", "email": "zahra@example.com", "group": "Admin"},
        {"full_name": "Jasper Eriks", "email": "zjasper@example.com", "group": "B-Developer"},
        {"full_name": "Alice Brown", "email": "alice@example.com", "group": "Admin"},
    ]
    sort_value: str = ""
    search_value: str = ""

    @rx.event
    def set_sort_value(self, value: str):
        self.sort_value = value

    @rx.event
    def set_search_value(self, value: str):
        self.search_value = value

    @rx.var(cache=True)
    def current_people(self) -> list[dict[str, str]]:
        people = self._people
        if self.sort_value != "":
            people = sorted(people, key=lambda p: p[self.sort_value].lower())
        if self.search_value != "":
            term = self.search_value.lower()
            people = [p for p in people if any(term in v.lower() for v in p.values())]
        return people


def table_search_row(person: dict):
    return rx.table.row(
        rx.table.cell(person["full_name"]),
        rx.table.cell(person["email"]),
        rx.table.cell(person["group"]),
    )


rx.vstack(
    rx.flex(
        rx.select(
            ["full_name", "email", "group"],
            placeholder="Sort By: full_name",
            on_change=TableSearchState.set_sort_value,
        ),
        rx.input(
            placeholder="Search here...",
            on_change=TableSearchState.set_search_value.debounce(300),
        ),
        spacing="3",
        wrap="wrap",
    ),
    rx.table.root(
        rx.table.header(
            rx.table.row(
                rx.table.column_header_cell("Full name"),
                rx.table.column_header_cell("Email"),
                rx.table.column_header_cell("Group"),
            ),
        ),
        rx.table.body(rx.foreach(TableSearchState.current_people, table_search_row)),
        width="100%",
    ),
    width="100%",
)

データがデータベースにあるなら、同じ画面をSQLクエリで作ります。公式ドキュメントの例を縮めると次のとおりです（このページでは実行しません）。ilikeは大文字・小文字を区別しない部分一致で、検索語の前後の%は「任意の文字列」という意味です。

from sqlmodel import asc, or_, select


class Customer(rx.Model, table=True):
    name: str
    email: str
    phone: str
    address: str


class DatabaseTableState(rx.State):
    users: list[Customer] = []
    sort_value: str = ""
    search_value: str = ""

    @rx.event
    def load_entries(self):
        with rx.session() as session:
            query = select(Customer)
            if self.search_value:
                pattern = f"%{self.search_value.lower()}%"
                query = query.where(or_(Customer.name.ilike(pattern), Customer.email.ilike(pattern)))
            if self.sort_value:
                query = query.order_by(asc(getattr(Customer, self.sort_value)))
            self.users = session.exec(query).all()

データが多いほどデータベース側で絞り込むほうがよく、少量のデータやAPIから受け取ったデータならメモリ上で絞り込むほうが簡単です。

ページ分け

一度に数行だけ見せるには、offset（飛ばす行数）とlimit（表示する行数）をStateに置き、その分だけ切り出してusersに入れます。最初のデータはtable.rootのon_mountで入れます。データベースなら、切り出す代わりにquery.offset(self.offset).limit(self.limit)を使います。

Page 1 / 1

Name	Email	Phone

class TablePageState(rx.State):
    _customers: list[dict[str, str]] = [
        {"name": "John Doe", "email": "john@example.com", "phone": "555-1234"},
        {"name": "Jane Smith", "email": "jane@example.com", "phone": "555-5678"},
        {"name": "Bob Johnson", "email": "bob@example.com", "phone": "555-9012"},
        {"name": "Alice Brown", "email": "alice@example.com", "phone": "555-3456"},
        {"name": "Charlie Wilson", "email": "charlie@example.com", "phone": "555-7890"},
        {"name": "Emily Davis", "email": "emily@example.com", "phone": "555-2345"},
        {"name": "Frank Miller", "email": "frank@example.com", "phone": "555-6789"},
    ]
    users: list[dict[str, str]] = []
    total_items: int = 0
    offset: int = 0
    limit: int = 3

    @rx.var
    def page_number(self) -> int:
        return self.offset // self.limit + 1

    @rx.var
    def total_pages(self) -> int:
        return max(1, -(-self.total_items // self.limit))

    @rx.event
    def load_entries(self):
        self.total_items = len(self._customers)
        self.users = self._customers[self.offset : self.offset + self.limit]

    @rx.event
    def prev_page(self):
        self.offset = max(self.offset - self.limit, 0)
        self.load_entries()

    @rx.event
    def next_page(self):
        if self.offset + self.limit < self.total_items:
            self.offset += self.limit
        self.load_entries()


def table_page_row(user: dict):
    return rx.table.row(
        rx.table.cell(user["name"]),
        rx.table.cell(user["email"]),
        rx.table.cell(user["phone"]),
    )


rx.vstack(
    rx.hstack(
        rx.button("Prev", on_click=TablePageState.prev_page, variant="soft"),
        rx.text("Page ", TablePageState.page_number, " / ", TablePageState.total_pages),
        rx.button("Next", on_click=TablePageState.next_page, variant="soft"),
        align="center",
    ),
    rx.table.root(
        rx.table.header(
            rx.table.row(
                rx.table.column_header_cell("Name"),
                rx.table.column_header_cell("Email"),
                rx.table.column_header_cell("Phone"),
            ),
        ),
        rx.table.body(rx.foreach(TablePageState.users, table_page_row)),
        on_mount=TablePageState.load_entries,
        width="100%",
    ),
    width="100%",
)

1ページにページ分けした表が複数あるなら、表ごとにoffset・limitを別々に持たせる必要があります。検索語や並べ替えが変わったらoffsetを0に戻し、減った結果の末尾を越えたページに取り残されないようにします。同じ表を何度も使うなら、rx.ComponentStateで表ごとに別々のStateを持たせられます。

ダウンロード

rx.downloadを使うと、表のデータをファイルとしてダウンロードさせられます。JSONは画面側でStateの値をそのまま渡します。文字列でない値はJSONの文字列に変換されて保存されます。CSVはハンドラーでcsvモジュールを使って文字列を作り、rx.downloadを返します。どちらの場合もファイルを受け取るのはユーザーのブラウザで、サーバーには何も保存されません。

Name	Email	Phone
John Doe	john@example.com	555-1234
Jane Smith	jane@example.com	555-5678
Bob Johnson	bob@example.com	555-9012

import csv
import io
import json


class TableDownloadState(rx.State):
    users: list[dict[str, str]] = [
        {"name": "John Doe", "email": "john@example.com", "phone": "555-1234"},
        {"name": "Jane Smith", "email": "jane@example.com", "phone": "555-5678"},
        {"name": "Bob Johnson", "email": "bob@example.com", "phone": "555-9012"},
    ]

    @rx.event
    def download_csv_data(self):
        output = io.StringIO()
        writer = csv.DictWriter(output, fieldnames=["name", "email", "phone"])
        writer.writeheader()
        writer.writerows(self.users)
        return rx.download(data=output.getvalue(), filename="data.csv")


def table_download_row(user: dict):
    return rx.table.row(
        rx.table.cell(user["name"]),
        rx.table.cell(user["email"]),
        rx.table.cell(user["phone"]),
    )


rx.vstack(
    rx.table.root(
        rx.table.header(
            rx.table.row(
                rx.table.column_header_cell("Name"),
                rx.table.column_header_cell("Email"),
                rx.table.column_header_cell("Phone"),
            ),
        ),
        rx.table.body(rx.foreach(TableDownloadState.users, table_download_row)),
        width="100%",
    ),
    rx.hstack(
        rx.button("Download as JSON", on_click=rx.download(data=TableDownloadState.users, filename="data.json")),
        rx.button("Download as CSV", on_click=TableDownloadState.download_csv_data),
        spacing="3",
        wrap="wrap",
    ),
    width="100%",
    spacing="4",
)

注文書を仕上げる

ヘッダー行なしで本体だけを置いたメンバー一覧です。最初のセルにアバター、行見出しのセルに名前のリンク、最後のセルに役割のバッジを入れ、各行にalign="center"を指定してアバターと文字の縦位置をそろえます。狭い画面でもページがはみ出さないよう、表をoverflow_x="auto"の箱で包みます。

Your Team

Invite and manage your team members

Danilo Sousa	danilo@example.com	Developer
Zahra Ambessa	zahra@example.com	Admin
Jasper Eriksson	jasper@example.com	Developer

rx.flex(
    rx.heading("Your Team", as_="h2", size="5"),
    rx.text("Invite and manage your team members"),
    rx.flex(
        rx.input(placeholder="Email Address"),
        rx.button("Invite"),
        spacing="2",
    ),
    rx.box(
        rx.table.root(
            rx.table.body(
                rx.table.row(
                    rx.table.cell(rx.avatar(fallback="DS")),
                    rx.table.row_header_cell(rx.link("Danilo Sousa")),
                    rx.table.cell("danilo@example.com"),
                    rx.table.cell(rx.badge("Developer")),
                    align="center",
                ),
                rx.table.row(
                    rx.table.cell(rx.avatar(fallback="ZA")),
                    rx.table.row_header_cell(rx.link("Zahra Ambessa")),
                    rx.table.cell("zahra@example.com"),
                    rx.table.cell(rx.badge("Admin", color_scheme="orange")),
                    align="center",
                ),
                rx.table.row(
                    rx.table.cell(rx.avatar(fallback="JE")),
                    rx.table.row_header_cell(rx.link("Jasper Eriksson")),
                    rx.table.cell("jasper@example.com"),
                    rx.table.cell(rx.badge("Developer")),
                    align="center",
                ),
            ),
            width="100%",
        ),
        overflow_x="auto",
        width="100%",
    ),
    width="100%",
    direction="column",
    spacing="2",
)

工房ノート

root > header(row > column_header_cell) + body(row > row_header_cell · cell)。
rootのvariant(surface/ghost)・size、セルのjustify・col_span・row_span、行のalign。
変わるデータはState + rx.foreach。元データは_バックエンド変数に、表示する一覧は計算変数に。
並べ替え・検索・ページ分けは自分で作る。全部そろった表が必要ならrx.data_table。
幅の広い表はoverflow_x="auto"の箱で包み、表だけがスクロールするようにする。

← 前へ

メディア · Video

表とデータグリッド · Data Table

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

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

質問と回答

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

ReflexKR

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

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

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

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

Built with Reflex