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 Table

rx.data_table

公式ドキュメント

工房の注文書

商品の在庫一覧を表で見せてください。お客さんが名前で検索し、価格順に並べ替え、5行ずつめくって見られるようにしてほしいです。

rx.data_tableは、検索、並べ替え、ページ分けが最初から入っている表です。データと列名を渡すだけで済むので、決まったデータを手早く見せたいときに向いています。セルにボタンを入れたり見た目を自由に変えたりしたいならTableを、セルを直接編集させたいならData Editorを使います。

dataには行のリスト（リストのリスト）を、columnsには列名のリストを渡します。リストのデータではcolumnsを必ず渡します。

rx.data_table(
    data=[
        ["Avery Bradley", "6-2", 25.0],
        ["Jae Crowder", "6-6", 25.0],
        ["John Holland", "6-5", 27.0],
        ["R.J. Hunter", "6-5", 22.0],
        ["Jonas Jerebko", "6-10", 29.0],
        ["Amir Johnson", "6-9", 29.0],
        ["Jordan Mickey", "6-8", 21.0],
        ["Kelly Olynyk", "7-0", 25.0],
        ["Terry Rozier", "6-2", 22.0],
        ["Marcus Smart", "6-4", 22.0],
    ],
    columns=["Name", "Height", "Age"],
    pagination=True,
    search=True,
    sort=True,
)

プロパティを変えてみる

4つの機能をオン・オフできます。並べ替えは列見出しをクリック、幅の調整は列見出しの境目をドラッグします。

プロパティを変えてみる

sort

pagination

resizable

rx.data_table(
    data=[
        ["Avery Bradley", "Boston", 25],
        ["Jae Crowder", "Boston", 25],
        ["John Holland", "Boston", 27],
        ["Jonas Jerebko", "Detroit", 29],
        ["Amir Johnson", "Toronto", 29],
        ["Kelly Olynyk", "Miami", 25],
        ["Terry Rozier", "Charlotte", 22],
        ["Marcus Smart", "Memphis", 22],
        ["Isaiah Thomas", "Denver", 27],
        ["Evan Turner", "Portland", 27],
        ["James Young", "Boston", 20],
        ["Tyler Zeller", "Milwaukee", 26],
    ],
    columns=["Name", "Team", "Age"],
    search=True,
    sort=True,
    pagination=True,
    resizable=False,
)

searchはすべての列から大文字・小文字を区別せず部分一致で探し、paginationは既定で10行ずつに分けます。検索結果もページに分かれます。

プロパティ	値	用途
`data`	リストのリスト、Stateの値、pandas DataFrame	表示する行
`columns`	列名のリスト	列見出し。リストのデータでは必須、DataFrameとは一緒に使わない
`search`	`True` / `False`	上部に検索欄
`sort`	`True` / `False`	列見出しのクリックで昇順・降順に並べ替え
`pagination`	`True` / `False`またはdict	ページ分け。`{"limit": 5}`のように1ページの行数を決められる
`resizable`	`True` / `False`	列幅をドラッグで調整

固有のイベントはありません。この表はGrid.jsで描画されます。

ページ分け

pagination=Trueは10行ずつに分けます。1ページの行数を変えるには、paginationに{"limit": 行数}のdictを渡します。このdictはGrid.jsのページ設定にそのまま渡されます。

rx.data_table(
    data=[[f"Order #{1000 + i}", ["Paid", "Shipped", "Refunded"][i % 3], 12 + i * 3] for i in range(12)],
    columns=["Order", "Status", "Total"],
    pagination={"limit": 4},
)

Stateのデータを表示する

データと列名をStateに置くと、ハンドラーが値を変えるたびに表が描き直されます。下でAdd playerを押すと、行が1つ増えます。

class DataTableTeamState(rx.State):
    data: list[list[str]] = [
        ["Lionel", "Messi", "Argentina"],
        ["Cristiano", "Ronaldo", "Portugal"],
        ["Neymar", "Jr", "Brazil"],
        ["Kylian", "Mbappé", "France"],
    ]
    columns: list[str] = ["First Name", "Last Name", "Country"]

    @rx.event
    def add_player(self):
        self.data = self.data + [["Son", "Heung-min", "Korea"]]

    @rx.event
    def reset_players(self):
        self.data = self.data[:4]


rx.vstack(
    rx.hstack(
        rx.button("Add player", on_click=DataTableTeamState.add_player, size="1"),
        rx.button("Reset", on_click=DataTableTeamState.reset_players, size="1", variant="soft"),
    ),
    rx.data_table(
        data=DataTableTeamState.data,
        columns=DataTableTeamState.columns,
        pagination=True,
        search=True,
        sort=True,
    ),
    width="100%",
)

決めた順番で表示する

最初に表示する順番を決めたいなら、並べ替えたリストを計算変数にしてdataに渡します。計算変数を渡すときは、戻り値の型（-> list[list[str]]）を必ず書きます。書かないと、表がデータの形を知ることができずエラーになります。sort=Trueも一緒に指定すれば、ユーザーは別の列で並べ替え直せます。

class DataTableSortedState(rx.State):
    rows: list[list[str]] = [
        ["Pear", "Fruit"],
        ["Carrot", "Vegetable"],
        ["Apple", "Fruit"],
        ["Basil", "Herb"],
    ]

    @rx.var
    def sorted_rows(self) -> list[list[str]]:
        return sorted(self.rows, key=lambda row: row[0])


rx.data_table(
    data=DataTableSortedState.sorted_rows,
    columns=["Name", "Kind"],
    sort=True,
)

pandas DataFrameを渡す

dataにpandas DataFrameを渡すと、列名をDataFrameから取るのでcolumnsは指定しません（一緒に指定するとエラーになります）。この講座の環境にはpandasが入っていないため、コードだけを示します。自分で試すにはpandasをインストールしてください。

import pandas as pd

nba_data = pd.read_csv("data/nba.csv")


def index():
    return rx.data_table(
        data=nba_data[["Name", "Height", "Age"]],
        pagination=True,
        search=True,
        sort=True,
    )


class TableState(rx.State):
    data: pd.DataFrame = pd.read_csv("data/nba.csv")

    @rx.var
    def sorted_data(self) -> pd.DataFrame:
        return self.data.sort_values("Name")

注文書を仕上げる

在庫一覧で検索、並べ替え、列幅の調整をオンにし、5行ずつめくれるようpagination={"limit": 5}を指定します。価格の列は数値のままにしておかないと、数値の順に並べ替わりません。

rx.data_table(
    data=[
        ["Desk lamp", "Lighting", 39, "In stock"],
        ["Office chair", "Furniture", 189, "Low"],
        ["Monitor arm", "Accessories", 79, "In stock"],
        ["Standing desk", "Furniture", 449, "Sold out"],
        ["Cable tray", "Accessories", 25, "In stock"],
        ["Floor lamp", "Lighting", 89, "Low"],
        ["Bookshelf", "Furniture", 159, "In stock"],
        ["Footrest", "Accessories", 35, "In stock"],
        ["LED strip", "Lighting", 19, "Sold out"],
    ],
    columns=["Product", "Category", "Price ($)", "Stock"],
    search=True,
    sort=True,
    pagination={"limit": 5},
    resizable=True,
)

工房ノート

rx.data_table(data=リストのリスト, columns=列名) 1つで完結する。
search · sort · pagination · resizableをオン・オフする。pagination={"limit": n}で行数を決める。
Stateの値を渡せば、値が変わったときに描き直される。計算変数は戻り値の型を必ず書く。
DataFrameを渡すときはcolumnsを指定しない（pandasのインストールが必要）。
セルにコンポーネントを入れたり見た目を変えたりするならrx.table、編集させるならrx.data_editor。

← 前へ

表とデータグリッド · Table

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

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

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

質問と回答

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

ReflexKR

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

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

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

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

Built with Reflex