Data Table

Import

use maud_ui::primitives::data_table::{self, Props, Column};

Example

use maud::html;
use maud_ui::primitives::data_table;

let columns = vec![
    data_table::Column {
        key: "name".to_string(),
        label: "Name".to_string(),
        sortable: true, ..Default::default()
    },
];

let rows = vec![
    vec!["Alice".to_string()],
    vec!["Bob".to_string()],
];

html! {
    (data_table::render(data_table::Props {
        id: "tbl".to_string(),
        columns,
        rows,
        page_size: 5,
        searchable: true,
        search_placeholder: "Filter...".to_string(),
        selectable: true,
    }))
}

Column Struct

Helper Functions

column_header(label, sortable) → Markup

Renders a <th> with optional sort icon and aria-sort attribute. Use when constructing custom table headers.

view_options(columns) → Markup

Renders a "Columns ▾" dropdown trigger stub for toggling column visibility. Placeholder implementation; wiring toggles is deferred.

Features

• Pagination: Previous/Next buttons in footer; rows outside page size are hidden
• Selection: When selectable: true, prepends "Select all" checkbox in header and per-row checkboxes
• Row data: Each row stored in data-row-data as JSON array for client script access
• Sorting: Sortable columns emit data-sortable="true" with chevron icon and aria-sort attribute

Related

• Table
• Checkbox
• Input (search)

Shadcn reference

https://ui.shadcn.com/docs/components/data-table

column_header_aligned(label, sortable, Align::Right) → Markup

The original two-argument helper keeps left alignment; the aligned helper supports Left, Center and Right. Use Right for numeric columns. Column now has align: Align and implements Default; add ..Default::default() when migrating existing literals. Header cells remain muted and medium weight. Sortable headers respond to Enter/Space as well as clicks and announce their sort state. Runtime sorting/pagination moves existing rows, preserving alignment, rich content, checkbox state and attached controls. Rich rows sort/filter by their visible cell text; server-side rich filtering remains an application choice.

Exact numeric sorting (0.11.0)

Signed decimal sorting preserves precision with BigInt, including values beyond 2^53. It accepts correctly grouped commas, optional $/€/£/¥ symbols and Unicode minus. Empty or malformed numeric values and nonnumeric text fall back to text comparison. Compare one currency/unit per column; this is not a currency converter or locale parser. Sorting/filtering keep original row nodes and canonical markup intact.