• Valclass | Framework UI & JS

  • Chameleon admin logo

    Valclass

  • Dashboard
  • V-class
  • V-navbar
  • V-table
  • V-btn
  • V-alert
  • V-modal

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

2021 © Copyright valclass