# Table

{"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"}

```astro --- --- 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

``` ## Installation ```bash bunx bejamas add table ``` ```bash npx bejamas add table ``` ```bash pnpm dlx bejamas add table ``` ```bash yarn dlx bejamas add table ``` ## Usage ```astro nocollapse --- const invoices = [ { invoice: "INV001", paymentStatus: "Paid", totalAmount: "$250.00", paymentMethod: "Credit Card" }, { invoice: "INV002", paymentStatus: "Pending", totalAmount: "$150.00", paymentMethod: "PayPal" }, { invoice: "INV003", paymentStatus: "Unpaid", totalAmount: "$350.00", paymentMethod: "Bank Transfer" }, { invoice: "INV004", paymentStatus: "Paid", totalAmount: "$450.00", paymentMethod: "Credit Card" }, { invoice: "INV005", paymentStatus: "Paid", totalAmount: "$550.00", paymentMethod: "PayPal" }, { invoice: "INV006", paymentStatus: "Pending", totalAmount: "$200.00", paymentMethod: "Bank Transfer" }, { invoice: "INV007", paymentStatus: "Unpaid", totalAmount: "$300.00", paymentMethod: "Credit Card" }, ]; --- A list of your recent invoices. Invoice Status Method Amount {invoices.map((invoice) => ( {invoice.invoice} {invoice.paymentStatus} {invoice.paymentMethod} {invoice.totalAmount} ))} Total $2,500.00

``` ## Props | Prop | Type | Default | |---|---|---| | class | `string` | `""` | ## Examples ### Footer Use the `` component to add a footer to the table.

```astro --- --- 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 Total $2,500.00

``` ### Actions A table showing actions for each row using a `` component.

{"Product"} {"Price"} {"Actions"} {"Wireless Mouse"} {"$29.99"} {"Edit"} {"Duplicate"} {"Delete"} {"Mechanical Keyboard"} {"$129.99"} {"Edit"} {"Duplicate"} {"Delete"} {"USB-C Hub"} {"$49.99"} {"Edit"} {"Duplicate"} {"Delete"}

```astro --- --- Product Price Actions Wireless Mouse $29.99 Edit Duplicate Delete Mechanical Keyboard $129.99 Edit Duplicate Delete USB-C Hub $49.99 Edit Duplicate Delete

```