shadcn Data Table

If you know shadcn/ui’s Data Table, you already know this one. DataTable takes columns and data, keeps TanStack Table’s state (sorting, filters, pagination, selection, column visibility), and draws a table that stays smooth at a million rows. The columns, the helper components and the callbacks have the names from the recipe.

A payments table

Describe the row type once, write the columns, and put a DataTable in your view. This is the whole example behind the picture.

use std::sync::Arc;
use blenderui::prelude::*;
use blenderui::shadcn::*;

struct Payment { id: String, status: &'static str, email: String, amount: f64 }

// Rust has no reflection, so the row type lists its fields once: this is what
// makes accessor_key("email") work.
impl Record for Payment {
    const FIELDS: &'static [&'static str] = &["id", "status", "email", "amount"];
    fn field(&self, field: usize) -> Cell<'_> {
        match field {
            0 => Cell::Str(&self.id),
            1 => Cell::Str(self.status),
            2 => Cell::Str(&self.email),
            _ => Cell::F64(self.amount, 2),
        }
    }
}

fn columns() -> Arc<[ColumnDef<Payment>]> {
    vec![
        select_column(),
        ColumnDef::accessor_key("status").header("Status").badge(|s| match s {
            "success" => BadgeVariant::Default,
            "failed" => BadgeVariant::Destructive,
            _ => BadgeVariant::Secondary,
        }),
        ColumnDef::accessor_key("email").header(Header::menu("Email")).size(250.0),
        ColumnDef::accessor_key("amount").header("Amount").meta(ColumnMeta::right().usd()),
        actions_column(),
    ]
    .into()
}

struct Page { columns: Arc<[ColumnDef<Payment>]>, data: Arc<[Payment]> }

impl Render for Page {
    fn render(&mut self, _: &mut Window, _: &mut Context<Self>) -> impl IntoElement {
        let (columns, data) = (self.columns.clone(), self.data.clone());
        rsx! {
            <DataTable columns={columns} data={data} filter_column="email" h={px(380.0)} />
        }
    }
}

use std::sync::Arc;
use blenderui::prelude::*;
use blenderui::shadcn::*;

// Payment, its Record impl and columns() are the same as in the rsx! tab.

struct Page { columns: Arc<[ColumnDef<Payment>]>, data: Arc<[Payment]> }

impl Render for Page {
    fn render(&mut self, _: &mut Window, _: &mut Context<Self>) -> impl IntoElement {
        DataTable::new(self.columns.clone(), self.data.clone())
            .filter_column("email")
            .h(px(380.0))
    }
}

columns and data are compared by identity, the way TanStack expects memoized references: an Arc that you clone is the same table, a fresh Vec is new data and the table sorts it again. Build them once (a field of your view, or use_memo) and pass them on every render.

The recipe, name by name

Typed cells instead of JSX

The table is fast because it paints the cells in view straight from your data: there is no element per cell, a steady frame allocates nothing, and a million rows cost what a screenful does. shadcn’s cell: ({ row }) => <Badge>...</Badge> builds an element per cell, which is exactly what this table avoids. So a cell is a typed kind the table knows how to paint:

That covers the cells of the recipe: the checkbox, the status badge, the formatted amount and the row-actions button. flexRender has no equivalent for the same reason, so headers are typed too: Header::Text, Header::menu(title) (the sortable header with a menu) and the select-all checkbox of select_column().

State: uncontrolled, or controlled by you

Every piece of state works as in TanStack. Give nothing and the table keeps it. Give initial_state to choose where it starts. Give a value (.sorting(..)) and the field is controlled: the table only reports a change through its on_..._change callback and shows what you pass back.

#[component]
fn payments_table() {
    let sorting = use_signal(SortingState::new());
    rsx! {
        <DataTable
            columns={columns()}
            data={data()}
            sorting={sorting.get()}
            on_sorting_change={move |s: &SortingState| sorting.set(s.clone())}
        />
    }
}

DataTable::new(self.columns.clone(), self.data.clone())
    .sorting(self.sorting.clone())
    .on_sorting_change(move |s| println!("sorting is now {s:?}"))

A controlled field that you never update simply never changes, which is also how you lock a table to one sort order. The callbacks are called after the change, outside the table, so they can read the table’s handle.

Helper components

The helpers take a TableHandle, which use_table() returns (useReactTable’s result). Pass the same handle to DataTable and to any helper, and they can sit anywhere in the page:

#[component]
fn payments_table() {
    let table = use_table();
    rsx! {
        <DataTableToolbar table={table} filter_column="email" />
        <DataTable table={table} columns={columns()} data={data()} toolbar={false} enable_pagination={false} />
        <DataTablePagination table={table} page_sizes={vec![10, 25, 50]} />
    }
}

• DataTableColumnHeader is the menu of a sortable header (Asc, Desc, Hide). DataTable opens it under a header made with Header::menu(..).
• DataTablePagination has “Rows per page”, “Page x of y”, the four page buttons and “N of M row(s) selected.”.
• DataTableViewOptions is the “View” button with a check per column that can be hidden.
• DataTableToolbar is a text field for column.setFilterValue (or the global filter without a column) and the view options.

Outside a component, the handle’s methods do what TanStack’s table methods do: table.next_page(cx), table.set_column_filter_value("email", "ada", cx), table.toggle_all_rows_selected(true, cx), and table.snapshot() for what the table shows.

Row models and the core

The logic is not in the element. blenderui_table::tanstack has Table<T>, ColumnDef<T> and the state types in the dependency-free table core, so another adapter can reuse them; the components in this page are blenderui’s. Table<T> keeps the four row models as lists of row numbers (Blender’s index mask) instead of copies: sorting a million rows uses the typed keys of the table core, filtering is a pass over the cells’ text, and a page is a slice. The headless tests drive a million-row table through sorting and paging without drawing anything.

How fast it is

Writing the table through ColumnDef and Table<T> costs a little more per frame than the delegate API, and it still paints a million rows in about a millisecond and a half. The columns are read through the closures you gave, the badge, checkbox and progress cells are painted from the same typed values, and a steady frame allocates nothing in its own drawing.

The 1,000,000 x 20 table of Data tables, written with shadcn’s ColumnDef and Table (a checkbox column, a dollar column and a progress column among the numbers), measured by examples/bench_table.rs. The delegate API’s number is also measured before and after this change: the layer adds no cost to the table that was already there.

Limitations

• Cells are typed, not JSX. See above. This is the price of the speed; there is no flexRender.
• Filtering is includesString. A column filter and the global filter keep the rows whose displayed text contains the value, ignoring case. There are no custom filter functions, faceted filters or range filters.
• A header click cycles ascending, descending, none for one column. sorting can hold several rules, and they all apply (the first is the most significant), but there is no shift-click to add one. Numbers do not start descending, as TanStack’s auto does.
• A click on a row does not select it. Selection is the checkbox column, as in the recipe. The selected rows are highlighted in Blender’s selection color.
• The row-actions button reports a click and shows nothing. Show your own menu from on_row_action.
• Rows are identified by their index in the data (getRowId is not supported), so a selection follows the index, not a key.
• Not built: row expansion, grouping, column ordering and column sizing as table state (dragging a header border resizes, but nothing reports it as state), faceted values, and server-side (manual*) pagination, sorting and filtering in the DataTable component. The TableOptions of the core has the manual switches.
• A hidden column forgets a width you dragged it to, and shows at its size again.
• Icons are text: the menus say Asc, Desc and Hide and the page buttons are <<, <, > and >>.
• TableHandle calls do nothing before the table’s first frame. An unmounted DataTable leaves its state entity until the window closes.

Next steps