diff --git a/crates/components/src/table.rs b/crates/components/src/table.rs
index 0ca984760..dee8fea24 100644
--- a/crates/components/src/table.rs
+++ b/crates/components/src/table.rs
@@ -1,11 +1,13 @@
use dioxus::prelude::*;
use freya_elements::elements as dioxus_elements;
use freya_elements::events::MouseEvent;
+use freya_hooks::{use_get_theme, TableTheme};
#[allow(non_snake_case)]
#[inline_props]
fn TableArrow(cx: Scope, order_direction: OrderDirection) -> Element {
- let color = "rgb(40, 40, 40)";
+ let theme = use_get_theme(cx);
+ let TableTheme { arrow_fill, .. } = theme.table;
let rotate = match order_direction {
OrderDirection::Down => "0",
OrderDirection::Up => "180",
@@ -17,7 +19,7 @@ fn TableArrow(cx: Scope, order_direction: OrderDirection) -> Element {
rotate: "{rotate}deg",
svg_content: r#"
"#
})
@@ -69,10 +71,17 @@ pub struct TableRowProps<'a> {
#[allow(non_snake_case)]
pub fn TableRow<'a>(cx: Scope<'a, TableRowProps<'a>>) -> Element {
+ let theme = use_get_theme(cx);
+ let TableTheme {
+ divider_fill,
+ alternate_row_background,
+ row_background,
+ ..
+ } = theme.table;
let background = if cx.props.alternate_colors {
- "rgb(240, 240, 240)"
+ alternate_row_background
} else {
- "transparent"
+ row_background
};
render!(
rect {
@@ -85,7 +94,7 @@ pub fn TableRow<'a>(cx: Scope<'a, TableRowProps<'a>>) -> Element {
rect {
height: "1",
width: "100%",
- background: "rgb(200, 200, 200)"
+ background: "{divider_fill}"
}
)
}
@@ -107,23 +116,25 @@ pub struct TableCellProps<'a> {
/// The direction in which this TableCell's column will be ordered.
#[props(into)]
order_direction: Option>,
- /// Show a line separator to the left of this TableCell.
+ /// Show a line divider to the left of this TableCell.
#[props(default = true, into)]
- separator: bool,
+ divider: bool,
}
#[allow(non_snake_case)]
pub fn TableCell<'a>(cx: Scope<'a, TableCellProps<'a>>) -> Element {
+ let theme = use_get_theme(cx);
+ let TableTheme { divider_fill, .. } = theme.table;
let config = cx.consume_context::().unwrap();
let width = 100.0 / config.columns as f32;
render!(
- if cx.props.separator {
+ if cx.props.divider {
rsx!(
rect {
width: "1",
height: "35",
- background: "rgb(200, 200, 200)"
+ background: "{divider_fill}"
}
)
}
@@ -170,6 +181,10 @@ pub struct TableProps<'a> {
#[allow(non_snake_case)]
pub fn Table<'a>(cx: Scope<'a, TableProps<'a>>) -> Element {
+ let theme = use_get_theme(cx);
+ let TableTheme {
+ background, color, ..
+ } = theme.table;
cx.provide_context(TableConfig {
columns: cx.props.columns,
});
@@ -178,7 +193,8 @@ pub fn Table<'a>(cx: Scope<'a, TableProps<'a>>) -> Element {
render!(
rect {
overflow: "clip",
- background: "white",
+ color: "{color}",
+ background: "{background}",
corner_radius: "6",
shadow: "0 2 15 5 rgb(35, 35, 35, 70)",
height: "{height}",
diff --git a/crates/hooks/src/use_theme.rs b/crates/hooks/src/use_theme.rs
index 34b50ecd5..d77907d1d 100644
--- a/crates/hooks/src/use_theme.rs
+++ b/crates/hooks/src/use_theme.rs
@@ -122,6 +122,17 @@ pub struct ProgressBarTheme {
pub progress_background: &'static str,
}
+/// Theming properties for Table component.
+#[derive(Clone, Debug, PartialEq, Eq)]
+pub struct TableTheme {
+ pub color: &'static str,
+ pub background: &'static str,
+ pub arrow_fill: &'static str,
+ pub alternate_row_background: &'static str,
+ pub row_background: &'static str,
+ pub divider_fill: &'static str,
+}
+
/// Theming properties for Themes.
#[derive(Clone, Debug, PartialEq, Eq)]
pub struct Theme {
@@ -138,6 +149,7 @@ pub struct Theme {
pub accordion: AccordionTheme,
pub loader: LoaderTheme,
pub progress_bar: ProgressBarTheme,
+ pub table: TableTheme,
}
impl Default for Theme {
@@ -210,6 +222,14 @@ pub const LIGHT_THEME: Theme = Theme {
background: "rgb(210, 210, 210)",
progress_background: "rgb(103, 80, 164)",
},
+ table: TableTheme {
+ color: "black",
+ background: "white",
+ arrow_fill: "rgb(40, 40, 40)",
+ row_background: "transparent",
+ alternate_row_background: "rgb(240, 240, 240)",
+ divider_fill: "rgb(200, 200, 200)",
+ },
};
/// `Dark` theme
@@ -270,4 +290,12 @@ pub const DARK_THEME: Theme = Theme {
background: "rgb(60, 60, 60)",
progress_background: "rgb(255, 95, 0)",
},
+ table: TableTheme {
+ color: "white",
+ background: "rgb(25, 25, 25)",
+ arrow_fill: "rgb(150, 150, 150)",
+ row_background: "transparent",
+ alternate_row_background: "rgb(50, 50, 50)",
+ divider_fill: "rgb(100, 100, 100)",
+ },
};
diff --git a/examples/table.rs b/examples/table.rs
index eeff0285c..40acff1f4 100644
--- a/examples/table.rs
+++ b/examples/table.rs
@@ -34,51 +34,15 @@ fn app(cx: Scope) -> Element {
let order = use_state(cx, || OrderBy::Name);
let data = use_state(cx, || {
vec![
- vec![
- "aaaa".to_string(),
- "bbbb".to_string(),
- "111".to_string(),
- ],
- vec![
- "bbbb".to_string(),
- "aaaa".to_string(),
- "333".to_string(),
- ],
- vec![
- "wwww".to_string(),
- "777".to_string(),
- "ccc".to_string(),
- ],
- vec![
- "dddd".to_string(),
- "222".to_string(),
- "111".to_string(),
- ],
- vec![
- "hhhh".to_string(),
- "444".to_string(),
- "aaa".to_string(),
- ],
- vec![
- "555".to_string(),
- "ffff".to_string(),
- "zzzz".to_string(),
- ],
- vec![
- "llll".to_string(),
- "999".to_string(),
- "eeee".to_string(),
- ],
- vec![
- "abcd".to_string(),
- "987".to_string(),
- "wwww".to_string(),
- ],
- vec![
- "rrrr".to_string(),
- "333".to_string(),
- "888".to_string(),
- ],
+ vec!["aaaa".to_string(), "bbbb".to_string(), "111".to_string()],
+ vec!["bbbb".to_string(), "aaaa".to_string(), "333".to_string()],
+ vec!["wwww".to_string(), "777".to_string(), "ccc".to_string()],
+ vec!["dddd".to_string(), "222".to_string(), "111".to_string()],
+ vec!["hhhh".to_string(), "444".to_string(), "aaa".to_string()],
+ vec!["555".to_string(), "ffff".to_string(), "zzzz".to_string()],
+ vec!["llll".to_string(), "999".to_string(), "eeee".to_string()],
+ vec!["abcd".to_string(), "987".to_string(), "wwww".to_string()],
+ vec!["rrrr".to_string(), "333".to_string(), "888".to_string()],
]
});
let columns = cx.use_hook(|| {
@@ -132,7 +96,7 @@ fn app(cx: Scope) -> Element {
for (n, (text, order_by)) in columns.iter().enumerate() {
TableCell {
key: "{n}",
- separator: n > 0,
+ divider: n > 0,
order_direction: if *order.get() == *order_by { Some(*order_direction.get()) } else { None },
onclick: move |_| on_column_head_click(order_by),
label {
@@ -153,7 +117,7 @@ fn app(cx: Scope) -> Element {
for (n, item) in items.iter().enumerate() {
TableCell {
key: "{n}",
- separator: n > 0,
+ divider: n > 0,
label {
width: "100%",
align: "right",