Table

Description

Table renders semantic HTML tables with built-in support for headers, body rows, and footer rows. Cells can contain plain text or rich Markup content (including nested components like badges). Tables support visual modifiers for better readability and UX patterns.

Import

use maud_ui::primitives::table;

Example

use maud::{html, Markup};
use maud_ui::primitives::table::{Props, CellMarkup, render};

let headers = vec![
    "Invoice".to_string(),
    "Status".to_string(),
    "Amount".to_string(),
];

let rows = vec![
    vec!["INV001".to_string(), "Paid".to_string(), "$250.00".to_string()],
    vec!["INV002".to_string(), "Pending".to_string(), "$150.00".to_string()],
];

let table = render(Props {
    headers,
    rows,
    striped: true,
    hoverable: true,
    right_align_cols: vec![2],
    ..Default::default()
});

CellMarkup

Helper struct for rich (Markup-based) table cells.

Variants

Striped

Alternating row background colors improve readability for wide tables.

render(Props {
    striped: true,
    ..Default::default()
})

Hoverable

Row background highlights on hover and when a row action receives keyboard focus.

render(Props {
    hoverable: true,
    ..Default::default()
})

Compact

Reduced padding for dense data displays.

render(Props {
    compact: true,
    ..Default::default()
})

Rich Cells (with Markup)

Embed components like badges, buttons, or custom HTML inside cells.

use maud_ui::primitives::{table, badge};

let rich_rows = vec![
    vec![
        CellMarkup::text("INV001"),
        CellMarkup::markup(
            badge::render(badge::Props {
                label: "Paid".into(),
                variant: badge::Variant::Success,
                ..Default::default()
            }),
            false,
        ),
        CellMarkup::right("$250.00"),
    ],
];

render(Props {
    headers: vec!["Invoice".into(), "Status".into(), "Amount".into()],
    rich_rows,
    ..Default::default()
})

With Footer

Totals or summary rows with optional right alignment for numbers.

let footer_row = vec![
    CellMarkup::text("Total"),
    CellMarkup::text(""),
    CellMarkup::right("$1,750.00"),
];

render(Props {
    footer_row,
    ..Default::default()
})

With Caption

Semantic table captions improve accessibility and provide context.

render(Props {
    caption: Some("A list of your recent invoices.".into()),
    ..Default::default()
})

Related

• Data Table — Complex tables with sorting, filtering, and pagination
• Badge — Status indicators often embedded in table cells
• Typography — Text styling inside cells

Shadcn Reference

Maud-ui table is a HTML-semantic wrapper for shadcn's <Table> component pattern.