From 34bea90531870851c2d0e3b66da7b746946b23c5 Mon Sep 17 00:00:00 2001
From: Israel Barbara <israelsilvabarbara@gmail.com>
Date: Tue, 7 Jan 2025 16:32:27 -0300
Subject: [PATCH 1/4] Add table to project

---
 packages/leptos/table/Cargo.toml | 17 +++++++++++++++++
 packages/leptos/table/README.md  | 21 +++++++++++++++++++++
 packages/leptos/table/src/lib.rs | 14 ++++++++++++++
 3 files changed, 52 insertions(+)
 create mode 100644 packages/leptos/table/Cargo.toml
 create mode 100644 packages/leptos/table/README.md
 create mode 100644 packages/leptos/table/src/lib.rs

diff --git a/packages/leptos/table/Cargo.toml b/packages/leptos/table/Cargo.toml
new file mode 100644
index 0000000..5070a72
--- /dev/null
+++ b/packages/leptos/table/Cargo.toml
@@ -0,0 +1,17 @@
+[package]
+name = "shadcn-ui-leptos-table"
+description = "Leptos port of shadcn/ui Table."
+homepage = "https://shadcn-ui.rustforweb.org/components/card.html"
+publish = false
+
+authors.workspace = true
+edition.workspace = true
+license.workspace = true
+repository.workspace = true
+version.workspace = true
+
+[dependencies]
+tailwind_fuse.workspace = true
+leptos.workspace = true
+leptos-style.workspace = true
+leptos-node-ref.workspace = true
diff --git a/packages/leptos/table/README.md b/packages/leptos/table/README.md
new file mode 100644
index 0000000..54c2be7
--- /dev/null
+++ b/packages/leptos/table/README.md
@@ -0,0 +1,21 @@
+<p align="center">
+    <a href="../../../logo.svg">
+        <img src="../../../logo.svg" width="300" height="200" alt="Rust shadcn/ui Logo">
+    </a>
+</p>
+
+<h1 align="center">shadcn-ui-leptos-table</h1>
+
+A responsive table component.
+
+[Rust shadcn/ui](https://github.com/RustForWeb/shadcn-ui) is a Rust port of [shadcn/ui](https://ui.shadcn.com/).
+
+## Documentation
+
+See [the Rust shadcn/ui book](https://shadcn-ui.rustforweb.org/) for documentation.
+
+## Rust For Web
+
+The Rust shadcn/ui project is part of the [Rust For Web](https://github.com/RustForWeb).
+
+[Rust For Web](https://github.com/RustForWeb) creates and ports web UI libraries for Rust. All projects are free and open source.
diff --git a/packages/leptos/table/src/lib.rs b/packages/leptos/table/src/lib.rs
new file mode 100644
index 0000000..b93cf3f
--- /dev/null
+++ b/packages/leptos/table/src/lib.rs
@@ -0,0 +1,14 @@
+pub fn add(left: u64, right: u64) -> u64 {
+    left + right
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn it_works() {
+        let result = add(2, 2);
+        assert_eq!(result, 4);
+    }
+}

From eb00dcc41aba403789d728c9fadbb532ea5ecf73 Mon Sep 17 00:00:00 2001
From: Israel Barbara <israelsilvabarbara@gmail.com>
Date: Tue, 7 Jan 2025 16:49:44 -0300
Subject: [PATCH 2/4] Add default and new-york

---
 packages/leptos/table/src/default.rs  | 215 ++++++++++++++++++++++++++
 packages/leptos/table/src/new_york.rs | 215 ++++++++++++++++++++++++++
 2 files changed, 430 insertions(+)
 create mode 100644 packages/leptos/table/src/default.rs
 create mode 100644 packages/leptos/table/src/new_york.rs

diff --git a/packages/leptos/table/src/default.rs b/packages/leptos/table/src/default.rs
new file mode 100644
index 0000000..b568ffb
--- /dev/null
+++ b/packages/leptos/table/src/default.rs
@@ -0,0 +1,215 @@
+use leptos_node_ref::AnyNodeRef;
+use tailwind_fuse::*;
+use leptos::prelude::*;
+use leptos_style::Style;
+
+
+#[component]
+pub fn Table(
+    #[prop(into, optional)] class: MaybeProp<String>,
+    #[prop(into, optional)] id: MaybeProp<String>,
+    #[prop(into, optional)] style: Signal<Style>,
+
+    #[prop(into, optional)] node_ref: AnyNodeRef,
+    #[prop(into, optional)] children: Option<Children>,
+) -> impl IntoView {
+    view! {
+        <div class="relative w-full overflow-auto">
+            <table
+                node_ref=node_ref
+
+                class=move || tw_merge!("w-full caption-bottom text-sm", class.get())
+                id=move || id.get()
+                style=style
+            >
+                {children.map(|children| children())}
+            </table>
+        </div>
+    }
+}
+
+
+
+#[component]
+pub fn TableHeader(
+    #[prop(into, optional)] class: MaybeProp<String>,
+    #[prop(into, optional)] id: MaybeProp<String>,
+    #[prop(into, optional)] style: Signal<Style>,
+
+    #[prop(into, optional)] node_ref: AnyNodeRef,
+    #[prop(into, optional)] children: Option<Children>,
+) -> impl IntoView {
+    view! {
+        <thead
+            node_ref=node_ref
+
+            class=move || tw_merge!("[&_tr]:border-b", class.get())
+            id=move || id.get()
+            style=style
+        >
+            {children.map(|children| children())}
+        </thead>
+    }
+}
+
+
+
+#[component]
+pub fn TableBody(
+    #[prop(into, optional)] class: MaybeProp<String>,
+    #[prop(into, optional)] id: MaybeProp<String>,
+    #[prop(into, optional)] style: Signal<Style>,
+
+    #[prop(into, optional)] node_ref: AnyNodeRef,
+    #[prop(into, optional)] children: Option<Children>,
+
+) -> impl IntoView {
+    view! {
+        <tbody
+            node_ref=node_ref
+
+            class=move || tw_merge!("[&_tr:last-child]:border-0", class.get())
+            id=move || id.get()
+            style=style
+        >
+            {children.map(|children| children())}
+        </tbody>
+    }
+}
+
+
+
+#[component]
+pub fn TableFooter(
+    #[prop(into, optional)] class: MaybeProp<String>,
+    #[prop(into, optional)] id: MaybeProp<String>,
+    #[prop(into, optional)] style: Signal<Style>,
+
+    #[prop(into, optional)] node_ref: AnyNodeRef,
+    #[prop(into, optional)] children: Option<Children>,
+) -> impl IntoView {
+    view! {
+        <tfoot
+            node_ref=node_ref
+
+            class=move || tw_merge!("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", class.get())
+            id=move || id.get()
+            style=style
+        >
+            {children.map(|children| children())}
+        </tfoot>
+    }
+}
+
+#[component]
+pub fn TableRow(
+    #[prop(into, optional)] class: MaybeProp<String>,
+    #[prop(into, optional)] id: MaybeProp<String>,
+    #[prop(into, optional)] style: Signal<Style>,
+
+    #[prop(into, optional)] node_ref: AnyNodeRef,
+    #[prop(into, optional)] children: Option<Children>,   
+) -> impl IntoView {
+    view! {
+        <tr
+            node_ref=node_ref
+
+            class=move || tw_merge!("border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted", class.get())
+            id=move || id.get()
+            style=style
+        >
+            {children.map(|children| children())}
+        </tr>
+    }
+}
+
+
+
+#[component]
+pub fn TableHead(
+    #[prop(into, optional)] class: MaybeProp<String>,
+    #[prop(into, optional)] id: MaybeProp<String>,
+    #[prop(into, optional)] style: Signal<Style>,
+
+    #[prop(into, optional)] abbr: MaybeProp<String>,
+    #[prop(into, optional)] colspan: MaybeProp<String>,
+    #[prop(into, optional)] headers: MaybeProp<String>,
+    #[prop(into, optional)] rowspan: MaybeProp<String>,
+    #[prop(into, optional)] scope: MaybeProp<String>,
+
+    #[prop(into, optional)] node_ref: AnyNodeRef,
+    #[prop(into, optional)] children: Option<Children>,
+) -> impl IntoView {
+    view! {
+        <th
+            node_ref=node_ref
+
+            class=move || tw_merge!("h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0", class.get())
+            id=move || id.get()
+            style=style
+
+            abbr=move ||abbr.get()
+            colspan=move || colspan.get()
+            headers=move || headers.get()
+            rowspan=move || rowspan.get()
+            scope=move || scope.get()
+        >
+            {children.map(|children| children())}
+        </th>
+    }
+}
+
+
+
+#[component]
+pub fn TableCell(
+    #[prop(into, optional)] class: MaybeProp<String>,
+    #[prop(into, optional)] id: MaybeProp<String>,
+    #[prop(into, optional)] style: Signal<Style>,
+
+    #[prop(into, optional)] colspan: MaybeProp<String>,
+    #[prop(into, optional)] headers: MaybeProp<String>,
+    #[prop(into, optional)] rowspan: MaybeProp<String>,
+
+    #[prop(into, optional)] node_ref: AnyNodeRef,
+    #[prop(into, optional)] children: Option<Children>,
+) -> impl IntoView {
+    view! {
+        <td
+            node_ref=node_ref
+
+            class=move || tw_merge!("p-4 align-middle [&:has([role=checkbox])]:pr-0", class.get())
+            id=move || id.get()
+            style=style
+
+            colspan=move || colspan.get()
+            headers=move || headers.get()
+            rowspan=move || rowspan.get()
+        >
+            {children.map(|children| children())}
+        </td>
+    }
+}
+
+
+#[component]
+pub fn TableCaption(
+    #[prop(into, optional)] class: MaybeProp<String>,
+    #[prop(into, optional)] id: MaybeProp<String>,
+    #[prop(into, optional)] style: Signal<Style>,
+
+    #[prop(into, optional)] node_ref: AnyNodeRef,
+    #[prop(into, optional)] children: Option<Children>,
+) -> impl IntoView {
+    view! {
+        <caption
+            node_ref=node_ref
+
+            class=move || tw_merge!("mt-4 text-sm text-muted-foreground", class.get())
+            id=move || id.get()
+            style=style
+        >
+            {children.map(|children| children())}
+        </caption>
+    }
+}
diff --git a/packages/leptos/table/src/new_york.rs b/packages/leptos/table/src/new_york.rs
new file mode 100644
index 0000000..099bffb
--- /dev/null
+++ b/packages/leptos/table/src/new_york.rs
@@ -0,0 +1,215 @@
+use leptos_node_ref::AnyNodeRef;
+use tailwind_fuse::*;
+use leptos::prelude::*;
+use leptos_style::Style;
+
+
+#[component]
+pub fn Table(
+    #[prop(into, optional)] class: MaybeProp<String>,
+    #[prop(into, optional)] id: MaybeProp<String>,
+    #[prop(into, optional)] style: Signal<Style>,
+
+    #[prop(into, optional)] node_ref: AnyNodeRef,
+    #[prop(into, optional)] children: Option<Children>,
+) -> impl IntoView {
+    view! {
+        <div class="relative w-full overflow-auto">
+            <table
+                node_ref=node_ref
+
+                class=move || tw_merge!("w-full caption-bottom text-sm", class.get())
+                id=move || id.get()
+                style=style
+            >
+                {children.map(|children| children())}
+            </table>
+        </div>
+    }
+}
+
+
+
+#[component]
+pub fn TableHeader(
+    #[prop(into, optional)] class: MaybeProp<String>,
+    #[prop(into, optional)] id: MaybeProp<String>,
+    #[prop(into, optional)] style: Signal<Style>,
+
+    #[prop(into, optional)] node_ref: AnyNodeRef,
+    #[prop(into, optional)] children: Option<Children>,
+) -> impl IntoView {
+    view! {
+        <thead
+            node_ref=node_ref
+
+            class=move || tw_merge!("[&_tr]:border-b", class.get())
+            id=move || id.get()
+            style=style
+        >
+            {children.map(|children| children())}
+        </thead>
+    }
+}
+
+
+
+#[component]
+pub fn TableBody(
+    #[prop(into, optional)] class: MaybeProp<String>,
+    #[prop(into, optional)] id: MaybeProp<String>,
+    #[prop(into, optional)] style: Signal<Style>,
+
+    #[prop(into, optional)] node_ref: AnyNodeRef,
+    #[prop(into, optional)] children: Option<Children>,
+
+) -> impl IntoView {
+    view! {
+        <tbody
+            node_ref=node_ref
+
+            class=move || tw_merge!("[&_tr:last-child]:border-0", class.get())
+            id=move || id.get()
+            style=style
+        >
+            {children.map(|children| children())}
+        </tbody>
+    }
+}
+
+
+
+#[component]
+pub fn TableFooter(
+    #[prop(into, optional)] class: MaybeProp<String>,
+    #[prop(into, optional)] id: MaybeProp<String>,
+    #[prop(into, optional)] style: Signal<Style>,
+
+    #[prop(into, optional)] node_ref: AnyNodeRef,
+    #[prop(into, optional)] children: Option<Children>,
+) -> impl IntoView {
+    view! {
+        <tfoot
+            node_ref=node_ref
+
+            class=move || tw_merge!("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", class.get())
+            id=move || id.get()
+            style=style
+        >
+            {children.map(|children| children())}
+        </tfoot>
+    }
+}
+
+#[component]
+pub fn TableRow(
+    #[prop(into, optional)] class: MaybeProp<String>,
+    #[prop(into, optional)] id: MaybeProp<String>,
+    #[prop(into, optional)] style: Signal<Style>,
+
+    #[prop(into, optional)] node_ref: AnyNodeRef,
+    #[prop(into, optional)] children: Option<Children>,   
+) -> impl IntoView {
+    view! {
+        <tr
+            node_ref=node_ref
+
+            class=move || tw_merge!("border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted", class.get())
+            id=move || id.get()
+            style=style
+        >
+            {children.map(|children| children())}
+        </tr>
+    }
+}
+
+
+
+#[component]
+pub fn TableHead(
+    #[prop(into, optional)] class: MaybeProp<String>,
+    #[prop(into, optional)] id: MaybeProp<String>,
+    #[prop(into, optional)] style: Signal<Style>,
+
+    #[prop(into, optional)] abbr: MaybeProp<String>,
+    #[prop(into, optional)] colspan: MaybeProp<String>,
+    #[prop(into, optional)] headers: MaybeProp<String>,
+    #[prop(into, optional)] rowspan: MaybeProp<String>,
+    #[prop(into, optional)] scope: MaybeProp<String>,
+
+    #[prop(into, optional)] node_ref: AnyNodeRef,
+    #[prop(into, optional)] children: Option<Children>,
+) -> impl IntoView {
+    view! {
+        <th
+            node_ref=node_ref
+
+            class=move || tw_merge!("h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", class.get())
+            id=move || id.get()
+            style=style
+
+            abbr=move ||abbr.get()
+            colspan=move || colspan.get()
+            headers=move || headers.get()
+            rowspan=move || rowspan.get()
+            scope=move || scope.get()
+        >
+            {children.map(|children| children())}
+        </th>
+    }
+}
+
+
+
+#[component]
+pub fn TableCell(
+    #[prop(into, optional)] class: MaybeProp<String>,
+    #[prop(into, optional)] id: MaybeProp<String>,
+    #[prop(into, optional)] style: Signal<Style>,
+
+    #[prop(into, optional)] colspan: MaybeProp<String>,
+    #[prop(into, optional)] headers: MaybeProp<String>,
+    #[prop(into, optional)] rowspan: MaybeProp<String>,
+
+    #[prop(into, optional)] node_ref: AnyNodeRef,
+    #[prop(into, optional)] children: Option<Children>,
+) -> impl IntoView {
+    view! {
+        <td
+            node_ref=node_ref
+
+            class=move || tw_merge!("p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", class.get())
+            id=move || id.get()
+            style=style
+
+            colspan=move || colspan.get()
+            headers=move || headers.get()
+            rowspan=move || rowspan.get()
+        >
+            {children.map(|children| children())}
+        </td>
+    }
+}
+
+
+#[component]
+pub fn TableCaption(
+    #[prop(into, optional)] class: MaybeProp<String>,
+    #[prop(into, optional)] id: MaybeProp<String>,
+    #[prop(into, optional)] style: Signal<Style>,
+
+    #[prop(into, optional)] node_ref: AnyNodeRef,
+    #[prop(into, optional)] children: Option<Children>,
+) -> impl IntoView {
+    view! {
+        <caption
+            node_ref=node_ref
+
+            class=move || tw_merge!("mt-4 text-sm text-muted-foreground", class.get())
+            id=move || id.get()
+            style=style
+        >
+            {children.map(|children| children())}
+        </caption>
+    }
+}

From 0c1cda31e1545961fd5141bf8ea39f9c35243bd0 Mon Sep 17 00:00:00 2001
From: Israel Barbara <israelsilvabarbara@gmail.com>
Date: Wed, 8 Jan 2025 12:34:03 -0300
Subject: [PATCH 3/4] Add Examples

---
 Cargo.lock                                    |  11 ++
 book-examples/leptos/Cargo.toml               |   3 +
 book-examples/leptos/src/default.rs           |   6 +
 .../leptos/src/default/components/ui.rs       |   2 +
 book-examples/leptos/src/default/table.rs     |  18 +++
 .../leptos/src/default/table/table.rs         | 125 ++++++++++++++++++
 book-examples/leptos/src/new_york.rs          |   6 +
 .../leptos/src/new_york/components/ui.rs      |   2 +
 book-examples/leptos/src/new_york/table.rs    |  18 +++
 .../leptos/src/new_york/table/table.rs        | 125 ++++++++++++++++++
 packages/leptos/table/src/default.rs          |  16 +--
 packages/leptos/table/src/lib.rs              |  20 +--
 packages/leptos/table/src/new_york.rs         |  16 +--
 13 files changed, 339 insertions(+), 29 deletions(-)
 create mode 100644 book-examples/leptos/src/default/table.rs
 create mode 100644 book-examples/leptos/src/default/table/table.rs
 create mode 100644 book-examples/leptos/src/new_york/table.rs
 create mode 100644 book-examples/leptos/src/new_york/table/table.rs

diff --git a/Cargo.lock b/Cargo.lock
index 2064f7c..be54c01 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -3532,6 +3532,7 @@ dependencies = [
  "shadcn-ui-leptos-badge",
  "shadcn-ui-leptos-button",
  "shadcn-ui-leptos-card",
+ "shadcn-ui-leptos-table",
 ]
 
 [[package]]
@@ -3556,6 +3557,16 @@ dependencies = [
  "tailwind_fuse",
 ]
 
+[[package]]
+name = "shadcn-ui-leptos-table"
+version = "0.0.1"
+dependencies = [
+ "leptos 0.7.3",
+ "leptos-node-ref",
+ "leptos-style",
+ "tailwind_fuse",
+]
+
 [[package]]
 name = "shadcn-ui-leptos-utils"
 version = "0.0.1"
diff --git a/book-examples/leptos/Cargo.toml b/book-examples/leptos/Cargo.toml
index d93efac..b7457e2 100644
--- a/book-examples/leptos/Cargo.toml
+++ b/book-examples/leptos/Cargo.toml
@@ -21,6 +21,7 @@ shadcn-ui-leptos-alert = { path = "../../packages/leptos/alert" , optional = tru
 shadcn-ui-leptos-badge = { path = "../../packages/leptos/badge", optional = true }
 shadcn-ui-leptos-button = { path = "../../packages/leptos/button", optional = true }
 shadcn-ui-leptos-card = { path = "../../packages/leptos/card", optional = true }
+shadcn-ui-leptos-table = { path = "../../packages/leptos/table", optional = true }
 
 [features]
 default = [
@@ -28,6 +29,7 @@ default = [
     "badge",
     "button",
     "card",
+    "table",
 ]
 alert = [
     "dep:lucide-leptos",
@@ -45,3 +47,4 @@ card = [
     "dep:shadcn-ui-leptos-button",
     "dep:shadcn-ui-leptos-card",
 ]
+table = ["dep:shadcn-ui-leptos-table"]
diff --git a/book-examples/leptos/src/default.rs b/book-examples/leptos/src/default.rs
index a3148f2..a2a203b 100644
--- a/book-examples/leptos/src/default.rs
+++ b/book-examples/leptos/src/default.rs
@@ -8,6 +8,8 @@ mod badge;
 mod button;
 #[cfg(feature = "card")]
 mod card;
+#[cfg(feature = "table")]
+mod table;
 
 use leptos::prelude::*;
 use leptos_router::{
@@ -34,6 +36,10 @@ pub fn Default() -> impl MatchNestedRoutes + Clone {
         {
             component_view(self::card::CardRoutes, ())
         },
+        #[cfg(feature = "table")]
+        {
+            component_view(self::table::TableRoutes, ())    
+        }
     );
 
     view! {
diff --git a/book-examples/leptos/src/default/components/ui.rs b/book-examples/leptos/src/default/components/ui.rs
index a95ce66..6a37d3c 100644
--- a/book-examples/leptos/src/default/components/ui.rs
+++ b/book-examples/leptos/src/default/components/ui.rs
@@ -8,3 +8,5 @@ pub use shadcn_ui_leptos_badge::default as badge;
 pub use shadcn_ui_leptos_button::default as button;
 #[cfg(feature = "card")]
 pub use shadcn_ui_leptos_card::default as card;
+#[cfg(feature = "table")]
+pub use shadcn_ui_leptos_table::default as table;
diff --git a/book-examples/leptos/src/default/table.rs b/book-examples/leptos/src/default/table.rs
new file mode 100644
index 0000000..2166d6b
--- /dev/null
+++ b/book-examples/leptos/src/default/table.rs
@@ -0,0 +1,18 @@
+#[allow(clippy::module_inception)]
+mod table;
+
+use leptos::prelude::*;
+use leptos_router::{
+    components::{Outlet, ParentRoute, Route},
+    path, MatchNestedRoutes,
+};
+
+#[component(transparent)]
+pub fn TableRoutes() -> impl MatchNestedRoutes + Clone {
+    view! {
+        <ParentRoute path=path!("/table") view=Outlet>
+            <Route path=path!("/") view=table::TableDemo />
+        </ParentRoute>
+    }
+    .into_inner()
+}
\ No newline at end of file
diff --git a/book-examples/leptos/src/default/table/table.rs b/book-examples/leptos/src/default/table/table.rs
new file mode 100644
index 0000000..4074b00
--- /dev/null
+++ b/book-examples/leptos/src/default/table/table.rs
@@ -0,0 +1,125 @@
+use leptos::prelude::*;
+
+use crate::default::components::ui::table::{
+    Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow,
+};
+
+#[derive(Clone, Copy)]
+struct PaymentDetails{
+    payment_status: &'static str,
+    total_amount: &'static str,
+    payment_method: &'static str,
+}
+
+#[derive(Clone, Copy)]
+struct Invoice {
+    invoice: &'static str,
+    details: RwSignal<PaymentDetails>,
+}
+
+fn invoices() -> Vec<Invoice> {
+    vec![
+        Invoice {
+            invoice: "INV001",
+            details: RwSignal::new(PaymentDetails {
+                payment_status: "Paid",
+                total_amount: "$250.00",
+                payment_method: "Credit Card",    
+            })
+            
+        },
+        Invoice {
+            invoice: "INV002",
+            details: RwSignal::new(PaymentDetails {
+                payment_status: "Pending",
+                total_amount: "$150.00",
+                payment_method: "PayPal",    
+            })
+            
+        },
+        Invoice {
+            invoice: "INV003",
+            details: RwSignal::new(PaymentDetails {    
+                payment_status: "Unpaid",
+                total_amount: "$350.00",
+                payment_method: "Bank Transfer",
+            })
+        },
+        Invoice {
+            invoice: "INV004",
+            details: RwSignal::new(PaymentDetails {
+                payment_status: "Paid",
+                total_amount: "$450.00",
+                payment_method: "Credit Card",    
+            })
+            
+        },
+        Invoice {
+            invoice: "INV005",
+            details: RwSignal::new(PaymentDetails {
+                payment_status: "Paid",
+                total_amount: "$550.00",
+                payment_method: "PayPal",    
+            })
+            
+        },
+        Invoice {
+            invoice: "INV006",
+            details: RwSignal::new(PaymentDetails {
+                payment_status: "Pending",
+                total_amount: "$200.00",
+                payment_method: "Bank Transfer",    
+            })
+            
+        },
+        Invoice {
+            invoice: "INV007",
+            details: RwSignal::new(PaymentDetails {
+                payment_status: "Unpaid",
+                total_amount: "$300.00",
+                payment_method: "Credit Card",    
+            })
+        },
+    ]
+}
+
+#[component]
+pub fn TableDemo() -> impl IntoView {
+    view! {
+        <Table>
+            <TableCaption>"A list of your recent invoices."</TableCaption>
+            <TableHeader>
+                <TableRow>
+                    <TableHead class="w-[100px]">"Invoice"</TableHead>
+                    <TableHead>"Status"</TableHead>
+                    <TableHead>"Method"</TableHead>
+                    <TableHead class="text-right">"Amount"</TableHead>
+                </TableRow>
+            </TableHeader>
+            <TableBody>
+                <For 
+                    each=move || invoices()
+                    key=|row| row.invoice
+                    children=move |row| {
+                        let details = row.details.get();
+                        view! {
+                            <TableRow>
+                                <TableCell class="font-medium">{row.invoice}</TableCell>
+                                <TableCell>{details.payment_status}</TableCell>
+                                <TableCell>{details.payment_method}</TableCell>
+                                <TableCell class="text-right">{details.total_amount}</TableCell>
+                            </TableRow>
+                        }
+                    }
+                />
+            </TableBody>
+
+            <TableFooter>
+                <TableRow>
+                    <TableCell colspan="3">"Total"</TableCell>
+                    <TableCell class="text-right">"$2,500.00"</TableCell>
+                </TableRow>
+            </TableFooter>
+        </Table>
+    }
+}
diff --git a/book-examples/leptos/src/new_york.rs b/book-examples/leptos/src/new_york.rs
index 90e0fac..45b8e8b 100644
--- a/book-examples/leptos/src/new_york.rs
+++ b/book-examples/leptos/src/new_york.rs
@@ -8,6 +8,8 @@ mod badge;
 mod button;
 #[cfg(feature = "card")]
 mod card;
+#[cfg(feature = "table")]
+mod table;
 
 use leptos::prelude::*;
 use leptos_router::{
@@ -34,6 +36,10 @@ pub fn NewYork() -> impl MatchNestedRoutes + Clone {
         {
             component_view(self::card::CardRoutes, ())
         },
+        #[cfg(feature = "table")]
+        {
+            component_view(self::table::TableRoutes, ())    
+        }
     );
 
     view! {
diff --git a/book-examples/leptos/src/new_york/components/ui.rs b/book-examples/leptos/src/new_york/components/ui.rs
index 92b7a22..bc003db 100644
--- a/book-examples/leptos/src/new_york/components/ui.rs
+++ b/book-examples/leptos/src/new_york/components/ui.rs
@@ -8,3 +8,5 @@ pub use shadcn_ui_leptos_badge::new_york as badge;
 pub use shadcn_ui_leptos_button::new_york as button;
 #[cfg(feature = "card")]
 pub use shadcn_ui_leptos_card::new_york as card;
+#[cfg(feature = "table")]
+pub use shadcn_ui_leptos_table::new_york as table;
diff --git a/book-examples/leptos/src/new_york/table.rs b/book-examples/leptos/src/new_york/table.rs
new file mode 100644
index 0000000..2166d6b
--- /dev/null
+++ b/book-examples/leptos/src/new_york/table.rs
@@ -0,0 +1,18 @@
+#[allow(clippy::module_inception)]
+mod table;
+
+use leptos::prelude::*;
+use leptos_router::{
+    components::{Outlet, ParentRoute, Route},
+    path, MatchNestedRoutes,
+};
+
+#[component(transparent)]
+pub fn TableRoutes() -> impl MatchNestedRoutes + Clone {
+    view! {
+        <ParentRoute path=path!("/table") view=Outlet>
+            <Route path=path!("/") view=table::TableDemo />
+        </ParentRoute>
+    }
+    .into_inner()
+}
\ No newline at end of file
diff --git a/book-examples/leptos/src/new_york/table/table.rs b/book-examples/leptos/src/new_york/table/table.rs
new file mode 100644
index 0000000..7bbfa19
--- /dev/null
+++ b/book-examples/leptos/src/new_york/table/table.rs
@@ -0,0 +1,125 @@
+use leptos::prelude::*;
+
+use crate::new_york::components::ui::table::{
+    Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow,
+};
+
+#[derive(Clone, Copy)]
+struct PaymentDetails{
+    payment_status: &'static str,
+    total_amount: &'static str,
+    payment_method: &'static str,
+}
+
+#[derive(Clone, Copy)]
+struct Invoice {
+    invoice: &'static str,
+    details: RwSignal<PaymentDetails>,
+}
+
+fn invoices() -> Vec<Invoice> {
+    vec![
+        Invoice {
+            invoice: "INV001",
+            details: RwSignal::new(PaymentDetails {
+                payment_status: "Paid",
+                total_amount: "$250.00",
+                payment_method: "Credit Card",    
+            })
+            
+        },
+        Invoice {
+            invoice: "INV002",
+            details: RwSignal::new(PaymentDetails {
+                payment_status: "Pending",
+                total_amount: "$150.00",
+                payment_method: "PayPal",    
+            })
+            
+        },
+        Invoice {
+            invoice: "INV003",
+            details: RwSignal::new(PaymentDetails {    
+                payment_status: "Unpaid",
+                total_amount: "$350.00",
+                payment_method: "Bank Transfer",
+            })
+        },
+        Invoice {
+            invoice: "INV004",
+            details: RwSignal::new(PaymentDetails {
+                payment_status: "Paid",
+                total_amount: "$450.00",
+                payment_method: "Credit Card",    
+            })
+            
+        },
+        Invoice {
+            invoice: "INV005",
+            details: RwSignal::new(PaymentDetails {
+                payment_status: "Paid",
+                total_amount: "$550.00",
+                payment_method: "PayPal",    
+            })
+            
+        },
+        Invoice {
+            invoice: "INV006",
+            details: RwSignal::new(PaymentDetails {
+                payment_status: "Pending",
+                total_amount: "$200.00",
+                payment_method: "Bank Transfer",    
+            })
+            
+        },
+        Invoice {
+            invoice: "INV007",
+            details: RwSignal::new(PaymentDetails {
+                payment_status: "Unpaid",
+                total_amount: "$300.00",
+                payment_method: "Credit Card",    
+            })
+        },
+    ]
+}
+
+#[component]
+pub fn TableDemo() -> impl IntoView {
+    view! {
+        <Table>
+            <TableCaption>"A list of your recent invoices."</TableCaption>
+            <TableHeader>
+                <TableRow>
+                    <TableHead class="w-[100px]">"Invoice"</TableHead>
+                    <TableHead>"Status"</TableHead>
+                    <TableHead>"Method"</TableHead>
+                    <TableHead class="text-right">"Amount"</TableHead>
+                </TableRow>
+            </TableHeader>
+            <TableBody>
+                <For 
+                    each=move || invoices()
+                    key=|row| row.invoice
+                    children=move |row| {
+                        let details = row.details.get();
+                        view! {
+                            <TableRow>
+                                <TableCell class="font-medium">{row.invoice}</TableCell>
+                                <TableCell>{details.payment_status}</TableCell>
+                                <TableCell>{details.payment_method}</TableCell>
+                                <TableCell class="text-right">{details.total_amount}</TableCell>
+                            </TableRow>
+                        }
+                    }
+                />
+            </TableBody>
+
+            <TableFooter>
+                <TableRow>
+                    <TableCell colspan="3">"Total"</TableCell>
+                    <TableCell class="text-right">"$2,500.00"</TableCell>
+                </TableRow>
+            </TableFooter>
+        </Table>
+    }
+}
diff --git a/packages/leptos/table/src/default.rs b/packages/leptos/table/src/default.rs
index b568ffb..987fa8a 100644
--- a/packages/leptos/table/src/default.rs
+++ b/packages/leptos/table/src/default.rs
@@ -11,7 +11,7 @@ pub fn Table(
     #[prop(into, optional)] style: Signal<Style>,
 
     #[prop(into, optional)] node_ref: AnyNodeRef,
-    #[prop(into, optional)] children: Option<Children>,
+    #[prop(optional)] children: Option<Children>,
 ) -> impl IntoView {
     view! {
         <div class="relative w-full overflow-auto">
@@ -37,7 +37,7 @@ pub fn TableHeader(
     #[prop(into, optional)] style: Signal<Style>,
 
     #[prop(into, optional)] node_ref: AnyNodeRef,
-    #[prop(into, optional)] children: Option<Children>,
+    #[prop(optional)] children: Option<Children>,
 ) -> impl IntoView {
     view! {
         <thead
@@ -61,7 +61,7 @@ pub fn TableBody(
     #[prop(into, optional)] style: Signal<Style>,
 
     #[prop(into, optional)] node_ref: AnyNodeRef,
-    #[prop(into, optional)] children: Option<Children>,
+    #[prop(optional)] children: Option<Children>,
 
 ) -> impl IntoView {
     view! {
@@ -86,7 +86,7 @@ pub fn TableFooter(
     #[prop(into, optional)] style: Signal<Style>,
 
     #[prop(into, optional)] node_ref: AnyNodeRef,
-    #[prop(into, optional)] children: Option<Children>,
+    #[prop(optional)] children: Option<Children>,
 ) -> impl IntoView {
     view! {
         <tfoot
@@ -108,7 +108,7 @@ pub fn TableRow(
     #[prop(into, optional)] style: Signal<Style>,
 
     #[prop(into, optional)] node_ref: AnyNodeRef,
-    #[prop(into, optional)] children: Option<Children>,   
+    #[prop(optional)] children: Option<Children>,   
 ) -> impl IntoView {
     view! {
         <tr
@@ -138,7 +138,7 @@ pub fn TableHead(
     #[prop(into, optional)] scope: MaybeProp<String>,
 
     #[prop(into, optional)] node_ref: AnyNodeRef,
-    #[prop(into, optional)] children: Option<Children>,
+    #[prop(optional)] children: Option<Children>,
 ) -> impl IntoView {
     view! {
         <th
@@ -172,7 +172,7 @@ pub fn TableCell(
     #[prop(into, optional)] rowspan: MaybeProp<String>,
 
     #[prop(into, optional)] node_ref: AnyNodeRef,
-    #[prop(into, optional)] children: Option<Children>,
+    #[prop(optional)] children: Option<Children>,
 ) -> impl IntoView {
     view! {
         <td
@@ -199,7 +199,7 @@ pub fn TableCaption(
     #[prop(into, optional)] style: Signal<Style>,
 
     #[prop(into, optional)] node_ref: AnyNodeRef,
-    #[prop(into, optional)] children: Option<Children>,
+    #[prop(optional)] children: Option<Children>,
 ) -> impl IntoView {
     view! {
         <caption
diff --git a/packages/leptos/table/src/lib.rs b/packages/leptos/table/src/lib.rs
index b93cf3f..a11f5c6 100644
--- a/packages/leptos/table/src/lib.rs
+++ b/packages/leptos/table/src/lib.rs
@@ -1,14 +1,8 @@
-pub fn add(left: u64, right: u64) -> u64 {
-    left + right
-}
+//! Leptos port of [shadcn/ui Table](https://ui.shadcn.com/docs/components/table).
+//!
+//! A responsive table component.
+//!
+//! See [the Rust shadcn/ui book](https://shadcn-ui.rustforweb.org/components/table.html) for more documenation.
 
-#[cfg(test)]
-mod tests {
-    use super::*;
-
-    #[test]
-    fn it_works() {
-        let result = add(2, 2);
-        assert_eq!(result, 4);
-    }
-}
+pub mod default;
+pub mod new_york;
diff --git a/packages/leptos/table/src/new_york.rs b/packages/leptos/table/src/new_york.rs
index 099bffb..e0300b4 100644
--- a/packages/leptos/table/src/new_york.rs
+++ b/packages/leptos/table/src/new_york.rs
@@ -11,7 +11,7 @@ pub fn Table(
     #[prop(into, optional)] style: Signal<Style>,
 
     #[prop(into, optional)] node_ref: AnyNodeRef,
-    #[prop(into, optional)] children: Option<Children>,
+    #[prop(optional)] children: Option<Children>,
 ) -> impl IntoView {
     view! {
         <div class="relative w-full overflow-auto">
@@ -37,7 +37,7 @@ pub fn TableHeader(
     #[prop(into, optional)] style: Signal<Style>,
 
     #[prop(into, optional)] node_ref: AnyNodeRef,
-    #[prop(into, optional)] children: Option<Children>,
+    #[prop(optional)] children: Option<Children>,
 ) -> impl IntoView {
     view! {
         <thead
@@ -61,7 +61,7 @@ pub fn TableBody(
     #[prop(into, optional)] style: Signal<Style>,
 
     #[prop(into, optional)] node_ref: AnyNodeRef,
-    #[prop(into, optional)] children: Option<Children>,
+    #[prop(optional)] children: Option<Children>,
 
 ) -> impl IntoView {
     view! {
@@ -86,7 +86,7 @@ pub fn TableFooter(
     #[prop(into, optional)] style: Signal<Style>,
 
     #[prop(into, optional)] node_ref: AnyNodeRef,
-    #[prop(into, optional)] children: Option<Children>,
+    #[prop(optional)] children: Option<Children>,
 ) -> impl IntoView {
     view! {
         <tfoot
@@ -108,7 +108,7 @@ pub fn TableRow(
     #[prop(into, optional)] style: Signal<Style>,
 
     #[prop(into, optional)] node_ref: AnyNodeRef,
-    #[prop(into, optional)] children: Option<Children>,   
+    #[prop(optional)] children: Option<Children>,   
 ) -> impl IntoView {
     view! {
         <tr
@@ -138,7 +138,7 @@ pub fn TableHead(
     #[prop(into, optional)] scope: MaybeProp<String>,
 
     #[prop(into, optional)] node_ref: AnyNodeRef,
-    #[prop(into, optional)] children: Option<Children>,
+    #[prop(optional)] children: Option<Children>,
 ) -> impl IntoView {
     view! {
         <th
@@ -172,7 +172,7 @@ pub fn TableCell(
     #[prop(into, optional)] rowspan: MaybeProp<String>,
 
     #[prop(into, optional)] node_ref: AnyNodeRef,
-    #[prop(into, optional)] children: Option<Children>,
+    #[prop(optional)] children: Option<Children>,
 ) -> impl IntoView {
     view! {
         <td
@@ -199,7 +199,7 @@ pub fn TableCaption(
     #[prop(into, optional)] style: Signal<Style>,
 
     #[prop(into, optional)] node_ref: AnyNodeRef,
-    #[prop(into, optional)] children: Option<Children>,
+    #[prop(optional)] children: Option<Children>,
 ) -> impl IntoView {
     view! {
         <caption

From bb3d3e0d8e9980d8160bf7ea0f76190a4510615e Mon Sep 17 00:00:00 2001
From: Israel Barbara <israelsilvabarbara@gmail.com>
Date: Wed, 8 Jan 2025 12:38:04 -0300
Subject: [PATCH 4/4] Fix cargo fmt

---
 book-examples/leptos/src/default.rs           |  4 +-
 book-examples/leptos/src/default/table.rs     |  2 +-
 .../leptos/src/default/table/table.rs         | 37 ++++++++-----------
 book-examples/leptos/src/new_york.rs          |  4 +-
 book-examples/leptos/src/new_york/table.rs    |  2 +-
 .../leptos/src/new_york/table/table.rs        | 37 ++++++++-----------
 packages/leptos/table/src/default.rs          | 19 ++--------
 packages/leptos/table/src/new_york.rs         | 19 ++--------
 8 files changed, 44 insertions(+), 80 deletions(-)

diff --git a/book-examples/leptos/src/default.rs b/book-examples/leptos/src/default.rs
index a2a203b..4fd4138 100644
--- a/book-examples/leptos/src/default.rs
+++ b/book-examples/leptos/src/default.rs
@@ -38,8 +38,8 @@ pub fn Default() -> impl MatchNestedRoutes + Clone {
         },
         #[cfg(feature = "table")]
         {
-            component_view(self::table::TableRoutes, ())    
-        }
+            component_view(self::table::TableRoutes, ())
+        },
     );
 
     view! {
diff --git a/book-examples/leptos/src/default/table.rs b/book-examples/leptos/src/default/table.rs
index 2166d6b..b3f1f13 100644
--- a/book-examples/leptos/src/default/table.rs
+++ b/book-examples/leptos/src/default/table.rs
@@ -15,4 +15,4 @@ pub fn TableRoutes() -> impl MatchNestedRoutes + Clone {
         </ParentRoute>
     }
     .into_inner()
-}
\ No newline at end of file
+}
diff --git a/book-examples/leptos/src/default/table/table.rs b/book-examples/leptos/src/default/table/table.rs
index 4074b00..7c71b1e 100644
--- a/book-examples/leptos/src/default/table/table.rs
+++ b/book-examples/leptos/src/default/table/table.rs
@@ -5,7 +5,7 @@ use crate::default::components::ui::table::{
 };
 
 #[derive(Clone, Copy)]
-struct PaymentDetails{
+struct PaymentDetails {
     payment_status: &'static str,
     total_amount: &'static str,
     payment_method: &'static str,
@@ -24,61 +24,56 @@ fn invoices() -> Vec<Invoice> {
             details: RwSignal::new(PaymentDetails {
                 payment_status: "Paid",
                 total_amount: "$250.00",
-                payment_method: "Credit Card",    
-            })
-            
+                payment_method: "Credit Card",
+            }),
         },
         Invoice {
             invoice: "INV002",
             details: RwSignal::new(PaymentDetails {
                 payment_status: "Pending",
                 total_amount: "$150.00",
-                payment_method: "PayPal",    
-            })
-            
+                payment_method: "PayPal",
+            }),
         },
         Invoice {
             invoice: "INV003",
-            details: RwSignal::new(PaymentDetails {    
+            details: RwSignal::new(PaymentDetails {
                 payment_status: "Unpaid",
                 total_amount: "$350.00",
                 payment_method: "Bank Transfer",
-            })
+            }),
         },
         Invoice {
             invoice: "INV004",
             details: RwSignal::new(PaymentDetails {
                 payment_status: "Paid",
                 total_amount: "$450.00",
-                payment_method: "Credit Card",    
-            })
-            
+                payment_method: "Credit Card",
+            }),
         },
         Invoice {
             invoice: "INV005",
             details: RwSignal::new(PaymentDetails {
                 payment_status: "Paid",
                 total_amount: "$550.00",
-                payment_method: "PayPal",    
-            })
-            
+                payment_method: "PayPal",
+            }),
         },
         Invoice {
             invoice: "INV006",
             details: RwSignal::new(PaymentDetails {
                 payment_status: "Pending",
                 total_amount: "$200.00",
-                payment_method: "Bank Transfer",    
-            })
-            
+                payment_method: "Bank Transfer",
+            }),
         },
         Invoice {
             invoice: "INV007",
             details: RwSignal::new(PaymentDetails {
                 payment_status: "Unpaid",
                 total_amount: "$300.00",
-                payment_method: "Credit Card",    
-            })
+                payment_method: "Credit Card",
+            }),
         },
     ]
 }
@@ -97,7 +92,7 @@ pub fn TableDemo() -> impl IntoView {
                 </TableRow>
             </TableHeader>
             <TableBody>
-                <For 
+                <For
                     each=move || invoices()
                     key=|row| row.invoice
                     children=move |row| {
diff --git a/book-examples/leptos/src/new_york.rs b/book-examples/leptos/src/new_york.rs
index 45b8e8b..59d9810 100644
--- a/book-examples/leptos/src/new_york.rs
+++ b/book-examples/leptos/src/new_york.rs
@@ -38,8 +38,8 @@ pub fn NewYork() -> impl MatchNestedRoutes + Clone {
         },
         #[cfg(feature = "table")]
         {
-            component_view(self::table::TableRoutes, ())    
-        }
+            component_view(self::table::TableRoutes, ())
+        },
     );
 
     view! {
diff --git a/book-examples/leptos/src/new_york/table.rs b/book-examples/leptos/src/new_york/table.rs
index 2166d6b..b3f1f13 100644
--- a/book-examples/leptos/src/new_york/table.rs
+++ b/book-examples/leptos/src/new_york/table.rs
@@ -15,4 +15,4 @@ pub fn TableRoutes() -> impl MatchNestedRoutes + Clone {
         </ParentRoute>
     }
     .into_inner()
-}
\ No newline at end of file
+}
diff --git a/book-examples/leptos/src/new_york/table/table.rs b/book-examples/leptos/src/new_york/table/table.rs
index 7bbfa19..baf2c72 100644
--- a/book-examples/leptos/src/new_york/table/table.rs
+++ b/book-examples/leptos/src/new_york/table/table.rs
@@ -5,7 +5,7 @@ use crate::new_york::components::ui::table::{
 };
 
 #[derive(Clone, Copy)]
-struct PaymentDetails{
+struct PaymentDetails {
     payment_status: &'static str,
     total_amount: &'static str,
     payment_method: &'static str,
@@ -24,61 +24,56 @@ fn invoices() -> Vec<Invoice> {
             details: RwSignal::new(PaymentDetails {
                 payment_status: "Paid",
                 total_amount: "$250.00",
-                payment_method: "Credit Card",    
-            })
-            
+                payment_method: "Credit Card",
+            }),
         },
         Invoice {
             invoice: "INV002",
             details: RwSignal::new(PaymentDetails {
                 payment_status: "Pending",
                 total_amount: "$150.00",
-                payment_method: "PayPal",    
-            })
-            
+                payment_method: "PayPal",
+            }),
         },
         Invoice {
             invoice: "INV003",
-            details: RwSignal::new(PaymentDetails {    
+            details: RwSignal::new(PaymentDetails {
                 payment_status: "Unpaid",
                 total_amount: "$350.00",
                 payment_method: "Bank Transfer",
-            })
+            }),
         },
         Invoice {
             invoice: "INV004",
             details: RwSignal::new(PaymentDetails {
                 payment_status: "Paid",
                 total_amount: "$450.00",
-                payment_method: "Credit Card",    
-            })
-            
+                payment_method: "Credit Card",
+            }),
         },
         Invoice {
             invoice: "INV005",
             details: RwSignal::new(PaymentDetails {
                 payment_status: "Paid",
                 total_amount: "$550.00",
-                payment_method: "PayPal",    
-            })
-            
+                payment_method: "PayPal",
+            }),
         },
         Invoice {
             invoice: "INV006",
             details: RwSignal::new(PaymentDetails {
                 payment_status: "Pending",
                 total_amount: "$200.00",
-                payment_method: "Bank Transfer",    
-            })
-            
+                payment_method: "Bank Transfer",
+            }),
         },
         Invoice {
             invoice: "INV007",
             details: RwSignal::new(PaymentDetails {
                 payment_status: "Unpaid",
                 total_amount: "$300.00",
-                payment_method: "Credit Card",    
-            })
+                payment_method: "Credit Card",
+            }),
         },
     ]
 }
@@ -97,7 +92,7 @@ pub fn TableDemo() -> impl IntoView {
                 </TableRow>
             </TableHeader>
             <TableBody>
-                <For 
+                <For
                     each=move || invoices()
                     key=|row| row.invoice
                     children=move |row| {
diff --git a/packages/leptos/table/src/default.rs b/packages/leptos/table/src/default.rs
index 987fa8a..1e10bf5 100644
--- a/packages/leptos/table/src/default.rs
+++ b/packages/leptos/table/src/default.rs
@@ -1,8 +1,7 @@
-use leptos_node_ref::AnyNodeRef;
-use tailwind_fuse::*;
 use leptos::prelude::*;
+use leptos_node_ref::AnyNodeRef;
 use leptos_style::Style;
-
+use tailwind_fuse::*;
 
 #[component]
 pub fn Table(
@@ -28,8 +27,6 @@ pub fn Table(
     }
 }
 
-
-
 #[component]
 pub fn TableHeader(
     #[prop(into, optional)] class: MaybeProp<String>,
@@ -52,8 +49,6 @@ pub fn TableHeader(
     }
 }
 
-
-
 #[component]
 pub fn TableBody(
     #[prop(into, optional)] class: MaybeProp<String>,
@@ -62,7 +57,6 @@ pub fn TableBody(
 
     #[prop(into, optional)] node_ref: AnyNodeRef,
     #[prop(optional)] children: Option<Children>,
-
 ) -> impl IntoView {
     view! {
         <tbody
@@ -77,8 +71,6 @@ pub fn TableBody(
     }
 }
 
-
-
 #[component]
 pub fn TableFooter(
     #[prop(into, optional)] class: MaybeProp<String>,
@@ -108,7 +100,7 @@ pub fn TableRow(
     #[prop(into, optional)] style: Signal<Style>,
 
     #[prop(into, optional)] node_ref: AnyNodeRef,
-    #[prop(optional)] children: Option<Children>,   
+    #[prop(optional)] children: Option<Children>,
 ) -> impl IntoView {
     view! {
         <tr
@@ -123,8 +115,6 @@ pub fn TableRow(
     }
 }
 
-
-
 #[component]
 pub fn TableHead(
     #[prop(into, optional)] class: MaybeProp<String>,
@@ -159,8 +149,6 @@ pub fn TableHead(
     }
 }
 
-
-
 #[component]
 pub fn TableCell(
     #[prop(into, optional)] class: MaybeProp<String>,
@@ -191,7 +179,6 @@ pub fn TableCell(
     }
 }
 
-
 #[component]
 pub fn TableCaption(
     #[prop(into, optional)] class: MaybeProp<String>,
diff --git a/packages/leptos/table/src/new_york.rs b/packages/leptos/table/src/new_york.rs
index e0300b4..b3528ed 100644
--- a/packages/leptos/table/src/new_york.rs
+++ b/packages/leptos/table/src/new_york.rs
@@ -1,8 +1,7 @@
-use leptos_node_ref::AnyNodeRef;
-use tailwind_fuse::*;
 use leptos::prelude::*;
+use leptos_node_ref::AnyNodeRef;
 use leptos_style::Style;
-
+use tailwind_fuse::*;
 
 #[component]
 pub fn Table(
@@ -28,8 +27,6 @@ pub fn Table(
     }
 }
 
-
-
 #[component]
 pub fn TableHeader(
     #[prop(into, optional)] class: MaybeProp<String>,
@@ -52,8 +49,6 @@ pub fn TableHeader(
     }
 }
 
-
-
 #[component]
 pub fn TableBody(
     #[prop(into, optional)] class: MaybeProp<String>,
@@ -62,7 +57,6 @@ pub fn TableBody(
 
     #[prop(into, optional)] node_ref: AnyNodeRef,
     #[prop(optional)] children: Option<Children>,
-
 ) -> impl IntoView {
     view! {
         <tbody
@@ -77,8 +71,6 @@ pub fn TableBody(
     }
 }
 
-
-
 #[component]
 pub fn TableFooter(
     #[prop(into, optional)] class: MaybeProp<String>,
@@ -108,7 +100,7 @@ pub fn TableRow(
     #[prop(into, optional)] style: Signal<Style>,
 
     #[prop(into, optional)] node_ref: AnyNodeRef,
-    #[prop(optional)] children: Option<Children>,   
+    #[prop(optional)] children: Option<Children>,
 ) -> impl IntoView {
     view! {
         <tr
@@ -123,8 +115,6 @@ pub fn TableRow(
     }
 }
 
-
-
 #[component]
 pub fn TableHead(
     #[prop(into, optional)] class: MaybeProp<String>,
@@ -159,8 +149,6 @@ pub fn TableHead(
     }
 }
 
-
-
 #[component]
 pub fn TableCell(
     #[prop(into, optional)] class: MaybeProp<String>,
@@ -191,7 +179,6 @@ pub fn TableCell(
     }
 }
 
-
 #[component]
 pub fn TableCaption(
     #[prop(into, optional)] class: MaybeProp<String>,