组件工坊：Reflex 组件库 100 例
·
课程概览
布局
·
Box
·
Flex
·
Stack
·
Grid
·
Container
·
Section
·
Center
·
Spacer
·
Separator
·
Card
·
Inset
·
Aspect Ratio
·
Fragment
排版
·
Text
·
Heading
·
Link
·
Code
·
Markdown
·
Blockquote
·
Quote
·
Strong
·
Em
·
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
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,
)四项功能都可以开关。排序时点击列标题，调整宽度时拖动列标题的边界即可。
试着改属性
search
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,
)| 属性 | 取值 | 用途 |
|---|---|---|
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，每当事件处理器修改值时，表格就会重新渲染。在下面点击 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,
)给 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。
订阅新课时和新课程通知
本课程新增课时或推出后续课程时，我们会发邮件通知你。
问答
关于本课有任何疑问都可以在这里留言。所有语言版本页面的提问会汇集在一起。