table-rs 0.0.5

📋 A highly customizable table component for WASM frameworks like Yew, Dioxus, and Leptos.
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108

use crate::dioxus::types::Column;
use crate::dioxus::types::SortOrder;
use crate::dioxus::types::TableClasses;
use dioxus::prelude::*;

/// A table header component that renders sortable column headers for use within the `Table` component.
///
/// This component produces the `<thead>` section of a table using the provided column definitions,
/// handling rendering, sorting indicators (`aria-sort`), and user interaction to trigger sort changes.
///
/// # Props
/// - `columns`: A `Vec<Column>` defining the columns to display in the header. Each `Column` may be sortable and have optional styles or class overrides.
/// - `sort_column`: A `Signal<Option<&'static str>>` indicating which column (if any) is currently being sorted.
/// - `sort_order`: A `Signal<SortOrder>` indicating the current sort direction (`Asc` or `Desc`).
/// - `on_sort_column`: An `EventHandler<&'static str>` triggered when a sortable header cell is clicked. The column ID is passed as the event payload.
/// - `classes`: A `TableClasses` struct allowing custom class names for `<thead>`, `<tr>`, and `<th>` elements.
///
/// # Behavior
/// - Sortable columns show proper `aria-sort` attributes for accessibility (`ascending`, `descending`, or `none`).
/// - Clicking a sortable column emits an event to update sort state.
/// - Each column can override default styles and classes via `Column::style` and `Column::class`.
///
/// # Returns
/// Returns a `Dioxus` `Element` containing the `<thead>` with all column headers rendered as `<th>` elements.
///
/// # Example
/// ```rust
/// use dioxus::prelude::*;
/// use maplit::hashmap;
/// use table_rs::dioxus::table::Table;
/// use table_rs::dioxus::types::{Column, TableClasses, SortOrder};
/// use table_rs::dioxus::header::TableHeader;
///
///
/// fn App() -> Element {
///     let columns = vec![
///         Column { id: "name", header: "Name", sortable: true, ..Default::default() },
///         Column { id: "email", header: "Email", sortable: false, ..Default::default() },
///     ];
///
///     let sort_column = use_signal(|| Some("name"));
///     let sort_order = use_signal(|| SortOrder::Asc);
///
///     rsx! {
///         TableHeader {
///             columns: columns,
///             sort_column: sort_column,
///             sort_order: sort_order,
///             on_sort_column: move |col_id| println!("Sort column changed: {}", col_id),
///             classes: TableClasses::default(),
///         }
///     }
/// }
/// ```
///
/// # See Also
/// - [MDN `<thead>` Element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/thead)
#[component]
pub fn TableHeader(
    columns: Vec<Column>,
    sort_column: Signal<Option<&'static str>>,
    sort_order: Signal<SortOrder>,
    on_sort_column: EventHandler<&'static str>,
    classes: TableClasses,
) -> Element {
    let header_cells = columns.iter().map(|col| {
        let col_id = col.id;
        let is_sorted = sort_column() == Some(col_id);
        let aria_sort = if is_sorted {
            match sort_order() {
                SortOrder::Asc => "ascending",
                SortOrder::Desc => "descending",
            }
        } else {
            "none"
        };

        let class = format!("{} {}", classes.header_cell, col.class.unwrap_or_default());
        let style = col.style.unwrap_or_default();
        let header = col.header;

        let onclick = if col.sortable {
            Callback::new(move |_| on_sort_column.call(col_id))
        } else {
            Callback::new(|_| {})
        };

        rsx! {
            th {
                key: "{col_id}",
                role: "columnheader",
                class: "{class}",
                style: "{style}",
                aria_sort: "{aria_sort}",
                onclick: onclick,
                "{header}"
            }
        }
    });

    rsx! {
        thead { class: "{classes.thead}",
            tr { class: "{classes.row}", role: "row",
                {header_cells}
            }
        }
    }
}