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 |
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()
});