Table

Rust UI Icons - ChevronLeftRust UI Icons - ChevronRight

Rust UI component that displays a table with header, body and footer.

table
  • Rust UI Icons - CopyCopy Demo
A list of your recent invoices.
InvoiceStatusMethodAmount
INV001PaidCredit Card$250.00
INV002PendingPayPal$150.00
INV003UnpaidBank Transfer$350.00
INV004PaidCredit Card$450.00
INV005PaidPayPal$550.00
INV006PendingBank Transfer$200.00
INV007UnpaidCredit Card$300.00
Total $2,500.00
use leptos::prelude::*;

use crate::components::ui::table::{
    Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow,
};

#[component]
pub fn DemoTable() -> impl IntoView {
    view! {
        <Table>
            <TableCaption>{"A list of your recent invoices."}</TableCaption>
            <TableHeader>
                <TableRow>
                    <TableHead>{"Invoice"}</TableHead>
                    <TableHead>{"Status"}</TableHead>
                    <TableHead>{"Method"}</TableHead>
                    <TableHead class="text-right">{"Amount"}</TableHead>
                </TableRow>
            </TableHeader>

            <TableBody>
                {INVOICES
                    .iter()
                    .map(|(invoice, status, method, amount)| {
                        view! {
                            <TableRow>
                                <TableCell>{*invoice}</TableCell>
                                <TableCell>{*status}</TableCell>
                                <TableCell>{*method}</TableCell>
                                <TableCell class="text-right">{*amount}</TableCell>
                            </TableRow>
                        }
                    })
                    .collect::<Vec<_>>()}
            </TableBody>

            <TableFooter>
                <TableRow>
                    // TODO UI Table --> colSpan
                    // <TableCell colSpan="3">{"Total"}</TableCell>
                    <TableCell>{"Total"}</TableCell>
                    <TableCell>{""}</TableCell>
                    <TableCell>{""}</TableCell>
                    <TableCell class="text-right">{"$2,500.00"}</TableCell>
                </TableRow>
            </TableFooter>
        </Table>
    }
}

/*´:°•.°+.*•´.*:˚.°*.˚•´.°:°•.°•.*•´.*:˚.°*.˚•´.°:°•.°+.*•´.*:*/
/*                      ✨ CONSTANTS ✨                       */
/*.•°:°.´+˚.*°.˚:*.´•*.+°.•°:´*.´•*.•°.•°:°.´:•˚°.*°.˚:*.´+°.•*/

const INVOICES: [(&str, &str, &str, &str); 7] = [
    ("INV001", "Paid", "Credit Card", "$250.00"),
    ("INV002", "Pending", "PayPal", "$150.00"),
    ("INV003", "Unpaid", "Bank Transfer", "$350.00"),
    ("INV004", "Paid", "Credit Card", "$450.00"),
    ("INV005", "Paid", "PayPal", "$550.00"),
    ("INV006", "Pending", "Bank Transfer", "$200.00"),
    ("INV007", "Unpaid", "Credit Card", "$300.00"),
];

Installation

You can run either of the following commands:

# cargo install ui-cli --force
ui add demo_table
ui add table

Update the imports to match your project setup.

Copy and paste the following code into your project:

components/ui/table.rs

use leptos::prelude::*;
use leptos_ui::clx;

mod components {
    use super::*;
    clx! {Table, table, "w-full max-w-7xl text-sm caption-bottom"}
    clx! {TableCaption, caption, "mt-4 text-sm text-muted-foreground"}
    clx! {TableHeader, thead, "[&_tr]:border-b"}
    clx! {TableRow, tr, "border-b transition-colors data-[state=selected]:bg-muted hover:bg-muted/50"}
    clx! {TableHead, th, "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]"}
    clx! {TableBody, tbody, ""}
    clx! {TableCell, td, "p-4 align-middle [&:has([role=checkbox])]:pr-0"}
    clx! {TableFooter, tfoot, "font-medium border border-t bg-muted/50 [&>tr]:last:border-b-0"}
    clx! {CardContent, div, "pt-4"}
    clx! {CardFooter, div, "mt-4", "flex items-center justify-end"}
}

pub use components::*;

Update the imports to match your project setup.

Usage

use crate::components::ui::table::{
    Table,
    TableBody,
    TableCaption,
    TableCell,
    TableFooter,
    TableHead,
    TableHeader,
    TableRow,
};

<Table>
    <TableCaption>"Table Caption"</TableCaption>
    <TableHeader>
        <TableRow>
            <TableHead>"Header 1"</TableHead>
            <TableHead>"Header 2"</TableHead>
        </TableRow>
    </TableHeader>
    <TableBody>
        <TableRow>
            <TableCell>"Cell 1"</TableCell>
            <TableCell>"Cell 2"</TableCell>
        </TableRow>
    </TableBody>
</Table>
Rust UI Icons - ChevronLeftSwitchTabsRust UI Icons - ChevronRight