Table
A responsive table component.
Invoice | Status | Method | Amount |
---|---|---|---|
INV001 | Paid | Credit Card | $250.00 |
INV002 | Pending | PayPal | $150.00 |
INV003 | Unpaid | Bank Transfer | $350.00 |
INV004 | Paid | Paypal | $450.00 |
INV005 | Paid | Credit Card | $550.00 |
INV006 | Pending | Bank Transfer | $200.00 |
INV007 | Unpaid | Credit Card | $300.00 |
Total | $2,500.00 |
use leptos::prelude::*; use singlestage::*; #[component] pub fn TableExample() -> impl IntoView { view! { <Table class="overflow-x-auto w-full"> <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> <TableRow> <TableCell class="font-medium">"INV001"</TableCell> <TableCell>"Paid"</TableCell> <TableCell>"Credit Card"</TableCell> <TableCell class="text-right">"$250.00"</TableCell> </TableRow> <TableRow> <TableCell class="font-medium">"INV002"</TableCell> <TableCell>"Pending"</TableCell> <TableCell>"PayPal"</TableCell> <TableCell class="text-right">"$150.00"</TableCell> </TableRow> <TableRow> <TableCell class="font-medium">"INV003"</TableCell> <TableCell>"Unpaid"</TableCell> <TableCell>"Bank Transfer"</TableCell> <TableCell class="text-right">"$350.00"</TableCell> </TableRow> <TableRow> <TableCell class="font-medium">"INV004"</TableCell> <TableCell>"Paid"</TableCell> <TableCell>"Paypal"</TableCell> <TableCell class="text-right">"$450.00"</TableCell> </TableRow> <TableRow> <TableCell class="font-medium">"INV005"</TableCell> <TableCell>"Paid"</TableCell> <TableCell>"Credit Card"</TableCell> <TableCell class="text-right">"$550.00"</TableCell> </TableRow> <TableRow> <TableCell class="font-medium">"INV006"</TableCell> <TableCell>"Pending"</TableCell> <TableCell>"Bank Transfer"</TableCell> <TableCell class="text-right">"$200.00"</TableCell> </TableRow> <TableRow> <TableCell class="font-medium">"INV007"</TableCell> <TableCell>"Unpaid"</TableCell> <TableCell>"Credit Card"</TableCell> <TableCell class="text-right">"$300.00"</TableCell> </TableRow> </TableBody> <TableFooter> <TableRow> <TableCell colspan=3>"Total"</TableCell> <TableCell class="text-right">"$2,500.00"</TableCell> </TableRow> </TableFooter> </Table> } }
Anatomy
Import all parts and piece them together.
use leptos::prelude::*; use singlestage::table::*; #[component] pub fn TableAnatomy() -> impl IntoView { view! { <Table> <TableCaption /> <TableHeader> <TableRow> <TableHead /> </TableRow> </TableHeader> <TableBody> <TableRow> <TableCell /> </TableRow> </TableBody> <TableFooter> <TableRow> <TableCell /> </TableRow> </TableFooter> </Table> } }