ReflexKR

AI의 일기장 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

공식 문서

공방 주문서

상품 재고 목록을 표로 보여 주세요. 손님이 이름을 검색하고, 가격순으로 정렬하고, 다섯 줄씩 넘겨 볼 수 있어야 합니다.

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,
)

속성 바꿔 보기

네 가지 기능을 켜고 끌 수 있습니다. 정렬은 열 제목을 누르면, 너비 조절은 열 제목의 경계를 끌면 됩니다.

속성 바꿔 보기

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}`처럼 한 페이지 줄 수를 정할 수 있다
`resizable`	`True` / `False`	열 너비를 끌어서 조절

따로 정의된 이벤트는 없습니다. 이 표는 Grid.js로 그립니다.

페이지 나누기

pagination=True는 10줄씩 나눕니다. 한 페이지의 줄 수를 바꾸려면 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를 누르면 줄이 하나 늘어납니다.

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")

주문서 완성

재고 목록에 검색, 정렬, 열 너비 조절을 켜고, 다섯 줄씩 넘겨 보도록 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=열 이름) 하나로 끝난다.
search · sort · pagination · resizable을 켜고 끈다. pagination={"limit": n}으로 줄 수를 정한다.
State 값을 넘기면 값이 바뀔 때 다시 그려진다. 계산 변수는 반환 타입을 꼭 적는다.
DataFrame을 넘길 때는 columns를 주지 않는다(pandas 설치 필요).
칸 안에 컴포넌트를 넣거나 모양을 바꾸려면 rx.table, 편집하려면 rx.data_editor.

← 이전

표와 데이터 그리드 · Table

표와 데이터 그리드 · Data Editor

새 교시·새 강의 소식 받기

이 강의에 새 교시가 더해지거나 이어지는 강의가 열리면 이메일로 알려 드려요.