[yew-devel] [PATCH yew-widget-toolkit 2/2] widget: data table: add table scroll callback

[Dominik Csapak <d.csapak@proxmox.com>]

sometimes it's useful to do things on scrolling, e.g. when wanting to
load additional data when at the end of the table.

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

diff --git a/src/widget/data_table/data_table.rs b/src/widget/data_table/data_table.rs
index f926955..cb0f781 100644
--- a/src/widget/data_table/data_table.rs
+++ b/src/widget/data_table/data_table.rs
@@ -7,7 +7,7 @@ use derivative::Derivative;
 use gloo_timers::callback::Timeout;
 use wasm_bindgen::JsCast;
 
-use yew::html::IntoPropValue;
+use yew::html::{IntoEventCallback, IntoPropValue};
 use yew::prelude::*;
 use yew::virtual_dom::{Key, VComp, VNode};
 
@@ -212,6 +212,10 @@ pub struct DataTable<S: DataStore> {
 
     #[prop_or_default]
     pub multiselect_mode: MultiSelectMode,
+
+    /// Table scroll callback
+    #[prop_or_default]
+    pub on_table_scroll: Option<Callback<Event>>,
 }
 
 impl<S: DataStore> AsClassesMut for DataTable<S> {
@@ -456,6 +460,12 @@ impl<S: DataStore> DataTable<S> {
         self.set_multiselect_mode(multiselect_mode);
         self
     }
+
+    /// Builder style method to set the table scroll callback.
+    pub fn on_table_scroll(mut self, cb: impl IntoEventCallback<Event>) -> Self {
+        self.on_table_scroll = cb.into_event_callback();
+        self
+    }
 }
 
 #[derive(Default)]
@@ -1602,8 +1612,18 @@ impl<S: DataStore + 'static> Component for PwtDataTable<S> {
         let column_widths =
             self.column_widths.iter().sum::<f64>() + self.scrollbar_size.unwrap_or_default();
 
+        let on_scroll = {
+            let on_scroll = props.on_table_scroll.clone();
+            move |event: Event| {
+                if let Some(on_scroll) = &on_scroll {
+                    on_scroll.emit(event);
+                }
+            }
+        };
+
         let viewport = Container::new()
             .node_ref(self.scroll_ref.clone())
+            .onscroll(on_scroll)
             .key(Key::from("table-viewport"))
             .class("pwt-flex-fill")
             .style(
-- 
2.39.5



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