dioxus_bootstrap_css/
table.rs

1use dioxus::prelude::*;
2
3use crate::types::{Color, Size};
4
5/// Bootstrap Table component.
6///
7/// ```rust
8/// rsx! {
9///     Table { striped: true, hover: true, responsive: true,
10///         thead {
11///             tr {
12///                 th { "Name" }
13///                 th { "Status" }
14///             }
15///         }
16///         tbody {
17///             tr {
18///                 td { "Service A" }
19///                 td { "Running" }
20///             }
21///         }
22///     }
23/// }
24/// ```
25#[derive(Clone, PartialEq, Props)]
26pub struct TableProps {
27    /// Striped rows.
28    #[props(default)]
29    pub striped: bool,
30    /// Highlight rows on hover.
31    #[props(default)]
32    pub hover: bool,
33    /// Add borders to all cells.
34    #[props(default)]
35    pub bordered: bool,
36    /// Remove all borders.
37    #[props(default)]
38    pub borderless: bool,
39    /// Compact table with smaller padding.
40    #[props(default)]
41    pub size: Size,
42    /// Table color variant.
43    #[props(default)]
44    pub color: Option<Color>,
45    /// Wrap in a responsive container for horizontal scrolling.
46    #[props(default)]
47    pub responsive: bool,
48    /// Additional CSS classes.
49    #[props(default)]
50    pub class: String,
51    /// Child elements (thead, tbody, etc.).
52    pub children: Element,
53}
54
55#[component]
56pub fn Table(props: TableProps) -> Element {
57    let mut classes = vec!["table".to_string()];
58
59    if props.striped {
60        classes.push("table-striped".to_string());
61    }
62    if props.hover {
63        classes.push("table-hover".to_string());
64    }
65    if props.bordered {
66        classes.push("table-bordered".to_string());
67    }
68    if props.borderless {
69        classes.push("table-borderless".to_string());
70    }
71    if let Size::Sm = props.size {
72        classes.push("table-sm".to_string());
73    }
74    if let Some(ref c) = props.color {
75        classes.push(format!("table-{c}"));
76    }
77    if !props.class.is_empty() {
78        classes.push(props.class.clone());
79    }
80
81    let full_class = classes.join(" ");
82
83    if props.responsive {
84        rsx! {
85            div { class: "table-responsive",
86                table { class: "{full_class}", {props.children} }
87            }
88        }
89    } else {
90        rsx! {
91            table { class: "{full_class}", {props.children} }
92        }
93    }
94}
dioxus_bootstrap_css/table.rs

dioxus_bootstrap_css/
table.rs
