- Dashboard
My Library
- Base Components
- Base Pages
- My Library
- Ag Grid Table Page
Metronic Components
- Vue Bootstrap
- Vuetify
Metronic Custom
- Error Pages
- Wizard
Quick Actions
23 tasks pending
System Messages
Notifications
Another purpose persuade Due in 2 Days
+28% Would be to people Due in 2 Days
+50% Purpose would be to persuade Due in 2 Days
-27% The best product Due in 2 Days
+8% 5 new user generated report
Reports based on sales
2 new items submited
by Grog John
79 PSD files generated
Reports based on sales
$2900 worth producucts sold
Total 234 items
4.5h-avarage response time
Fostest is Barry
3 Defence alerts
40% less alerts thar last week
Avarage 4 blog posts per author
Most posted 12 time
16 authors joined last week
9 photodrapehrs, 7 designer
2 new items have been submited
by Grog John
2.8 GB-total downloads size
Mostly PSD end AL concepts
$2900 worth producucts sold
Total 234 items
7 new user generated report
Reports based on sales
4.5h-avarage response time
Fostest is Barry
Simple tables The
v-simple-table component is a simple wrapper component around the <table> element. Inside the component you can use all the regular table elements such as <thead>, <tbody>, <tr>, etc. See documentation. Fixed height and fixed header
<v-simple-table fixed-header height="300px">
<template v-slot:default>
<thead>
<tr>
<th class="text-left">Name</th>
<th class="text-left">Calories</th>
</tr>
</thead>
<tbody>
<tr v-for="item in desserts" :key="item.name">
<td>{{ item.name }}</td>
<td>{{ item.calories }}</td>
</tr>
</tbody>
</template>
</v-simple-table>export default {
data () {
return {
desserts: [
{
name: 'Frozen Yogurt',
calories: 159,
},
{
name: 'Ice cream sandwich',
calories: 237,
},
{
name: 'Eclair',
calories: 262,
},
{
name: 'Cupcake',
calories: 305,
},
{
name: 'Gingerbread',
calories: 356,
},
{
name: 'Jelly bean',
calories: 375,
},
{
name: 'Lollipop',
calories: 392,
},
{
name: 'Honeycomb',
calories: 408,
},
{
name: 'Donut',
calories: 452,
},
{
name: 'KitKat',
calories: 518,
},
],
}
},
} Use the fixed-header prop together with the height prop to fix the header to the top of the table.
| Name | Calories |
|---|---|
| Frozen Yogurt | 159 |
| Ice cream sandwich | 237 |
| Eclair | 262 |
| Cupcake | 305 |
| Gingerbread | 356 |
| Jelly bean | 375 |
| Lollipop | 392 |
| Honeycomb | 408 |
| Donut | 452 |
| KitKat | 518 |
Dense
<v-simple-table dense>
<template v-slot:default>
<thead>
<tr>
<th class="text-left">Name</th>
<th class="text-left">Calories</th>
</tr>
</thead>
<tbody>
<tr v-for="item in desserts" :key="item.name">
<td>{{ item.name }}</td>
<td>{{ item.calories }}</td>
</tr>
</tbody>
</template>
</v-simple-table>export default {
data () {
return {
desserts: [
{
name: 'Frozen Yogurt',
calories: 159,
},
{
name: 'Ice cream sandwich',
calories: 237,
},
{
name: 'Eclair',
calories: 262,
},
{
name: 'Cupcake',
calories: 305,
},
{
name: 'Gingerbread',
calories: 356,
},
{
name: 'Jelly bean',
calories: 375,
},
{
name: 'Lollipop',
calories: 392,
},
{
name: 'Honeycomb',
calories: 408,
},
{
name: 'Donut',
calories: 452,
},
{
name: 'KitKat',
calories: 518,
},
],
}
},
}| Name | Calories |
|---|---|
| Frozen Yogurt | 159 |
| Ice cream sandwich | 237 |
| Eclair | 262 |
| Cupcake | 305 |
| Gingerbread | 356 |
| Jelly bean | 375 |
| Lollipop | 392 |
| Honeycomb | 408 |
| Donut | 452 |
| KitKat | 518 |