DataTable
Data tables display information in a way that’s easy to scan, so that users can look for patterns and insights. They can be embedded in primary content, such as cards. Data tables can include:
- A corresponding visualization
- Navigation
- Tools to query and manipulate data
When including tools, they should be placed directly above or below the table.
Helper Classes
There are different helper classes, which will help you to improve the usability of a data-table
| Class Name | Available on | Effect |
|---|---|---|
| main | <td>, <th> | Used to create a visual focus on a main column. |
| hover | <table> | Enable hover effect on rows. |
| active | <tr> | Add visual feedback for a active row. |
| number | <td>, <th> | Numerical values should be arranged to the right. |
| controls | <td>, <th> | Use this class if you want to add buttons in a column. |
Data Table Example
| Name | Price | Value | % | |
|---|---|---|---|---|
| Product A | 23.33$ | 0.67 | 5.21% | |
| Product B | 0.98$ | 1 | 93.10% |
|
| Product C | 10.00$ | 0.01 | 9.99% | |
| Product D | 43.33$ | 0.3 | 100% | |
Usage in Cards
You can also use data tables very easily in cards.
Data Tables
some examples for data tables
| Name | Price | Value | % |
|---|---|---|---|
| Product A | 23.33$ | 0.67 | 5.21% |
| Product B | 0.98$ | 1 | 93.10% |
| Product C | 10.00$ | 0.01 | 9.99% |
| Product D | 43.33$ | 0.3 | 100% |