feat: implement official DataTable components and fix row spacing issues
Some checks failed
Build MIPS Binary / build (push) Failing after 1m33s
Some checks failed
Build MIPS Binary / build (push) Failing after 1m33s
This commit is contained in:
6
frontend/src/components/ui/data_table.rs
Normal file
6
frontend/src/components/ui/data_table.rs
Normal 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,
|
||||
};
|
||||
@@ -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;
|
||||
@@ -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> }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user