leptos_struct_table/components/
thead.rs

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
use crate::wrapper_render_fn;
use crate::{ColumnSort, TableHeadEvent};
use leptos::prelude::*;

wrapper_render_fn!(
    /// thead
    DefaultTableHeadRenderer,
    thead,
);

wrapper_render_fn!(
    /// thead row
    DefaultTableHeadRowRenderer,
    tr,
);

/// The default table header renderer. Renders roughly
/// ```html
/// <th>
///    <span>Title</span>
/// </th>
/// ```
#[component]
pub fn DefaultTableHeaderCellRenderer<F>(
    /// The class attribute for the head element. Generated by the classes provider.
    #[prop(into)]
    class: Signal<String>,
    /// The class attribute for the inner element. Generated by the classes provider.
    #[prop(into)]
    inner_class: String,
    /// The index of the column. Starts at 0 for the first column. The order of the columns is the same as the order of the fields in the struct.
    index: usize,
    /// The sort priority of the column. `None` if the column is not sorted. `0` means the column is the primary sort column.
    #[prop(into)]
    sort_priority: Signal<Option<usize>>,
    /// The sort direction of the column. See [`ColumnSort`].
    #[prop(into)]
    sort_direction: Signal<ColumnSort>,
    /// The event handler for the click event. Has to be called with [`TableHeadEvent`].
    on_click: F,
    children: Children,
) -> impl IntoView
where
    F: Fn(TableHeadEvent) + 'static,
{
    let style = default_th_sorting_style(sort_priority, sort_direction);

    view! {
        <th class=class
            on:click=move |mouse_event| on_click(TableHeadEvent {
                index,
                mouse_event,
            })
            style=style
        >
            <span class=inner_class>
                {children()}
            </span>
        </th>
    }
}

/// You can use this function to implement your own custom table header cell renderer.
///
/// See the implementation of [`DefaultTableHeaderCellRenderer`].
pub fn default_th_sorting_style(
    sort_priority: Signal<Option<usize>>,
    sort_direction: Signal<ColumnSort>,
) -> Signal<String> {
    Signal::derive(move || {
        let sort = match sort_direction.get() {
            ColumnSort::Ascending => "--sort-icon: '▲';",
            ColumnSort::Descending => "--sort-icon: '▼';",
            ColumnSort::None => "--sort-icon: '';",
        };

        let priority = match sort_priority.get() {
            Some(priority) => format!("--sort-priority: '{}';", priority + 1),
            None => "--sort-priority: '';".to_string(),
        };

        format!("{} {}", sort, &priority)
    })
}