tablo-ui 0.8.0

The Topcoat components Tablo renders: primitives synced from topcoat-ui-registry, plus its own composites.
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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179

// SYNC: topcoat-ui-registry@0.11.0 sha256:1bb770c77662b17b71a1a2c574917b177dcaab9e5d73dae274d59405e9f02ae4 — do not hand-edit. Sync via `cargo xtask sync-topcoat-ui` (ADR-0007).
use topcoat::{
    Result,
    view::{Attributes, Child, View, class, component, view},
};

/// A table inside a horizontally scrollable container.
///
/// Extra padding on the left and right aligns the cells with a card's content.
/// Top and bottom borders separate the table from neighboring elements. A border
/// is omitted when the table is the first or last child on that side.
///
/// Pass table sections as children. `attrs` are forwarded to the `<table>`, with extra
/// classes added to its classes.
///
/// ```ignore
/// view! {
///     table(
///         table_header(
///             table_row(
///                 table_head("Environment")
///                 table_head("Status")
///             )
///         )
///         table_body(
///             table_row(
///                 table_cell("production")
///                 table_cell("Live")
///             )
///         )
///     )
/// }
/// ```
#[component]
pub async fn table(
    #[default] mut attrs: Attributes,
    #[default] child: Child<'_>,
) -> Result<impl View> {
    Ok(view! {
        <div data-slot="table" class="w-full overflow-x-auto">
            // Put borders on the table so the caption stays outside them.
            <table
                class=(class!(
                    "w-full caption-bottom border-collapse border-border text-sm",
                    "[:not(:first-child)>&]:border-t [:not(:last-child)>&]:border-b",
                    attrs.remove("class"),
                ))
                (attrs)
            >
                (child)
            </table>
        </div>
    })
}

/// The heading section of a [`table`], holding the row of column headers.
#[component]
pub async fn table_header(
    #[default] mut attrs: Attributes,
    #[default] child: Child<'_>,
) -> Result<impl View> {
    Ok(view! {
        <thead
            class=(class!("bg-foreground/5 [&_tr]:border-b", attrs.remove("class")))
            (attrs)
        >
            (child)
        </thead>
    })
}

/// The body of a table, containing data rows.
#[component]
pub async fn table_body(
    #[default] mut attrs: Attributes,
    #[default] child: Child<'_>,
) -> Result<impl View> {
    Ok(view! {
        <tbody
            class=(class!("[&_tr:last-child]:border-0", attrs.remove("class")))
            (attrs)
        >
            (child)
        </tbody>
    })
}

/// The closing section of a [`table`], for totals and other summaries.
#[component]
pub async fn table_footer(
    #[default] mut attrs: Attributes,
    #[default] child: Child<'_>,
) -> Result<impl View> {
    Ok(view! {
        <tfoot
            class=(class!(
                "border-t border-border bg-foreground/5 font-medium [&>tr]:last:border-b-0",
                attrs.remove("class"),
            ))
            (attrs)
        >
            (child)
        </tfoot>
    })
}

/// A table row with a separator and hover styling.
#[component]
pub async fn table_row(
    #[default] mut attrs: Attributes,
    #[default] child: Child<'_>,
) -> Result<impl View> {
    Ok(view! {
        <tr
            class=(class!(
                "border-b border-border transition-colors hover:bg-foreground/5",
                attrs.remove("class"),
            ))
            (attrs)
        >
            (child)
        </tr>
    })
}

/// A column header in a [`table_header`]'s row.
#[component]
pub async fn table_head(
    #[default] mut attrs: Attributes,
    #[default] child: Child<'_>,
) -> Result<impl View> {
    Ok(view! {
        <th
            class=(class!(
                "p-3 text-left align-middle font-medium whitespace-nowrap",
                "text-muted-foreground first:pl-6 last:pr-6",
                attrs.remove("class"),
            ))
            (attrs)
        >
            (child)
        </th>
    })
}

/// One cell of a [`table_row`].
#[component]
pub async fn table_cell(
    #[default] mut attrs: Attributes,
    #[default] child: Child<'_>,
) -> Result<impl View> {
    Ok(view! {
        <td
            class=(class!(
                "p-3 align-middle whitespace-nowrap first:pl-6 last:pr-6",
                attrs.remove("class"),
            ))
            (attrs)
        >
            (child)
        </td>
    })
}

/// A caption describing the table.
#[component]
pub async fn table_caption(
    #[default] mut attrs: Attributes,
    #[default] child: Child<'_>,
) -> Result<impl View> {
    Ok(view! {
        <caption
            class=(class!("mt-4 text-sm text-muted-foreground", attrs.remove("class")))
            (attrs)
        >
            (child)
        </caption>
    })
}