---
{
	"title": "Zebra Striping",
	"language": "en",
	"category": "Plugins",
	"categoryfile": "plugins",
	"description": "Zebra Striping for table",
	"altLangPrefix": "zebra",
	"dateModified": "2014-08-04"
}
---
<span class="wb-prettify all-pre hide"></span>

<p class="bg-info">The <a href="https://getbootstrap.com/css/#tables-striped">striped rows</a> functionality is provided from <strong>Twitter Bootstrap CSS</strong></p>

<section>
	<h2>Purpose</h2>
	<p>Style special relationship between cell, vector (row/col) and group (tbody/colgroup). It also simulate a column hovering effect for table.</p>
</section>

<section>
	<h2>Use when</h2>
	<ul>
		<li>To style special relationship in table</li>
		<li>To provide a column hovering effect to the user, when appropriate</li>
	</ul>
</section>

<section>
	<h2>Do not use when</h2>
	<ul>
		<li>For styling table that are not conform at the 12 technique for tables</li>
	</ul>
</section>

<section>
	<h2>Working example</h2>
	<p>English:</p>
	<ul>
		<li><a href="../../../demos/zebra/zebra-en.html">Zebra Striping</a></li>
	</ul>
	<p>French:</p>
	<ul lang="fr">
		<li><a href="../../../demos/zebra/zebra-fr.html" hreflang="fr">Rayage du zèbre</a></li>
	</ul>
</section>


<section>
	<h2>How to implement</h2>
	<ol>
		<li>Make your table conform at the 12 techniques for tables</li>
		<li>Add a <b>class=&quot;wb-zebra&quot;</b> element to the table.
			<pre><code>&lt;table class=&quot;wb-zebra&quot;&gt;</code></pre>
		</li>
		<li>(Optional) Activate the indicator that your tables contains data summaries
			<pre><code>&lt;table class=&quot;wb-zebra hassum&quot;&gt;</code></pre>
		</li>
		<li>(Optional) Activate the column hovering effect
			<pre><code>&lt;table class=&quot;wb-zebra wb-zebra-col-hover&quot;&gt;</code></pre>
		</li>
	</ol>
</section>


<section>
	<h2>Configuration options</h2>
	<p>There is no customizable configuration options.</p>
</section>

<section>
	<h2>Events</h2>
	<p>Document the public events that can be used by implementers or developers.</p>
	<table class="table">
		<thead>
			<tr>
				<th>Event</th>
				<th>Trigger</th>
				<th>What it does</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td><code>wb-init.wb-</code></td>
				<td>Triggered manually (e.g., <code>$( ".wb-zebra" ).trigger( "wb-init.wb-zebra" );</code>).</td>
				<td>Load table parser dependency and initiate the complex table parsing.</td>
			</tr>
			<tr>
				<td><code>wb-ready.wb-zebra</code> (v4.0.5+)</td>
				<td>Triggered automatically after the Zebra plugin initializes.</td>
				<td>Used to identify where the Zebra plugin initialized (target of the event)
					<pre><code>$( document ).on( "wb-ready.wb-zebra", ".wb-zebra", function( event ) {
});</code></pre>
					<pre><code>$( ".wb-zebra" ).on( "wb-ready.wb-zebra", function( event ) {
});</code></pre>
				</td>
			</tr>
			<tr>
				<td><code>wb-ready.wb</code> (v4.0.5+)</td>
				<td>Triggered automatically when WET has finished loading and executing.</td>
				<td>Used to identify when all WET plugins and polyfills have finished loading and executing.
					<pre><code>$( document ).on( "wb-ready.wb", function( event ) {
});</code></pre>
				</td>
			</tr>
			<tr>
				<td><code>passiveparse.wb-tableparser</code></td>
				<td>When the zebra plugin initiate the complex table parsing.</td>
				<td>It will parse the data table and attach the information to a data attribute named <code>&quot;tblparser&quot;</code> on every elements inside and on to the table elements.</td>
			</tr>
			<tr>
				<td><code>parsecomplete.wb-tableparser</code></td>
				<td>When the table parser has completed his parsing.</td>
				<td>It's means that the <code>&quot;tblparser&quot;</code> data attribute is now ready to be use.</td>
			</tr>
		</tbody>
	</table>
</section>

<section>
	<h2>Source code</h2>
	<ul>
		<li>Core: <a href="https://github.com/wet-boew/wet-boew/tree/master/src/plugins/zebra">Zebra plugin</a></li>
		<li>Dependency: <a href="https://github.com/wet-boew/wet-boew/tree/master/src/plugins/deps">Complex Table Parser</a></li>
	</ul>
</section>
