- Skip to main content
- Skip to "About this site"

# Zebra Striping

Questions or comments?

The striped rows functionality is provided from Twitter Bootstrap CSS

## Purpose

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

## Use when

- To style special relationship in table
- To provide a column hovering effect to the user, when appropriate

## Do not use when

- For styling table that are not conform at the 12 technique for tables

## Working example

English:

- Zebra Striping

French:

- Rayage du zèbre

## How to implement

1. Make your table conform at the 12 techniques for tables
2. Add a class="wb-zebra" element to the table.

       <table class="wb-zebra">

3. (Optional) Activate the indicator that your tables contains data summaries

       <table class="wb-zebra hassum">

4. (Optional) Activate the column hovering effect

       <table class="wb-zebra wb-zebra-col-hover">

## Configuration options

There is no customizable configuration options.

## Events

Document the public events that can be used by implementers or developers.

Event | Trigger | What it does
--- | --- | ---
`wb-init.wb-` | Triggered manually (e.g., `$( ".wb-zebra" ).trigger( "wb-init.wb-zebra" );`). | Load table parser dependency and initiate the complex table parsing.
`wb-ready.wb-zebra` (v4.0.5+) | Triggered automatically after the Zebra plugin initializes. | Used to identify where the Zebra plugin initialized (target of the event)
    $( document ).on( "wb-ready.wb-zebra", ".wb-zebra", function( event ) {
    });
    $( ".wb-zebra" ).on( "wb-ready.wb-zebra", function( event ) {
    });
`wb-ready.wb` (v4.0.5+) | Triggered automatically when WET has finished loading and executing. | Used to identify when all WET plugins and polyfills have finished loading and executing.
    $( document ).on( "wb-ready.wb", function( event ) {
    });
`passiveparse.wb-tableparser` | When the zebra plugin initiate the complex table parsing. | It will parse the data table and attach the information to a data attribute named `"tblparser"` on every elements inside and on to the table elements.
`parsecomplete.wb-tableparser` | When the table parser has completed his parsing. | It's means that the `"tblparser"` data attribute is now ready to be use.

## Source code

- Core: Zebra plugin
- Dependency: Complex Table Parser

Date modified:
  2014-08-04