---
{
	"title": "Table Filters",
	"language": "fr",
	"category": "Plugiciels",
	"description": "Ajoutes des fonctionnalités aux tableaux telles que la recherche, le tri, le filtrage et la pagination.",
	"tag": "table filters",
	"parentdir": "tables",
	"altLangPrefix": "tables-fltrs",
	"dateModified": "2022-11-29"
}
---

<section>
	<h2>Exemples</h2>
	<p>Ajoutes des fonctionnalités aux tableaux telles que la recherche, le tri, le filtrage et la pagination.</p>

	<h3>Date Range, Drop-Down List and Checkbox Filters</h3>
	<div class="row">
		<div class="col-md-3">
			<h4 class="wb-inv">Options</h4>
			<details open>
				<summary><h4 class="h4">Options</h4></summary>
				<p class="mrgn-tp-md">Utilisez les options ci-dessous pour modifier vos résultats dans le tableau suivant.</p>
				<form class="wb-tables-filter" data-bind-to="dataset-filter1" lang="en">
					<div class="form-group">
						<fieldset>
							<legend>
								<span class="field-name">Publication date</span>
							</legend>
							<div class="form-group">
								<label for="dt_mindate" class="small">Start date</label>
								<input type="date" class="form-control" id="dt_mindate" name="dt_mindate" data-column="1"/>
							</div>
							<div class="form-group">
								<label for="dt_maxdate" class="small">End date</label>
								<input type="date" class="form-control" id="dt_maxdate" name="dt_maxdate" data-column="1"/>
							</div>
						</fieldset>
					</div>
					<div class="form-group">
						<label for="dt_type">Data Type</label>
						<select class="form-control" id="dt_type" name="dt_type" data-column="3">
							<option value="">All news types</option>
							<option value="News Releases">News Releases</option>
							<option value="Backgrounders">Backgrounders</option>
							<option value="Media Advisories">Media Advisories</option>
							<option value="Speeches">Speeches</option>
							<option value="Statements">Statements</option>
						</select>
					</div>
					<div class="form-group">
						<label for="dt_department">Department</label>
						<select class="form-control" id="dt_department" name="dt_department" data-column="2" data-exact="true">
							<option value="">From any department</option>
							<option value="Agriculture and Agri-Food Canada">Agriculture and Agri-Food Canada</option>
							<option value="Atlantic Canada Opportunities Agency">Atlantic Canada Opportunities Agency</option>
							<option value="Canadian Heritage">Canadian Heritage</option>
							<option value="Infrastructure Canada">Infrastructure Canada</option>
							<option value="Innovation, Science and Economic Development Canada">Innovation, Science and Economic Development Canada</option>
							<option value="National Defence and the Canadian Armed Forces">National Defence and the Canadian Armed Forces</option>
							<option value="Employment and Social Development Canada">Employment and Social Development Canada</option>
							<option value="Global Affairs Canada">Global Affairs Canada</option>
							<option value="Indigenous and Northern Affairs Canada">Indigenous and Northern Affairs Canada</option>
							<option value="Competition Bureau">Competition Bureau</option>
							<option value="Canadian Grain Commission">Canadian Grain Commission</option>
							<option value="National Energy Board">National Energy Board</option>
							<option value="Canadian Radio-television and Telecommunications Commission">Canadian Radio-television and Telecommunications Commission</option>
							<option value="Public Health Agency of Canada">Public Health Agency of Canada</option>
							<option value="Correctional Service Canada">Correctional Service Canada</option>
							<option value="Parks Canada">Parks Canada</option>
							<option value="Veterans Affairs Canada">Veterans Affairs Canada</option>
							<option value="Health Canada">Health Canada</option>
							<option value="National Film Board">National Film Board</option>
							<option value="Government of Canada">Government of Canada</option>
							<option value="Federal Economic Development Agency for Southern Ontario">Federal Economic Development Agency for Southern Ontario</option>
							<option value="Canadian Environmental Assessment Agency">Canadian Environmental Assessment Agency</option>
							<option value="Fisheries and Oceans Canada">Fisheries and Oceans Canada</option>
							<option value="Canadian Institutes of Health Research">Canadian Institutes of Health Research</option>
							<option value="Transportation Safety Board of Canada">Transportation Safety Board of Canada</option>
							<option value="Canadian Nuclear Safety Commission">Canadian Nuclear Safety Commission</option>
							<option value="Transport Canada">Transport Canada</option>
							<option value="Service Canada">Service Canada</option>
							<option value="Treasury Board of Canada Secretariat">Treasury Board of Canada Secretariat</option>
							<option value="Environment and Climate Change Canada">Environment and Climate Change Canada</option>
							<option value="Finance Canada">Finance Canada</option>
							<option value="Canada Economic Development for Quebec Regions">Canada Economic Development for Quebec Regions</option>
						</select>
					</div>
					<div class="form-group">
						<label for="dt_minister">Minister</label>
						<select class="form-control" id="dt_minister" name="dt_minister" data-column="8">
							<option value="">Related to any minister</option>
							<option value="Hon. Lawrence MacAulay">Hon. Lawrence MacAulay</option>
							<option value="Hon. Navdeep Singh Bains">Hon. Navdeep Singh Bains</option>
							<option value="Hon. Amarjeet Sohi">Hon. Amarjeet Sohi</option>
							<option value="Hon. Kirsty Duncan">Hon. Kirsty Duncan</option>
							<option value="Hon. Jean-Yves Duclos">Hon. Jean-Yves Duclos</option>
							<option value="Hon. Stéphane Dion">Hon. Stéphane Dion</option>
							<option value="Hon. Carolyn Bennett">Hon. Carolyn Bennett</option>
							<option value="Hon. Jane Philpott">Hon. Jane Philpott</option>
							<option value="Hon. MaryAnn Mihychuk">Hon. MaryAnn Mihychuk</option>
							<option value="Hon. Ralph Goodale">Hon. Ralph Goodale</option>
							<option value="Hon. Catherine McKenna">Hon. Catherine McKenna</option>
							<option value="Hon. Kent Hehr">Hon. Kent Hehr</option>
							<option value="Hon. Harjit Singh Sajjan">Hon. Harjit Singh Sajjan</option>
							<option value="Hon. Dominic LeBlanc">Hon. Dominic LeBlanc</option>
							<option value="Hon. Mélanie Joly">Hon. Mélanie Joly</option>
							<option value="Hon. Marc Garneau">Hon. Marc Garneau</option>
							<option value="Hon. Scott Brison">Hon. Scott Brison</option>
							<option value="Hon. Marie-Claude Bibeau">Hon. Marie-Claude Bibeau</option>
							<option value="Hon. William Francis Morneau">Hon. William Francis Morneau</option>
							<option value="Right Hon. Justin P. J. Trudeau">Right Hon. Justin P. J. Trudeau</option>
						</select>
					</div>
					<div class="form-group">
						<fieldset>
							<legend><span class="field-name">For</span></legend>
							<ul class="list-unstyled">
								<li class="checkbox"><label for="dt_audience1"><input type="checkbox" id="dt_audience1" name="dt_audience" data-column="6" value=""> Everyone</label></li>
								<li class="checkbox"><label for="dt_audience2"><input type="checkbox" id="dt_audience2" name="dt_audience" data-column="6" value="Media"> Media</label></li>
								<li class="checkbox"><label for="dt_audience3"><input type="checkbox" id="dt_audience3" name="dt_audience" data-column="6" value="Farmers"> Farmers</label></li>
								<li class="checkbox"><label for="dt_audience4"><input type="checkbox" id="dt_audience4" name="dt_audience" data-column="6" value="General Public"> General Public</label></li>
								<li class="checkbox"><label for="dt_audience5"><input type="checkbox" id="dt_audience5" name="dt_audience" data-column="6" value="Rural Community"> Rural Community</label></li>
								<li class="checkbox"><label for="dt_audience6"><input type="checkbox" id="dt_audience6" name="dt_audience" data-column="6" value="Travellers"> Travellers</label></li>
								<li class="checkbox"><label for="dt_audience7"><input type="checkbox" id="dt_audience7" name="dt_audience" data-column="6" value="Visitors"> Visitors</label></li>
								<li class="checkbox"><label for="dt_audience8"><input type="checkbox" id="dt_audience8" name="dt_audience" data-column="6" value="Business"> Business</label></li>
								<li class="checkbox"><label for="dt_audience9"><input type="checkbox" id="dt_audience9" name="dt_audience" data-column="6" value="Students"> Students</label></li>
								<li class="checkbox"><label for="dt_audience10"><input type="checkbox" id="dt_audience10" name="dt_audience" data-column="6" value="Parents"> Parents</label></li>
								<li class="checkbox"><label for="dt_audience11"><input type="checkbox" id="dt_audience11" name="dt_audience" data-column="6" value="Youth"> Youth</label></li>
								<li class="checkbox"><label for="dt_audience12"><input type="checkbox" id="dt_audience12" name="dt_audience" data-column="6" value="Employers"> Employers</label></li>
								<li class="checkbox"><label for="dt_audience13"><input type="checkbox" id="dt_audience13" name="dt_audience" data-column="6" value="Job Seekers"> Job Seekers</label></li>
								<li class="checkbox"><label for="dt_audience14"><input type="checkbox" id="dt_audience14" name="dt_audience" data-column="6" value="Government"> Government</label></li>
								<li class="checkbox"><label for="dt_audience15"><input type="checkbox" id="dt_audience15" name="dt_audience" data-column="6" value="Scientists"> Scientists</label></li>
								<li class="checkbox"><label for="dt_audience16"><input type="checkbox" id="dt_audience16" name="dt_audience" data-column="6" value="Veterans"> Veterans</label></li>
								<li class="checkbox"><label for="dt_audience17"><input type="checkbox" id="dt_audience17" name="dt_audience" data-column="6" value="Seniors"> Seniors</label></li>
								<li class="checkbox"><label for="dt_audience18"><input type="checkbox" id="dt_audience18" name="dt_audience" data-column="6" value="Children"> Children</label></li>
								<li class="checkbox"><label for="dt_audience19"><input type="checkbox" id="dt_audience19" name="dt_audience" data-column="6" value="Educators"> Educators</label></li>
								<li class="checkbox"><label for="dt_audience20"><input type="checkbox" id="dt_audience20" name="dt_audience" data-column="6" value="Aboriginal Peoples"> Aboriginal Peoples</label></li>
								<li class="checkbox"><label for="dt_audience21"><input type="checkbox" id="dt_audience21" data-column="6" value="Non-Governmental Organizations"> Non-Governmental Organizations</label></li>
							</ul>
						</fieldset>
					</div>
					<div class="form-group">
						<fieldset>
							<legend><span class="field-name">Location</span></legend>
							<ul class="list-unstyled">
								<li class="checkbox"><label for="dt_location1"><input type="checkbox" id="dt_location1" name="dt_location" data-column="5" value=""/> Anywhere</label></li>
								<li class="checkbox"><label for="dt_location2"><input type="checkbox" id="dt_location2" name="dt_location" data-column="5" value="Manitoba"/> Manitoba</label></li>
								<li class="checkbox"><label for="dt_location3"><input type="checkbox" id="dt_location3" name="dt_location" data-column="5" value="Canada"/> Canada</label></li>
								<li class="checkbox"><label for="dt_location4"><input type="checkbox" id="dt_location4" name="dt_location" data-column="5" value="Nova Scotia"/> Nova Scotia</label></li>
								<li class="checkbox"><label for="dt_location5"><input type="checkbox" id="dt_location5" name="dt_location" data-column="5" value="Alberta"/> Alberta</label></li>
								<li class="checkbox"><label for="dt_location6"><input type="checkbox" id="dt_location6" name="dt_location" data-column="5" value="Ontario"/> Ontario</label></li>
								<li class="checkbox"><label for="dt_location7"><input type="checkbox" id="dt_location7" name="dt_location" data-column="5" value="Newfoundland and Labrador"/> Newfoundland and Labrador</label></li>
								<li class="checkbox"><label for="dt_location8"><input type="checkbox" id="dt_location8" name="dt_location" data-column="5" value="New Brunswick"/> New Brunswick</label></li>
								<li class="checkbox"><label for="dt_location9"><input type="checkbox" id="dt_location9" name="dt_location" data-column="5" value="Saskatchewan"/> Saskatchewan</label></li>
								<li class="checkbox"><label for="dt_location10"><input type="checkbox" id="dt_location10" name="dt_location" data-column="5" value="British Columbia"/> British Columbia</label></li>
								<li class="checkbox"><label for="dt_location11"><input type="checkbox" id="dt_location11" name="dt_location" data-column="5" value="Quebec"/> Quebec</label></li>
								<li class="checkbox"><label for="dt_location12"><input type="checkbox" id="dt_location12" name="dt_location" data-column="5" value="Yukon Territory"/> Yukon Territory</label></li>
								<li class="checkbox"><label for="dt_location13"><input type="checkbox" id="dt_location13" name="dt_location" data-column="5" value="Prince Edward Island"/> Prince Edward Island</label></li>
							</ul>
						</fieldset>
						<details>
							<summary><h6>Advanced Options</h6></summary>
							<div class="radio">
								<label for="dt_location_aopts1"><input type="radio" name="dt_location_aopts" id="dt_location_aopts1" data-aopts='{"type": "any", "column": "5"}' checked />Any</label>
							</div>
							<div class="radio">
								<label for="dt_location_aopts2"><input type="radio" name="dt_location_aopts" id="dt_location_aopts2" data-aopts='{"type": "both", "column": "5"}' />Both</label>
							</div>
							<div class="radio">
								<label for="dt_location_aopts3"><input type="radio" name="dt_location_aopts" id="dt_location_aopts3" data-aopts='{"type": "either", "column": "5"}' />Either</label>
							</div>
							<div class="radio">
								<label for="dt_location_aopts4"><input type="radio" name="dt_location_aopts" id="dt_location_aopts4" data-aopts='{"type": "and", "column": "5"}' />And</label>
							</div>
						</details>
					</div>
					<div class="form-group">
						<button type="submit" class="btn btn-primary" aria-controls="dataset-filter1">Filter</button>
					</div>
					<div class="form-group">
						<button type="reset" class="btn btn-link btn-sm p-0">Réinitialiser aux valeurs par défaut</button>
					</div>
				</form>
			</details>
		</div>
		<div class="col-md-9">
			<table class="wb-tables table table-striped table-hover" id="dataset-filter1" data-wb-tables='{
			"bDeferRender": true,
			"ajaxSource": "ajax/datasource.json",
			"order": [5, "desc"],
			"columns": [
				{ "data": "TITLE", "className": "nws-tbl-ttl h4" },
				{ "data": "PUBDATE", "className": "nws-tbl-date" },
				{ "data": "DEPT", "className": "nws-tbl-dept" },
				{ "data": "TYPE", "className": "nws-tbl-type" },
				{ "data": "TEASER",  "className": "nws-tbl-desc" },
				{ "data": "LOCATION",  "visible": false },
				{ "data": "AUDIENCE",  "visible": false },
				{ "data": "SUBJECT", "visible": false },
				{ "data": "MINISTER", "visible": false }
			]}'>
				<thead>
				<tr>
					<th>Titre</th>
					<th>Date de publication</th>
					<th>Département</th>
					<th>Type de nouvelles</th>
					<th>Résumé</th>
					<th>Emplacement</th>
					<th>Public</th>
					<th>Suject</th>
					<th>Ministre</th>
				</tr>
				</thead>
			</table>
		</div>
		<div class="col-md-12">
			<h3>Creating Date Range, Drop-Down List and/or Checkbox Filters</h3>
			<ol>
				<li>
					<p>Create a <code>&lt;form&gt;</code> with the following attributes <code>class="wb-tables-filter"</code> and <code>data-bind-to="TABLE_ID"</code>.</p>
				</li>
				<li>
					<p>For date range create two date inputs (<code>&lt;input type="date"/&gt;</code>) add the following attribute <code>data-column="COLUMN_NUMBER"</code></p>
					<p>Example: <code>&lt;input type="date" class="form-control" id="dt_mindate" name="dt_mindate" data-column="1"/&gt;</code></p>
					<p><small>Each date input requires the same column number. Please note that the column numbers start at 0.</small></p>
				</li>
				<li>
					<p>For drop-down list create a select list (<code>&lt;select&gt;</code>) add the following attribute <code>data-column="COLUMN_NUMBER"</code></p>
					<p><small>Only assign one drop-down list a single column number (no duplicates). Please note that the column numbers start at 0.</small></p>
				</li>
				<li>
					<p>For checkboxes create a checkbox list (<code>&lt;input type="checkbox"&gt;</code>) assign each the following attribute <code>data-column="COLUMN_NUMBER"</code></p>
					<p><small>Each checkbox requires the same column number. Please note that the column numbers start at 0.</small></p>
				</li>
			</ol>
			<h3>Accepted Formats for Date Range</h3>
			<p>Currently only accepts ISO 8601 (YYYY-MM-DD). See examples below.</p>
			<ul>
				<li>2016-07-26T14:07:00</li>
				<li>2016-07-26 14:07:00</li>
				<li>2016-07-26</li>
			</ul>
			<h3>Advanced Options For Checkboxes</h3>
			<p>Allows the user to change how checkboxes are filtered (default is ANY).</p>
			<ol>
				<li>Add <code>data-aopts='{"type": "", "column": ""}'</code> arrtibute to any radio element to apply the advanced options.</li>
				<li>
					Available filter types:
					<ol>
						<li>ANY - This option will return entries that contain either A or B, or both.</li>
						<li>BOTH - This option will only return entries that contain both A and B.</li>
						<li>EITHER - This option will return all entries that are just A or just B - and not combinations of the two.</li>
						<li>AND - This option will only return entries that are a combination of A or B.</li>
					</ol>
				</li>
				<li>Column is the checkboxes that the filter well apply too (must match there 'data-column').</li>
			</ol>
			<pre><code>&lt;label for="dt_location_aopts1"&gt;&lt;input type="radio" name="dt_location_aopts" id="dt_location_aopts1" data-aopts='{"type": "any", "column": "5"}' checked /&gt;Any&lt;/label&gt;</code></pre>
		</div>
	</div>

	<h3>Number Range Filters (Integers, floats, currency, etc)</h3>
	<p>This filter accepts the positive or negative integers, floats with a maximum of two decimal points (E.g. 1.0/1.00 or 1,0/1,00), or Canadian/French Canadian currency (E.g. $1.00/1,00 $). DataTable data can be a actual number or string containing number.</p>
	<div class="row">
		<div class="col-md-3">
			<h4 class="wb-inv">Options</h4>
			<details open>
				<summary><h4 class="h4">Options</h4></summary>
				<p class="mrgn-tp-md">Utilisez les options ci-dessous pour modifier vos résultats dans le tableau suivant.</p>
				<form class="wb-tables-filter" data-bind-to="dataset-filter2" lang="en">
					<div class="form-group">
						<fieldset>
							<legend><span class="field-name">Age</span></legend>
							<div class="row form-group">
								<div class="col-md-6">
									<label for="dt_min_age" class="small">Min</label>
									<input type="number" class="form-control" id="dt_min_age" name="dt_min_age" min="0" data-column="3"/>
								</div>
								<div class="col-md-6">
									<label for="dt_max_age" class="small">Max</label>
									<input type="number" class="form-control" id="dt_max_age" name="dt_max_age" min="1" data-column="3"/>
								</div>
							</div>
						</fieldset>
						<details>
							<summary><h6>Advanced Options</h6></summary>
							<div class="radio">
								<label for="dt_age_aopts1"><input type="radio" name="dt_age_aopts" id="dt_age_aopts1" data-aopts='{"type": "either", "column": "3"}' checked />Either</label>
							</div>
							<div class="radio">
								<label for="dt_age_aopts2"><input type="radio" name="dt_age_aopts" id="dt_age_aopts2" data-aopts='{"type": "and", "column": "3"}' />And</label>
							</div>
						</details>
					</div>
					<div class="form-group">
						<fieldset>
							<legend><span class="field-name">Salary</span></legend>
							<div class="row form-group">
								<div class="col-md-6">
									<label for="dt_min_salary" class="small">Min</label>
									<input type="number" class="form-control" id="dt_min_salary" name="dt_min_salary" min="0" data-column="4"/>
								</div>
								<div class="col-md-6">
									<label for="dt_max_salary" class="small">Max</label>
									<input type="number" class="form-control" id="dt_max_salary" name="dt_max_salary" min="1" data-column="4"/>
								</div>
							</div>
						</fieldset>
					</div>
					<div class="form-group">
						<fieldset>
							<legend><span class="field-name">Taxes</span></legend>
							<div class="row form-group">
								<div class="col-md-6">
									<label for="dt_min_taxes" class="small">Min</label>
									<input type="number" class="form-control" id="dt_min_taxes" name="dt_min_taxes" data-column="5"/>
								</div>
								<div class="col-md-6">
									<label for="dt_max_taxes" class="small">Max</label>
									<input type="number" class="form-control" id="dt_max_taxes" name="dt_max_taxes" data-column="5"/>
								</div>
							</div>
						</fieldset>
					</div>
					<div class="form-group">
						<button type="submit" class="btn btn-primary" aria-controls="dataset-filter2">Filter</button>
					</div>
					<div class="form-group">
						<button type="reset" class="btn btn-link btn-sm p-0">Réinitialiser aux valeurs par défaut</button>
					</div>
				</form>
			</details>
		</div>
		<div class="col-md-9">
			<table class="wb-tables table table-striped table-hover" id="dataset-filter2" data-wb-tables='{
			"bDeferRender": true,
			"ajaxSource": "ajax/mockdata.json",
			"order": [3, "desc"],
			"columns": [
				{ "data": "id", "visible": false },
				{ "data": "first_name" },
				{ "data": "last_name" },
				{ "data": "age" },
				{ "data": "salary" },
				{ "data": "taxes" }
			]}'>
				<thead>
				<tr>
					<th>Id</th>
					<th>First Name</th>
					<th>Last Name</th>
					<th>Age</th>
					<th>Salary</th>
					<th>Taxes</th>
				</tr>
				</thead>
			</table>
		</div>
		<div class="col-md-12">
			<h3>Creating Number Range Filters</h3>
			<ol>
				<li>
					<p>Create a <code>&lt;form&gt;</code> with the following attributes <code>class="wb-tables-filter"</code> and <code>data-bind-to="TABLE_ID"</code>.</p>
				</li>
				<li>
					<p>Create two number fields (<code>&lt;input type="number"&gt;</code>) assign each the following attribute <code>data-column="COLUMN_NUMBER"</code>.</p>
					<p><small>Each number field requires the same column number. Please note that the column numbers start at 0.</small></p>
				</li>
			</ol>
			<h3>Advanced Options For Number Range</h3>
			<p>Allows the user to change how number range is filtered (default is EITHER).</p>
			<ol>
				<li>Add <code>data-aopts='{"type": "", "column": ""}'</code> arrtibute to any radio element to apply the advanced options.</li>
				<li>
					Available filter types:
					<ol>
						<li>EITHER - This option will return all entries that are either equal to/greater then A OR/AND equal to/less then B.</li>
						<li>AND - This option will only return entries that are equal to/greater then A AND equal to/less then B.</li>
					</ol>
				</li>
				<li>Column is the number range that the filter well apply too (must match there 'data-column').</li>
			</ol>
			<pre><code>&lt;label for="dt_age_aopts1"&gt;&lt;input type="radio" name="dt_age_aopts" id="dt_age_aopts1" data-aopts='{"type": "either", "column": "5"}' checked /&gt;Either&lt;/label&gt;</code></pre>
		</div>
	</div>
	<h3>Autres filtres</h3>
	<p>Il est également possible de filtrer à l'aide de texte ou de chiffres.</p>
	<div class="row">
		<div class="col-md-3">
			<h4 class="wb-inv">Options</h4>
			<details open>
				<summary><h4 class="h4">Options</h4></summary>
				<p class="mrgn-tp-md">Utilisez les options ci-dessous pour modifier vos résultats dans le tableau suivant.</p>
				<form class="wb-tables-filter" data-bind-to="dataset-filter3">
					<div class="form-group">
						<fieldset>
							<legend><span class="field-name">Âge</span></legend>
							<div class="row form-group">
								<div class="col-md-12">
									<label for="dt_age" class="small">Âge</label>
									<input type="number" class="form-control" id="dt_age" name="dt_age" min="0" data-column="3"/>
								</div>
							</div>
						</fieldset>
					</div>
					<div class="form-group">
						<fieldset>
							<legend><span class="field-name">Nom</span></legend>
							<div class="row form-group">
								<div class="col-md-12">
									<label for="dt_fname" class="small">Prénom</label>
									<input type="text" class="form-control" id="dt_fname" name="dt_fname" data-column="1"/>
								</div>
							</div>
							<div class="row form-group">
								<div class="col-md-12">
									<label for="dt_lname" class="small">Nom de famille</label>
									<input type="text" class="form-control" id="dt_lname" name="dt_lname" data-column="2"/>
								</div>
							</div>
						</fieldset>
					</div>
					<div class="form-group">
						<button type="submit" class="btn btn-primary" aria-controls="dataset-filter2">Filter</button>
					</div>
					<div class="form-group">
						<button type="reset" class="btn btn-link btn-sm p-0">Réinitialiser aux valeurs par défaut</button>
					</div>
				</form>
			</details>
		</div>
		<div class="col-md-9">
			<table class="wb-tables table table-striped table-hover" id="dataset-filter3" data-wb-tables='{
			"bDeferRender": true,
			"ajaxSource": "ajax/mockdata.json",
			"order": [3, "desc"],
			"columns": [
				{ "data": "id", "visible": false },
				{ "data": "first_name" },
				{ "data": "last_name" },
				{ "data": "age" },
				{ "data": "salary", "visible": false },
				{ "data": "taxes", "visible": false }
			]}'>
				<thead>
				<tr>
					<th>Id</th>
					<th>Prénom</th>
					<th>Nom de famille</th>
					<th>Âge</th>
					<th>Salaire</th>
					<th>Impôts</th>
				</tr>
				</thead>
			</table>
		</div>
	</div>
</section>
