Table
A responsive table component for displaying tabular data with proper styling and accessibility.
| Name | Role | |
|---|---|---|
| John Doe | john@example.com | Admin |
| Jane Smith | jane@example.com | User |
Installation
Usage
Examples
Basic Table
| Name | Role | |
|---|---|---|
| John Doe | john@example.com | Admin |
| Jane Smith | jane@example.com | User |
Table with Footer
| Product | Price | Quantity | Total |
|---|---|---|---|
| Laptop | $999 | 2 | $1,998 |
| Mouse | $25 | 3 | $75 |
| Total | $2,073 | ||
Table with Caption
| Invoice | Status | Method | Amount |
|---|---|---|---|
| INV001 | Paid | Credit Card | $250.00 |
| INV002 | Pending | PayPal | $150.00 |
Table with Actions
| User | Status | ||
|---|---|---|---|
John Doe @johndoe | john@example.com | Active | |
Jane Smith @janesmith | jane@example.com | Pending |
API Reference
Properties
| Property | Type | Default | Description |
|---|---|---|---|
uiTable | Directive | — | Main table container directive with responsive styling. |
uiTableHeader | Directive | — | Table header section with border styling. |
uiTableBody | Directive | — | Table body section with proper row border handling. |
uiTableFooter | Directive | — | Table footer section with muted background and border. |
uiTableRow | Directive | — | Table row with hover effects and selection states. |
uiTableHead | Directive | — | Header cell with proper alignment and checkbox support. |
uiTableCell | Directive | — | Data cell with padding and checkbox alignment. |
uiTableCaption | Directive | — | Table caption with muted text styling. |
class | string | — | Additional CSS classes to apply to the table elements. |
Built with ❤️ by @immohammadjaved • Source code available on GitHub