Data Table

Searchable, sortable, paginated (5 per page)

Invoice	Status	Method	Amount
INV001	Paid	Credit Card	$250.00
INV002	Pending	PayPal	$150.00
INV003	Unpaid	Bank Transfer	$350.00
INV004	Paid	Credit Card	$450.00
INV005	Paid	PayPal	$550.00
INV006	Pending	Bank Transfer	$200.00
INV007	Paid	Credit Card	$300.00
INV008	Unpaid	PayPal	$400.00
INV009	Paid	Bank Transfer	$500.00
INV010	Pending	Credit Card	$275.00

Selectable rows + view options

	Name	Role
	Alice	Admin
	Bob	Editor

Standalone column_header() helper

Sortable column	Plain column

Usage

use maud_ui::primitives::data_table;

let html = data_table::render(data_table::Props {
    id: "users-table".into(),
    columns: vec![
        data_table::Column { key: "name".into(), label: "Name".into(), sortable: true },
        data_table::Column { key: "email".into(), label: "Email".into(), sortable: true },
    ],
    rows: vec![
        vec!["Alice".into(), "alice@example.com".into()],
        vec!["Bob".into(), "bob@example.com".into()],
    ],
    page_size: 10,
    searchable: true,
    ..Default::default()
});

DataTable

Table with sorting, filtering, pagination, and row selection.

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,
    },
];

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

Props

Field	Type	Default	Description
`id`	`String`	`"data-table"`	Unique identifier for the table
`columns`	`Vec<Column>`	`vec![]`	Column definitions
`rows`	`Vec<Vec<String>>`	`vec![]`	Row data (each row is a Vec of cell strings)
`page_size`	`usize`	`5`	Number of rows displayed per page
`searchable`	`bool`	`false`	Whether a search/filter input is shown
`search_placeholder`	`String`	`"Filter..."`	Placeholder text for search input
`selectable`	`bool`	`false`	Whether to prepend row-selection checkboxes

Column Struct

Field	Type	Default	Description
`key`	`String`	—	Unique column identifier
`label`	`String`	—	Column header text
`sortable`	`bool`	—	Whether column can be sorted (shows icon if true)

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

Accessibility

Table has standard semantic <thead> and <tbody> structure
Checkboxes have aria-label for accessibility
Sort icons rendered with aria-sort="none" (values: none, ascending, descending, other, auto per ARIA 1.2)

Table
Checkbox
Input (search)

Shadcn reference

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

← Back to Gallery