Table Filter
Bootstrap 5 Table Filter component
Responsive Table Filter built with Bootstrap 5. Search filter is the most common useful table control. Filter any table with ease using datatables features.
Basic example
The search field is not a part of the Datatable - place an input field on your page and use
.search() method to filter entries.
<div data-mdb-input-init class="form-outline mb-4">
<input type="text" class="form-control" id="datatable-search-input" />
<label class="form-label" for="datatable-search-input">Search</label>
</div>
<div id="datatable">
</div>
const data = {
columns: [
{
label: 'Name',
field: 'name'
},
'Position',
'Office',
'Age',
'Start date',
'Salary',
],
rows: [
["Tiger Nixon", "System Architect", "Edinburgh", "61", "2011/04/25", "$320,800"],
["Garrett Winters", "Accountant", "Tokyo", "63", "2011/07/25", "$170,750"],
["Ashton Cox", "Junior Technical Author", "San Francisco", "66", "2009/01/12", "$86,000"],
["Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "22", "2012/03/29", "$433,060"],
["Airi Satou", "Accountant", "Tokyo", "33", "2008/11/28", "$162,700"],
["Brielle Williamson", "Integration Specialist", "New York", "61", "2012/12/02", "$372,000"],
["Herrod Chandler", "Sales Assistant", "San Francisco", "59", "2012/08/06", "$137,500"],
["Rhona Davidson", "Integration Specialist", "Tokyo", "55", "2010/10/14", "$327,900"],
["Colleen Hurst", "Javascript Developer", "San Francisco", "39", "2009/09/15", "$205,500"],
["Sonya Frost", "Software Engineer", "Edinburgh", "23", "2008/12/13", "$103,600"],
["Jena Gaines", "Office Manager", "London", "30", "2008/12/19", "$90,560"],
["Quinn Flynn", "Support Lead", "Edinburgh", "22", "2013/03/03", "$342,000"],
["Charde Marshall", "Regional Director", "San Francisco", "36", "2008/10/16", "$470,600"],
["Haley Kennedy", "Senior Marketing Designer", "London", "43", "2012/12/18", "$313,500"]
],
};
const instance = new mdb.Datatable(document.getElementById('datatable'), data)
document.getElementById('datatable-search-input').addEventListener('input', (e) => {
instance.search(e.target.value);
});
Need even more robust tables? Try Data Den.
- Quick customization & hyper-focus on data management
- Easily integrate it with any project (not only MDB)
- Column Pinning, Drag&Drop Columns, Advanced Filtering & much more
For enterprise projects & users seeking advanced data controls. Tailor your data your way.
Advanced search
When using the searching method, you can specify which columns it should take under consideration - pass as a second argument a field (or array of fields). By default, searching will apply to all columns.
<div class="input-group mb-4">
<input type="text" class="form-control" id="advanced-search-input" placeholder="phrase in:column1,column2" />
<button data-mdb-button-init data-mdb-ripple-init class="btn btn-primary" id="advanced-search-button" type="button">
<i class="fa fa-search"></i>
</button>
</div>
<div id="datatable"></div>
const data = {
columns: [
{
label: 'Name',
field: 'name'
},
'Position',
'Office',
'Age',
'Start date',
'Salary',
],
rows: [
["Tiger Nixon", "System Architect", "Edinburgh", "61", "2011/04/25", "$320,800"],
["Garrett Winters", "Accountant", "Tokyo", "63", "2011/07/25", "$170,750"],
["Ashton Cox", "Junior Technical Author", "San Francisco", "66", "2009/01/12", "$86,000"],
["Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "22", "2012/03/29", "$433,060"],
["Airi Satou", "Accountant", "Tokyo", "33", "2008/11/28", "$162,700"],
["Brielle Williamson", "Integration Specialist", "New York", "61", "2012/12/02", "$372,000"],
["Herrod Chandler", "Sales Assistant", "San Francisco", "59", "2012/08/06", "$137,500"],
["Rhona Davidson", "Integration Specialist", "Tokyo", "55", "2010/10/14", "$327,900"],
["Colleen Hurst", "Javascript Developer", "San Francisco", "39", "2009/09/15", "$205,500"],
["Sonya Frost", "Software Engineer", "Edinburgh", "23", "2008/12/13", "$103,600"],
["Jena Gaines", "Office Manager", "London", "30", "2008/12/19", "$90,560"],
["Quinn Flynn", "Support Lead", "Edinburgh", "22", "2013/03/03", "$342,000"],
["Charde Marshall", "Regional Director", "San Francisco", "36", "2008/10/16", "$470,600"],
["Haley Kennedy", "Senior Marketing Designer", "London", "43", "2012/12/18", "$313,500"]
],
};
const instance = new mdb.Datatable(document.getElementById('datatable'), data)
const advancedSearchInput = document.getElementById('advanced-search-input');
const search = (value) => {
let [phrase, columns] = value.split(' in:').map((str) => str.trim());
if (columns) {
columns = columns.split(',').map((str) => str.toLowerCase().trim());
}
instance.search(phrase, columns);
}
document.getElementById('advanced-search-button').addEventListener('click', (e) => {
search(advancedSearchInput.value)
});
advancedSearchInput.addEventListener('keydown', (e) => {
if (e.keyCode === 13) {
search(e.target.value);
}
})