Table

View Markdown

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

table

Copy Demo

View as Markdown

A list of your recent invoices.
Invoice	Status	Method	Amount
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
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.

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>

Interactive table with row selection using checkbox components for bulk actions. This example demonstrates how to combine Multi Select and Checkbox components in Leptos to build selectable tables with proper state management and accessibility support in Rust applications.

[LEPTOS_CONVERTER]: Unknown element: StaticTableSelectable

Get notified when new stuff drops.

Switch Tabs

Table

Installation

You can run either of the following commands:

Update the imports to match your project setup.

Copy and paste the following code into your project:

Update the imports to match your project setup.

Usage

Examples

Table Selectable

Get notified when new stuff drops.