Valclass

table

Utilities to create table components.

Class
v-table-hovered
v-table-striped
v-table-head-dark

table hovered

#	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

							

		<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

table striped

#	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

							

		<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

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

							

		<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

table

Utilities to create table components.

List of properties and components

table hovered

table striped

table head-dark