Tables
The simpler of the table components is v-table, a basic wrapper component for the HTML <table> element. In addition, regular table elements such as <thead>, <tbody>, <tr>, and <td> work by default.
Basic
| Desserts(100g Servings) | Calories | Fat(g) | Carbs(g) | Protein(g) |
|---|---|---|---|---|
| Frozen Yogurt | 159 | 6 | 24 | 4 |
| Ice cream sandwich | 237 | 6 | 24 | 4 |
| Eclair | 262 | 6 | 24 | 4 |
| Cupcake | 305 | 6 | 24 | 4 |
| Gingerbread | 356 | 6 | 24 | 4 |
Theme
Use theme prop to switch table to the dark theme.
| Desserts(100g Servings) | Calories | Fat(g) | Carbs(g) | Protein(g) |
|---|---|---|---|---|
| Frozen Yogurt | 159 | 6 | 24 | 4 |
| Ice cream sandwich | 237 | 6 | 24 | 4 |
| Eclair | 262 | 6 | 24 | 4 |
| Cupcake | 305 | 6 | 24 | 4 |
| Gingerbread | 356 | 6 | 24 | 4 |
Density
You can show a dense version of the table by using the density prop.
| Desserts(100g Servings) | Calories | Fat(g) | Carbs(g) | Protein(g) |
|---|---|---|---|---|
| Frozen Yogurt | 159 | 6 | 24 | 4 |
| Ice cream sandwich | 237 | 6 | 24 | 4 |
| Eclair | 262 | 6 | 24 | 4 |
| Cupcake | 305 | 6 | 24 | 4 |
| Gingerbread | 356 | 6 | 24 | 4 |
Height
You can set the height of the table by using the height prop.
| Desserts(100g Servings) | Calories | Fat(g) | Carbs(g) | Protein(g) |
|---|---|---|---|---|
| Frozen Yogurt | 159 | 6 | 24 | 4 |
| Ice cream sandwich | 237 | 6 | 24 | 4 |
| Eclair | 262 | 6 | 24 | 4 |
| Cupcake | 305 | 6 | 24 | 4 |
| Gingerbread | 356 | 6 | 24 | 4 |
Fixed Header
You can fix the header of table by using the fixed-header prop.
| Desserts(100g Servings) | Calories | Fat(g) | Carbs(g) | Protein(g) |
|---|---|---|---|---|
| Frozen Yogurt | 159 | 6 | 24 | 4 |
| Ice cream sandwich | 237 | 6 | 24 | 4 |
| Eclair | 262 | 6 | 24 | 4 |
| Cupcake | 305 | 6 | 24 | 4 |
| Gingerbread | 356 | 6 | 24 | 4 |
CONTENTS
Introduction
Basic
Theme
Density
Height
Fixed Header