ported all examples and some fixes for leptos 0.7

Author: maccesch

.idea/leptos-struct-table.iml

@@ -13,8 +13,8 @@ repository = "https://github.com/Synphonyte/leptos-struct-table"
 
 [dependencies]
 leptos = { version = "0.7.0" }
-leptos-struct-table-macro = { version = "0.12" }
-leptos-use = "0.15.0"
+leptos-struct-table-macro = { version = "0.12.0", path = "../leptos-struct-table-macro" }
+leptos-use = { version = "0.15.0", path = "../leptos-use" }
 rust_decimal = { version = "1.35", optional = true }
 chrono = { version = "0.4", optional = true }
 send_wrapper = "0.6"

Cargo.toml

@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = { version = "0.6", features = ["csr"]}
+leptos = { version = "0.7", features = ["csr"]}
 leptos-struct-table = { path = "../..", features = ["chrono"] }
 chrono = { version = "0.4" }
 console_error_panic_hook = "0.1"

examples/bootstrap/Cargo.toml

@@ -51,7 +51,7 @@ fn main() {
         view! {
             <div class="container".to_string()>
                 <table class="table-hover">
-                    <TableContent rows />
+                    <TableContent rows scroll_container="html" />
                 </table>
             </div>
         }

examples/bootstrap/src/main.rs

@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = { version = "0.6", features = ["csr"]}
+leptos = { version = "0.7", features = ["csr"]}
 leptos-struct-table = { path = "../.." }
 console_error_panic_hook = "0.1"
 console_log = "1"

examples/custom_renderers_svg/Cargo.toml

@@ -45,6 +45,7 @@ fn main() {
                     thead_row_renderer=GRenderer
                     thead_renderer=GRenderer
                     tbody_renderer=SvgTbodyRenderer
+                    scroll_container="html"
                 />
             </svg>
         }

examples/custom_renderers_svg/src/main.rs

@@ -1,6 +1,5 @@
-use leptos::html::AnyElement;
 use leptos::prelude::*;
-use leptos::svg::G;
+use leptos::web_sys;
 use leptos_struct_table::*;
 
 const ROW_HEIGHT: usize = 30;
@@ -14,14 +13,11 @@ wrapper_render_fn!(
 
 #[allow(non_snake_case)]
 pub fn SvgTbodyRenderer(
-    content: Fragment,
+    content: impl IntoView,
     class: Signal<String>,
-    node_ref: NodeRef<AnyElement>,
+    body_ref: BodyRef,
 ) -> impl IntoView {
-    let tbody_ref = create_node_ref::<G>();
-    tbody_ref.on_load(move |e| node_ref.load(&e.into_any()));
-
-    view! { <g class=class node_ref=tbody_ref>{content}</g> }
+    view! { <g class=class use:body_ref>{content}</g> }
 }
 
 #[allow(unused_variables, non_snake_case)]
@@ -78,16 +74,16 @@ pub fn SvgErrorRowRenderer(err: String, index: usize, _col_count: usize) -> impl
 #[allow(non_snake_case, unstable_name_collisions)]
 pub fn SvgLoadingRowRenderer(
     class: Signal<String>,
-    _get_cell_class: Callback<usize, String>,
-    get_inner_cell_class: Callback<usize, String>,
+    _get_cell_class: Callback<(usize,), String>,
+    get_inner_cell_class: Callback<(usize,), String>,
     index: usize,
     _col_count: usize,
 ) -> impl IntoView {
     let transform = y_transform_from_index(index);
 
     view! {
         <g class=class transform=transform>
-            <text x="0" y=ROW_HEIGHT_HALF class=get_inner_cell_class.call(0) dominant-baseline="central">
+            <text x="0" y=ROW_HEIGHT_HALF class=get_inner_cell_class.run((0,)) dominant-baseline="central">
                 Loading...
             </text>
         </g>
@@ -143,12 +139,12 @@ where
 #[allow(unused_variables)]
 pub fn SvgTextCellRenderer<T, F>(
     class: String,
-    #[prop(into)] value: MaybeSignal<T>,
+    #[prop(into)] value: Signal<T>,
     on_change: F,
     index: usize,
 ) -> impl IntoView
 where
-    T: IntoView + Clone + 'static,
+    T: IntoView + Clone + Send + Sync + 'static,
     F: Fn(T) + 'static,
 {
     let x = x_from_index(index);
@@ -164,7 +160,7 @@ where
 #[allow(unused_variables)]
 pub fn SvgPathCellRenderer<F>(
     #[prop(into)] class: String,
-    #[prop(into)] value: MaybeSignal<String>,
+    #[prop(into)] value: Signal<String>,
     on_change: F,
     index: usize,
 ) -> impl IntoView

examples/custom_renderers_svg/src/renderers.rs

@@ -4,13 +4,14 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = { version = "0.6", features = ["csr"] }
+leptos = { version = "0.7", features = ["csr"] }
 leptos-struct-table = { path = "../..", features = ["chrono", "uuid"] }
 chrono = { version = "0.4" }
 uuid = { version = "1.8", features= ["v4"]}
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"
+getrandom = { version = "0.2", features = ["js"] }
 
 [dev-dependencies]
 wasm-bindgen = "0.2"

examples/custom_row_renderer/Cargo.toml

@@ -4,6 +4,7 @@
 use ::chrono::NaiveDate;
 use ::uuid::Uuid;
 use leptos::prelude::*;
+use leptos::web_sys;
 use leptos_struct_table::*;
 
 /// Custom row renderer that adds a link to the end of the row
@@ -22,10 +23,14 @@ pub fn CustomTableRowRenderer(
     // Event handler callback for changes
     on_change: EventHandler<ChangeEvent<Book>>,
 ) -> impl IntoView {
+    let id = row.id.to_string();
+
     view! {
         <tr class=class on:click=move |mouse_event| on_select.run(mouse_event)>
             {row.render_row(index, on_change)}
-            <td><a href=move || format!("/some-path/{}", row.id.to_string())>"Some link"</a></td>
+            <td>
+                <a href=move || format!("/some-path/{}", id)>"Some link"</a>
+            </td>
         </tr>
     }
 }
@@ -101,7 +106,11 @@ fn main() {
 
         view! {
             <table>
-                <TableContent rows=rows row_renderer=CustomTableRowRenderer/>
+                <TableContent
+                    rows=rows
+                    row_renderer=CustomTableRowRenderer
+                    scroll_container="html"
+                />
             </table>
         }
     })

examples/custom_row_renderer/src/main.rs

@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = { version = "0.6", features = ["csr"] }
+leptos = { version = "0.7", features = ["csr"] }
 leptos-struct-table = { path = "../..", features = ["chrono"] }
 chrono = { version = "0.4" }
 console_error_panic_hook = "0.1"