Tables

The template includes two table styles:

Default look

<table class="table">

	<thead>
		<tr>
			<th scope="col">Text</th>
			<th scope="col">Text</th>
			<th scope="col">Text</th>
		</tr>
	</thead>

	<tfoot>
		<tr>
			<td colspan="3">Table footer</td>
		</tr>
	</tfoot>

	<tbody>
		<tr>
			<th scope="row">Text</th>
			<td>Text</td>
			<td>Text</td>
		</tr>
		...
	</tbody>

</table>

<table class="simple-table">

	<thead>
		<tr>
			<th scope="col">Text</th>
			<th scope="col">Text</th>
			<th scope="col">Text</th>
		</tr>
	</thead>

	<tfoot>
		<tr>
			<td colspan="3">Table footer</td>
		</tr>
	</tfoot>

	<tbody>
		<tr>
			<th scope="row">Text</th>
			<td>Text</td>
			<td>Text</td>
		</tr>
		...
	</tbody>

</table>

Some classes are available to tweak them a little:

checkbox-cell

This class will set the cell width to the same size as a checkbox, so it will be square

low-padding

This class will reduce the cell padding, for instance to use a compact button

no-padding

This class will remove the cell padding

align-center

Center text

align-right

Align text to the right

<table class="table">

	<thead>
		<tr>
			<th scope="col"><input type="checkbox" name="check-all" id="check-all" value="1"></th>
			<th scope="col">Text</th>
			<th scope="col" class="align-center">Text</th>
			<th scope="col" class="align-right">Text</th>
		</tr>
	</thead>

	<tfoot>
		<tr>
			<td colspan="4">Table footer</td>
		</tr>
	</tfoot>

	<tbody>
		<tr>
			<th scope="row" class="checkbox-cell"><input type="checkbox" name="checked[]" value="1"></th>
			<td>Text</td>
			<td class="align-center">Text</td>
			<td class="align-right low-padding"><a href="#" class="button compact">Edit</a></td>
		</tr>
		...
	</tbody>

</table>

<table class="simple-table">

	<thead>
		<tr>
			<th scope="col"><input type="checkbox" name="check-all" id="check-all" value="1"></th>
			<th scope="col">Text</th>
			<th scope="col" class="align-center">Text</th>
			<th scope="col" class="align-right">Text</th>
		</tr>
	</thead>

	<tfoot>
		<tr>
			<td colspan="4">Table footer</td>
		</tr>
	</tfoot>

	<tbody>
		<tr>
			<th scope="row" class="checkbox-cell"><input type="checkbox" name="checked[]" value="1"></th>
			<td>Text</td>
			<td class="align-center">Text</td>
			<td class="align-right low-padding"><a href="#" class="button compact">Edit</a></td>
		</tr>
		...
	</tbody>

</table>

Extra styles

There is an alternate row style for displaying special informations:

<tr class="row-drop">
	<td>
		...
	</td>
	...
</tr>

The template also includes a header and a footer for tables:

<div class="table-header">
	Header content
</div>

<table class="table">

	...

</table>

<div class="table-footer">
	Footer content
</div>

For best results with buttons and form elements, use the button-height class. Here is a complete example:

<div class="table-header blue-gradient button-height">
	<div class="float-right">
		Search&nbsp;<input type="text" name="table_search" id="table_search" value="" class="input mid-margin-left">
	</div>

	Show&nbsp;<select name="range" class="select blue-gradient glossy">
		<option value="1">10</option>
		<option value="2">20</option>
		<option value="3" selected="selected">40</option>
		<option value="4">100</option>
	</select> entries
</div>

<table class="table">

	...

</table>

<form method="post" action="" class="table-footer blue-gradient button-height large-margin-bottom">
	<div class="float-right">
		<div class="button-group">
			<a href="#" title="First page" class="button blue-gradient glossy"><span class="icon-previous"></span></a>
			<a href="#" title="Previous page" class="button blue-gradient glossy"><span class="icon-backward"></span></a>
		</div>

		<div class="button-group">
			<a href="#" title="Page 1" class="button blue-gradient glossy">1</a>
			<a href="#" title="Page 2" class="button blue-gradient glossy active">2</a>
			<a href="#" title="Page 3" class="button blue-gradient glossy">3</a>
			<a href="#" title="Page 4" class="button blue-gradient glossy">4</a>
		</div>

		<div class="button-group">
			<a href="#" title="Next page" class="button blue-gradient glossy"><span class="icon-forward"></span></a>
			<a href="#" title="Last page" class="button blue-gradient glossy"><span class="icon-next"></span></a>
		</div>
	</div>

	With selected:
	<select name="select90" class="select blue-gradient glossy mid-margin-left">
		<option value="0">Delete</option>
		<option value="1">Duplicate</option>
		<option value="2">Put offline</option>
		<option value="3">Put online</option>
		<option value="4">Move to trash</option>
	</select>
	<button type="submit" class="button blue-gradient glossy">Go</button>
</form>

Responsive tables

Tables with multiple columns hardly fit on smaller screens without breaking the whole layout, so the template provide styles to hide less important columns when resizing down. To hide a column, apply one of these classes to all headers and cells of a given column, depending on what responsive size you want the column to hide:

hide-on-mobile-portrait

Cell hidden on mobile screen, orientation portrait

hide-on-mobile-landscape

Cell hidden on mobile screen, orientation landscape, and smaller

hide-on-mobile

Cell hidden on mobile screen, both orientations, and smaller

hide-on-tablet-portrait

Cell hidden on tablet screen, orientation portrait, and smaller

hide-on-tablet-landscape

Cell hidden on tablet screen, orientation landscape, and smaller

hide-on-tablet

Cell hidden on tablet screen, both orientations, and smaller

Note: These classes will give random results on merged cells, for obvious reasons.

Here is an example, hiding the middle column on mobile screens:

<table class="table">

	<thead>
		<tr>
			<th scope="col">Header</th>
			<th scope="col" class="hide-on-mobile">Header</th>
			<th scope="col">Header</th>
		</tr>
	</thead>

	<tbody>
		<tr>
			<td>Text</td>
			<td class="hide-on-mobile">Text</td>
			<td>Text</td>
		</tr>
		...
	</tbody>

</table>

Responsive plugin

Settings styles can be cumbersome on larger tables with many lines, so the template provides a plugin that will do this for you: just add the class responsive-table on your table and set responsive classes only on headers:

<table class="table responsive-table">

	<thead>
		<tr>
			<th scope="col">Header</th>
			<th scope="col" class="hide-on-mobile">Header</th>
			<th scope="col">Header</th>
		</tr>
	</thead>

	<tbody>
		...
	</tbody>

</table>

The plugin will the automatically copy responsive classes to the corresponding columns cells.

If you change the table content or the responsive classes, you may call the plugin method to format cells again:

$(selector).responsiveTable();

Using this, you may for instance provide an option panel to the user so they can choose which columns to show.

Simple sorting

Here is a basic table sorting using the external plugin jQuery TableSorter:

// Table sort - simple
$(selector).tablesorter();

To prevent columns width to change when sorting, give them a size (use percentage for wider columns, so they will still fit on smaller screens).

For more details on how to use and configure the plugin, go to http://tablesorter.com/docs/

Advanced sorting

You can use an alternate simpler style for Datatables using js/lib/DataTables/jquery.dataTables-simple.css instead of js/lib/DataTables/jquery.dataTables.css.

If you need more sorting options, like pagination, real-time search, AJAX load and many more, you may use the plugin DataTables. The template provides a custom styling that mimics the defaults styles:

// Table sort - datatables
$(selector).dataTable();

If you want to have the same exact layout as the default styles (as above), you need to pass two extra options:

var table = $(selector),
	tableStyled = false;

table.dataTable({
	'sDom': '<"dataTables_header"lfr>t<"dataTables_footer"ip>',
	'fnDrawCallback': function( oSettings )
	{
		// Only run once
		if (!tableStyled)
		{
			table.closest('.dataTables_wrapper').find('.dataTables_length select').addClass('select blue-gradient glossy').styleSelect();
			tableStyled = true;
		}
	}
});

For more details on how to use and configure the plugin, go to http://datatables.net