added reactive data tracking to data providers

Author: maccesch

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [0.8.2] - 2024-02-18
+
+### Feature 🚀
+
+- Added method `TableDataProvider::track` to easily specify reactive dependencies of data loading
+
 ## [0.8.1] - 2024-02-17
 
 ### Fix 🐛

Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "leptos-struct-table"
-version = "0.8.1"
+version = "0.8.2"
 edition = "2021"
 authors = ["Marc-Stefan Cassola"]
 categories = ["gui", "web-programming"]

examples/paginated_rest_datasource/Cargo.toml

@@ -5,6 +5,7 @@ edition = "2021"
 
 [dependencies]
 leptos = { version = "0.6", features = ["nightly", "csr"] }
+leptos-use = "0.10"
 leptos-struct-table = { path = "../..", features = ["chrono"] }
 console_error_panic_hook = "0.1"
 console_log = "1"

examples/paginated_rest_datasource/src/data_provider.rs

@@ -1,18 +1,20 @@
 use crate::models::{ArchiveOrgApiResponse, ArchiveOrgCountRespone, Book};
 use async_trait::async_trait;
 use gloo_net::http::Request;
-use leptos::logging;
+use leptos::*;
 use leptos_struct_table::{ColumnSort, PaginatedTableDataProvider};
 use std::collections::VecDeque;
 
 pub struct BookDataProvider {
     sorting: VecDeque<(usize, ColumnSort)>,
+    pub search: RwSignal<String>,
 }
 
 impl Default for BookDataProvider {
     fn default() -> Self {
         Self {
             sorting: VecDeque::new(),
+            search: RwSignal::new("lewis".to_string()),
         }
     }
 }
@@ -47,14 +49,15 @@ impl BookDataProvider {
         }
 
         format!(
-            "https://archive.org/advancedsearch.php?q=creator%3A%28Lewis%29&fl%5B%5D=creator&fl%5B%5D=identifier&fl%5B%5D=publicdate&fl%5B%5D=title{sort}&rows={}&page={}&output=json&callback=",
+            "https://archive.org/advancedsearch.php?q=creator%3A%28{}%29&fl%5B%5D=creator&fl%5B%5D=identifier&fl%5B%5D=publicdate&fl%5B%5D=title{sort}&rows={}&page={}&output=json&callback=",
+            self.search.get_untracked(),
             Self::PAGE_ROW_COUNT,
             page_index + 1,
         )
     }
 }
 
-#[async_trait(?Send)]
+#[async_trait(? Send)]
 impl PaginatedTableDataProvider<Book> for BookDataProvider {
     const PAGE_ROW_COUNT: usize = 50;
 
@@ -97,4 +100,9 @@ impl PaginatedTableDataProvider<Book> for BookDataProvider {
     fn set_sorting(&mut self, sorting: &VecDeque<(usize, ColumnSort)>) {
         self.sorting = sorting.clone();
     }
+
+    fn track(&self) {
+        // we depend on the search so we need to track it here
+        self.search.track();
+    }
 }

examples/paginated_rest_datasource/src/main.rs

@@ -6,6 +6,7 @@ use crate::data_provider::BookDataProvider;
 use leptos::html::Div;
 use leptos::*;
 use leptos_struct_table::*;
+use leptos_use::use_debounce_fn_with_arg;
 
 #[component]
 pub fn App() -> impl IntoView {
@@ -21,10 +22,24 @@ pub fn App() -> impl IntoView {
 
     let (count, set_count) = create_signal(0);
 
+    let on_input = use_debounce_fn_with_arg(move |value| rows.search.set(value), 300.0);
+
     view! {
         <div class="container">
             <div class="top-bar">
                 <button on:click=reload>"Reload"</button>
+                <div id="search">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                        // !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.
+                        <path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/>
+                    </svg>
+                    <input
+                        type="search"
+                        placeholder="Search"
+                        on:input=move |e| { on_input(event_target_value(&e)); }
+                        value=rows.search
+                    />
+                </div>
                 <Show when=move || { count() > 0 }>
                     <div>"Found " {count} " results"</div>
                 </Show>

examples/paginated_rest_datasource/style.css

@@ -1,5 +1,6 @@
 body, html {
     font-family: sans-serif;
+    font-size: 11pt;
     height: 100vh;
     margin: 0;
     padding: 0;
@@ -17,11 +18,37 @@ body, html {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 0.5rem 1rem;
+    padding: 10px 15px;
     background: white;
     border-bottom: 1px solid silver;
 }
 
+#search {
+    display: flex;
+    border: 1px solid silver;
+    border-radius: 1000px;
+    align-items: center;
+    padding-left: 7px;
+}
+
+#search > * {
+    display: block;
+}
+
+#search > svg {
+    height: 16px;
+    opacity: 0.5;
+}
+
+input[type="search"] {
+    min-width: 50%;
+    border: 0 none;
+    appearance: none;
+    padding: 5px 15px 5px 5px;
+    background: transparent;
+    outline: none;
+}
+
 .table-container {
     flex: 1;
     overflow: auto;
@@ -42,7 +69,8 @@ th {
     position: sticky;
     top: 0;
     width: 20%;
-    padding: 5px 0;
+    padding: 10px 15px;
+    text-align: left;
     border-bottom: 1px solid silver;
 }
 
@@ -55,7 +83,7 @@ td {
     overflow: hidden;
     text-overflow: ellipsis;
     width: 20%;
-    padding: 4px 5px;
+    padding: 10px 15px;
 }
 
 td:first-child {

src/components/table_content.rs

@@ -187,16 +187,22 @@ where
 
     let first_selected_index = create_rw_signal(None::<usize>);
 
-    let (do_reload, set_reload) = create_signal(false);
-    let clear = move || {
+    let (row_count, set_row_count) = create_signal(None::<usize>);
+
+    let (reload_count, set_reload_count) = create_signal(0_usize);
+    let clear = move |clear_row_count: bool| {
         selection.clear();
         first_selected_index.set(None);
 
         loaded_rows.update(|loaded_rows| {
             loaded_rows.clear();
         });
 
-        set_reload.set(true);
+        if clear_row_count {
+            set_row_count.set(None);
+        }
+
+        set_reload_count.set(reload_count.get().overflowing_add(1).0);
     };
 
     let on_head_click = {
@@ -207,14 +213,19 @@ where
 
             rows.borrow_mut().set_sorting(&sorting());
 
-            clear();
+            clear(false);
         }
     };
 
-    create_effect(move |_| {
-        // triggered when `ReloadController::reload()` is called
-        reload_controller.track();
-        clear();
+    create_effect({
+        let rows = Rc::clone(&rows);
+
+        move |_| {
+            // triggered when `ReloadController::reload()` is called
+            reload_controller.track();
+            rows.borrow().track();
+            clear(true);
+        }
     });
 
     let selected_indices = match selection {
@@ -238,8 +249,6 @@ where
         UseElementSizeOptions::default().box_(web_sys::ResizeObserverBoxOptions::ContentBox),
     );
 
-    let (row_count, set_row_count) = create_signal(None::<usize>);
-
     let set_known_row_count = move |row_count: usize| {
         set_row_count.set(Some(row_count));
         loaded_rows.update(|loaded_rows| loaded_rows.resize(row_count));
@@ -335,15 +344,13 @@ where
         let first_visible_row_index = first_visible_row_index.get();
         let visible_row_count = visible_row_count.get();
 
+        // with this a reload triggers this effect
+        reload_count.track();
+
         if visible_row_count == 0 {
             return;
         }
 
-        // with this a reload triggers this effect
-        if do_reload.get() {
-            set_reload.set_untracked(false);
-        }
-
         let mut start = first_visible_row_index.saturating_sub(visible_row_count * 2);
 
         let mut end = start + visible_row_count * 5;
@@ -411,12 +418,19 @@ where
                     let set_known_row_count = set_known_row_count.clone();
 
                     async move {
+                        let latest_reload_count = reload_count.get_untracked();
+
                         let result = rows
                             .borrow()
                             .get_rows(missing_range.clone())
                             .await
                             .map_err(|err| format!("{err:?}"));
 
+                        // make sure the loaded data is still valid
+                        if reload_count.get_untracked() != latest_reload_count {
+                            return;
+                        }
+
                         if let Ok((_, loaded_range)) = &result {
                             if loaded_range.end < missing_range.end {
                                 if let Some(row_count) = row_count.get_untracked() {

src/data_provider.rs

@@ -57,6 +57,12 @@ pub trait TableDataProvider<Row, Err: Debug = String> {
     fn set_sorting(&mut self, sorting: &VecDeque<(usize, ColumnSort)>) {
         // by default do nothing
     }
+
+    /// Call `.track()` in this method on all signals that loading data relies on.
+    /// For example a search of filters. Please check the [paginated_rest_datasource example](https://github.com/Synphonyte/leptos-struct-table/blob/master/examples/paginated_rest_datasource/src/data_provider.rs)
+    fn track(&self) {
+        // by default do nothing
+    }
 }
 
 /// A paginated data source. This is meant to provide a more convenient way
@@ -100,6 +106,11 @@ pub trait PaginatedTableDataProvider<Row, Err: Debug = String> {
     fn set_sorting(&mut self, sorting: &VecDeque<(usize, ColumnSort)>) {
         // by default do nothing
     }
+
+    /// Same as [`TableDataProvider::track`]
+    fn track(&self) {
+        // by default do nothing
+    }
 }
 
 #[async_trait(? Send)]
@@ -129,6 +140,10 @@ where
     fn set_sorting(&mut self, sorting: &VecDeque<(usize, ColumnSort)>) {
         PaginatedTableDataProvider::<Row, Err>::set_sorting(self, sorting)
     }
+
+    fn track(&self) {
+        PaginatedTableDataProvider::<Row, Err>::track(self)
+    }
 }
 
 /// Return `vec[range.start..range.end]` where `range` is clamped to the length of `vec`.

src/loaded_rows.rs

@@ -66,7 +66,12 @@ impl<T: Clone> LoadedRows<T> {
                 }
             }
             Err(error) => {
-                for row in &mut self.rows[missing_range] {
+                let range = missing_range.start..missing_range.end.min(self.rows.len());
+                if range.start >= range.end {
+                    return;
+                }
+
+                for row in &mut self.rows[range] {
                     *row = RowState::Error(error.clone());
                 }
             }