Dialog Start tour

Tables

Third-party plugins are not documented here because they have there own documentation.

Basic

Easy to use tables with the option to be responsive.

How to use

How to use HTML elements.

Markup
<div class="table-wrapper">
    <table class="basic-table">
        <thead>
            <tr>
                <th scope="col">First Name</th>
                <th scope="col">Last Name</th>
                <th scope="col">Company</th>
                <th scope="col">Phone</th>
            </tr>
        </thead>
        <tbody>                                                    
            <tr>
                <td>Xander</td>
                <td>Raganhar</td>
                <td>Apple</td>
                <td>+011 - 430 -990 - 56</td>
            </tr>
            ...
            ...
            ...                                      
        </tbody>
        <tfoot>
            <tr>
                <td>First Name</td>
                <td>Last Name</td>
                <td>Company</td>
                <td>Phone</td>                                                   
            </tr>
        </tfoot>
    </table>
</div>

Clean table

Clean table with less styling.

How to use

How to use HTML elements.

Markup
<table class="clean-table" id="clean-table">
    <thead>
        <tr>
            <th scope="col">First name</th>
            <th scope="col">Last name</th>
            <th scope="col">Dob</th>
            <th scope="col">Gender</th>
            <th scope="col">Email</th>
            <th scope="col"><a href="javascript:void(0);" class="button-text-icon" id="open-add-user">Add <span class="plus-10 plix-10"></span></a></th> 
        </tr>
    </thead>
    <tbody>        
        <tr>
            <td>Hugh</td>
            <td>Garett</td>
            <td>12/03/1990</td>
            <td>Male</td>
            <td>unkown@someserver.com</td>
            <td>
                <div class="right">
                    <a href="javascript:void(0);" class="button-icon tip-s" title="Edit user"><span class="pencil-10 plix-10"></span></a>
                    <a href="javascript:void(0);" class="button-icon tip-s" title="Delete user"><span class="trashcan-10 plix-10"></span></a>
                </div>
            </td>
        </tr>
        ...
        ...
        ...
     </tbody>   
     <tfoot>
        <tr>
            <td colspan="6">
                <div class="left">02/11/2012</div>
                <div class="right">5 users in the database</div>
            </td>
        </tr>
     </tfoot>
</table>

Table example 1

Table example with lighbox and the custom emenu plugin.

How to use

How to use HTML elements.

Markup
<div class="table-wrapper"> 
    <form class="e-checkbox-section" id="table-example1">
        <table class="basic-table" id="tableexample1">
            <thead>
                <tr>
                    <th scope="col" class="tb-checkbox"><input type="checkbox" name="" class="e-checkbox-trigger"/></th>
                    <th scope="col" class="tb-thumb">Thumb</th>
                    <th scope="col">Title</th>
                    <th scope="col">Details</th>
                    <th scope="col">Tags</th>
                    <th scope="col"><a href="javascript:void(0);" class="button-text-icon open-add-image">Add <span class="plus-10 plix-10"></span></a></th> 
                </tr>
            </thead>
            <tbody>                
                <tr>
                    <td><input type="checkbox" name=""/></td>
                    <td>
                        <a href="images/media/img1.jpg" class="button-icon thumb pirobox_gall" media="gallery" title="Some title">
                            <img src="images/media/img1-thumb.jpg" alt=""/>
                        </a>
                    </td>
                    <td>
                        <ul>
                            <li>
                                <a href="javascript:void(0);">
                                    <b>Sed fermentum suscipit</b>
                                </a>
                            </li>
                            <li>
                                <small>images/media/2010/sed-fermentum-suscipit.jpg</small>
                            </li>                                                                   
                        </ul>
                    </td>
                    <td>
                        <ul>
                            <li>
                                800 x 800
                            </li>
                            <li>
                                98,2 kb
                            </li>                                                                   
                        </ul>
                    </td>
                    <td>
                        <a href="javascript:void(0);" class="tag green">Project</a>
                        <a href="javascript:void(0);" class="tag blue">Creative</a>
                        <a href="javascript:void(0);" class="tag purple">Colors</a>                                                              
                    </td> 
                    <td>
                        <ul class="e-splitmenu table-splitmenu">
                            <li><span>Actions</span><a href="javascript:void(0);"><span class="arrow-down-10 plix-10"></span></a>
                            
                                 <div>
                                    <ul>
                                        <li><a href="javascript:void(0);"><span class="magnifyglass2-10 plix-10"></span> View image</a></li>
                                        <li><a href="javascript:void(0);"><span class="pencil-10 plix-10"></span> Edit image</a></li>
                                        <li><a href="javascript:void(0);"><span class="trashcan-10 plix-10"></span> Delete image</a></li>
                                    </ul>                                      
                                </div>                               
    
                            </li>
                        </ul>
                    </td>
                </tr>
                ...
                ...
                ...
            </tbody>
            <tfoot>
                <tr>
                    <td><input type="checkbox" name="" class="e-checkbox-trigger"/></td>
                    <td>Thumb</td>
                    <td>Title</td>
                    <td>Details</td>
                    <td>Tags</td> 
                    <td><a href="javascript:void(0);" class="button-text-icon open-add-image">Add <span class="plus-10 plix-10"></span></a></td>
                </tr>
            </tfoot>
        </table>
    </form>
    </div>

Table example 2

Table example with the custom made progressbar plugin.

How to use

How to use HTML elements.

Markup
<div class="table-wrapper">  
<table class="basic-table" id="tableexample2">
    <thead>
        <tr>
            <th scope="col">Client</th>
            <th scope="col">Project</th>
            <th scope="col" class="tb-numbers">Milestone</th>
            <th scope="col" class="tb-numbers">Days left</th>
            <th scope="col" class="tb-indicator">Quoted / Invoiced / Paid</th>
            <th scope="col" class="tb-progressbar">Progress</th> 
        </tr>
    </thead>
    <tbody>        
        <tr>
            <td>Envato</td>
            <td>New landings page</td>
            <td>2.1.1</td>
            <td>7</td>
            <td>
                <span class="indicator tip-s" title="Quoted"><span></span></span>
                <span class="indicator tip-s" title="Invoiced"></span>
                <span class="indicator tip-s" title="Paid"></span>
            </td>
            <td>
                <div class="e-progressbar" data-progressbar-value="50" data-progressbar-color="#ffffff"></div>
            </td>
        </tr>
        ...
        ...
        ...
    </tbody>
    <tfoot>
        <tr>
            <td>Client</td>
            <td>Project</td>
            <td>Milestone</td>
            <td>Days left</td> 
            <td>Quoted / Invoiced / Paid</td>
            <td>Progress</td>                                                    
        </tr>
    </tfoot>
</table>
</div>

Table example 3

Table example with the custom made countdown plugin.

How to use

How to use HTML elements.

Markup
<div class="table-wrapper">  
    <table class="basic-table" id="tableexample3">
        <thead>
            <tr>
                <th scope="col" class="tb-promocode">Promo Code</th>
                <th scope="col">Promotion</th>
                <th scope="col" class="tb-description">Description</th>
                <th scope="col" class="tb-countdown">Ends in</th> 
            </tr>
        </thead>
        <tbody>                                                    
            <tr>
                <td>DF-39066-A SP01</td>
                <td>Envato</td>
                <td>Free Ebook</td>
                <td>
                    <div id="project-cndw-1"></div>
                </td>
            </tr>
            ...
            ...
            ...
        </tbody>
        <tfoot>
            <tr>
                <td>Promo Code</td>
                <td>Promotion</td>
                <td>Description</td>
                <td>Ends in</td>                                                  
            </tr>
        </tfoot>
    </table>
</div>

Usage classes

Defined classes related to a piece of code or plugin.

Available class Element Desctription Since
table-wrapper div Basi table wrapper class. This is used as a quick fix for the basic tables fo fix a layout issue. 1.0
basic-table table Main basic table class. The table must have this class to prevent issues with other plugins that are used that have there own table styling(example: jQuery ui Calendar is a table). 1.0
clean-table table Main clean table class. This layout is bigger than the basic table class. The table must have this class to prevent issues with other plugins that are used that have there own table styling((example: jQuery ui Calendar is a table). 1.0
e-checkbox-section, e-checkbox-trigger, e-checkbox-trigger Classes for the custom made checkbox plugin. More about this plugin can be found here. 1.0
tb-checkbox th Class for the a checkbox element. This column has a fixed width. 1.0
tb-thumb th Class for a small image(thumbnail). This column has a fixed width. 1.0
tag a Class for a tag 1.0
green, blue, purple a Custom tag colors. 1.0
e-splitmenu ul Class for the custom made emenu plugin(split version). More about this plugin can be found here. 1.0
tb-numbers th Class for numbers. This column has a fixed width. 1.0
tb-indicator th Class for 3 indicator blocks. This column has a fixed width. 1.0
indicator span Used for a small indicator block used in the parent column tb-indicator. 1.0
tb-progressbar th Class for a progressbar. This column has a fixed width. 1.0
e-progressbar div Class for the custom made progressbar plugin. More about this plugin can be found here. 1.0
tb-promocode th Class for a promotion code. This column has a fixed width. 1.0
tb-description th Class for a description. This column has a fixed width. 1.0
tb-countdown th Class for a countdown. This column has a fixed width. 1.0
tip-s Class for the tooltip plugin. More about this plugin can be found here. 1.0
pirobox_gall Class for the lightbox plugin. More about this plugin can be found here. 1.0
button-icon a Pixel icons. More about the buttons can be found here. 1.0
button-icon-text a Button with a pixel icon and text. More about the buttons can be found here. 1.0
magnifyglass2-10, pencil-10, trashcan-10, arrow-down-10 span Pixel icons. More icons can be found here. 1.0
plix-10 span Custom icon size class. 1.0

eResponsiveTable

This is a simple helper plugin which basically does nothing else than adding a different class to each column. This class is used in combination with media queries to make the table responsive. This plugin is easy to use.

Basic

Simple helper plugin.

Usage plugin

How to use our custom made jQuery plugins.

Markup
jQuery('#parentcontainerid').eResponsiveTable({
	className: 'rt-'                                          
});

Plugin options

Most of our custom made jQuery plugins have options/settings.

Plugin options Type Default Desctription Since
className string rt- This is the main name of the column class. With the default class the first column will be 'rt-1', the second 'rt-2' and so on. 1.0

Globally And Per-Call Overridable Options

This plugin has per-call(as the example above shows) and globally overridable options. Globally options can be used to override the default options, this is best used if you want to override the plugin options by default, this will prevent any issues with the plugin, as you dont have to change any thing in the plugin core it self. How to use: $.fn.pluginName.key = 'value';

Third-party plugins

Third-party plugins are not documented here because they have there own documentation.

DataTables

Powerfull jQuery table management plugin.

This is a third party plugin, for information about how to use this plugin and examples please visit this site.