--INTRO([Таблица, мощные таблицы и сетки данных со встроенными функциями.]) --

Error: Reference Target 'таблица' not found
Error: Reference Target 'таблица' not found

Примеры

Базовая таблица

Error: Reference Target 'таблица_блок' not found

Таблица счетов

Acme Inc.

Invoices

Recent billing activity across all client projects.

Outstanding$20,050.00
InvoiceStatusActions
INV-0041
Miriam Okafor
Pending$4,200.00
INV-0040
Theo Hartmann
Paid$1,850.00
INV-0039
Suki Nakamura
Overdue$6,500.00
INV-0038
Elias Ferreira
Paid$9,000.00
INV-0037
Priya Menon
Refunded$780.00
INV-0036
Dmitri Volkov
Paid$3,350.00
INV-0035
Amara Diallo
Pending$5,400.00
INV-0034
Noah Bergström
Paid$2,100.00
INV-0033
Lucia Romano
Overdue$3,950.00
INV-0032
Kwame Mensah
Paid$1,280.00

Figures shown in USD. Last updated Jun 17, 2026.

Справочник по API

таблица.корень

Основной компонент контейнера. Отображает оболочку таблицы — дополнительную панель инструментов поиска, прокручиваемый <table> и необязательный нижний колонтитул с нумерацией страниц — и инициализирует клиентский контроллер, который обрабатывает сортировку, поиск, нумерацию страниц и выбор строк полностью в JS (без обратного обмена с сервером).

Если вы планируете разместить table.search() где-то за пределами таблицы, задайте id явное, стабильное значение, чтобы его можно было надежно нацелить.

table.root(
    table.header(...),
    table.body(...),
    id="invoices-table",
    searchable=True,
    paginate=True,
    page_size=10,
)
Опора Тип По умолчанию
searchable bool False
paginate bool False
page_size int 5
id str Автоматически создано
class_name str ""

таблица.поиск

Автономный элемент поиска, который можно разместить в любом месте страницы — внутри таблицы, в заголовке страницы, на боковой панели — и при этом фильтровать определенную таблицу. Он связан исключительно посредством for_table, соответствующего id этой таблицы, с использованием прослушивателя событий в документе, а не позиции DOM, поэтому порядок монтирования не имеет значения. Несколько экземпляров table.search() могут быть нацелены на одну и ту же таблицу.

table.search(
    for_table="invoices-table",
    placeholder="Search invoices…",
)
Опора Тип По умолчанию
for_table str Обязательно
placeholder str "Search…"
class_name str ""

таблица.заголовок

Обертывает строки заголовка в липкий стиль <thead>.

table.header(
    table.row(
        table.head("Name"),
        table.head("Amount", sort_key="amount"),
    )
)
Опора Тип По умолчанию
class_name str ""

таблица.тело

Обертывает строки данных в <tbody>. Это элемент, который клиентский контроллер считывает и переупорядочивает — сортировка, поиск и разбиение на страницы — все они работают с дочерними элементами <tr>, найденными здесь.

table.body(
    table.row(
        table.cell("Brand identity design"),
        table.cell("$3,200.00", sort_value=3200.0),
    )
)
Опора Тип По умолчанию
class_name str ""

таблица.нижний колонтитул

Необязательный <tfoot> для строк сводки или итогов, отображаемый под телом и исключенный из сортировки/поиска/нумерации страниц.

table.footer(
    table.row(
        table.cell("Total", col_span=2),
        table.cell("$12,450.00"),
    )
)
Опора Тип По умолчанию
class_name str ""

таблица.строка

Один <tr>. Используется внутри table.header, table.body или table.footer.

table.row(
    table.cell("Invoice"),
    table.cell("Client"),
)
Опора Тип По умолчанию
class_name str ""

таблица.голова

Ячейка заголовка <th>. Передача sort_key превращает его в сортируемый по клику столбец, автоматически подключая обработчик щелчков и указатели направления шевронной сортировки. Опустите его для простого несортируемого заголовка.

table.head("Client")                          # plain
table.head("Amount", sort_key="amount", class_name="text-right")  # sortable
Опора Тип По умолчанию
sort_key str \| None None
class_name str ""

таблица.ячейка

Ячейка данных <td>. По умолчанию при сортировке сравнивается отображаемый текст каждой ячейки. Используйте sort_value всякий раз, когда отображаемый текст не поддается прямой сортировке (форматированная валюта, даты или любое производное/вычисленное значение) и вместо этого он будет сравниваться.

table.cell(
    "$3,200.00",
    sort_value=3200.0,
    class_name="text-right",
)
Опора Тип По умолчанию
sort_value Any None
class_name str ""

таблица.заголовок

Необязательный <caption>, отображаемый под таблицей для краткого описания или сноски. Не участвует в сортировке/поиске/нумерации страниц.

table.caption(
    "Billed to ",
    rx.el.span("Acme Inc.", class_name="font-medium"),
)
Опора Тип По умолчанию
class_name str ""

Выбор строки (согласие)

Специального компонента table.select_all() / table.select() нет — выбор осуществляется посредством простых вызовов checkbox.root() плюс двух атрибутов данных, которые ищет контроллер. Это позволяет полностью контролировать стиль флажка.

# Header — select-all checkbox
table.head(
    checkbox.root(checkbox.indicator(), **{"data-dt-select-all": "true"}),
    class_name="w-10",
)

# Row — must have a unique `value` (e.g. a row id)
table.cell(
    checkbox.root(
        checkbox.indicator(),
        value=invoice["id"],
        **{"data-dt-select": "true"},
    )
)

Состояние выбора существует только в браузере. Чтобы прочитать его (например, кнопку «Удалить выбранное»), прослушайте пользовательское событие dt-selection-change, отправленное в корневом элементе таблицы:

rx.el.div(
    ...,
    on_mount=rx.call_script(
        """
        document.getElementById('invoices-table').addEventListener(
            'dt-selection-change',
            (e) => console.log(e.detail.selected)
        )
        """
    ),
)

e.detail.selected — это список value, проверенных в данный момент, который синхронизируется при сортировке, поиске и нумерации страниц.