Table
A responsive table component for displaying data in a structured format.
Default
The standard table with invoices data.
| 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 |
| Total | $2,500.00 | ||
table-example-default.ts
Project Status
Using badges within table cells to show status colors.
| Project | Status | Priority | Progress |
|---|---|---|---|
| Spartan UI | High | 100% | |
| Analytics Dashboard | Medium | 65% | |
| Mobile App | High | 30% | |
| Documentation | Low | 90% |
table-example-status.ts
File Browser
Integrating icons into tables for better visual identification.
| Name | Type | Size | |
|---|---|---|---|
| resume.pdf | PDF Document | 1.2 MB | |
| profile-picture.jpg | JPEG Image | 4.5 MB | |
| backup-2024.zip | Archive | 156 MB | |
| index.html | HTML File | 12 KB |
table-example-files.ts
Installation & Usage
Installation
Imports
Basic Usage
API Reference
Helm API
The Helm directives provide the spartan/ui styling for the table.
| Directive | Selector | Description |
|---|---|---|
| HlmTable | [hlmTable] | Main table directive for layout and typography. |
| HlmTableContainer | [hlmTableContainer] | Container for the table, handles overflow and rounded corners. |
| HlmTHead | [hlmTHead] | Styles for the table header section. |
| HlmTBody | [hlmTBody] | Styles for the table body section. |
| HlmTFoot | [hlmTFoot] | Styles for the table footer section. |
| HlmTr | [hlmTr] | Styles for table rows. |
| HlmTh | [hlmTh] | Styles for table header cells. |
| HlmTd | [hlmTd] | Styles for table data cells. |
| HlmCaption | [hlmCaption] | Styles for the table caption. |
Brain API
The Table component is currently styling-only and does not have a Brain implementation for logic. For logic-heavy tables, consider using the Data Table component.