Simple table with Alphabetical Filtering capabilities using the TableFilter JavaScript library and Bootstrap.
Codepen: https://codepen.io/astralmemories/pen/QWQqMQo
CSS Requirements:
// Bootstrap https://cdn.jsdelivr.net/npm/bootstrap@4.2.1/dist/css/bootstrap.min.css // TableFilter https://unpkg.com/tablefilter@0.7.2/dist/tablefilter/style/tablefilter.css
JS Requirements:
// jQuery https://code.jquery.com/jquery-3.3.1.slim.min.js // Popper https://cdn.jsdelivr.net/npm/popper.js@1.14.6/dist/umd/popper.min.js // Bootstrap https://cdn.jsdelivr.net/npm/bootstrap@4.2.1/dist/js/bootstrap.min.js // TableFilter https://unpkg.com/tablefilter@0.7.2/dist/tablefilter/tablefilter.js https://unpkg.com/tablefilter@0.7.2/dist/tablefilter/tf-1-2aa33b10e0e549020c12.js
HTML:
<h2>List of Holidays in USA in 2022</h2>
<div class="alphabet-container">
<button class="btn alphabet-filter" onclick="filter(event);" value="">All</button>
<button class="btn alphabet-filter" onclick="filter(event);" value="A">A</button>
<button class="btn alphabet-filter" onclick="filter(event);" value="B">B</button>
<button class="btn alphabet-filter" onclick="filter(event);" value="C">C</button>
<button class="btn alphabet-filter" onclick="filter(event);" value="D">D</button>
<button class="btn alphabet-filter" onclick="filter(event);" value="E">E</button>
<button class="btn alphabet-filter" onclick="filter(event);" value="F">F</button>
<button class="btn alphabet-filter" onclick="filter(event);" value="G">G</button>
<button class="btn alphabet-filter" onclick="filter(event);" value="H">H</button>
<button class="btn alphabet-filter" onclick="filter(event);" value="I">I</button>
<button class="btn alphabet-filter" onclick="filter(event);" value="J">J</button>
<button class="btn alphabet-filter" onclick="filter(event);" value="K">K</button>
<button class="btn alphabet-filter" onclick="filter(event);" value="L">L</button>
<button class="btn alphabet-filter" onclick="filter(event);" value="M">M</button>
<button class="btn alphabet-filter" onclick="filter(event);" value="N">N</button>
<button class="btn alphabet-filter" onclick="filter(event);" value="O">O</button>
<button class="btn alphabet-filter" onclick="filter(event);" value="P">P</button>
<button class="btn alphabet-filter" onclick="filter(event);" value="Q">Q</button>
<button class="btn alphabet-filter" onclick="filter(event);" value="R">R</button>
<button class="btn alphabet-filter" onclick="filter(event);" value="S">S</button>
<button class="btn alphabet-filter" onclick="filter(event);" value="T">T</button>
<button class="btn alphabet-filter" onclick="filter(event);" value="U">U</button>
<button class="btn alphabet-filter" onclick="filter(event);" value="V">V</button>
<button class="btn alphabet-filter" onclick="filter(event);" value="W">W</button>
<button class="btn alphabet-filter" onclick="filter(event);" value="X">X</button>
<button class="btn alphabet-filter" onclick="filter(event);" value="Y">Y</button>
<button class="btn alphabet-filter" onclick="filter(event);" value="Z">Z</button>
</div>
<table class="table" id="holiday-table">
<thead>
<tr>
<th>Holiday Name</th>
<th>Day</th>
<th>Date</th>
<th>Type</th>
<th>Comments</th>
</tr>
</thead>
<tbody>
<tr>
<td>New Year's Day</td>
<td>Saturday</td>
<td>Jan 01</td>
<td>Federal Holiday</td>
<td></td>
</tr>
<tr>
<td>New Year's Day (in lieu)</td>
<td>Monday</td>
<td>Jan 03</td>
<td>Regional Holiday</td>
<td></td>
</tr>
<tr>
<td>Martin Luther King Jr. Day</td>
<td>Monday</td>
<td>Jan 17</td>
<td>Federal Holiday</td>
<td>3rd Monday in January</td>
</tr>
<tr>
<td>President's Day</td>
<td>Monday</td>
<td>Feb 21</td>
<td>Federal Holiday</td>
<td>3rd Monday in February</td>
</tr>
<tr>
<td>Easter Sunday</td>
<td>Sunday</td>
<td>Apr 17</td>
<td>Not A Public Holiday</td>
<td></td>
</tr>
<tr>
<td>Mother's Day</td>
<td>Sunday</td>
<td>May 08</td>
<td>Not A Public Holiday</td>
<td>2nd Sunday in May. Not a public holiday</td>
</tr>
<tr>
<td>Memorial Day</td>
<td>Monday</td>
<td>May 30</td>
<td>Federal Holiday</td>
<td>Last Monday in May</td>
</tr>
<tr>
<td>Juneteenth</td>
<td>Sunday</td>
<td>Jun 19</td>
<td>Federal Holiday</td>
<td>Emancipation Day</td>
</tr>
<tr>
<td>Father's Day</td>
<td>Sunday</td>
<td>Jun 19</td>
<td>Not A Public Holiday</td>
<td>3rd Sunday in June. Not a public holiday</td>
</tr>
<tr>
<td>Juneteenth (in lieu)</td>
<td>Monday</td>
<td>Jun 20</td>
<td>Federal Holiday</td>
<td>Emancipation Day</td>
</tr>
<tr>
<td>Juneteenth</td>
<td>Monday</td>
<td>Jun 20</td>
<td>Federal Holiday</td>
<td>Emancipation Day</td>
</tr>
<tr>
<td>Independence Day</td>
<td>Monday</td>
<td>Jul 04</td>
<td>Federal Holiday</td>
<td></td>
</tr>
<tr>
<td>Labor Day</td>
<td>Monday</td>
<td>Sep 05</td>
<td>Federal Holiday</td>
<td>1st Monday in September</td>
</tr>
<tr>
<td>US Indigenous People's Day</td>
<td>Monday</td>
<td>Oct 10</td>
<td>Regional Holiday</td>
<td></td>
</tr>
<tr>
<td>Columbus Day</td>
<td>Monday</td>
<td>Oct 10</td>
<td>Federal Holiday</td>
<td>2nd Monday in October</td>
</tr>
<tr>
<td>Veterans Day</td>
<td>Friday</td>
<td>Nov 11</td>
<td>Federal Holiday</td>
<td></td>
</tr>
<tr>
<td>Thanksgiving</td>
<td>Thursday</td>
<td>Nov 24</td>
<td>Federal Holiday</td>
<td>4th Thursday in November</td>
</tr>
<tr>
<td>Day after Thanksgiving</td>
<td>Friday</td>
<td>Nov 25</td>
<td>Regional Holiday</td>
<td>Day after 4th Thursday in November</td>
</tr>
<tr>
<td>Christmas Day</td>
<td>Sunday</td>
<td>Dec 25</td>
<td>Federal Holiday</td>
<td></td>
</tr>
<tr>
<td>Christmas Day (in lieu)</td>
<td>Monday</td>
<td>Dec 26</td>
<td>Federal Holiday</td>
<td></td>
</tr>
</tbody>
</table>
CSS:
.alphabet-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
}
.alphabet-filter:hover {
font-weight: bolder;
background-color: lightgray;
}
.helpBtn {
display: none;
}
JS:
// filter by first letter logic
function filter(evt){
var elm = evt.target;
var query = elm.value.length > 0 ? tf.stOperator + elm.value : '';
// set the column's filter value
tf.setFilterValue(0, query);
// filter the table
tf.filter();
// clear previously marked element
if(tf.selectedLetter) {
tf.selectedLetter.classList.remove('btn-primary');
}
// mark selected letter
elm.classList.add('btn-primary');
// keep reference of selected element
tf.selectedLetter = elm;
}
var tf = new TableFilter(
document.querySelector('#holiday-table'),
{
base_path: 'https://unpkg.com/tablefilter@latest/dist/tablefilter/',
start_with_operator: '←',
paging: {
length: 10
},
rows_counter: {
text: 'Holidays: '
},
col_types: [
'string', 'string', 'string',
'string', 'string'
],
//col_widths: [
// '75px','350px','350px',
// '75px','75px'
//],
// hide filters
on_filters_loaded: function(tf) {
tf.dom().rows[tf.getFiltersRowIndex()].style.display = 'none';
},
// sorting feature
extensions: [{
name: 'sort'
}]
}
);
tf.init();
// keep reference of selected letter element
tf.selectedLetter = null;