Table
A responsive table component.
Installation
$npx maddex add Table
Basic Usage
Start with a caption, a header row, and a compact body for the most common tabular layouts.
Preview
| 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 |
With Footer
Add a footer row when the table needs totals, summaries, or another rollup of the visible rows.
Preview
| Plan | Active Seats | Renewal Window | MRR |
|---|---|---|---|
| Starter | 42 | May 05 - May 11 | $1,260 |
| Growth | 118 | May 12 - May 18 | $3,540 |
| Scale | 157 | May 19 - May 25 | $4,730 |
| Total | $9,530 | ||
Rich Cells
Table cells can hold other Maddex components, which makes it easy to surface status and ownership data in place.
Preview
| Project | Owner | Status | Next Milestone |
|---|---|---|---|
| Northwind Portal | Rina Patel | On track | May 07 |
| Contoso Billing | Jordan Lee | Needs review | May 10 |
| Fabrikam Analytics | Maria Gomez | Blocked | May 14 |