ReflexKR

El taller de componentes: los 100 componentes de Reflex

Resumen del curso

Diseño

Box

Flex

Stack

Grid

Container

Section

Center

Spacer

Separator

Card

Inset

Aspect Ratio

Fragment

Tipografía

Text

Heading

Link

Code

Markdown

Blockquote

Quote

Strong

Kbd

Formularios

Button

Input

Text Area

Checkbox

Switch

Radio Group

Select

Slider

Form

Upload

Visualización de datos

Badge

Avatar

Icon

Callout

List

Data List

Code Block

Progress

Spinner

Scroll Area

Moment

Mostrar y ocultar

Tabs

Accordion

Segmented Control

Superposiciones

Tooltip

Popover

Hover Card

Dialog

Alert Dialog

Drawer

Dropdown Menu

Context Menu

Toast

Renderizado dinámico

Cond

Match

Foreach

Auto Scroll

Multimedia

Image

Audio

Video

Tablas y cuadrículas de datos

Table

Data Table

Data Editor

Gráficos

Area Chart

Bar Chart

Line Chart

Composed Chart

Pie Chart

Radar Chart

Radial Bar Chart

Scatter Chart

Funnel Chart

Treemap

Sankey Chart

Error Bar

Piezas de gráficos

Axis

Cartesian Grid

Chart Tooltip

Legend

Label

Reference

Brush

Otras bibliotecas de gráficos

Plotly

Pyplot

Elementos HTML

HTML

HTML Text

HTML Layout

HTML Forms

HTML Media

HTML Tables

SVG

Otras herramientas

Theme

Skeleton

Clipboard

Html Embed

Script

Memo

El taller de componentes: los 100 componentes de Reflex

Tablas y cuadrículas de datos

Data Table

rx.data_table

Documentación oficial

Pedido del taller

Muestra en una tabla la lista de existencias de productos. El cliente debe poder buscar por nombre, ordenar por precio y pasar las páginas de cinco en cinco filas.

rx.data_table es una tabla que ya trae búsqueda, ordenación y paginación. Basta con pasarle los datos y los nombres de columna, así que es ideal para mostrar rápidamente unos datos fijos. Para meter botones en las celdas o cambiar libremente su aspecto, usa Table; para que se puedan editar las celdas, Data Editor.

En data va una lista de filas (una lista de listas) y en columns, la lista de nombres de columna. Con datos en forma de lista, columns es obligatorio.

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

Prueba las propiedades

Puedes activar y desactivar cuatro funciones. Para ordenar, pulsa el título de una columna; para cambiar el ancho, arrastra el borde del título.

Prueba las propiedades

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 busca coincidencias parciales en todas las columnas sin distinguir mayúsculas, y pagination divide en páginas de 10 filas por defecto. Los resultados de búsqueda también se paginan.

Propiedad	Valores	Uso
`data`	Lista de listas, valor del State, DataFrame de pandas	Las filas que se muestran
`columns`	Lista de nombres de columna	Títulos de columna. Obligatorio con datos en lista; no se usa junto con un DataFrame
`search`	`True` / `False`	Campo de búsqueda en la parte superior
`sort`	`True` / `False`	Orden ascendente o descendente al pulsar el título de columna
`pagination`	`True` / `False` o dict	Paginación. Con `{"limit": 5}` se fijan las filas por página
`resizable`	`True` / `False`	Cambiar el ancho de las columnas arrastrando

No define eventos propios. La tabla se dibuja con Grid.js.

Paginación

pagination=True divide en páginas de 10 filas. Para cambiar las filas por página, pasa a pagination un dict {"limit": filas}. Ese dict llega tal cual a la configuración de paginación de 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},
)

Mostrar datos del State

Si los datos y los nombres de columna están en el State, la tabla se vuelve a dibujar cada vez que un handler cambia el valor. Abajo, al pulsar Add player se añade una fila.

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

Mostrar en un orden fijado

Si quieres decidir el orden inicial, convierte la lista ordenada en una variable calculada y pásala a data. Al pasar una variable calculada, indica siempre el tipo de retorno (-> list[list[str]]). Si no lo indicas, la tabla no conoce la forma de los datos y da error. Si añades sort=True, el usuario puede volver a ordenar por otra columna.

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

Pasar un DataFrame de pandas

Si pasas a data un DataFrame de pandas, los nombres de columna se toman del DataFrame, así que no se da columns (si lo das, hay error). En el entorno de este curso pandas no está instalado, así que solo se muestra el código. Para probarlo tú, instala 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")

Completar el pedido

Activamos búsqueda, ordenación y ancho ajustable en la lista de existencias, y pagination={"limit": 5} para pasar las páginas de cinco en cinco. La columna de precio debe contener números para que se ordene en orden numérico.

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

Notas del taller

Con un solo rx.data_table(data=lista de listas, columns=nombres de columna) está hecho.
Activa o desactiva search · sort · pagination · resizable. pagination={"limit": n} fija las filas por página.
Si pasas un valor del State, se redibuja cuando cambia. En las variables calculadas indica siempre el tipo de retorno.
Con un DataFrame no se da columns (requiere instalar pandas).
Para meter componentes en las celdas o cambiar el aspecto, rx.table; para editar, rx.data_editor.

← Anterior

Tablas y cuadrículas de datos · Table

Tablas y cuadrículas de datos · Data Editor

Recibe avisos de nuevas lecciones

Te avisaremos por correo cuando este curso tenga lecciones nuevas o se abra un curso de continuación.

Preguntas y respuestas

Pregunta lo que quieras sobre esta lección. Aquí se reúnen las preguntas de todas las versiones de idioma de esta página.

ReflexKR

Aprende Python y Reflex haciendo. Todos los ejemplos se ejecutaron y verificaron en Reflex 0.10.0.

ReflexKR es gratis y sin banners publicitarios. Si te ayudó, puedes apoyarlo con un café. ☕ Invítanos un café

Aviso de afiliados

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

Built with Reflex