feat: implement official DataTable components and fix row spacing issues
Some checks failed
Build MIPS Binary / build (push) Failing after 1m33s

This commit is contained in:
spinline
2026-02-12 00:32:58 +03:00
parent 04cb7d51cb
commit 56e8cc03d1
4 changed files with 74 additions and 54 deletions

View File

@@ -0,0 +1,6 @@
// * Reuse @table.rs
pub use crate::components::ui::table::{
Table as DataTable, TableBody as DataTableBody, TableCaption as DataTableCaption, TableCell as DataTableCell,
TableFooter as DataTableFooter, TableHead as DataTableHead, TableHeader as DataTableHeader,
TableRow as DataTableRow, TableWrapper as DataTableWrapper,
};

View File

@@ -5,4 +5,6 @@ pub mod toast;
pub mod context_menu;
pub mod theme_toggle;
pub mod svg_icon;
pub mod table;
pub mod table;
pub mod data_table;
pub mod sonner;

View File

@@ -3,19 +3,25 @@ use tw_merge::tw_merge;
#[component]
pub fn TableWrapper(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
let class = tw_merge!("overflow-hidden rounded-md border", class);
let class = tw_merge!("overflow-hidden rounded-md border w-full", class);
view! { <div class=class>{children()}</div> }
}
#[component]
pub fn Table(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
let class = tw_merge!("w-full text-sm caption-bottom", class);
let class = tw_merge!("w-full text-sm border-collapse", class);
view! { <table class=class>{children()}</table> }
}
#[component]
pub fn TableCaption(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
let class = tw_merge!("mt-4 text-sm text-muted-foreground", class);
view! { <caption class=class>{children()}</caption> }
}
#[component]
pub fn TableHeader(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
let class = tw_merge!("[&_tr]:border-b", class);
let class = tw_merge!("[&_tr]:border-b bg-muted/50", class);
view! { <thead class=class>{children()}</thead> }
}
@@ -27,7 +33,7 @@ pub fn TableRow(children: Children, #[prop(optional, into)] class: String) -> im
#[component]
pub fn TableHead(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
let class = tw_merge!("h-10 px-2 text-left align-middle font-medium text-muted-foreground", class);
let class = tw_merge!("h-10 px-4 text-left align-middle font-medium text-muted-foreground whitespace-nowrap", class);
view! { <th class=class>{children()}</th> }
}
@@ -39,6 +45,12 @@ pub fn TableBody(children: Children, #[prop(optional, into)] class: String) -> i
#[component]
pub fn TableCell(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
let class = tw_merge!("p-2 align-middle", class);
let class = tw_merge!("p-2 px-4 align-middle", class);
view! { <td class=class>{children()}</td> }
}
#[component]
pub fn TableFooter(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
let class = tw_merge!("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", class);
view! { <tfoot class=class>{children()}</tfoot> }
}