Examples
Copy-pasteable table examples with separate Angular, HTML, and CSS files.
Sortable account table
Use sortable column metadata with controlled sort state when the parent owns ordering.
Sortable table (Plain CSS)
Sortable table (Tailwind CSS)
Custom cell template
Project a template for cells that need richer visual treatment than plain text.
Custom cell table (Plain CSS)
Custom cell table (Tailwind CSS)
Scrollable sticky statement table
Use scrollAxis with table sizing variables when the table needs both vertical and horizontal scrolling. The header stays sticky while the vertical axis scrolls.
Scrollable table (Plain CSS)
| Date | Description | Category | Method | Reference | Status | Amount | Balance |
|---|---|---|---|---|---|---|---|
| Jan 02 | Opening balance | Ledger | System | BAL-1000 | Posted | $0.00 | $14,820.00 |
| Jan 04 | Wire from Acme Supply | Receivable | Wire | WIRE-1832 | Posted | $3,240.00 | $18,060.00 |
| Jan 08 | Payroll batch | Payroll | ACH | PAY-0148 | Posted | -$6,850.00 | $11,210.00 |
| Jan 10 | Software subscription | Tools | Card | CARD-4431 | Posted | -$489.00 | $10,721.00 |
| Jan 15 | Client retainer | Revenue | ACH | ACH-2204 | Pending | $4,500.00 | $15,221.00 |
| Jan 17 | Travel reimbursement | Expense | ACH | EXP-0911 | Posted | -$780.00 | $14,441.00 |
| Jan 22 | Tax estimate | Tax | ACH | TAX-2026 | Scheduled | -$2,100.00 | $12,341.00 |
Scrollable table (Tailwind CSS)
| Date | Description | Category | Method | Reference | Status | Amount | Balance |
|---|---|---|---|---|---|---|---|
| Jan 02 | Opening balance | Ledger | System | BAL-1000 | Posted | $0.00 | $14,820.00 |
| Jan 04 | Wire from Acme Supply | Receivable | Wire | WIRE-1832 | Posted | $3,240.00 | $18,060.00 |
| Jan 08 | Payroll batch | Payroll | ACH | PAY-0148 | Posted | -$6,850.00 | $11,210.00 |
| Jan 10 | Software subscription | Tools | Card | CARD-4431 | Posted | -$489.00 | $10,721.00 |
| Jan 15 | Client retainer | Revenue | ACH | ACH-2204 | Pending | $4,500.00 | $15,221.00 |
| Jan 17 | Travel reimbursement | Expense | ACH | EXP-0911 | Posted | -$780.00 | $14,441.00 |
| Jan 22 | Tax estimate | Tax | ACH | TAX-2026 | Scheduled | -$2,100.00 | $12,341.00 |
Grouped column headers
Compose a tree of columns to get multi-row headers with colspan and rowspan. Group columns carry only an id, label, and children — leaf columns keep their existing accessor, sortable, sticky, width and truncate options.
Grouped headers (Plain CSS)
Grouped headers (Tailwind CSS)
Grouped body rows
Mark a leaf column with groupBy to merge consecutive equal values into native rowspan cells. Keep the incoming rows sorted by the grouped column so each group is contiguous. Set hoverMode="group" so hovering any row highlights the whole merged group instead of a single physical row.
Grouped body rows (Plain CSS)
Grouped body rows (Tailwind CSS)
Conditional row and cell styling
Style specific rows and cells with the rowStyle input and column cellStyle hook. These apply inline styles and CSS custom properties to the table's internal elements, so component CSS variables can drive the result without global selectors.