Tables #
You can use plain <table>s with the .va-table class that would apply Vuestic-theme styles to them.
If you want more functional solutions, use our data-table component or our theme for AG-Grid:
Examples #
Basic usage #
Add the .va-table class to the <table> element.
| Name | Country | Status | |
|---|---|---|---|
| Ashley Mcdaniel | ashleymcdaniel@nebulean.com | Cayman Islands | warning |
| Todd Sellers | sellerstodd@nebulean.com | Togo | info |
| Sherman Knowles | shermanknowles@nebulean.com | Central African Republic | warning |
| Vasquez Lawson | vasquezlawson@nebulean.com | Bouvet Island | info |
Hoverable #
Highlight hovered rows with additional .va-table--hoverable class.
| Name | Country | Status | |
|---|---|---|---|
| Ashley Mcdaniel | ashleymcdaniel@nebulean.com | Cayman Islands | warning |
| Todd Sellers | sellerstodd@nebulean.com | Togo | info |
| Sherman Knowles | shermanknowles@nebulean.com | Central African Republic | warning |
| Vasquez Lawson | vasquezlawson@nebulean.com | Bouvet Island | info |
Striped #
The .va-table--striped class colorizes each even row of the table.
| Name | Country | Status | |
|---|---|---|---|
| Ashley Mcdaniel | ashleymcdaniel@nebulean.com | Cayman Islands | warning |
| Todd Sellers | sellerstodd@nebulean.com | Togo | info |
| Sherman Knowles | shermanknowles@nebulean.com | Central African Republic | warning |
| Vasquez Lawson | vasquezlawson@nebulean.com | Bouvet Island | info |
Clickable #
Change the cursor to pointer when hovering rows by adding the .va-table--clickable class
| Name | Country | Status | |
|---|---|---|---|
| Ashley Mcdaniel | ashleymcdaniel@nebulean.com | Cayman Islands | warning |
| Todd Sellers | sellerstodd@nebulean.com | Togo | info |
| Sherman Knowles | shermanknowles@nebulean.com | Central African Republic | warning |
| Vasquez Lawson | vasquezlawson@nebulean.com | Bouvet Island | info |