Component Documentation
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
Pay Pal
$550.00
INV006
Pending
‍Bank Transfer
$200.00
INV007
Unpaid
Credit Card
$300.00
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
Pay Pal
$550.00
INV006
Pending
‍Bank Transfer
$200.00
INV007
Unpaid
Credit Card
$300.00

Table

The Table component lets you display structured data in a clean, flexible layout — great for dashboards, content lists, or reports.

It’s made up of a few building blocks:

  • Table Wrapper – holds the entire table
  • Table Row – each row of content
  • Table Cell – the columns inside a row (can hold text or other components)
  • Table Head – for column labels (usually in the first row)
  • Table Footer – optional row at the bottom for totals or extra info

Usage

  1. Drag the Table Wrapper onto the canvas.
  2. Add Table Rows inside.
  3. Inside each row, use Table Cells or Table Head for content.
  4. Add a Table Footer as the last row if needed.
  5. You can adjust the width of each Head or Cell to control column sizes.
  6. Cells include a text field and a slot to insert other components if needed.

This gives you a flexible and responsive table layout that you can fully customize.