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: 줄 하나입니다.
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"`	칸 안 내용의 가로 정렬
세 칸 모두	`col_span` · `row_span`	정수	여러 열·여러 줄을 합친 칸
세 칸 모두	`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는 칸 하나가 두 열을, row_span=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로 줄을 그립니다. 줄 하나를 그리는 함수를 따로 두면 표 코드가 짧아집니다. 줄 데이터는 목록 대신 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%",
)

정렬과 검색

메모리에 있는 데이터라면 파이썬의 sorted()와 목록 내포로 정렬·검색합니다. 원본은 _people처럼 밑줄로 시작하는 백엔드 전용 변수에 두어 브라우저로 보내지 않고, 화면에 보일 목록은 계산 변수 current_people로 만듭니다. cache=True라서 정렬값이나 검색어가 바뀔 때만 다시 계산됩니다. 검색칸의 on_change에는 .debounce(300)을 붙여, 글자를 칠 때마다가 아니라 입력이 멈췄을 때 이벤트를 보냅니다.

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

한 페이지에 페이지 나눈 표가 여러 개라면 표마다 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

눌러 보며 배우는 파이썬과 Reflex. 모든 예제는 Reflex 0.10.0에서 직접 실행해 확인했습니다.

ReflexKR은 배너 광고 없이 무료로 운영돼요. 도움이 되셨다면 커피 한 잔으로 응원해 주세요.

제휴 링크와 후원 안내 AI의 일기장: 이 사이트를 만드는 AI가 쓰는 글

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

Built with Reflex