# Filtering rows

## How to create a table that uses the filtering component.

#### Note

As this example does not make use of the paging component only a limited number of rows are displayed. To see an example containing thousands of rows that uses the filtering component please take a look at the showcase example.

To enable filtering on a table the only option that must be set is the `enabled` option with a value of `true`, all other options for the component will fall back to there defaults if not supplied. See the filtering component documentation for a list of all available options.

ID | First Name | Last Name | Job Title | Started On | Date of Birth | Info
--- | --- | --- | --- | --- | --- | ---
1 | Dennise | Fuhrman | High School History Teacher | November 8th 2011 | July 25th 1960 | Info link
2 | Elodia | Weisz | Wallpaperer Helper | October 15th 2010 | March 30th 1982 | Info link
3 | Raeann | Haner | Internal Medicine Nurse Practitioner | November 28th 2013 | February 26th 1966 | Info link
4 | Junie | Landa | Offbearer | October 31st 2010 | March 29th 1966 | Info link
5 | Solomon | Bittinger | Roller Skater | December 29th 2011 | September 22nd 1964 | Info link
6 | Bar | Lewis | Clown | November 12th 2012 | August 4th 1991 | Info link
7 | Usha | Leak | Ships Electronic Warfare Officer | August 14th 2012 | November 20th 1979 | Info link
8 | Lorriane | Cooke | Technical Services Librarian | September 21st 2010 | April 7th 1969 | Info link

    jQuery(function($){
    	$('.table').footable();
    });

    <table class="table" data-filtering="true">
    	<thead>
    	<tr>
    		<th data-breakpoints="xs">ID</th>
    		<th>First Name</th>
    		<th>Last Name</th>
    		<th data-breakpoints="xs">Job Title</th>
    		<th data-breakpoints="xs sm">Started On</th>
    		<th data-breakpoints="xs sm md">Date of Birth</th>
    		<th data-type="html" data-breakpoints="xs sm md">Info</th>
    	</tr>
    	</thead>
    	<tbody>
    	<tr>
    		<td>1</td>
    		<td>Dennise</td>
    		<td>Fuhrman</td>
    		<td>High School History Teacher</td>
    		<td>November 8th 2011</td>
    		<td>July 25th 1960</td>
    		<td><a href="#placeholder">Info link</a></td>
    	</tr>
    	<tr>
    		<td>2</td>
    		<td>Elodia</td>
    		<td>Weisz</td>
    		<td>Wallpaperer Helper</td>
    		<td>October 15th 2010</td>
    		<td>March 30th 1982</td>
    		<td><a href="#placeholder">Info link</a></td>
    	</tr>
    	<tr>
    		<td>3</td>
    		<td>Raeann</td>
    		<td>Haner</td>
    		<td>Internal Medicine Nurse Practitioner</td>
    		<td>November 28th 2013</td>
    		<td>February 26th 1966</td>
    		<td><a href="#placeholder">Info link</a></td>
    	</tr>
    	<tr>
    		<td>4</td>
    		<td>Junie</td>
    		<td>Landa</td>
    		<td>Offbearer</td>
    		<td>October 31st 2010</td>
    		<td>March 29th 1966</td>
    		<td><a href="#placeholder">Info link</a></td>
    	</tr>
    	<tr>
    		<td>5</td>
    		<td>Solomon</td>
    		<td>Bittinger</td>
    		<td>Roller Skater</td>
    		<td>December 29th 2011</td>
    		<td>September 22nd 1964</td>
    		<td><a href="#placeholder">Info link</a></td>
    	</tr>
    	<tr>
    		<td>6</td>
    		<td>Bar</td>
    		<td>Lewis</td>
    		<td>Clown</td>
    		<td>November 12th 2012</td>
    		<td>August 4th 1991</td>
    		<td><a href="#placeholder">Info link</a></td>
    	</tr>
    	<tr>
    		<td>7</td>
    		<td>Usha</td>
    		<td>Leak</td>
    		<td>Ships Electronic Warfare Officer</td>
    		<td>August 14th 2012</td>
    		<td>November 20th 1979</td>
    		<td><a href="#placeholder">Info link</a></td>
    	</tr>
    	<tr>
    		<td>8</td>
    		<td>Lorriane</td>
    		<td>Cooke</td>
    		<td>Technical Services Librarian</td>
    		<td>September 21st 2010</td>
    		<td>April 7th 1969</td>
    		<td><a href="#placeholder">Info link</a></td>
    	</tr>
    	</tbody>
    </table>

#### Note

Columns with HTML or Date data can make use of the `data-filter-value` attribute on a cell to supply a different value to use when filtering.