Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/table #220

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Feature/table #220

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
34bea90
Add table to project
israelsilvabarbara Jan 7, 2025
eb00dcc
Add default and new-york
israelsilvabarbara Jan 7, 2025
0c1cda3
Add Examples
israelsilvabarbara Jan 8, 2025
bb3d3e0
Fix cargo fmt
israelsilvabarbara Jan 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions Cargo.lock
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 3 additions & 0 deletions book-examples/leptos/Cargo.toml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,13 +21,15 @@ 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 = [
"alert",
"badge",
"button",
"card",
"table",
]
alert = [
"dep:lucide-leptos",
Expand All @@ -45,3 +47,4 @@ card = [
"dep:shadcn-ui-leptos-button",
"dep:shadcn-ui-leptos-card",
]
table = ["dep:shadcn-ui-leptos-table"]
6 changes: 6 additions & 0 deletions book-examples/leptos/src/default.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ mod badge;
mod button;
#[cfg(feature = "card")]
mod card;
#[cfg(feature = "table")]
mod table;

use leptos::prelude::*;
use leptos_router::{
Expand All @@ -34,6 +36,10 @@ pub fn Default() -> impl MatchNestedRoutes + Clone {
{
component_view(self::card::CardRoutes, ())
},
#[cfg(feature = "table")]
{
component_view(self::table::TableRoutes, ())
},
);

view! {
Expand Down
2 changes: 2 additions & 0 deletions book-examples/leptos/src/default/components/ui.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
18 changes: 18 additions & 0 deletions book-examples/leptos/src/default/table.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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()
}
120 changes: 120 additions & 0 deletions book-examples/leptos/src/default/table/table.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,120 @@
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>
}
}
6 changes: 6 additions & 0 deletions book-examples/leptos/src/new_york.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ mod badge;
mod button;
#[cfg(feature = "card")]
mod card;
#[cfg(feature = "table")]
mod table;

use leptos::prelude::*;
use leptos_router::{
Expand All @@ -34,6 +36,10 @@ pub fn NewYork() -> impl MatchNestedRoutes + Clone {
{
component_view(self::card::CardRoutes, ())
},
#[cfg(feature = "table")]
{
component_view(self::table::TableRoutes, ())
},
);

view! {
Expand Down
2 changes: 2 additions & 0 deletions book-examples/leptos/src/new_york/components/ui.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
18 changes: 18 additions & 0 deletions book-examples/leptos/src/new_york/table.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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()
}
120 changes: 120 additions & 0 deletions book-examples/leptos/src/new_york/table/table.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,120 @@
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>
}
}
17 changes: 17 additions & 0 deletions packages/leptos/table/Cargo.toml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Loading
Loading