table
Utilities to create table components.
List of properties and components
| Class |
|---|
| v-table-hovered |
| v-table-striped |
| v-table-head-dark |
| # | Name | Last | Handle |
|---|---|---|---|
| 1 | Jakarta | 08562136x | anton@email.com |
| 2 | Surabaya | 08581234x | bryan@email.com |
| 3 | Semarang | 08121234x | cherly@email.com |
| 4 | Makassar | 08111234x | dean@email.com |
<--add a component class to body tag-->
+ <body class="component">
<table class="v-table-hovered">
<thead>
<th>#</td>
<td>Name</td>
<td>Last</td>
<td>Handle</td>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Jakarta</td>
<td>08562136x</td>
<td>anton@email.com</td>
</tr>
<tr>
<td>2</td>
<td>Surabaya</td>
<td>08581234x</td>
<td>bryan@email.com</td>
</tr>
<tr>
<td>3</td>
<td>Semarang</td>
<td>08121234x</td>
<td>cherly@email.com</td>
</tr>
<tr>
<td>4</td>
<td>Makassar</td>
<td>08111234x</td>
<td>dean@email.com</td>
</tr>
</tbody>
</table>
Hovered version
| # | Name | Last | Handle |
|---|---|---|---|
| 1 | Jakarta | 08562136x | anton@email.com |
| 2 | Surabaya | 08581234x | bryan@email.com |
| 3 | Semarang | 08121234x | cherly@email.com |
| 4 | Makassar | 08111234x | dean@email.com |
<--add a component class to body tag-->
+ <body class="component">
<table class="v-table-striped">
<thead>
<th>#</td>
<td>Name</td>
<td>Last</td>
<td>Handle</td>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Jakarta</td>
<td>08562136x</td>
<td>anton@email.com</td>
</tr>
<tr>
<td>2</td>
<td>Surabaya</td>
<td>08581234x</td>
<td>bryan@email.com</td>
</tr>
<tr>
<td>3</td>
<td>Semarang</td>
<td>08121234x</td>
<td>cherly@email.com</td>
</tr>
<tr>
<td>4</td>
<td>Makassar</td>
<td>08111234x</td>
<td>dean@email.com</td>
</tr>
</tbody>
</table>
Striped version
| # | Name | Last | Handle |
|---|---|---|---|
| 1 | Jakarta | 08562136x | anton@email.com |
| 2 | Surabaya | 08581234x | bryan@email.com |
| 3 | Semarang | 08121234x | cherly@email.com |
| 4 | Makassar | 08111234x | dean@email.com |
<--add a component class to body tag-->
+ <body class="component">
<table class="v-table-head-dark">
<thead>
<th>#</td>
<td>Name</td>
<td>Last</td>
<td>Handle</td>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Jakarta</td>
<td>08562136x</td>
<td>anton@email.com</td>
</tr>
<tr>
<td>2</td>
<td>Surabaya</td>
<td>08581234x</td>
<td>bryan@email.com</td>
</tr>
<tr>
<td>3</td>
<td>Semarang</td>
<td>08121234x</td>
<td>cherly@email.com</td>
</tr>
<tr>
<td>4</td>
<td>Makassar</td>
<td>08111234x</td>
<td>dean@email.com</td>
</tr>
</tbody>
</table>
Head dark version