UI Kits
Tables

Invoice Table

Invoice list with totals and payment status.

Add to UI Builder
Usage guidance

When to use it.

Use for structured comparisons and records. Keep headers concise and support narrow screens.

Accessibility

Implementation notes.

  • Use table headers for column and row relationships.
  • Provide accessible labels for row actions.
  • Offer a responsive alternative if the table becomes unusable on small screens.
Release QA

Implementation checklist.

0/3
Handoff notes

Implementation notes for this component.

Quick section export
<table class="ap-table"><thead><tr><th>Invoice</th><th>Customer</th><th>Due</th><th>Total</th><th>Status</th></tr></thead><tbody><tr><td>#1048</td><td>Acme Co.</td><td>Aug 18</td><td>$184.00</td><td>Paid</td></tr><tr><td>#1049</td><td>North & Co.</td><td>Aug 25</td><td>$315.00</td><td>Open</td></tr></tbody></table>
Related components

More in Tables