[yew-devel] [PATCH yew-widget-toolkit 1/2] widget: data table: column: allow setting vertical align

[yew-devel] [PATCH yew-widget-toolkit 1/2] widget: data table: column: allow setting vertical align

[Dominik Csapak]

by default the vertical align is set to 'baseline', which is good for
text, but if we want to render something else in a column (e.g. a
`Meter`) we must use 'middle' otherwise the element will be also aligned
on the baseline making it not centered.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 src/widget/data_table/column.rs | 14 ++++++++++++++
 src/widget/data_table/row.rs    |  6 +++++-
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/widget/data_table/column.rs b/src/widget/data_table/column.rs
index 1b95c3e..d702576 100644
--- a/src/widget/data_table/column.rs
+++ b/src/widget/data_table/column.rs
@@ -30,6 +30,9 @@ pub struct DataTableColumn<T: 'static> {
     /// Horizontal table cell justification (start, end, left, center, right, justify).
     #[prop_or(AttrValue::Static("start"))]
     pub justify: AttrValue,
+    /// Vertical table cell align ("top", "bottom", "middle", "baseline").
+    #[prop_or_default]
+    pub vertical_align: Option<AttrValue>,
 
     // only internal, use `apply_render` instead
     render_cell: DataTableCellRenderer<T>,
@@ -196,6 +199,17 @@ impl<T: 'static> DataTableColumn<T> {
         self.justify = justify.into();
     }
 
+    /// Builder style method to set the vertical cell alignment.
+    pub fn vertical_align(mut self, vertical_align: impl IntoPropValue<Option<AttrValue>>) -> Self {
+        self.set_vertical_align(vertical_align);
+        self
+    }
+
+    /// Method to set the vertical cell alignment.
+    pub fn set_vertical_align(&mut self, vertical_align: impl IntoPropValue<Option<AttrValue>>) {
+        self.vertical_align = vertical_align.into_prop_value();
+    }
+
     /// Builder style method to set the render function.
     pub fn render(self, render: impl Into<RenderFn<T>>) -> Self {
         let render = render.into();
diff --git a/src/widget/data_table/row.rs b/src/widget/data_table/row.rs
index 2770eb9..34bbbdf 100644
--- a/src/widget/data_table/row.rs
+++ b/src/widget/data_table/row.rs
@@ -128,7 +128,11 @@ impl<T: Clone + PartialEq + 'static> Component for PwtDataTableRow<T> {
                 continue;
             }
 
-            let vertical_align = props.vertical_align.to_owned().unwrap_or("baseline".into());
+            let vertical_align = props
+                .vertical_align
+                .to_owned()
+                .or(column.vertical_align.clone())
+                .unwrap_or("baseline".into());
             let text_align = column.justify.to_owned();
 
             let cell_active = match props.active_cell {
-- 
2.47.2



_______________________________________________
yew-devel mailing list
yew-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/yew-devel

[yew-devel] [PATCH yew-widget-toolkit 2/2] widget: data table: tree column: don't propagate clicks when expanding

[Dominik Csapak]

and collapsing. This only matters if there is e.g. a row_click set on
the table, but even in those cases we don't want to trigger that when
the user expands/collapes tree elements.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 src/widget/data_table/mod.rs | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/widget/data_table/mod.rs b/src/widget/data_table/mod.rs
index 8437aea..5c8a2a1 100644
--- a/src/widget/data_table/mod.rs
+++ b/src/widget/data_table/mod.rs
@@ -100,9 +100,10 @@ pub(crate) fn render_tree_node_impl<T>(
         let onclick = {
             let key = args.record_key.clone();
             let tree_store = tree_store;
-            move |_| {
+            move |event: MouseEvent| {
                 if let Some(store) = &tree_store {
                     if let Some(mut node) = store.write().lookup_node_mut(&key) {
+                        event.stop_propagation();
                         node.set_expanded(!node.expanded());
                     }
                 }
-- 
2.47.2



_______________________________________________
yew-devel mailing list
yew-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/yew-devel

[yew-devel] applied: [PATCH yew-widget-toolkit 1/2] widget: data table: column: allow setting vertical align

[Thomas Lamprecht]

On Tue, 09 Sep 2025 10:16:39 +0200, Dominik Csapak wrote:
> by default the vertical align is set to 'baseline', which is good for
> text, but if we want to render something else in a column (e.g. a
> `Meter`) we must use 'middle' otherwise the element will be also aligned
> on the baseline making it not centered.
> 
> 

Applied, thanks!

[1/2] widget: data table: column: allow setting vertical align
      commit: 3a2010a4f1d11a1c1fb4fbca23316bf656d5557d
[2/2] widget: data table: tree column: don't propagate clicks when expanding
      commit: 7a5bf16468df77f6723c674dc0023c54620c941f


_______________________________________________
yew-devel mailing list
yew-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/yew-devel