Simple table
A simple stateless table leveraging the columns configuration.
Title | Time | Event Type | Status | Probability | Severity | Priority | |
|---|---|---|---|---|---|---|---|
| Event 1 | 2020-03-20 | Anomaly detection | Closed | 1% | Critical | High | |
| Event 2 | 2020-03-20 | Anomaly detection | Open | 2% | Major | Medium | |
| Event 3 | 2020-03-20 | Anomaly detection | Closed | 3% | Average | Low | |
| Event 4 | 2020-03-20 | Anomaly detection | Open | 4% | Minor | High | |
| Event 5 | 2020-03-20 | Anomaly detection | Closed | 5% | Critical | Medium | |
| Event 6 | 2020-03-20 | Anomaly detection | Open | 6% | Major | Low | |
| Event 7 | 2020-03-20 | Anomaly detection | Closed | 7% | Average | High | |
| Event 8 | 2020-03-20 | Anomaly detection | Open | 8% | Minor | Medium |
No data table
Custom content, like an HvEmptyState, can be displayed inside table cells, by leveraging the native colSpan feature.
Name | Age | Role | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
No data to display. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Client-side table
A client-side table supporting the most commonly used table features: row sorting, selection, and actions, sticky header and columns, pagination, and bulk actions.
Title | Time | Event Type | Status | Probability | Severity | Priority | ||
|---|---|---|---|---|---|---|---|---|
| Event 1 | 2020-03-20 | Anomaly detection | Closed | 1% | Critical | High | ||
| Event 2 | 2020-03-20 | Anomaly detection | Open | 2% | Major | Medium | ||
| Event 3 | 2020-03-20 | Anomaly detection | Closed | 3% | Average | Low | ||
| Event 4 | 2020-03-20 | Anomaly detection | Open | 4% | Minor | High | ||
| Event 5 | 2020-03-20 | Anomaly detection | Closed | 5% | Critical | Medium | ||
| Event 6 | 2020-03-20 | Anomaly detection | Open | 6% | Major | Low | ||
| Event 7 | 2020-03-20 | Anomaly detection | Closed | 7% | Average | High | ||
| Event 8 | 2020-03-20 | Anomaly detection | Open | 8% | Minor | Medium | ||
| Event 9 | 2020-03-20 | Anomaly detection | Closed | 9% | Critical | Low | ||
| Event 10 | 2020-03-20 | Anomaly detection | Open | 10% | Major | High |
Showrows
10
Filtering
Row filtering and global filtering can be configured by leveraging the useHvFilters and useHvGlobalFilter hooks respectively.
Title | Time | Event Type | Status | Probability | Severity | Priority | ||
|---|---|---|---|---|---|---|---|---|
| Event 1 | 2020-03-20 | Anomaly detection | Closed | 1% | Critical | High | ||
| Event 2 | 2020-03-20 | Anomaly detection | Open | 2% | Major | Medium | ||
| Event 3 | 2020-03-20 | Anomaly detection | Closed | 3% | Average | Low | ||
| Event 4 | 2020-03-20 | Anomaly detection | Open | 4% | Minor | High | ||
| Event 5 | 2020-03-20 | Anomaly detection | Closed | 5% | Critical | Medium | ||
| Event 6 | 2020-03-20 | Anomaly detection | Open | 6% | Major | Low | ||
| Event 7 | 2020-03-20 | Anomaly detection | Closed | 7% | Average | High | ||
| Event 8 | 2020-03-20 | Anomaly detection | Open | 8% | Minor | Medium | ||
| Event 9 | 2020-03-20 | Anomaly detection | Closed | 9% | Critical | Low | ||
| Event 10 | 2020-03-20 | Anomaly detection | Open | 10% | Major | High |
Showrows
10
Grouping
Example of header grouping and row expansion via grouping
Status | Title | Time | Type | Probability | Event | |
|---|---|---|---|---|---|---|
Severity | Priority | |||||
| Closed (6) | Avg. 6% | |||||
| Event 1 | 2020-03-20 | Anomaly detection | 1% | Critical | High | |
| Event 3 | 2020-03-20 | Anomaly detection | 3% | Average | Low | |
| Event 5 | 2020-03-20 | Anomaly detection | 5% | Critical | Medium | |
| Event 7 | 2020-03-20 | Anomaly detection | 7% | Average | High | |
| Event 9 | 2020-03-20 | Anomaly detection | 9% | Critical | Low | |
| Event 11 | 2020-03-20 | Anomaly detection | 11% | Average | Medium | |
| Open (6) | Avg. 7% | |||||
| Event 2 | 2020-03-20 | Anomaly detection | 2% | Major | Medium | |
| Event 4 | 2020-03-20 | Anomaly detection | 4% | Minor | High | |
| Event 6 | 2020-03-20 | Anomaly detection | 6% | Major | Low | |
| Event 8 | 2020-03-20 | Anomaly detection | 8% | Minor | Medium | |
| Event 10 | 2020-03-20 | Anomaly detection | 10% | Major | High | |
| Event 12 | 2020-03-20 | Anomaly detection | 12% | Minor | Low | |
Other examples
You can find more table examples in our Stackblitz Tables collection. In there, you’ll find various custom table use-cases, such as server-side, infinite scroll, sticky column resizing, etc.